.pagina-de-entrada__container_primario {
  background-image: url(../imagens/imagem-do-sistema.jpg);
}

@import "./digix-ui-base";

:root {
  @include tema-digix-ui;
}

.doc-intro {
  width: 100%;
  height: 100vh;
  background: var(--cor-terciaria);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.doc-intro__logo {
  @include transicao();
  @include quebra-somente-telefone {
    width: 288px;
  }
  width: 400px;
  margin-bottom: 48px;
}

.doc-intro__informacoes {
  display: flex;
  @include quebra-somente-telefone {
    flex-direction: column;
  }
}

.doc-intro__versao {
  color: $cor-branca;
  opacity: 0.7;
}

.doc-nav {
  margin-right: 48px;
  flex-shrink: 0;
  width: 100%;
  height: 48px;
  background: $cor-branca;
  display: flex;
  align-items: center;
  ul {
    @include resetar-lista;
    display: flex;
  }
  a {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
  }
}

.doc-cabecalho {
  border-bottom: 1px solid $cor-cinza-20;
  margin-bottom: 16px;
  padding-bottom: 32px;
  h1 {
    @include resetar-titulo;
    @include fonte-regular;
    font-size: 48px !important;
    color: var(--cor-primaria);
    margin-bottom: 8px;
  }
  code {
    font-size: 22px;
  }
}

.doc-versao-componente {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.doc-versao-componente__icone {
  margin-right: 8px;
  font-size: 16px;
}

.doc-versao-componente__titulo {
  font-size: 16px;
  @include fonte-regular;
  color: var(--cor-terciaria);
  margin-right: 8px;
}

.doc-versao-componente__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 50px;
  font-size: 12px;
  @include fonte-negrito;
  text-transform: uppercase;
}

.doc-versao-componente__tag_beta {
  color: $cor-erro;
  background: rgba($cor-erro, 0.2);
}

.doc-versao-componente__tag_estavel {
  color: $cor-info;
  background: rgba($cor-info, 0.2);
}

.doc-versao-componente__tag_producao {
  color: $cor-sucesso;
  background: rgba($cor-sucesso, 0.2);
}

.doc-versao-componente__tag_mudanca-critica {
  color: $cor-erro;
  background: rgba($cor-erro, 0.2);
}

.doc-tabela {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  background: $cor-branca;
  table-layout: fixed;
  td,
  th {
    border: 1px solid $cor-cinza-20;
    padding: 16px 24px;
  }
  thead {
    font-size: 14px;
  }
  .tabela {
    td,
    th {
      border: $borda-da-tabela;
      border-width: $espessura-da-borda-da-tabela;
      padding: $padding-da-tabela;
      vertical-align: top;
    }
    thead {
      td,
      th {
        border-width: $espessura-da-borda-do-cabecalho-da-tabela;
        color: $cor-do-texto-do-cabecalho-da-tabela;
      }
    }
    tfoot {
      td,
      th {
        border-width: $espessura-da-borda-do-rodape-da-tabela;
        color: $cor-do-texto-do-rodape-da-tabela;
      }
    }
    tbody {
      tr {
        &:last-child {
          td,
          th {
            border-bottom-width: 0;
          }
        }
      }
    }
    &.tabela_com-borda {
      td,
      th {
        border-width: 1px;
      }
      tr {
        &:last-child {
          td,
          th {
            border-bottom-width: 1px;
          }
        }
      }
    }
    &.tabela_responsiva {
      tbody {
        tr {
          &:last-child {
            td,
            th {
              border-bottom-width: 1px;
            }
          }
        }
      }
    }
  }
  .cartao {
    + .cartao {
      margin-top: 8px;
    }
  }
  @include quebra-menor-que-desktop-pequeno {
    display: block;
    > thead {
      display: none;
    }
    > tbody {
      display: block;
      > tr > td {
        display: block;
        width: 100%;
        border: none !important;
        overflow-x: hidden;
      }
      > tr {
        @include borda-arredondada-padrao;
        margin-bottom: 24px;
        display: block;
        border: 1px solid $cor-cinza-20;
      }
    }
  }
}

.doc-tabela__titulo {
  background: lighten($cor-preta, 97%);
}

.doc-tabela__codigo {
  background: $cor-cinza-05;
  padding-top: 32px !important;
  overflow-x: auto;
  @include quebra-maior-que-desktop-pequeno {
    max-width: 640px;
  }
}

.doc-codigo-container {
  width: 100%;
  height: auto;
  overflow-x: auto;
}

.doc-tabela__coluna-larga {
  width: 60%;
}

.doc-tabela__coluna-media {
  width: 30%;
}

.doc-tabela__coluna-pequena {
  width: 15%;
}

.doc-tabela__exemplo-com-margem {
  & > * {
    margin: 4px;
  }
}

.doc-tabela__exibicao {
  background: $cor-cinza-05;
  & > * {
    margin: 4px;
    border: 1px solid $cor-cinza-30;
  }
}

.doc-tabela__fonte-negrito {
  @include fonte-negrito;
}

.doc-tabela__fonte-seminegrito {
  @include fonte-seminegrito;
}

.doc-tabela__exemplo_preenchido {
  background-color: var(--cor-primaria);
}

.doc-tabela {
  .grade__linha {
    border: 1px dashed $cor-cinza-40;
    background-color: $cor-branca;
  }
}

.tabela_exibicao-botoes {
  width: 100%;
  thead {
    display: table-header-group;
    th {
      text-align: center;
    }
  }
  tbody {
    display: table-row-group;
  }
  tr {
    display: table-row;
  }
  td {
    display: table-cell;
    border: 1px solid $cor-cinza-30 !important;
    padding: 8px;
    text-align: center;
  }
}

.fundo_transparente {
  background-color: transparent;
  border: 1px solid $cor-cinza-30;
  padding: 8px;
  text-align: center;
  border-radius: 8px;
}

.fundo_cor-primaria {
  background-color: var(--cor-primaria);
  padding: 8px;
  text-align: center;
  border-radius: 8px;
}

.hljs {
  line-height: 24px;
  padding: 16px 24px !important;
}

code {
  @include borda-arredondada-padrao;
  background: $cor-cinza-05;
  padding: 2px 4px;
  color: var(--cor-secundaria);
}

.code_destaque {
  @include fonte-negrito;
  font-size: 18px;
}

.doc-titulo {
  @include fonte-regular;
  margin-top: 40px;
  &:first-child {
    margin-top: 0;
  }
}

.doc-subtitulo {
  @include fonte-regular;
  margin-top: 40px;
  &:first-child {
    margin-top: 0;
  }
}

.menu-lateral.doc {
  position: relative;
  top: 0;
  display: inherit;
  z-index: 0;
  width: 256px;
}

.menu-lateral__texto_doc {
  font-size: 14px;
  margin: 8px;
}

.doc-menu-lateral__exemplo {
  background: $cor-cinza-05;
  border: 1px solid $cor-cinza-20;
}

.doc-conteudo-coluna {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  border-radius: 8px;
  @each $nome, $par in $cores {
    $cor: nth($par, 1);
    $cor-invertida: nth($par, 2);
    &.doc-conteudo-coluna_#{$nome} {
      background-color: $cor;
      color: $cor-invertida;
    }
  }
}

