/* ============================================================
   CondoOS — base.css
   Camada compartilhada entre a landing e as telas do produto.
   Consome exclusivamente os tokens de tokens.css.
   Nenhum hex, nenhuma família tipográfica, nenhum espaçamento
   fora da escala é declarado aqui.
   Referência normativa: brand/MANUAL-DE-MARCA.md

   CAMADA DE PRIMITIVAS — este arquivo é o vocabulário do design
   system, definido uma única vez e disponível às duas peças
   (landing e telas do produto). Nem todo seletor é usado pelas
   duas: alguns hoje só aparecem no produto, outros só na landing.
   O contrato é o inverso — nada aqui é redeclarado em landing.css
   nem em sistema.css, e quem precisar de um destes nomes consome
   daqui em vez de escrever o seu:

     .faixa
     .t-display-g .t-display .t-secao .t-titulo .t-corpo-g .t-corpo
     .t-rotulo .t-dado .t-registro .t-caixa-alta
     .dados
     .trilho e partes (.trilho__pessoa .trilho__vinculo
       .trilho__permissao .trilho__evento .trilho__filete
       .trilho__permissao-borda .trilho__diagonal) e estados
       (.trilho--permitido .trilho--negado .trilho--atencao
        .trilho--separador)
     .selo .selo--permitido .selo--negado .selo--atencao
     .botao .botao--primario .botao--secundario
     .pular-para-conteudo .apenas-leitor
     .rolagem-tabela .rolagem-tabela--sem-borda
     .tabela .tabela--estreita .tabela--fluida
       .celula-texto .celula-numero .linha--negada .linha--atencao
     .indicadores .indicador .indicador__rotulo
       .indicador__valor .indicador__nota
     .empilha-2 .empilha-3 .empilha-4 .empilha-6 .linha-inline .suave

   O que é exclusivo das telas do produto vive em sistema.css com
   o prefixo `sis-`, para não colidir com a landing.
   ============================================================ */

@import url('tokens.css');

/* ------------------------------------------------------------
   1. Reset
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

body {
  min-height: 100vh;
  background-color: var(--co-base);
  color: var(--co-tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-corpo);
  font-weight: var(--tipo-corpo-peso);
  line-height: var(--tipo-corpo-lh);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  color: var(--co-sinal);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

hr {
  border: 0;
  border-top: var(--borda-fina);
  margin: 0;
}

/* ------------------------------------------------------------
   2. Escala de tipo — uma classe por passo
   ------------------------------------------------------------ */

.t-display-g {
  font-family: var(--fonte-display);
  font-size: var(--tipo-display-g);
  line-height: var(--tipo-display-g-lh);
  font-weight: var(--tipo-display-g-peso);
  letter-spacing: var(--trilha-display);
}

.t-display {
  font-family: var(--fonte-display);
  font-size: var(--tipo-display);
  line-height: var(--tipo-display-lh);
  font-weight: var(--tipo-display-peso);
  letter-spacing: var(--trilha-titulo);
}

.t-secao {
  font-family: var(--fonte-display);
  font-size: var(--tipo-secao);
  line-height: var(--tipo-secao-lh);
  font-weight: var(--tipo-secao-peso);
  letter-spacing: var(--trilha-titulo);
}

.t-titulo {
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-titulo);
  line-height: var(--tipo-titulo-lh);
  font-weight: var(--tipo-titulo-peso);
  letter-spacing: var(--trilha-corpo);
}

.t-corpo-g {
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-corpo-g);
  line-height: var(--tipo-corpo-g-lh);
  font-weight: var(--tipo-corpo-g-peso);
  letter-spacing: var(--trilha-corpo);
}

.t-corpo {
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-corpo);
  line-height: var(--tipo-corpo-lh);
  font-weight: var(--tipo-corpo-peso);
  letter-spacing: var(--trilha-corpo);
}

.t-rotulo {
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-rotulo);
  line-height: var(--tipo-rotulo-lh);
  font-weight: var(--tipo-rotulo-peso);
  letter-spacing: var(--trilha-corpo);
}

.t-dado {
  font-family: var(--fonte-dados);
  font-size: var(--tipo-dado);
  line-height: var(--tipo-dado-lh);
  font-weight: var(--tipo-dado-peso);
  letter-spacing: var(--trilha-corpo);
  font-variant-numeric: tabular-nums;
}

.t-registro {
  font-family: var(--fonte-dados);
  font-size: var(--tipo-registro);
  line-height: var(--tipo-registro-lh);
  font-weight: var(--tipo-registro-peso);
  letter-spacing: var(--trilha-corpo);
  font-variant-numeric: tabular-nums;
}

/* Caixa alta só em rótulo de estado e cabeçalho de tabela */
.t-caixa-alta {
  text-transform: uppercase;
  letter-spacing: var(--trilha-caixa-alta);
}

/* ------------------------------------------------------------
   3. Dados tabulares
   ------------------------------------------------------------ */

