/* ============================================================
   CondoOS — sistema.css
   Específico das telas do produto (site/produto/*.html).
   Depende de base.css, que já importa tokens.css.

   Regras desta camada:
   1. Nenhum hex, família ou espaçamento fora dos tokens.
   2. Nada que já exista em base.css é redeclarado aqui. Tabela,
      grade de indicadores, selo, botão, trilho e utilitários de
      empilhamento vivem lá, com um nome só.
   3. O que é exclusivo do produto e teria nome igual ao da
      landing recebe o prefixo `sis-`.
   4. Caixa alta apenas em rótulo de estado e cabeçalho de
      tabela, conforme §3 do manual. Hierarquia nesta camada é
      feita com peso, tamanho e cor.
   5. O acento --co-sinal não é estado. Ele não aparece como
      faixa lateral de bloco. Ênfase estrutural é borda neutra
      forte, conforme §2.2 do manual.
   ============================================================ */

/* ------------------------------------------------------------
   1. Esqueleto de tela
   ------------------------------------------------------------ */

.tela {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topo {
  border-bottom: var(--borda-fina);
}

.topo__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4) var(--esp-6);
  padding-block: var(--esp-4);
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  color: var(--co-tinta);
  text-decoration: none;
}

/* Logotipo oficial, em caixa mista. A palavra nunca é
   redesenhada em Archivo caixa alta: uso proibido nº 3, §5. */
.topo__logo {
  height: var(--esp-8);
  width: auto;
}

.topo__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-4);
  margin-inline-start: auto;
}

/* ------------------------------------------------------------
   1.1 Indicador de página atual — escrito uma vez só
   Filete de 1px da escala, sem correção manual de margem.
   Vale para a navegação do topo e para a barra de abas do app.
   ------------------------------------------------------------ */

.topo__nav a,
.app__aba {
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

.topo__nav a {
  border-bottom-width: 1px;
}

.app__aba {
  border-top-width: 1px;
}

.topo__nav a[aria-current="page"],
.app__aba[aria-current="true"] {
  color: var(--co-tinta);
  border-color: var(--co-sinal);
}

.topo__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--esp-1);
  color: var(--co-tinta-suave);
  font-size: var(--tipo-rotulo);
  font-weight: var(--tipo-rotulo-peso);
  text-decoration: none;
}

.topo__nav a:hover {
  color: var(--co-tinta);
}

/* ------------------------------------------------------------
   1.2 Aviso de protótipo — persistente no topo de cada tela
   ------------------------------------------------------------ */

.aviso-ficcao {
  border-bottom: var(--borda-fina);
  padding-block: var(--esp-2);
  color: var(--co-tinta-suave);
}

.conteudo {
  flex: 1;
  padding-block: var(--esp-8) var(--esp-12);
}

.sis-rodape {
  border-top: var(--borda-fina);
  padding-block: var(--esp-6);
  color: var(--co-tinta-suave);
}

.sis-rodape p + p {
  margin-top: var(--esp-1);
}

/* ------------------------------------------------------------
   2. Cabeçalho de página
   ------------------------------------------------------------ */

.cabecalho-pagina {
  margin-bottom: var(--esp-8);
}

.cabecalho-pagina__carimbo {
  color: var(--co-tinta-suave);
  margin-bottom: var(--esp-2);
}

.cabecalho-pagina h1 {
  margin-bottom: var(--esp-2);
}

.cabecalho-pagina__resumo {
  max-width: 68ch;
  color: var(--co-tinta-suave);
}

/* ------------------------------------------------------------
   3. Título de seção com filete
   ------------------------------------------------------------ */

.sis-secao {
  margin-top: var(--esp-12);
}

.sis-secao:first-of-type {
  margin-top: 0;
}

.sis-secao__cabecalho {
  margin-bottom: var(--esp-4);
}

.sis-secao__cabecalho h2 {
  margin-top: var(--esp-3);
}

.sis-secao__nota {
  margin-top: var(--esp-2);
  max-width: 72ch;
  color: var(--co-tinta-suave);
}

/* ------------------------------------------------------------
   4. Painel — bloco de conteúdo com borda
   Os três modificadores de estado, e só eles, usam faixa
   lateral colorida. A ênfase estrutural usa borda neutra forte,
   nunca cor de acento nem cor de estado.
   ------------------------------------------------------------ */

.sis-painel {
  border: var(--borda-fina);
  padding: var(--esp-4);
  background-color: var(--co-base);
}

.sis-painel__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
  padding-bottom: var(--esp-2);
  border-bottom: var(--borda-fina);
  color: var(--co-tinta-suave);
  font-weight: var(--tipo-titulo-peso);
}

/* Ênfase estrutural: a mesma anatomia dos demais painéis, com a
   borda inteira em tinta em vez do filete de linha. Sem faixa,
   sem cor: peso de borda é hierarquia, não veredito. */
.sis-painel--destaque {
  border: var(--borda-forte);
}

