/* Fontes da marca (kit copiado em static/fontes/) */
@font-face {
  font-family: "Abril Fatface";
  src: url("fontes/AbrilFatface-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fontes/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fontes/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fontes/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fontes/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Paleta da marca Empíricos — Modelo A "Escritório" (spec 2026-09-17, §3.1).
   Claro é o padrão; o escuro é o Modelo B "Cofre", opcional. Toda cor do Painel
   nasce aqui: nenhuma regra abaixo escreve literal. */
:root {
  --cor-fundo: #f7f5f1;
  --cor-fundo-elevado: #ffffff;
  --cor-menu: #000000;
  /* Realce do item do menu sob o ponteiro. Fora dos dezessete papéis da §3.1:
     é o mesmo nos dois temas (o menu é preto em ambos) e está aqui só porque
     nenhum literal de cor pode morar fora do :root. */
  --cor-menu-realce: rgba(255, 255, 255, .08);
  --cor-texto: #191712;
  --cor-texto-secundario: #6b665c;
  --cor-borda: #e4dfd3;
  --cor-champanhe: #847c59;
  --cor-champanhe-vivo: #b1a678;
  --cor-champanhe-profundo: #696346;
  --cor-link: #6f6746;
  --cor-link-ponteiro: #4f4a33;
  --cor-foco: #847c59;
  --cor-status-verde: #1b7f3b;
  --cor-status-ambar: #8a5600;
  --cor-status-vermelho: #b3261e;
  --cor-status-azul: #2f6fbf;
  --cor-selo-texto: #ffffff;
  --cor-preto: #191712;
  /* Texto do menu preto: o menu é preto nos dois temas, então o texto dele tem
     tokens próprios e claros (o token do texto comum vira escuro no tema escuro
     e sumiria sobre o preto). */
  --cor-menu-texto: #efece4;
  --cor-menu-suave: #8d887c;
  --cor-menu-ativo: rgba(177, 166, 120, .16);
  --cor-menu-borda: rgba(255, 255, 255, .16);
  --cor-menu-linha: rgba(255, 255, 255, .1);
  /* Botão principal: preto com texto branco no claro; champanhe com texto escuro
     no escuro (Modelo B). */
  --cor-botao: var(--cor-preto);
  --cor-botao-texto: var(--cor-fundo-elevado);
  --cor-botao-ponteiro: #3a372e;
  --cor-campo: var(--cor-fundo-elevado);
  --sombra-ficha: 0 1px 2px rgba(20, 18, 12, .06);
  --raio: 2px;
  --cor-titulo: var(--cor-texto);
  --fonte-marca: "Abril Fatface", Georgia, "Times New Roman", serif;
  --fonte-titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
  --fonte-corpo: "Montserrat", "Segoe UI", Arial, sans-serif;
}

/* Tema escuro (Modelo B "Cofre"): OPCIONAL. O Painel abre sempre no claro; o
   escuro só entra quando a pessoa liga o botão do rodapé do menu (localStorage),
   nunca pela preferência do sistema. As cores de situação mudam com o tema: o
   vermelho #b3261e some sobre o fundo #1c1b18, e cor que existe para gritar
   "parou de capturar" não pode sumir (§3.1). */
:root[data-tema="escuro"] {
  --cor-botao: var(--cor-champanhe);
  --cor-botao-texto: var(--cor-preto);
  --cor-botao-ponteiro: var(--cor-champanhe-vivo);
  --cor-campo: var(--cor-fundo);
  --sombra-ficha: none;
  --cor-fundo: #141312;
  --cor-fundo-elevado: #1c1b18;
  --cor-menu: #0b0b0a;
  --cor-menu-realce: rgba(255, 255, 255, .08);
  --cor-texto: #f0ece2;
  --cor-texto-secundario: #9d9789;
  --cor-borda: #302d27;
  --cor-champanhe: #b1a678;
  --cor-champanhe-vivo: #c9bf94;
  --cor-champanhe-profundo: #c9bf94;
  --cor-link: #c9bf94;
  --cor-link-ponteiro: #e0d8ae;
  --cor-foco: #b1a678;
  --cor-status-verde: #4fbf78;
  --cor-status-ambar: #d79a33;
  --cor-status-vermelho: #e8736a;
  --cor-status-azul: #74a6e8;
  --cor-selo-texto: #1c1b18;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
}
/* A grade de duas colunas (menu + conteúdo) é só para as telas que têm
   #menu-lateral. As telas de login/definir-senha não têm menu nenhum, então
   não podem herdar essa grade. */
body:has(#menu-lateral) {
  display: grid;
  grid-template-columns: 214px 1fr;
}
h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--cor-titulo);
  font-weight: 400;
  letter-spacing: .01em;
}
a { color: var(--cor-link); }
a:hover { color: var(--cor-link-ponteiro); }
[hidden] { display: none !important; }
button, .botao {
  font-family: var(--fonte-corpo);
  font-size: 12px;
  font-weight: 600;
  background: var(--cor-botao);
  color: var(--cor-botao-texto);
  border: 1px solid var(--cor-botao);
  border-radius: var(--raio);
  padding: 7px 14px;
  cursor: pointer;
}
button:hover, .botao:hover { background: var(--cor-botao-ponteiro); border-color: var(--cor-botao-ponteiro); }
button:disabled, .botao:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }
/* --------------------------------------------------------------------------
   Menu lateral (§4.1 e §4.2). O conteúdo é montado por `montarMenu`, no
   painel.js; aqui fica só a moldura. O menu é preto nos DOIS temas, ocupa a
   altura toda da janela e fica parado enquanto a área de trabalho rola.
   -------------------------------------------------------------------------- */
