/* DENSIDADE DOS CARTOES — leia antes de mexer em qualquer padding daqui para baixo.
   Cartao que ocupa mais tela do que o conteudo dele justifica cobra rolagem que o dado
   nao cobra.

   A escala e UM PASSO PARA BAIXO NA PROPRIA ESCALA, e nao um numero novo: cartao em
   --espaco-5 pisa --espaco-4; cartao em --espaco-4 pisa --espaco-3; numero de contagem
   em --passo-3 pisa --passo-2. O VALOR dos tokens nao entra na conta — o que muda e
   qual degrau cada cartao pisa. Mexer no VALOR de --espaco-* seria o diff mais curto e
   o errado: --goteira e --espaco-5, e .secao, .bloco e a barra de servico (cuja altura
   e 4+44+4=52 — folga, alvo de toque de 44px, folga) andam sobre os mesmos degraus.

   O QUE NAO ENCOLHE, e por que:
     - tipografia de texto        nada abaixo de --passo--1; encolher letra para ganhar
                                  espaco e o caminho errado, e a regua aqui e WCAG AA.
     - --alvo-toque (44px)        area clicavel de cartao mantem o piso. Em
                                  '.cartao-caixa' ele e DECLARADO.
     - registro visual            fio de 2px, sombra dura de 3px, raio de 6px, zero
                                  gradiente: nenhum dos tres cede a densidade.
     - cor                        nenhum par de contraste muda de superficie.
     - largura minima da coluna   ver '.grade-caixas'. Estreitar a coluna quebra o
                                  rotulo da caixa em mais linhas e ALTA o cartao —
                                  medido, nao suposto.
     - '.entrada__acesso-painel'  e um painel unico e centralizado; encolher nao devolve
                                  tela nenhuma.
     - '.certidao__papel'         o padding ali e conforto de leitura do texto que e o
                                  proprio produto, e nao folga.
     - '.modelo-linha__alvo', '.alerta', '.medida', '.saneamento'
                                  ja estao em --espaco-3, que e o degrau de baixo. */

.grade-frentes {
  display: grid; gap: var(--espaco-4);
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.card-frente {
  display: block; padding: var(--espaco-4);
  background: var(--superficie);
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio); box-shadow: var(--elevacao-dura);
  color: var(--tinta); text-decoration: none;
}
.card-frente:hover, .card-frente:focus-visible { border-color: var(--marca); }
.card-frente__nome { font-family: var(--fonte-titulo); font-size: var(--passo-1); }
.card-frente__descricao { color: var(--tinta-suave); font-size: var(--passo--1); }

.paginacao { display: flex; gap: var(--espaco-3); align-items: center; }
.paginacao__contagem { color: var(--tinta-suave); font-size: var(--passo--1); }

/* Filtros do acervo. Sem regra para '.filtros', 'Filtrar' e 'Exportar CSV' ficam
   separados so pelo espaco em branco entre as tags — 4,5px medidos, metade do minimo
   de 8px entre alvos vizinhos, e clique errado em uso diario. O gap e o que os separa. */
.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--espaco-3); margin-block-end: var(--espaco-4);
}
.filtros .campo { margin-block-end: 0; }

/* ---- Caixas de tarefa da frente -----------------------------------------------
   Registro: neobrutalismo suavizado. Borda solida de 2px em tom medio, sombra dura
   de 3px sem desfoque, raio de 6px, sem gradiente, sem sobreposicao de blocos.
   Nenhuma transicao e nenhuma animacao: movimento inesperado esta vedado.
   Esta secao estiliza as caixas que a Central observa. A caixa que se distribui nao
   tem componente proprio nesta tela; onde ha regra propria, a informacao vem por
   tamanho, borda e ROTULO, nunca por cor sozinha. */

.carimbo-leitura {
  font-family: var(--fonte-dado); font-size: var(--passo--1);
  color: var(--tinta-suave); margin-block: 0 var(--espaco-5);
}