.sis-painel--negado {
  border-inline-start: var(--borda-enfase) solid var(--co-negado);
}

.sis-painel--atencao {
  border-inline-start: var(--borda-enfase) solid var(--co-atencao);
}

/* ------------------------------------------------------------
   5. Grades
   ------------------------------------------------------------ */

.grade {
  display: grid;
  gap: var(--esp-4);
}

.grade--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grade--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grade--2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 1024px) {
  .grade--3,
  .grade--2,
  .grade--2-1 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------
   6. Motivo por extenso, sob o veredito
   ------------------------------------------------------------ */

.motivo {
  display: block;
  margin-top: var(--esp-1);
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-registro);
  line-height: var(--tipo-registro-lh);
  color: var(--co-tinta-suave);
  max-width: 44ch;
}

/* ------------------------------------------------------------
   7. Lista de barras — receita por origem
   ------------------------------------------------------------ */

.barras {
  display: grid;
  gap: var(--esp-3);
}

.barra {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-3);
}

.barra__rotulo {
  font-size: var(--tipo-rotulo);
  font-weight: var(--tipo-rotulo-peso);
}

.barra__trilha {
  display: block;
  height: var(--esp-3);
  border: var(--borda-fina);
}

.barra__preenchimento {
  display: block;
  height: 100%;
  background-color: var(--co-sinal);
}

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

@media (max-width: 640px) {
  .barra {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .barra__trilha {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------
   8. Lista de registros (histórico, convites)
   ------------------------------------------------------------ */

.sis-registros {
  display: grid;
}

.sis-registro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--esp-3);
  padding-block: var(--esp-3);
  border-bottom: var(--borda-fina);
}

.sis-registro:last-child {
  border-bottom: 0;
}

.sis-registro__corpo p {
  font-size: var(--tipo-rotulo);
  line-height: var(--tipo-rotulo-lh);
}

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

/* ------------------------------------------------------------
   9. Cadeia de identidade
   A pessoa é um bloco de dados sem moldura por definição.
   Quem precisa de moldura pede o modificador.
   ------------------------------------------------------------ */

.pessoa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-4);
  align-items: center;
}

.pessoa__iniciais {
  display: grid;
  place-items: center;
  width: var(--esp-16);
  height: var(--esp-16);
  border: var(--borda-fina);
  border-radius: var(--raio-2);
  font-family: var(--fonte-display);
  font-size: var(--tipo-titulo);
  font-weight: var(--tipo-titulo-peso);
}

.pessoa__dados dt {
  color: var(--co-tinta-suave);
  font-size: var(--tipo-registro);
}

.pessoa__dados dd {
  font-family: var(--fonte-dados);
  font-size: var(--tipo-dado);
  font-variant-numeric: tabular-nums;
}

.pessoa__campos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-6);
  margin-top: var(--esp-2);
}

.sis-cadeia {
  display: grid;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .sis-cadeia {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* O vínculo é estrutura, não veredito: borda inteira em tinta. */
.vinculo {
  border: var(--borda-forte);
  padding: var(--esp-4);
}

.vinculo__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2) var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: var(--borda-fina);
}

.vinculo__tipo {
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-registro);
  font-weight: var(--tipo-rotulo-peso);
  color: var(--co-tinta-suave);
}

.degrau {
  margin-top: var(--esp-3);
  padding-inline-start: var(--esp-4);
  border-inline-start: var(--borda-fina);
}

.degrau__rotulo {
  display: block;
  margin-bottom: var(--esp-2);
  color: var(--co-tinta-suave);
  font-weight: var(--tipo-titulo-peso);
}

.lista-permissoes {
  display: grid;
  gap: var(--esp-2);
}

.lista-permissoes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--tipo-rotulo);
  line-height: var(--tipo-rotulo-lh);
}

.lista-permissoes .janela {
  font-family: var(--fonte-dados);
  font-size: var(--tipo-dado);
  font-variant-numeric: tabular-nums;
  color: var(--co-tinta-suave);
}

/* ------------------------------------------------------------
   10. Espaços
   ------------------------------------------------------------ */

.espaco {
  border: var(--borda-fina);
  padding: var(--esp-4);
  display: grid;
  gap: var(--esp-3);
}

.espaco__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
}

.espaco__linhas {
  display: grid;
  gap: var(--esp-1);
}

.espaco__linha {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--esp-3);
  padding-block: var(--esp-1);
  border-top: var(--borda-fina);
}

.espaco__linha dt {
  color: var(--co-tinta-suave);
  font-size: var(--tipo-registro);
  font-weight: var(--tipo-rotulo-peso);
  padding-top: var(--esp-1);
}

.espaco__linha dd {
  font-size: var(--tipo-rotulo);
  line-height: var(--tipo-rotulo-lh);
}