#menu-lateral {
  width: 214px; background: var(--cor-menu); color: var(--cor-menu-texto);
  display: flex; flex-direction: column; gap: 14px; padding: 14px 10px 12px;
  position: sticky; top: 0; height: 100vh; align-self: start; overflow-x: hidden; overflow-y: auto;
}
#menu-lateral nav { display: flex; flex-direction: column; gap: 2px; }
#menu-lateral nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-radius: var(--raio); border-left: 2px solid transparent;
  font-size: 12.5px; color: var(--cor-menu-suave); text-decoration: none; white-space: nowrap;
}
#menu-lateral nav a:hover { background: var(--cor-menu-realce); color: var(--cor-menu-texto); }
#menu-lateral .item-ativo {
  color: var(--cor-menu-texto); background: var(--cor-menu-ativo);
  border-left-color: var(--cor-champanhe-vivo); font-weight: 600;
}
#menu-lateral .icone-do-menu { flex: none; }
.marca-do-menu { display: flex; align-items: center; padding: 2px 6px 0; min-height: 44px; }
.marca-larga { height: 34px; width: auto; display: block; }
.marca-curta { display: none; height: 28px; width: auto; }
#menu-lateral button {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: transparent; color: var(--cor-menu-suave);
  border: 1px solid var(--cor-menu-borda); border-radius: var(--raio);
  padding: 5px 7px; font-size: 11px; font-weight: 400; letter-spacing: .06em;
}
#menu-lateral button:hover { background: transparent; color: var(--cor-menu-texto); border-color: var(--cor-menu-texto); }
.rodape-do-menu {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cor-menu-linha);
  display: flex; flex-direction: column; gap: 10px;
}
.texto-da-marca { margin: 0; padding: 0 8px; font-size: 11px; line-height: 1.35; color: var(--cor-menu-suave); }
body.menu-recolhido:has(#menu-lateral) { grid-template-columns: 60px 1fr; }
.menu-recolhido #menu-lateral { width: 60px; }
.menu-recolhido #menu-lateral .rotulo-do-item,
.menu-recolhido #menu-lateral .texto-da-marca { display: none; }
.menu-recolhido #menu-lateral nav a { justify-content: center; padding-inline: 4px; }
.menu-recolhido #menu-lateral button { justify-content: center; }
.menu-recolhido .marca-larga { display: none; }
.menu-recolhido .marca-curta { display: block; margin: 0 auto; }
.nome-da-tela { font-family: var(--fonte-marca); font-weight: 400; font-size: 17px; line-height: 1.2; margin: 0; }
.sub-da-tela { margin: 1px 0 0; font-size: 11.5px; color: var(--cor-texto-secundario); }
.cabecalho-da-tela {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; padding: 12px 20px;
  background: var(--cor-fundo-elevado); border-bottom: 1px solid var(--cor-borda);
}
.topo-esquerda { min-width: 0; }
/* O cabeçalho de ação (nome de quem usa e cliente escolhido) mora à direita do topo. */
#cabecalho-acao { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#cabecalho-acao label {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 11.5px; font-weight: 500; color: var(--cor-texto-secundario);
}
#cabecalho-acao input, #cabecalho-acao select {
  width: auto; margin: 0; padding: 5px 9px; font-size: 11.5px; max-width: 210px;
}
#cabecalho-acao input { width: 140px; }
#aviso-cliente { flex-basis: 100%; }
.corpo-da-tela { padding: 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.corpo-da-tela h2:not(#veredito-titulo) {
  font-family: var(--fonte-corpo); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cor-texto-secundario);
  margin: 0 0 10px;
}
.card-resumo {
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.cards-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; padding: 1.25rem 1.5rem;
}
.card-resumo .card-numero { font-size: 1.8rem; font-weight: 700; }
.card-resumo .card-rotulo { color: var(--cor-texto-secundario); font-size: .85rem; }
main { padding: 0; max-width: 100%; min-width: 0; }
/* Abaixo de 760px o menu vira trilho sozinho. É SÓ CSS: não toca no
   localStorage, então a escolha guardada sobrevive à janela estreita. */