.caixa-titulo {
  font-family: var(--fonte-titulo); font-size: var(--passo-1);
  margin-block: var(--espaco-6) var(--espaco-3);
}
.caixa-titulo:first-child { margin-block-start: 0; }
.caixa-titulo__nota {
  display: block; font-family: var(--fonte-corpo); font-size: var(--passo--1);
  font-weight: 400; color: var(--tinta-suave);
}

/* Selo do papel da caixa. Texto explicito, sempre — nunca so a cor. */
.selo-papel {
  align-self: flex-start; display: inline-block; font-size: var(--passo--1);
  padding: 2px var(--espaco-2); border-radius: var(--raio);
  border: var(--borda-estrutural) solid currentColor; margin-block-end: var(--espaco-2);
}
.selo-papel--acompanhamento { color: var(--tinta-suave); }

/* A LARGURA MINIMA DA COLUNA FICA EM 19rem, e a permanencia e deliberada. Estreitar a
   coluna parece devolver tela e devolve o contrario: o rotulo da caixa ('Elaborar RPV
   ou precatorio', 'Processo com prazo em curso') quebra em mais uma linha e o cartao
   sobe de altura. Medido a 1440px, com o --contêiner de 1360px: a 19rem cabem 4
   colunas por linha; para caber uma quinta seria preciso descer a 15rem, e a 15rem o
   rotulo de tres palavras vira tres linhas. O ganho de densidade sai do EIXO VERTICAL
   — padding, piso de altura e escala do numero —, que e onde estava a folga. */
.grade-caixas {
  display: grid; gap: var(--espaco-3);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.caixa-acompanhamento {
  display: flex; flex-direction: column;
  padding: var(--espaco-3);
  background: var(--superficie);
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio);
  box-shadow: var(--elevacao-dura);
}
.caixa-acompanhamento__nome {
  font-size: var(--passo-0); margin: 0 0 var(--espaco-2); overflow-wrap: anywhere;
}
.caixa-acompanhamento__contagem {
  margin-block: auto 0;  /* alinha a contagem na base, com titulo de 1 ou 2 linhas */
  font-family: var(--fonte-dado); font-variant-numeric: tabular-nums;
  font-size: var(--passo-2); line-height: 1;
}

/* Caixa zerada: continua na tela, tracejada, e com o rotulo "Zerada" junto — o
   tracejado nunca transmite o estado sozinho. Sumir esconderia do gestor que ela
   existe, e ele nao distinguiria "zerou" de "deixou de ser acompanhada". */
.caixa-acompanhamento--zerada { border-style: dashed; }

/* ---- Espaco de trabalho do servidor -------------------------------------------- */
.rolagem { overflow-x: auto; }   /* tabela larga rola nela mesma; o corpo nunca rola de lado */

.vazio {
  border: var(--borda-estrutural) dashed var(--filete-forte);
  border-radius: var(--raio); padding: var(--espaco-4);
  background: var(--superficie-2);
}
.vazio__titulo { font-weight: 700; margin-block: 0 var(--espaco-2); }
.vazio p:last-child { margin-block-end: 0; color: var(--tinta-suave); }
.vazio__linha { color: var(--tinta-suave); }

/* Placar de produtividade. Numero e comparacao com o PROPRIO mes anterior — nao ha
   meta fixada para esta frente, e barra de progresso rumo a alvo inventado mentiria. */