.doc-conteudo-coluna_altura-maior {
  height: 88px;
}

.doc-conteudo-coluna_altura-menor {
  height: 40px;
}

.doc-margem-exemplo {
  border: 1px solid $cor-cinza-40;
  & > * {
    border: 1px solid var(--cor-primaria);
  }

  .u-sem-margem-inferior,
  .u-sem-margem-esquerda,
  .u-sem-margem-direita,
  .u-sem-margem-superior {
    margin: 16px;
  }
}

.doc-padding-exemplo {
  border: 1px solid $cor-cinza-40;
  & > * {
    border: 1px solid var(--cor-primaria);
    display: inline-block;
  }

  .u-sem-padding-inferior,
  .u-sem-padding-esquerda,
  .u-sem-padding-direita,
  .u-sem-padding-superior {
    padding: 16px;
  }
}

// Cores
.doc-cor-container {
  display: flex;
  flex-direction: row;
  @include quebra-menor-que-tablet {
    flex-direction: column;
  }
}

.doc-cor-item {
  margin: 8px;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  text-align: center;
}

.doc-cor {
  @include borda-arredondada-padrao;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  min-height: 48px;
  padding: 8px;
  text-align: center;
}

.doc-cor_com-borda {
  border: 2px solid $cor-cinza-30;
}