@media (max-width: 760px) {
  body:has(#menu-lateral) { grid-template-columns: 60px 1fr; overflow-x: hidden; }
  #menu-lateral { width: 60px; }
  #menu-lateral .rotulo-do-item, .texto-da-marca, .botao-recolher { display: none; }
  #menu-lateral nav a { justify-content: center; padding-inline: 4px; }
  #menu-lateral button { justify-content: center; }
  .marca-larga { display: none; }
  .marca-curta { display: block; margin: 0 auto; }
  .corpo-da-tela { padding: 14px; }
  .cabecalho-da-tela { padding: 10px 14px; }
}
/* Telas de login e definir-senha (login.html, definir-senha.html): sem menu
   lateral, então ficam centralizadas na página inteira em vez de ocupar a
   grade de duas colunas do restante do sistema. */
.tela-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.caixa-login {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%; max-width: 340px;
}
.caixa-login form { width: 100%; }
.caixa-login form > button[type="submit"] { width: 100%; margin-top: .6rem; }
.marca-login { height: 40px; width: auto; }
.botao-link {
  display: block; margin-top: .6rem;
  background: none; border: 0; padding: 0; width: auto;
  color: var(--cor-link); font-weight: 600; text-decoration: underline; cursor: pointer;
}
.botao-link:hover { background: none; color: var(--cor-link-ponteiro); border-color: transparent; }
section.bloco { margin-top: 0; }
table {
  width: 100%; border-collapse: collapse; background: var(--cor-fundo-elevado);
  font-size: 12.5px;
}
.tabela-envoltorio {
  overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio);
  background: var(--cor-fundo-elevado);
}
th {
  font-family: var(--fonte-corpo); font-weight: 600; text-align: left; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cor-texto-secundario); border-bottom: 1px solid var(--cor-borda);
  padding: 9px 14px;
}
td { border-bottom: 1px solid var(--cor-borda); padding: 9px 14px; }
tbody tr:last-child td { border-bottom: 0; }
.link-cliente {
  background: none; border: 0; padding: 0; color: var(--cor-link);
  font-weight: 600; text-decoration: underline; cursor: pointer;
}
.link-cliente:hover { color: var(--cor-link-ponteiro); }
form { background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda);
       border-radius: var(--raio); box-shadow: var(--sombra-ficha); padding: 1rem 1.25rem; }
label { display: block; margin-top: .6rem; font-weight: 600; font-size: .9rem; }
input, select, textarea {
  font-family: var(--fonte-corpo); background: var(--cor-campo); color: var(--cor-texto);
  border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: .4rem .6rem;
  width: 100%; margin-top: .2rem;
}
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 .5rem 0 0; vertical-align: middle; }
fieldset { border: 1px solid var(--cor-borda); border-radius: 4px; margin-top: .6rem; }
.aviso-carregando { color: var(--cor-texto-secundario); font-style: italic; }