.placar {
  display: flex; align-items: baseline; gap: var(--espaco-4); flex-wrap: wrap;
  padding: var(--espaco-3) var(--espaco-4);
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio); box-shadow: var(--elevacao-dura);
  margin-block-end: var(--espaco-4);
}
.placar__numero { display: flex; align-items: baseline; gap: var(--espaco-2); }
.placar__valor {
  font-family: var(--fonte-dado); font-variant-numeric: tabular-nums;
  font-size: var(--passo-2); line-height: 1; margin: 0;
}
.placar__rotulo { color: var(--tinta-suave); font-size: var(--passo--1); margin: 0; }
.placar__comparacao { margin: 0; color: var(--tinta-suave); font-size: var(--passo--1); }
/* Placar em destaque: o mesmo fio da marca que .ficha--prioritaria e
   .cartao-caixa--entrada ja usam para dizer "e por aqui que se comeca". A borda nunca
   carrega o estado sozinha — o rotulo textual do placar diz o que o numero e. */
.placar--destaque { border-color: var(--marca); box-shadow: var(--elevacao-dura-marca); }

/* Selo dentro de celula precisa de folga do texto que o antecede. */
td .selo { margin-inline-start: var(--espaco-2); }

/* ---- Tela de entrada ------------------------------------------------------------
   Um painel so, centralizado nos dois eixos sob a faixa da marca. Sem coluna de texto
   institucional ao lado: a faixa ja identifica a Central, e texto ao lado do painel
   disputa a atencao com o unico ato que a tela pede. Sem navegacao, sem animacao, e o
   erro vem ligado ao formulario. */
.entrada {
  display: grid; justify-items: center; align-content: center;
  padding-block: var(--espaco-7);
  max-width: 34rem; margin-inline: auto;
  /* Ocupa o que sobra da altura, para o acesso ficar no eixo do olhar em vez de
     pendurado no topo. */
  min-height: calc(100vh - var(--altura-faixa));
}

.entrada__acesso-painel {
  width: 100%;
  background: var(--superficie);
  border: var(--borda-estrutural) solid var(--marca);
  border-radius: var(--raio);
  box-shadow: var(--elevacao-dura-marca);
  padding: var(--espaco-5);
}
.entrada__titulo { font-size: var(--passo-2); margin: 0 0 var(--espaco-4); }
.entrada__ajuda {
  margin: var(--espaco-4) 0 0; padding-top: var(--espaco-4);
  border-top: 1px solid var(--filete);
  font-size: var(--passo--1); color: var(--tinta-suave);
}

.botao--largo { width: 100%; padding-block: var(--espaco-3); font-weight: 700; }

/* Erro de entrada: simbolo + texto, nunca so a cor. */
.aviso-erro {
  display: flex; gap: var(--espaco-2); align-items: flex-start;
  margin: 0 0 var(--espaco-4); padding: var(--espaco-3);
  border: var(--borda-estrutural) solid var(--estado-perigo);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--estado-perigo); font-size: var(--passo--1);
}
.aviso-erro__marca { font-weight: 700; line-height: 1.4; }

/* ---- Pagina dedicada de uma caixa ------------------------------------------------
   Modo foco: uma ficha por processo, com folga para ler as partes e agir sem sair.
   Nao e tabela — nome de parte e longo e o seletor precisa de espaco proprio. */
.trilha-volta {
  display: flex; gap: var(--espaco-2); align-items: center;
  font-size: var(--passo--1); color: var(--tinta-suave);
  margin-block-end: var(--espaco-4);
}
/* Rastro de volta e navegacao, e por isso entra na regua de alvo de toque. */
.trilha-volta a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); }

.caixa-cabeca__nome { margin-block: 0 var(--espaco-2); }

.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-4); }

.ficha {
  display: grid; gap: var(--espaco-3);
  padding: var(--espaco-4);
  background: var(--superficie);
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio);
  box-shadow: var(--elevacao-dura);
}
/* Prioridade legal e normativa: a ficha muda de peso, e o selo diz o motivo por
   escrito. A borda sozinha nunca carrega o estado. */
.ficha--prioritaria { border-color: var(--marca); box-shadow: var(--elevacao-dura-marca); }
/* .ficha veste tambem os blocos de beneficiario em processos/cadastrar.html. Ela ja e
   grid com gap, entao a margem propria do .campo somaria e dobraria o respiro — mesmo
   ajuste que .filtros .campo faz na barra de filtros do acervo. */