.doc-cor-nome {
  display: block;
}

.doc-cor-codigo {
  display: inline-block;
}

// Cores variáveis
.doc-cor-vermelho {
  background-color: $vermelho;
  color: inverterCor($vermelho);
}

.doc-cor-azul {
  background-color: $azul;
  color: inverterCor($azul);
}

.doc-cor-verde {
  background-color: $verde;
  color: inverterCor($verde);
}

.doc-cor-amarelo {
  background-color: $laranja;
  color: inverterCor($laranja);
}

// Cores de mensagens
$cores-de-mensagens: (
  ("sucesso", $cor-sucesso, $cor-sucesso-invertido),
  ("erro", $cor-erro, $cor-erro-invertido),
  ("atencao", $cor-atencao, $cor-atencao-invertido),
  ("info", $cor-info, $cor-info-invertido)
);
@each $nome, $cor, $cor-invertida in $cores-de-mensagens {
  .doc-cor-#{$nome} {
    background-color: #{$cor};
    color: #{$cor-invertida};
  }
  .doc-cor-#{$nome}-texto {
    color: #{$cor-invertida};
  }
}

.doc-cor-branca {
  background-color: $cor-branca;
  color: inverterCor($cor-branca);
}

.doc-cor-preta {
  background-color: $cor-preta;
  color: inverterCor($cor-preta);
}

// Cores de texto
.doc-cor-texto-alerta {
  background-color: $cor-texto-alerta;
  color: inverterCor($cor-texto-alerta);
}

.doc-cor-texto-alerta-texto {
  color: $cor-texto-alerta;
}