/* Cores de situação (verde=em dia, âmbar=alerta, vermelho=parou de capturar,
   cinza=inativo, azul=buscando agora). Elas MUDAM com o tema, pela mesma razão
   que antes as mantinha fixas: sobre o fundo escuro da paleta nova o vermelho
   do claro some. Os valores estão nos tokens --cor-status-*; aqui não entra
   literal. */
.status-em_dia { color: var(--cor-status-verde); }
.status-alerta_certificado { color: var(--cor-status-ambar); }
.status-falha_persistente { color: var(--cor-status-vermelho); }
.status-inativo { color: var(--cor-texto-secundario); }
.status-buscando_agora { color: var(--cor-status-azul); }
.resultado-ok { color: var(--cor-status-verde); }
.resultado-alerta { color: var(--cor-status-ambar); }
.resultado { border: 1px solid var(--cor-borda); border-radius: 6px; padding: .75rem 1rem;
             margin-top: 1rem; font-weight: 600; }

.status-motivo { display: block; font-size: .82rem; color: var(--cor-texto-secundario); }

/* Certificado (coluna da lista de clientes e tela "Certificados"): mesmas cores
   de situação da regra acima, que também mudam com o tema — verde com mais de
   30 dias, âmbar com 30 ou menos (ou em tolerância), vermelho vencido, revogado
   ou sem certificado. */
.cert-ok { color: var(--cor-status-verde); }
.cert-alerta { color: var(--cor-status-ambar); }
.cert-falha { color: var(--cor-status-vermelho); }
.cert-validade { font-weight: 600; white-space: nowrap; }
.cert-detalhe { display: block; font-size: .82rem; color: var(--cor-texto-secundario); }

/* "Buscar agora": spinner da etapa, botão cinza durante a busca, resumo na linha */
.spinner {
  display: inline-block; width: .85em; height: .85em; margin-right: .4em;
  vertical-align: -.1em; border: 2px solid var(--cor-borda); border-top-color: var(--cor-status-azul);
  border-radius: 50%; animation: girar-spinner .8s linear infinite;
}
@keyframes girar-spinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.botao.buscar-agora:disabled {
  background: var(--cor-borda); color: var(--cor-texto-secundario); border-color: var(--cor-borda);
}
.status-resumo-busca { display: block; font-size: .82rem; margin-top: .15rem; }

/* Modal de detalhe do cliente */
.modal-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.45); }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
         width: min(680px, 92vw); max-height: 86vh; overflow-y: auto;
         background: var(--cor-fundo-elevado); color: var(--cor-texto);
         border-radius: 8px; padding: 1.25rem 1.5rem;
         box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.modal-cabecalho { display: flex; justify-content: space-between; align-items: center; }
.modal-cabecalho h2 { font-family: var(--fonte-titulo); color: var(--cor-titulo); }
.modal-cabecalho button { font-size: 1.4rem; background: none; border: 0; cursor: pointer;
                           color: var(--cor-texto); }
.bloco-detalhe { margin-top: 1.1rem; border-top: 1px solid var(--cor-borda); padding-top: .6rem; }
.bloco-detalhe h3, .grafico-7-dias h3 { font-size: .95rem; margin: 0 0 .5rem;
                                         color: var(--cor-texto-secundario); }