.ficha .campo { margin-block-end: 0; }

.ficha__identificacao {
  display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap;
}
.ficha__numero { font-size: var(--passo-1); margin: 0; }

.ficha__dados {
  display: grid; gap: var(--espaco-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
}
.ficha__dados dt {
  font-size: var(--passo--1); color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--fonte-dado);
}
.ficha__dados dd { margin: var(--espaco-1) 0 0; overflow-wrap: anywhere; }

.ficha__saidas {
  display: flex; gap: var(--espaco-4); flex-wrap: wrap; margin: 0;
  padding-block: var(--espaco-3);
  border-block: 1px solid var(--filete);
  font-size: var(--passo--1);
}
.ficha__externo { font-family: var(--fonte-dado); }
.ficha__sem-relatorio { color: var(--tinta-suave); }

.ficha__remeter { margin: 0; }
.ficha__acao {
  display: flex; gap: var(--espaco-3); flex-wrap: wrap; align-items: stretch;
  margin-block-start: var(--espaco-2);
}
.ficha__acao .campo__entrada { flex: 1 1 20rem; width: auto; }
.ficha__acao .botao { flex: 0 0 auto; padding-inline: var(--espaco-5); }

/* Texto so para leitor de tela: o aviso de nova aba nao deve ocupar espaco visual,
   mas tem de existir — abrir aba sem avisar desorienta (WCAG 3.2.5). */