.dados {
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   4. Trilho de Cinco — elemento-assinatura
   Geometria canônica 24 x 24, eixo em y = 12.
   Pessoa · Vínculo · Permissão · [vazio: Acesso] · Evento
   O SVG é escrito inline no HTML com as classes de parte;
   a cor e o tamanho vivem aqui.
   ------------------------------------------------------------ */

.trilho {
  display: block;
  width: var(--trilho-caixa);
  height: var(--trilho-caixa);
  flex: none;
}

.trilho__pessoa,
.trilho__vinculo,
.trilho__permissao {
  fill: var(--co-tinta);
}

.trilho__evento {
  fill: var(--co-sinal);
}

.trilho__permissao-borda,
.trilho__diagonal {
  display: none;
}

/* Estado: permitido — cadeia completa, Evento em --co-permitido */
.trilho--permitido .trilho__evento {
  fill: var(--co-permitido);
}

/* Estado: negado — o bloco Evento não é desenhado;
   a barra Permissão recebe borda de 1,5 un. em --co-negado */
.trilho--negado .trilho__evento {
  display: none;
}

.trilho--negado .trilho__permissao-borda {
  display: block;
  fill: none;
  stroke: var(--co-negado);
  stroke-width: 1.5;
}

/* Estado: atenção — Evento em --co-atencao, traço de 1 un.
   cruzando o vazio do Acesso na diagonal */
.trilho--atencao .trilho__evento {
  fill: var(--co-atencao);
}

.trilho--atencao .trilho__diagonal {
  display: block;
  stroke: var(--co-atencao);
  stroke-width: 1;
}

/* Variante filete — separador de seção.
   Filete de 1px em --co-linha em y = 12, marcas ancoradas à esquerda. */
.trilho--separador {
  width: 100%;
  height: var(--trilho-caixa);
}

.trilho--separador .trilho__filete {
  stroke: var(--co-linha);
  stroke-width: 1;
}

/* ------------------------------------------------------------
   5. Selo de estado — sempre cor + texto
   ------------------------------------------------------------ */

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-1) var(--esp-2);
  border: 1px solid currentColor;
  border-radius: var(--raio-1);
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-registro);
  line-height: var(--tipo-registro-lh);
  font-weight: var(--tipo-rotulo-peso);
  text-transform: uppercase;
  letter-spacing: var(--trilha-caixa-alta);
  white-space: nowrap;
  color: var(--co-tinta-suave);
}

.selo--permitido {
  color: var(--co-permitido);
}

.selo--negado {
  color: var(--co-negado);
}

.selo--atencao {
  color: var(--co-atencao);
}

/* ------------------------------------------------------------
   6. Botões — retangulares, raio 2px, sem sombra, sem pill
   ------------------------------------------------------------ */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: var(--esp-3) var(--esp-4);
  border: var(--borda-forte);
  border-radius: var(--raio-1);
  background: transparent;
  color: var(--co-tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-rotulo);
  line-height: var(--tipo-rotulo-lh);
  font-weight: var(--tipo-rotulo-peso);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--curva),
              color var(--dur-rapida) var(--curva),
              border-color var(--dur-rapida) var(--curva);
}

.botao--primario {
  background-color: var(--co-sinal);
  border-color: var(--co-sinal);
  color: var(--co-base);
}

.botao--primario:hover {
  background-color: var(--co-tinta);
  border-color: var(--co-tinta);
}

.botao--secundario {
  background-color: transparent;
  border-color: var(--co-tinta);
  color: var(--co-tinta);
}

.botao--secundario:hover {
  background-color: var(--co-tinta);
  color: var(--co-base);
}

/* ------------------------------------------------------------
   7. Pular para o conteúdo
   ------------------------------------------------------------ */

.pular-para-conteudo {
  position: absolute;
  inset-inline-start: var(--esp-4);
  inset-block-start: var(--esp-4);
  z-index: 10;
  clip-path: inset(50%);
  padding: var(--esp-2) var(--esp-3);
  background-color: var(--co-base);
  border: var(--borda-forte);
  border-radius: var(--raio-1);
  color: var(--co-sinal);
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-rotulo);
  font-weight: var(--tipo-rotulo-peso);
  text-decoration: none;
}

.pular-para-conteudo:focus,
.pular-para-conteudo:focus-visible {
  clip-path: none;
}

/* ------------------------------------------------------------
   8. Faixa — contêiner de largura máxima
   ------------------------------------------------------------ */

.faixa {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--esp-6);
}

@media (max-width: 640px) {
  .faixa {
    padding-inline: var(--esp-4);
  }
}

/* ------------------------------------------------------------
   9. Utilitário de leitor de tela
   ------------------------------------------------------------ */

.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   10. Tabela densa — versão canônica, única no projeto
   Propriedades lógicas (start/end), nunca físicas.
   ------------------------------------------------------------ */

.rolagem-tabela {
  width: 100%;
  overflow-x: auto;
  border: var(--borda-fina);
}

/* A tabela já está dentro de um bloco com borda própria */
.rolagem-tabela--sem-borda {
  border: 0;
}

.tabela {
  width: 100%;
  min-width: 720px;
  font-family: var(--fonte-dados);
  font-variant-numeric: tabular-nums;
}