.info-linha { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.info-rotulo { color: var(--cor-texto-secundario); }
.info-valor { font-weight: 600; text-align: right; }
.info-linha.ok .info-valor { color: var(--cor-status-verde); }
.info-linha.alerta .info-valor { color: var(--cor-status-ambar); }
.info-linha.falha .info-valor { color: var(--cor-status-vermelho); }
.info-linha.inativo .info-valor { color: var(--cor-texto-secundario); }

.grafico-7-dias { margin-top: 1.1rem; border-top: 1px solid var(--cor-borda); padding-top: .6rem; }
.barra-linha { display: grid; grid-template-columns: 13rem 1fr 3rem;
               align-items: center; gap: .6rem; padding: .18rem 0; }
.barra-trilho { display: block; height: 14px; background: var(--cor-borda); border-radius: 7px; }
.barra-preenchimento { display: block; height: 100%; border-radius: 7px; min-width: 2px; }
.barra-preenchimento.canal-portal_nacional { background: var(--cor-status-azul); }
.barra-preenchimento.canal-sefaz { background: var(--cor-status-verde); }
.barra-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.grafico-vazio { color: var(--cor-texto-secundario); margin: 0; }

/* Erros de formulário ao lado do campo (Step 5) */
.erro-campo, .erro-geral { color: var(--cor-status-vermelho); font-size: .85rem; display: block; }
[aria-invalid="true"] { outline: 2px solid var(--cor-status-vermelho); }
.erro { color: var(--cor-status-vermelho); }
#aviso-cliente { color: var(--cor-status-vermelho); margin: .25rem 0 0; }
#aviso-cliente:empty { display: none; }

/* Selos de documento (Step 6) */
.selo { font-weight: 700; letter-spacing: .04em; padding: .35rem .6rem; border-radius: 4px;
        display: inline-block; margin: 0 0 .5rem; }
.selo-denegado { background: var(--cor-status-vermelho); color: var(--cor-selo-texto); }
.selo-cancelado { background: #6b6b6b; color: #fff; }
.ficha-documento { margin-top: .5rem; }
.mensagem-resultado, .aviso-resultado { margin: .4rem 0; }

.inativo-indicador { display: block; font-size: .8rem; color: var(--cor-texto-secundario); }

/* Bloco de canceladas da tela Documentos (Tarefa 17) */
.tabela-canceladas { width: 100%; border-collapse: collapse; }
.tabela-canceladas th, .tabela-canceladas td {
  padding: .4rem .5rem; border-bottom: 1px solid var(--cor-borda); text-align: left;
}
.tabela-canceladas td:nth-child(3), .tabela-canceladas td:nth-child(4) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.marca-indisponivel {
  margin-left: .4rem; font-size: .8rem; color: var(--cor-texto-secundario);
  border: 1px dashed var(--cor-borda); border-radius: 3px; padding: 0 .3rem;
}
.acoes-do-lote { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.paginacao { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
#bloco-passivo > summary { cursor: pointer; font-weight: 600; margin: 1rem 0 .5rem; }
.contexto-do-cabecalho { margin: .2rem 0 .8rem; color: var(--cor-texto-secundario); }
.contexto-do-cabecalho:empty { display: none; }

/* Os dois botoes de ciclo ficam FORA de <main> e nao herdam padding
   nenhum: sem o padding aqui eles nascem colados na borda esquerda da
   janela. O 1.5rem e o mesmo de .cards-resumo (linha 116), que e o irmao
   imediato e a referencia de alinhamento -- NAO a tabela, que fica dentro
   de <main> e e centralizada. */
.acoes-painel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

/* Tela Documentos */
.total-deposito { font-weight: 600; font-variant-numeric: tabular-nums; }
#arvore-documentos details { margin: .25rem 0; }
#arvore-documentos details details { margin-left: 1.25rem; }
#arvore-documentos summary { cursor: pointer; padding: .2rem 0; }
.arvore-vazio { color: var(--cor-texto-secundario); margin: .2rem 0 .2rem 1.25rem; }
.marca { display: inline-block; font-size: .8rem; padding: .1rem .45rem; margin: 0 .3rem .2rem 0;
         border: 1px solid var(--cor-borda); border-radius: 4px; color: var(--cor-texto-secundario); }
.celula-situacao .selo { font-size: .8rem; margin: 0 .3rem .2rem 0; }
.chave-acesso { font-family: monospace; user-select: all; overflow-wrap: anywhere; }
.aviso-download { display: block; margin-top: .25rem; font-size: .85rem; }
.aviso-download[hidden] { display: none; }
.linha-pacote { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .35rem 0;
                border-bottom: 1px solid var(--cor-borda); }
.atalho-documentos { display: inline-block; margin-top: .8rem; }

/* ---- Visão geral (Tarefa 13) ---- */
.faixa-veredito {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-ficha);
  padding: 18px 20px;
}
/* O ponto colorido é o farol do veredito; o cinza é o padrão. */
.faixa-veredito .farol {
  width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 7px;
  background: var(--cor-texto-secundario); box-shadow: 0 0 0 4px var(--cor-borda);
}
#veredito[data-nivel="em_dia"] .farol { background: var(--cor-status-verde); }
#veredito[data-nivel="pede_atencao"] .farol { background: var(--cor-status-ambar); }
#veredito[data-nivel="parado"] .farol { background: var(--cor-status-vermelho); }
#veredito[data-nivel="cinza"] .farol { background: var(--cor-texto-secundario); }
.veredito-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }

#veredito-titulo {
  font-family: var(--fonte-marca);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.15;
  margin: 0;
  color: var(--cor-titulo);
}
#veredito-detalhe { margin: 0; color: var(--cor-texto-secundario); font-size: 12.5px; }
#veredito-carimbo,
#pendencias-carimbo,
#movimento-carimbo {
  margin: 0;
  font-size: 11.5px;
  color: var(--cor-texto-secundario);
}
#pendencias-carimbo:empty, #movimento-carimbo:empty, #veredito-carimbo:empty { display: none; }