.so-leitor-de-tela {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Copiar o numero: so aparece com JavaScript, porque sem ele nao funciona. O numero
   continua visivel na ficha, entao isto e atalho e nunca o unico caminho. */
.ligacao-copiar, [data-copiar-texto] { display: none; }
.com-js [data-copiar-texto] { display: inline-block; }
.com-js .ligacao-copiar {
  display: inline; font: inherit; font-size: var(--passo--1);
  padding: 0; border: 0; background: none; color: var(--marca);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.com-js .ligacao-copiar[disabled] { color: var(--estado-ok); cursor: default; }

.ficha__tempo { font-size: var(--passo--1); color: var(--tinta-suave); }

/* ---- Centro operacional ---------------------------------------------------------
   Ordem da tela = ordem do trabalho: acao, depois onde o trabalho esta, depois
   referencia. Blocos separados por filete, sem card dentro de card. */
.bloco { margin-block-end: var(--espaco-7); }

/* Alertas: o numero de dias e o dado, e vem primeiro na leitura. */
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.alerta {
  display: flex; align-items: baseline; gap: var(--espaco-4); flex-wrap: wrap;
  padding: var(--espaco-3) var(--espaco-4);
  border: var(--borda-estrutural) solid var(--estado-perigo);
  border-radius: var(--raio);
  background: var(--superficie);
}
.alerta__dias {
  display: flex; align-items: baseline; gap: var(--espaco-1);
  font-size: var(--passo-1); color: var(--estado-perigo); font-weight: 700;
  min-width: 5.5rem;
}
.alerta__unidade { font-size: var(--passo--1); font-weight: 400; }
.alerta__corpo { display: flex; align-items: baseline; gap: var(--espaco-3); flex-wrap: wrap; }
.alerta__onde { color: var(--tinta-suave); font-size: var(--passo--1); }
.alertas__resto { color: var(--tinta-suave); font-size: var(--passo--1); }

/* Cartao de caixa: alvo generoso, contagem grande, e o alerta escrito quando existe.

   O PISO DE ALTURA E O ALVO DE TOQUE, e nao um numero de desenho. 'min-height: 7.5rem'
   — 120px — nao serve aqui: o conteudo do cartao sao tres linhas curtas (nome, selo de
   alerta, contagem) e rende cerca de 110px com o padding atual, entao 120px nao seguram
   nada que o conteudo ja nao segure e obrigam o cartao sem selo, que rende ~93px, a
   esticar 27px de folga pura. O piso que de fato importa e --alvo-toque: o cartao
   inteiro e um <a>, operado o dia inteiro pelos servidores da Central, e alvo curto e
   erro de clique repetido. Por --alvo-toque a garantia e DECLARADA em vez de pegar
   carona num numero maior. Medido no DOM: 82,4px o menor cartao. */
.cartao-caixa {
  display: flex; flex-direction: column; gap: var(--espaco-2);
  padding: var(--espaco-3); min-height: var(--alvo-toque);
  background: var(--superficie); color: var(--tinta); text-decoration: none;
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio); box-shadow: var(--elevacao-dura);
}
.cartao-caixa:hover, .cartao-caixa:focus-visible { border-color: var(--marca); }
/* A caixa de entrada e onde o trabalho comeca: ganha a cor da marca, e o nome ja diz. */
.cartao-caixa--entrada { border-color: var(--marca); box-shadow: var(--elevacao-dura-marca); }
.cartao-caixa__nome { font-family: var(--fonte-titulo); font-weight: 700; }
.cartao-caixa__contagem {
  font-size: var(--passo-2); line-height: 1; margin-block: auto 0;
}
.cartao-caixa__nota { font-size: var(--passo--1); color: var(--tinta-suave); }
.cartao-caixa .selo { align-self: flex-start; }

/* Mes: calendario e informativos lado a lado, empilhando em tela estreita. */
.mes {
  display: grid; gap: var(--espaco-5);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) { .mes { grid-template-columns: auto 1fr; } }

.calendario { width: auto; border-collapse: collapse; }
.calendario th {
  font-size: var(--passo--1); font-weight: 400; color: var(--tinta-suave);
  font-family: var(--fonte-dado); text-transform: uppercase; letter-spacing: 0.05em;
  padding: var(--espaco-2); background: none; border: 0;
}
.calendario td {
  font-family: var(--fonte-dado); font-variant-numeric: tabular-nums;
  text-align: center; padding: var(--espaco-2); min-width: 2.75rem;
  border: 1px solid var(--filete);
}
.calendario__fora { border-color: transparent; }
.calendario__dia--fds { color: var(--tinta-suave); background: var(--superficie-2); }
/* Hoje: caixa da marca. Nao e so cor — o leitor de tela recebe a palavra "hoje". */
.calendario__hoje {
  display: inline-block; min-width: 1.75rem; padding: 2px 4px;
  background: var(--marca); color: var(--tinta-inversa);
  border-radius: var(--raio); font-weight: 700;
}
.calendario__marca { display: block; line-height: 0.6; color: var(--marca); }

.informativos__titulo { font-size: var(--passo-0); margin-block: 0 var(--espaco-3); }
.informativos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-3); }
.informativos__lista li {
  display: flex; gap: var(--espaco-3);
  padding-block-end: var(--espaco-3); border-bottom: 1px solid var(--filete);
}
.informativos__lista li:last-child { border-bottom: 0; padding-block-end: 0; }
.informativos__data { color: var(--tinta-suave); margin: 0; white-space: nowrap; }
.informativos__texto { margin: 0; }
.informativos__corpo {
  display: block; font-size: var(--passo--1); color: var(--tinta-suave);
  margin-block-start: var(--espaco-1);
}

/* ---- Certidoes -------------------------------------------------------------------
   Catalogo: linha por modelo, alvo inteiro clicavel. Pagina do modelo: referencia e
   preenchimento a esquerda, texto a direita — o texto e o produto, e fica largo. */
.busca { margin-block-end: var(--espaco-5); }
.busca__linha { display: flex; gap: var(--espaco-3); margin-block-start: var(--espaco-2); }
.busca__linha .campo__entrada { flex: 1 1 24rem; width: auto; }
.busca__resultado { color: var(--tinta-suave); font-size: var(--passo--1); }