@media (max-width: 640px) {
  .espaco__linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.espaco__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/* ------------------------------------------------------------
   11. Bloco de mensagem em três partes (fato, regra, ação)
   Sem moldura por definição; a moldura é o modificador.
   ------------------------------------------------------------ */

.mensagem {
  display: block;
}

.mensagem--cartao {
  border: var(--borda-fina);
  padding: var(--esp-4);
}

.mensagem__titulo {
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-corpo);
  font-weight: var(--tipo-titulo-peso);
  margin-bottom: var(--esp-2);
}

.mensagem__corpo {
  max-width: 60ch;
  color: var(--co-tinta-suave);
  font-size: var(--tipo-rotulo);
  line-height: var(--tipo-corpo-lh);
}

.mensagem__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

/* ------------------------------------------------------------
   12. Índice do protótipo
   ------------------------------------------------------------ */

.indice {
  display: grid;
  gap: 0;
  border-top: var(--borda-fina);
  margin-top: var(--esp-6);
}

.indice__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-4);
  padding-block: var(--esp-4);
  border-bottom: var(--borda-fina);
  color: var(--co-tinta);
  text-decoration: none;
}

.indice__item:hover .indice__nome {
  color: var(--co-sinal);
}

.indice__ordem {
  font-family: var(--fonte-dados);
  font-size: var(--tipo-dado);
  font-variant-numeric: tabular-nums;
  color: var(--co-tinta-suave);
}

.indice__nome {
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-corpo-g);
  font-weight: var(--tipo-titulo-peso);
}

.indice__descricao {
  display: block;
  margin-top: var(--esp-1);
  color: var(--co-tinta-suave);
  font-size: var(--tipo-rotulo);
  line-height: var(--tipo-rotulo-lh);
}

/* ------------------------------------------------------------
   13. Moldura de telefone — aplicativo do morador
   ------------------------------------------------------------ */

.telefones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-12);
  align-items: flex-start;
}

.telefone {
  /* Dimensões do aparelho derivadas da escala: 96px x 4 e 96px x 8 */
  width: calc(var(--esp-24) * 4);
  max-width: 100%;
  border: var(--borda-forte);
  border-radius: var(--raio-2);
  padding: var(--esp-2);
  background-color: var(--co-base);
}

.telefone__tela {
  border: var(--borda-fina);
  /* Altura de referência do aparelho; cresce se o conteúdo passar disso,
     para que nada seja cortado na leitura do protótipo. */
  min-height: calc(var(--esp-24) * 8);
  display: flex;
  flex-direction: column;
  background-color: var(--co-base);
}

.telefone__tela > .app {
  flex: 1;
}

.telefone__legenda {
  margin-top: var(--esp-3);
  color: var(--co-tinta-suave);
}

.barra-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-2) var(--esp-4);
  border-bottom: var(--borda-fina);
  color: var(--co-tinta-suave);
}

.app {
  padding: var(--esp-4);
  display: grid;
  gap: var(--esp-6);
}

.app__saudacao {
  display: grid;
  gap: var(--esp-1);
}

.app__acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2);
}

.app__acao {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  min-height: 44px;
  padding: var(--esp-3);
  border: var(--borda-fina);
  border-radius: var(--raio-1);
  background: transparent;
  color: var(--co-tinta);
  text-align: start;
  text-decoration: none;
  font-family: var(--fonte-corpo);
  font-size: var(--tipo-rotulo);
  font-weight: var(--tipo-rotulo-peso);
  cursor: pointer;
}

.app__acao:hover {
  border-color: var(--co-tinta);
}

.app__barra-inferior {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: var(--borda-fina);
  background-color: var(--co-base);
}

.app__aba {
  display: grid;
  place-items: center;
  gap: var(--esp-1);
  min-height: 44px;
  padding: var(--esp-2);
  background: transparent;
  color: var(--co-tinta-suave);
  text-decoration: none;
  font-size: var(--tipo-registro);
  font-family: var(--fonte-corpo);
  font-weight: var(--tipo-rotulo-peso);
  cursor: pointer;
}

/* ------------------------------------------------------------
   14. Ajuste da tela escura da portaria
   Sobre a base escura, os três tokens de estado ficam abaixo
   de 4,5:1. O manual proíbe inventar hex, então nessa tela o
   rótulo textual passa a carregar o contraste (--co-tinta) e a
   cor do estado fica na borda do selo e na faixa da linha, onde
   é redundante com o texto e com a forma do símbolo da cadeia.
   ------------------------------------------------------------ */

[data-tema="profundo"] .selo {
  color: var(--co-tinta);
  border-color: var(--co-tinta-suave);
}

[data-tema="profundo"] .selo--permitido {
  border-color: var(--co-permitido);
}

[data-tema="profundo"] .selo--negado {
  border-color: var(--co-negado);
}

[data-tema="profundo"] .selo--atencao {
  border-color: var(--co-atencao);
}

/* Telão da portaria: linhas mais altas e leitura a distância */
.tela--telao .tabela td {
  padding: var(--esp-3);
  font-size: var(--tipo-rotulo);
}