// Cores dos sistemas
$cores-dos-sistemas: (
  (digix-ui, #2c006a, #0bc0d3, #190342),
  (nexxus, #0995d3, #ffb53e, #005182),
  (humani, #46b09a, #c8d400, #07745a),
  (papel-zero, #1985e3, #2ecc71, #07375e),
  (horus, #a11071, #ffa900, #54003d),
  (habix, #eb3f00, #00dbc5, #942000),
  (cheff-escolar, #11b264, #ff821b, #0e7040),
  (ccs, #3ece82, #128dc4, #005944),
  (saiems, #00cc74, #194f8d, #1c6b44),
  (vistta, #9e7474, #ffac2f, #604343)
);
@each $nome-do-sistema, $cor-1, $cor-2, $cor-3, $cor-4 in $cores-dos-sistemas {
  .doc-#{$nome-do-sistema}-cor-primaria {
    background-color: $cor-1;
    color: inverterCor($cor-1);
  }
  .doc-#{$nome-do-sistema}-cor-secundaria {
    background-color: $cor-2;
    color: inverterCor($cor-2);
  }
  .doc-#{$nome-do-sistema}-cor-terciaria {
    background-color: $cor-3;
    color: inverterCor($cor-3);
  }
}

// Tons de cinza
$tons-de-cinza: (
  ("90", $cor-cinza-90, $cor-cinza-90-invertido),
  ("80", $cor-cinza-80, $cor-cinza-80-invertido),
  ("70", $cor-cinza-70, $cor-cinza-70-invertido),
  ("60", $cor-cinza-60, $cor-cinza-60-invertido),
  ("50", $cor-cinza-50, $cor-cinza-50-invertido),
  ("40", $cor-cinza-40, $cor-cinza-40-invertido),
  ("30", $cor-cinza-30, $cor-cinza-30-invertido),
  ("20", $cor-cinza-20, $cor-cinza-20-invertido),
  ("10", $cor-cinza-10, $cor-cinza-10-invertido),
  ("05", $cor-cinza-05, $cor-cinza-05-invertido)
);
@each $nome, $cor, $cor-invertida in $tons-de-cinza {
  .doc-cor-cinza-#{$nome} {
    background-color: #{$cor};
    color: #{$cor-invertida};
  }
  .doc-cor-cinza-#{$nome}-texto {
    color: #{$cor};
  }
  .doc-cor-cinza-#{nome}-invertido {
    color: #{cor-invertida};
  }
}

// Tipografia
.doc-tipografia {
  font-size: 32px;
  word-wrap: break-word;
  letter-spacing: 8px;
  max-width: 720px;
  text-align: justify;
  &_regular {
    @include fonte-regular;
  }
  &_seminegrito {
    @include fonte-seminegrito;
  }
  &_negrito {
    @include fonte-negrito;
  }
}

//Abas documentacao
.doc-abas {
  width: 100%;
  ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

.doc-abas__aba {
  font-family: $fonte-padrao;
  height: 56px;
  border: 0px;
  outline: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  padding: 0 16px;
  display: flex;
  align-items: center;
  margin: 0;
  margin-right: 8px;
  font-size: 16px;
  @include fonte-seminegrito;
  background: $cor-branca;
  cursor: pointer;
  color: $cor-cinza-50;
  border-radius: 5px 5px 0 0;
  &:hover {
    border-bottom: 3px solid $cor-cinza-30;
    background: $cor-cinza-05;
  }
}

.doc-abas__aba-selecionada {
  background: $cor-cinza-05;
  color: $cor-cinza-80;
  border-bottom: 3px solid var(--cor-secundaria);
  &:hover {
    border-bottom: 3px solid var(--cor-secundaria);
  }
}

.doc-abas__conteudo_ativado {
  display: block;
  background-color: $cor-cinza-05;
  padding-top: 16px;
}

.doc-abas__conteudo_desativado {
  display: none;
}

//Histórico de versões

.doc-versao {
  display: block;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
  @include quebra-maior-que-tablet {
    display: flex;
  }
}

.doc-versao__info {
  display: flex;
  flex-direction: column;
  margin-top: 8px;

  @include quebra-maior-que-tablet {
    width: calc(100% - 136px);
  }

  img {
    max-width: 100%;
    display: block;
  }

  ul {
    line-height: 1.4;
    list-style-type: none;
    padding: 0px;
    margin: 0px;

    li {
      position: relative;
      padding-left: 16px;
    }

    li:before {
      content: "\2022";
      position: absolute;
      left: 0;
      color: var(--cor-secundaria);
    }

    li + li {
      margin-top: 8px;
    }

    * {
      list-style-type: inherit;
    }

    ul {
      margin: 8px 0 32px 32px;
    }
  }

  .doc-versao-componente {
    margin: 0 0 16px;
  }
}

.doc-versao__numero {
  align-content: center;
  align-items: center;
  border: 2px solid var(--cor-secundaria);
  border-radius: 50%;
  display: flex;
  height: 100px;
  justify-content: center;
  margin-right: 32px;
  width: 100px;
  position: relative;
  text-align: center;
}

.doc-versao__data {
  font-size: 14px;
  color: $cor-cinza-80;
  margin-bottom: 4px;
}

.doc-versao__titulo {
  margin: 0;
  margin-bottom: 16px;
  color: var(--cor-primaria);
}

.doc-container-pagina-de-entrada {
  margin-bottom: 40px;
  .pagina-de-entrada {
    position: relative;
    width: 100%;
    box-shadow: 0 0 32px rgba($cor-preta, 0.2);
    height: auto;
    &:after {
      position: absolute;
    }
  }
  .botao-suporte {
    position: absolute;
  }
}

.doc-pagina-de-entrada-imagem-de-fundo-pb {
  width: 200px;
}

.doc-codigo-copiado::before {
  content: "Copiado!";
  font-size: 12px;
  display: block;
  height: 16px;
  color: $cor-sucesso;
  position: absolute;
  right: 4px;
  top: -20px;
}

.doc-dialogo-sem-scroll {
  height: 120vh;
  background-color: transparencia(--cor-primaria, 0.2);
  border: 2px solid transparencia(--cor-primaria, 0.7);
  @include borda-arredondada-padrao();
}

.doc-codigo-fonte-com-margem > * {
  margin: 4px;
}