.modelos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.modelo-linha__alvo {
  display: flex; align-items: baseline; gap: var(--espaco-4); flex-wrap: wrap;
  padding: var(--espaco-3) var(--espaco-4);
  border: var(--borda-estrutural) solid var(--filete-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta); text-decoration: none;
}
.modelo-linha__alvo:hover, .modelo-linha__alvo:focus-visible {
  border-color: var(--marca); box-shadow: var(--elevacao-dura-marca);
}
.modelo-linha__numero { min-width: 3rem; color: var(--tinta-suave); }
.modelo-linha__corpo { flex: 1 1 24rem; }
.modelo-linha__titulo { display: block; font-weight: 700; }
.modelo-linha__hipotese {
  display: block; font-size: var(--passo--1); color: var(--tinta-suave);
  margin-block-start: var(--espaco-1);
}

.certidao { display: grid; gap: var(--espaco-6); grid-template-columns: 1fr; }
@media (min-width: 62rem) { .certidao { grid-template-columns: 22rem 1fr; } }
.certidao__lado { display: grid; gap: var(--espaco-5); align-content: start; }
.certidao__fundamento { font-size: var(--passo--1); color: var(--tinta-suave); }
.campo__obrigatorio {
  font-size: var(--passo--1); color: var(--estado-perigo); margin-inline-start: var(--espaco-2);
}

/* O papel da certidao: medida de leitura, serifa nao — o PJe recebe texto puro. */
.certidao__papel {
  padding: var(--espaco-5);
  background: var(--superficie);
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio); box-shadow: var(--elevacao-dura);
}
.certidao__papel p { margin-block: 0 var(--espaco-4); text-align: justify; }
.certidao__papel p:last-child { margin-block-end: 0; }
.certidao__acoes { margin-block: var(--espaco-4) 0; }

.conferencia { list-style: none; margin: 0; padding: 0; font-size: var(--passo--1); }
.conferencia li {
  display: flex; gap: var(--espaco-2); padding-block: var(--espaco-2);
  border-bottom: 1px solid var(--filete);
}
.conferencia li:last-child { border-bottom: 0; }
.conferencia__ref { color: var(--tinta-suave); white-space: nowrap; min-width: 4.5rem; }

.certidao__notas { margin-block-start: var(--espaco-5); font-size: var(--passo--1); }
.certidao__notas-titulo { font-size: var(--passo-0); margin-block: 0 var(--espaco-2); }
.certidao__notas ol { margin: 0; padding-left: 1.2rem; color: var(--tinta-suave); }
.certidao__notas li { margin-block: var(--espaco-2); }

.ficha__responsavel { margin: 0; font-size: var(--passo--1); color: var(--tinta-suave); }

/* Base de conhecimento: o recuo mostra a hierarquia do manual. */
.modelo-linha__alvo--n2 { margin-inline-start: var(--espaco-4); }
.modelo-linha__alvo--n3 { margin-inline-start: var(--espaco-6); }
.artigo__corpo {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  font: inherit; max-width: var(--medida);
}
.paginacao-artigo {
  display: flex; gap: var(--espaco-4); flex-wrap: wrap;
  margin-block-start: var(--espaco-6); padding-block-start: var(--espaco-4);
  border-top: var(--borda-estrutural) solid var(--filete-forte);
  font-size: var(--passo--1);
}
.paginacao-artigo__proximo { margin-inline-start: auto; }

/* Base de consulta de teto de RPV.
   Nenhum literal de cor, fonte, borda ou raio: tudo sai de 00-tokens.css. */
.saneamento {
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio);
  padding: var(--espaco-3) var(--espaco-4);
  margin-block: var(--espaco-4);
  font-size: var(--passo--1);
}
/* O <summary> e alvo de clique: obedece a regua de 44px como qualquer outro. */
.saneamento summary {
  display: flex; align-items: center; min-height: var(--alvo-toque);
  cursor: pointer; font-weight: 700;
}
.saneamento__texto { color: var(--tinta-suave); max-width: var(--medida); }