.faixa-numeros {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--cor-borda);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.faixa-numeros .quadro {
  background: var(--cor-fundo-elevado);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.faixa-numeros .rotulo {
  display: block;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--cor-texto-secundario);
}
#numeros .valor {
  order: -1;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* O único número acionável, no mesmo tom de link e nome de cliente clicável
   (§5.5) — é o `--cor-link`, não o champanhe claro do menu. */
#quadro-canceladas .valor { color: var(--cor-link); }
#quadro-vencimento[data-gravidade="alerta"] .valor { color: var(--cor-status-ambar); }
#quadro-vencimento[data-gravidade="falha"] .valor { color: var(--cor-status-vermelho); }
.contagem-ao-lado { margin-left: 6px; color: var(--cor-status-vermelho); }
.segunda-linha { margin: 4px 0 0; font-size: 12px; color: var(--cor-status-vermelho); }

#pendencias-lista, #movimento-lista { list-style: none; margin: 0; padding: 0; }
#pendencias-lista, #movimento-lista { display: flex; flex-direction: column; gap: 8px; }
.linha-pendencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-ficha);
}
.texto-da-linha { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 240px; }
.texto-da-linha b { font-weight: 600; font-size: 13px; }
.texto-da-linha span { font-size: 11.5px; color: var(--cor-texto-secundario); }
.linha-pendencia .selo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 9px;
  margin: 0;
  border-radius: 999px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid currentColor;
}
.linha-pendencia .selo[data-gravidade="falha"] { color: var(--cor-status-vermelho); }
.linha-pendencia .selo[data-gravidade="alerta"] { color: var(--cor-status-ambar); }
.linha-pendencia .destino, #ver-todas {
  background: transparent; color: var(--cor-texto); border-color: var(--cor-borda); font-weight: 500;
}
.linha-pendencia .destino:hover, #ver-todas:hover {
  background: var(--cor-fundo); color: var(--cor-texto); border-color: var(--cor-texto-secundario);
}
#ver-todas { align-self: flex-start; }

/* inicio do bloco do movimento */
/* "Movimento de hoje" nunca pinta alarme: nada aqui pede providência (§5.6).
   Os dois marcadores em volta são a âncora do teste — sem acento de propósito,
   para o recorte não depender de codificação. */
.linha-movimento {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-ficha);
}
.linha-movimento .canal { font-weight: 600; font-size: 13px; color: var(--cor-texto); }
/* fim do bloco do movimento */

@media (max-width: 760px) {
  .faixa-numeros { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A linha do impedimento na tela Clientes (§5.2.2). O grau chega apurado do
   servidor; aqui só há a cor, e ela sai dos tokens do tema — nunca de literal,
   pela mesma regra das outras oito famílias de situação (§3.1). */
.impedimento-vermelho { color: var(--cor-status-vermelho); font-weight: 600; }
.impedimento-ambar    { color: var(--cor-status-ambar); }

/* ---- Tarja de infraestrutura (§9.4, Tarefa 16) ---- */
.tarja-infraestrutura {
  background: var(--cor-status-ambar); color: var(--cor-selo-texto);
  padding: 10px 16px; text-align: center; font-weight: 600;
}