.tabela--estreita {
  min-width: 480px;
}

/* Acompanha a largura do contêiner, sem rolagem própria */
.tabela--fluida {
  min-width: 0;
}

.tabela caption {
  padding: var(--esp-3) var(--esp-4);
  text-align: start;
  border-bottom: var(--borda-fina);
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-rotulo);
  font-weight: var(--tipo-titulo-peso);
  color: var(--co-tinta-suave);
}

/* Cabeçalho de tabela: uma das duas situações de caixa alta */
.tabela th {
  text-align: start;
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--borda-fina);
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-registro);
  line-height: var(--tipo-registro-lh);
  font-weight: var(--tipo-rotulo-peso);
  color: var(--co-tinta-suave);
  text-transform: uppercase;
  letter-spacing: var(--trilha-caixa-alta);
  white-space: nowrap;
}

.tabela td {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--borda-fina);
  font-size: var(--tipo-dado);
  line-height: var(--tipo-dado-lh);
  vertical-align: top;
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela .celula-texto {
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-rotulo);
  line-height: var(--tipo-rotulo-lh);
}

.tabela .celula-numero {
  text-align: end;
  white-space: nowrap;
}

.tabela tbody tr > td:first-child {
  border-inline-start: var(--borda-enfase) solid transparent;
}

.tabela tbody tr.linha--negada > td:first-child {
  border-inline-start: var(--borda-enfase) solid var(--co-negado);
}

.tabela tbody tr.linha--atencao > td:first-child {
  border-inline-start: var(--borda-enfase) solid var(--co-atencao);
}

/* Abaixo de 640px a tabela deixa de rolar e empilha cada linha.
   Nenhuma fonte encolhe e nenhuma coluna some: a ordem de leitura
   passa a ser vertical, seguindo a ordem dos cabeçalhos. */
@media (max-width: 640px) {
  .rolagem-tabela {
    overflow-x: visible;
  }

  .tabela {
    display: block;
    min-width: 0;
  }

  .tabela thead {
    display: none;
  }

  .tabela caption {
    display: block;
  }

  .tabela tbody,
  .tabela tr {
    display: block;
  }

  .tabela tbody tr {
    padding: var(--esp-3);
    border-bottom: var(--borda-fina);
  }

  .tabela tbody tr:last-child {
    border-bottom: 0;
  }

  .tabela td {
    display: block;
    padding: 0 0 var(--esp-1);
    border-bottom: 0;
  }

  .tabela .celula-numero {
    text-align: start;
  }

  .tabela tbody tr > td:first-child,
  .tabela tbody tr.linha--negada > td:first-child,
  .tabela tbody tr.linha--atencao > td:first-child {
    border-inline-start: 0;
  }

  .tabela tbody tr.linha--negada {
    border-inline-start: var(--borda-enfase) solid var(--co-negado);
  }

  .tabela tbody tr.linha--atencao {
    border-inline-start: var(--borda-enfase) solid var(--co-atencao);
  }
}

/* ------------------------------------------------------------
   11. Grade de indicadores — versão canônica, única no projeto
   Um só conjunto de pontos de quebra: 1024 e 640.
   ------------------------------------------------------------ */

.indicadores {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: var(--borda-fina);
}

.indicador {
  padding: var(--esp-4);
  border-inline-start: var(--borda-fina);
}

.indicador:first-child {
  border-inline-start: 0;
}

.indicador__rotulo {
  display: block;
  color: var(--co-tinta-suave);
}

.indicador__valor {
  display: block;
  margin-top: var(--esp-2);
  font-family: var(--fonte-dados);
  font-size: var(--tipo-titulo);
  line-height: var(--tipo-titulo-lh);
  font-weight: var(--tipo-titulo-peso);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.indicador__nota {
  display: block;
  margin-top: var(--esp-1);
  color: var(--co-tinta-suave);
}

@media (max-width: 1024px) {
  .indicadores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .indicador:nth-child(3n + 1) {
    border-inline-start: 0;
  }
  .indicador:nth-child(n + 4) {
    border-top: var(--borda-fina);
  }
}

@media (max-width: 640px) {
  .indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .indicador {
    border-inline-start: var(--borda-fina);
    border-top: var(--borda-fina);
  }
  .indicador:nth-child(2n + 1) {
    border-inline-start: 0;
  }
  .indicador:nth-child(-n + 2) {
    border-top: 0;
  }
  /* Em coluna estreita o valor desce um passo da escala para não vazar */
  .indicador__valor {
    font-size: var(--tipo-corpo-g);
    line-height: var(--tipo-corpo-g-lh);
  }
}

/* ------------------------------------------------------------
   12. Utilitários de empilhamento e alinhamento
   ------------------------------------------------------------ */

.suave {
  color: var(--co-tinta-suave);
}

.empilha-2 > * + * {
  margin-top: var(--esp-2);
}

.empilha-3 > * + * {
  margin-top: var(--esp-3);
}

.empilha-4 > * + * {
  margin-top: var(--esp-4);
}

.empilha-6 > * + * {
  margin-top: var(--esp-6);
}

.linha-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}