.serie-teto__aviso {
  color: var(--tinta-suave); max-width: var(--medida);
  font-size: var(--passo--1); margin-block: var(--espaco-3) var(--espaco-5);
}
/* A lacuna e DECLARADA na propria linha, em texto. O italico e a cor suave apenas a
   distinguem das fotografias; quem le so o texto recebe a mesma informacao.
   PAR NOVO, medido e nao estimado: --tinta-suave sobre --superficie-2 rende 6,18:1 —
   acima do piso de 4,5:1 da WCAG 1.4.3. O calculo saiu da luminancia relativa sRGB com
   pesos 0.2126/0.7152/0.0722, conferido antes contra tres controles positivos
   (21,00:1, 1,00:1 e 4,54:1). Os valores literais do par vivem em 00-tokens.css, que e
   o unico arquivo que os carrega — inclusive em comentario. */
.serie-teto__lacuna td {
  color: var(--tinta-suave); font-size: var(--passo--1);
  background: var(--superficie-2); font-style: italic;
}

/* Barra da serie: div e porcentagem, sem biblioteca de grafico e sem requisicao de
   rede. O preenchimento e NEUTRO (--filete-forte) de proposito — o registro visual
   veda saturacao em area preenchida, e o valor ja esta escrito por extenso ao lado.
   A barra e redundancia visual, nunca a unica portadora do dado; por isso vem com
   aria-hidden no gabarito. Altura de filete, e nao de bloco.
   Preenchimento sobre trilho rende 2,74:1, abaixo do piso de 3:1 da WCAG 1.4.11 — e
   nao ha reprovacao nisso: 1.4.11 alcanca componente que TRANSMITE informacao, e esta
   barra nao transmite nenhuma. O valor esta escrito por extenso na mesma celula, e a
   barra esta fora da arvore de acessibilidade. Subir o contraste dela seria por peso
   visual num elemento que nao carrega dado. */
.barra-teto {
  display: block; height: var(--espaco-1); margin-block-start: var(--espaco-1);
  background: var(--filete); border-radius: var(--raio); overflow: hidden;
}
.barra-teto__preenchimento {
  display: block; height: 100%; background: var(--filete-forte);
}
.acao-referencia { margin-block: var(--espaco-4) var(--espaco-5); }

/* ===========================================================================
   PAINEL DO SERVIDOR — duas colunas irmas
   ===========================================================================

   ZERO COR NOVA. Todo o bloco sai de tokens ja medidos em 00-tokens.css: nenhum
   literal de cor, fonte, borda ou raio entra aqui. O par de superficie e o mesmo
   --superficie/--tinta (15,70:1) do resto do HUB; o preenchimento das barras reusa
   o par --filete-forte sobre --filete ja adotado em '.barra-teto'.

   As colunas so viram duas a partir de 62rem — o mesmo ponto de quebra de '.certidao',
   e nao um terceiro inventado. Abaixo disso empilham, e a de contexto vem primeiro. */
.paineis-irmaos {
  display: grid; gap: var(--goteira); margin-block-end: var(--espaco-7);
}
@media (min-width: 62rem) {
  .paineis-irmaos { grid-template-columns: 1fr 1fr; }
}

/* Cartao do registro: fio de 2px, sombra dura de 3px sem desfoque, raio de 6px.
   Nenhum dos tres e redeclarado — todos vem do token. */
.painel-coluna {
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio);
  box-shadow: var(--elevacao-dura);
  padding: var(--espaco-4);
  background: var(--superficie);
}
.painel-coluna__titulo {
  font-size: var(--passo-2); margin-block: 0 var(--espaco-3);
  padding-block-end: var(--espaco-2);
  border-block-end: var(--borda-estrutural) solid var(--marca);
}
.painel-coluna__subtitulo {
  font-size: var(--passo-0); margin-block: var(--espaco-4) var(--espaco-2);
}
.painel-coluna__nota {
  color: var(--tinta-suave); font-size: var(--passo--1);
  margin-block: var(--espaco-2) 0;
}

/* Medidas do topo. Nao sao somaveis, e a moldura as separa para que ninguem as leia
   como parcelas de um mesmo total.
   'auto-fit' e nao '1fr 1fr': a tela do servidor mostra DUAS grandezas e a do gestor
   TRES ('a distribuir' entra so para quem reparte). Com duas colunas fixas a terceira
   cai sozinha numa segunda linha, ao lado de uma celula vazia — e uma medida orfa ao
   lado de um buraco parece defeito de carga, nao desenho.
   Pela mesma razao o nome da classe nao conta os itens: com duas contagens possiveis,
   nome que fixa uma delas mente para quem le a folha na outra tela. */
.medidas {
  display: grid; gap: var(--espaco-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.medida {
  margin: 0; padding: var(--espaco-3);
  border: var(--borda-estrutural) solid var(--filete);
  border-radius: var(--raio);
}
.medida__valor {
  display: block; font-size: var(--passo-2); font-weight: 700; line-height: 1.1;
}
.medida__rotulo {
  display: block; color: var(--tinta-suave); font-size: var(--passo--1);
  margin-block-start: var(--espaco-1);
}

/* Barras: div e porcentagem, sem biblioteca e sem requisicao de rede.
   O NUMERO ESTA ESCRITO em '.barra__valor' na mesma linha, sempre. A barra e
   redundancia visual — por isso o trilho vai com aria-hidden, e por isso o par
   preenchimento/trilho nao esta sujeito ao piso de 3:1 da WCAG 1.4.11, que alcanca
   componente portador de informacao. Mesmo raciocinio ja registrado em '.barra-teto'. */
.barras { list-style: none; margin: 0; padding: 0; }
.barra {
  display: grid; grid-template-columns: minmax(0, 1fr) 6rem auto;
  align-items: center; gap: var(--espaco-2);
  padding-block: var(--espaco-1);
}
.barra__rotulo {
  font-size: var(--passo--1); overflow-wrap: anywhere;
}
.barra__trilho {
  display: block; height: var(--espaco-2);
  background: var(--filete); border-radius: var(--raio); overflow: hidden;
}
.barra__preenchimento { display: block; height: 100%; background: var(--filete-forte); }
.barra__valor { text-align: end; font-variant-numeric: tabular-nums; }

/* Progresso contra a meta: DUAS referencias na mesma barra.
   O marcador do 'esperado ate hoje' e um filete vertical em --tinta sobre --filete
   (15,70:1). Ele NAO e o unico portador do estado: o selo textual acima diz "Em dia"
   ou "Abaixo do esperado", e as duas referencias vao escritas em numero na lista
   abaixo. Estado nunca so por cor — regua fixada para esta equipe. */
.progresso__leitura { margin-block: 0 var(--espaco-2); }
.progresso { margin-block-end: var(--espaco-3); }
.progresso__trilho {
  position: relative; height: var(--espaco-4);
  background: var(--filete);
  border: var(--borda-estrutural) solid var(--filete-forte);
  border-radius: var(--raio); overflow: hidden;
}
.progresso__preenchimento { height: 100%; background: var(--marca); }
.progresso__marcador {
  position: absolute; inset-block: 0; width: var(--borda-estrutural);
  background: var(--tinta);
}
.progresso__referencias { list-style: none; margin: 0; padding: 0; }
.progresso__referencias li {
  display: flex; flex-wrap: wrap; gap: var(--espaco-2);
  padding-block: var(--espaco-1);
  border-block-start: 1px solid var(--filete);
  font-size: var(--passo--1);
}