/* ===========================================================================
   CT MULTAS — COMPONENTES v3
   ---------------------------------------------------------------------------
   Depende de tokens.css. Linkar nesta ordem:
     /fontes/fontes.css  ->  tokens.css  ->  componentes.css

   TRES REGRAS QUE ESTA FOLHA NAO PODE QUEBRAR:

   1. NENHUM HEX. Se um valor de cor aparecer aqui, o sistema ja comecou a
      apodrecer de novo. As unicas excecoes sao a placa Mercosul e o cracha
      da CNH, que imitam objetos reais e por isso tem cor propria, literal,
      documentada no proprio bloco.

   2. NENHUMA REGRA DE `display` COM !important. Um redesign anterior foi
      desligado porque tinha 42 delas e reacendia botao escondido por
      permissao. Quem some e quem aparece e decidido pela logica de acesso,
      nunca pelo CSS. O unico [hidden]{display:none!important} do sistema
      vive no tokens.css e existe para PROTEGER o esconder.

   3. NENHUM SELETOR POR ID DE SECAO. O index.html de hoje tem 44 blocos do
      tipo `#algumTab label`, `#algumTab input`, cobrindo 15 das 16 abas.
      A decima sexta ficou para tras. Estilo vem da classe do componente,
      nunca do id do lugar onde ele esta.

   Indice:
      1. Casca: barra, rail, topo, grade
      2. Busca global
      3. Botao
      4. Campo
      5. Etiqueta de estado e chip de filtro
      6. Card de processo, placa, cracha, trilho
      7. Tabela, ordenacao, paginacao
      8. Abas
      9. Modal e gaveta
     10. Aviso, tooltip, avatar
     11. Linha do tempo
     12. Progresso
     13. Notificacao efemera
     14. Os quatro estados: vazio, carregando, erro, sucesso
     15. Indicador (stat tile)
     16. Responsividade
     17. Componentes de estado das seis cores (tag, selo, tile, trilho, urgencia)
   =========================================================================== */


/* ===========================================================================
   1. CASCA
   =========================================================================== */

/* --- 1.1 Barra da casa -----------------------------------------------------
   "A casa e a barra; o sistema e o que ela emoldura."
   Uma altura so. Antes eram seis copias com 64, 72 e 88px, logo de 40 a 76px
   e quatro pontos de quebra diferentes.

   FUNDO CLARO desde 08/08/2026 (docs/cabecalho-portal-proposta.html, variante
   A). "Claro" quer dizer A SUPERFICIE DO SISTEMA, e nao a cor branca: no tema
   escuro a superficie e escura e a barra acompanha. Cabecalho branco fixo
   dentro de uma tela escura e uma lanterna apontada para quem trabalha a
   noite.

   O PRETO SEPARAVA SOZINHO; O CLARO NAO. Dai as duas coisas que a barra preta
   dispensava e esta precisa: a borda de 1px embaixo e a sombra curta. Sem
   elas o cabecalho encosta na pagina e vira a mesma superficie.

   ELA NAO VESTE .ct-inv, e isto e o que faz a barra ser clara. Ver a nota da
   secao 3 do tokens.css: enquanto .ct-barra estivesse naquele seletor,
   --ct-superficie resolveria para --ct-inverso e a linha de baixo pintaria
   preto, sem erro nenhum.

   COR DE SISTEMA VIVE SO AQUI. Dentro da pagina, cor quer dizer ESTADO — azul
   e "processo novo", verde e "conferido", vermelho e "pendencia". A barra e a
   unica superficie do sistema em que uma cor responde "onde eu estou" em vez
   de "como isto esta". Sao dois vocabularios; misturar os dois faz os dois
   pararem de informar, porque um trilho verde num card passaria a poder
   significar "Central" OU "conferido" e ninguem mais saberia qual.

   NENHUM BOTAO DAQUI E PRINCIPAL. Sair, o tema e os icones ficam no .ct-btn
   cru — superficie, contorno, tinta-2. O botao principal e uma promessa de "e
   isto que voce veio fazer aqui", e ninguem abre o sistema para sair dele.

   CUIDADO COM A PALAVRA: neste sistema `.ct-btn--fantasma` NAO e o botao
   discreto, e sim a MOSTARDA CHEIA (secao 3, os quatro degraus). Quem ler
   "botao fantasma no cabecalho" e aplicar aquela classe pinta a barra inteira
   de mostarda. O discreto aqui e o .ct-btn sem modificador nenhum.           */
.ct-barra {
  position: sticky; top: 0; z-index: var(--ct-z-barra);
  display: flex; align-items: center; gap: var(--ct-sp-4);
  min-height: 64px;
  padding: 0 var(--ct-sp-5);
  background: var(--ct-superficie);
  color: var(--ct-tinta);
  border-bottom: 1px solid var(--ct-linha);
  box-shadow: var(--ct-sombra-1);
}
/* A linha de 2px: e ela que diz em qual sistema a pessoa esta. Cada sistema
   entra pelo --sis-g, escrito no proprio <header>; sem ele, a casa se veste
   da marca.
   VERMELHO NUNCA ENTRA AQUI. Ele e pendencia, e um sistema inteiro pintado de
   alarme apagaria o alarme de verdade — que e o unico contador que pulsa. */
.ct-barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--sis-g, var(--g-marca));
}
.ct-barra__fim { margin-left: auto; display: flex; align-items: center; gap: var(--ct-sp-2); }

/* --- 1.1.1 A marca em relevo -----------------------------------------------
   COMPARTILHADA entre a barra da equipe e o cabecalho do Meu Recurso. Ela
   nasceu dentro do meurecurso.html no passo 3 e subiu para ca em 08/08/2026:
   duas implementacoes do mesmo cabecalho e o comeco de duas casas.

   O RELEVO E drop-shadow, E NAO box-shadow, e a razao e o formato: a nossa
   marca e um PNG/SVG com fundo vazado, e box-shadow desenharia a sombra do
   QUADRADO em volta dela. Com a inicial de um parceiro no lugar, o recipiente
   e um circulo cheio e o drop-shadow segue a mesma silhueta. Um valor serve
   aos dois casos so por ser projetado.                                       */
.ct-marca { display: flex; align-items: center; gap: var(--ct-sp-3); min-width: 0; flex: 0 0 auto; }
/* 52 e não 42 (pedido da dona, 08/08/2026). A barra tem 64px de altura, então
   52 é o maior losango que ainda deixa respiro em cima e embaixo — a 56 ele
   encosta na borda e o cabeçalho fica apertado. */
.ct-marca__logo {
  width: 52px; height: 52px; flex: none; display: block;
  filter: drop-shadow(0 3px 5px rgba(27, 27, 25, .28));
  transition: transform var(--ct-t-padrao) var(--ct-mov-mola),
              filter var(--ct-t-padrao) var(--ct-mov);
}
.ct-marca:hover .ct-marca__logo,
.ct-marca:hover .logo { transform: translateY(-1px) rotate(-2deg);
  filter: drop-shadow(0 6px 10px rgba(27, 27, 25, .34)); }
/* O GANCHO DO PARCEIRO. O parceiro-marca.js troca o PRIMEIRO `.logo` do
   documento pela marca de quem trouxe o cliente; quando o parceiro nao tem
   logo, ele poe a inicial como TEXTO e ai o circulo colorido volta a fazer
   falta. Por isso a regra olha para o nosso <img> (`:has`), e nao para a
   pagina inteira. Os --marca* sao escritos em tempo de execucao por aquele
   modulo, e por isso levam fallback aqui. */
.ct-marca .logo {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 20px; font-weight: var(--ct-peso-medio);
  background: var(--marca, var(--ct-dourado-fill));
  color: var(--marca-texto, var(--ct-dourado-sobre));
  overflow: hidden;
  filter: drop-shadow(0 3px 5px rgba(27, 27, 25, .28));
  transition: transform var(--ct-t-padrao) var(--ct-mov-mola),
              filter var(--ct-t-padrao) var(--ct-mov);
}
.ct-marca .logo:has(> .marca-ct) { background: none; color: inherit; }
.ct-marca .logo .marca-ct { width: 100%; height: 100%; object-fit: contain; display: block; }
.ct-marca__txt { min-width: 0; }
.ct-marca__nome {
  display: block; font-weight: var(--ct-peso-forte); font-size: var(--ct-fs-corpo);
  line-height: 1.2; white-space: nowrap; color: var(--ct-tinta);
}
/* O ROTULO DO SISTEMA. Era --ct-amarelo, que sobre o branco mede 1,62:1 e
   sobre o papel 1,38:1 — ilegivel assim que a barra deixou de ser preta.
   Agora e o tom FORTE do sistema aberto (--sis-f), e o dourado 4,67:1 quando
   nao ha sistema. Amarelo nesta barra so existe dentro do losango da marca. */
.ct-marca__sis {
  display: flex; align-items: center; gap: var(--ct-sp-2);
  font-size: var(--ct-fs-rotulo); color: var(--sis-f, var(--ct-dourado));
  font-family: var(--ct-mono); text-transform: uppercase;
  letter-spacing: var(--ct-ls-rotulo); white-space: nowrap; line-height: 1.5;
}
.ct-marca__pt { width: 7px; height: 7px; border-radius: 2px; flex: none;
  background: var(--sis-g, var(--g-marca)); }

/* A BARRA DA PAGINA PUBLICA (o Meu Recurso). Mesma pele, outro conteudo, e as
   quatro diferencas sao todas de proposito:

   NAO GRUDA NO TOPO. A pagina do cliente e curta e se le no celular; um
   cabecalho fixo comeria a primeira dobra sem dar nada em troca.

   CENTRALIZA. Aqui dentro ha UMA coisa — a marca. Nao e uma barra de
   ferramentas com busca, contadores e sair.

   A LINHA DE 2px E DO PARCEIRO, quando ha um. Nas telas de equipe ela diz o
   SISTEMA; aqui o cliente nao conhece os sistemas da casa, e a pagina e de
   quem trouxe esse cliente. Sem parceiro, o dourado da casa.

   O ROTULO FICA CINZA, e nao no dourado das telas de equipe. Nao e capricho:
   este cabecalho pode estar vestido com a cor de um parceiro qualquer, e cor
   arbitraria nao se garante como TEXTO. E por isso que --marca-texto existe
   para a letra SOBRE a cor dele, e nunca para a letra ao lado dela.          */
.ct-barra--publica {
  position: static; justify-content: center;
  padding: 0 var(--ct-sp-4);
  --sis-g: var(--marca, var(--g-marca));
  --sis-f: var(--ct-tinta-3);
}

/* --- 1.1.2 Contadores da barra ---------------------------------------------
   ATE TRES. O limite e de leitura e nao de espaco: a partir do quarto numero
   a barra vira painel, e a pessoa passa a ter de procurar qual deles mudou.

   CONTADOR QUE A TELA NAO SABE CALCULAR NAO ENTRA. Numero de enfeite e pior
   do que numero nenhum: ele parece um fato, e as decisoes se apoiam nele.
   O portal, por exemplo, so sabe UM numero (avisos nao lidos) — e por isso
   mostra um so, mesmo cabendo tres.

   SO O DE PENDENCIA PULSA. Se dois pulsam, os dois param de chamar atencao.
   E por isso tambem que --alerta nunca vira cor de sistema na linha de 2px.

   REMEDIDOS SOBRE A BARRA CLARA em 08/08/2026 — os tons de tokens.css secao 3
   foram medidos sobre o PRETO e nao valem mais aqui. Texto sobre o proprio
   preenchimento, tema claro: novo 5,87  aguar 14,42  ok 5,93  alerta 6,48
   decurso 7,00  site 5,30. No escuro, de 8,23 a 11,26. Todos passam.
   O preenchimento em si da 1,10 a 1,20 contra a barra, de proposito: quem
   delimita a pastilha e a borda mais o texto, e um fundo forte na barra
   competiria com a marca. */
.ct-contadores {
  display: flex; align-items: center; gap: var(--ct-sp-2);
  margin-left: auto; flex: 0 0 auto;
}
/* Com contadores, e a fila deles que encosta na direita — senao o espaco
   livre se divide entre os dois grupos e eles descolam no meio da barra. */
.ct-barra:has(.ct-contadores) .ct-barra__fim { margin-left: 0; }
/* ELE INFORMA, NAO ACIONA — por isso nao tem cursor de mao nem realce de
   hover. Um contador da barra costuma somar filas de sistemas diferentes, e
   entao nao existe UM lugar para onde o clique levaria. Pastilha com cara de
   botao que nao faz nada gasta a confianca de quem clicou nela uma vez. */
.ct-contador {
  display: inline-flex; align-items: center; gap: var(--ct-sp-2);
  padding: 5px 12px 5px 9px; border-radius: var(--ct-r-pill);
  font-size: var(--ct-fs-meta); font-weight: var(--ct-peso-forte);
  white-space: nowrap;
  background: var(--ct-rebaixo); border: 1px solid var(--ct-linha);
  color: var(--ct-tinta-2);
}
.ct-contador__pt { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* --- 1.1.2b O medidor: de onde vem a fila ----------------------------------
   Uma rosca de dois pedaços, dizendo quanto daquele número é do Site 1
   (Multas) e quanto é do Site 2 (CNH), com a legenda escrita ao lado.

   ERA UMA BARRA DE UM TOM SÓ ATÉ 08/08/2026, e virou rosca em duas cores por
   ordem da dona, que mandou o desenho de referência. O que mudou de verdade
   não foi a forma: foi a COR passar a significar SISTEMA.

   AS DUAS CORES SÃO MEDIDAS, NÃO ESCOLHIDAS. O par honesto era a cor de cada
   sistema — azul do Site 1 e roxo do Site 2 — e ele reprova: lado a lado dão
   ΔE 11,4 no pior caso dos dois temas (protanopia, escuro), abaixo do piso de
   15 em que duas cores ainda se distinguem. Roxo e azul encostados são a mesma
   cor. Rodei os 15 pares possíveis das seis famílias, nos DOIS temas, contra
   os DOIS fundos de pastilha; dez passam e o melhor de longe é azul+laranja:
   pior ΔE 58,6 e pior contraste 4,88 (piso 3, WCAG 1.4.11).

   ENTÃO O AZUL É VERDADE E O LARANJA É EMPRÉSTIMO. Azul é mesmo a cor do
   Site 1 (--e-novo, o que o cabeçalho já veste em Multas). O laranja está no
   lugar do roxo do CNH porque o roxo não pode encostar no azul — e é por isso
   que o rótulo continua escrito ao lado do ponto. Quem lê "CNH" não precisa
   saber que aquela laranja é de empréstimo; quem lê só a cor leria errado, e
   por isso a cor nunca vem sozinha.

   VERMELHO FOI DESCARTADO com nota melhor (ΔE 55,5): ele é pendência neste
   sistema, e a pastilha "em atenção" já é vermelha e pulsa. Segmento vermelho
   dentro de alarme vermelho apaga o alarme.

   TRÊS CANAIS, E NENHUM É COR SOZINHA: o tamanho da fatia, o número escrito e
   a ordem (Multas sempre primeiro). Quem imprime em preto e branco, quem tem
   daltonismo e quem olha de longe continuam lendo os três.

   A ROSCA É `conic-gradient` COM MÁSCARA, e não SVG, porque ela precisa de uma
   variável só (--med-fatia, a porcentagem do primeiro pedaço) para o portal
   escrever. As três variáveis têm valor aqui na folha de propósito: sem isso,
   um `var()` órfão descarta a declaração inteira e a rosca não pinta nada. */
.ct-contador__rosca {
  --med-um:    var(--e-novo-f);   /* Multas — a cor de verdade do Site 1      */
  --med-dois:  var(--e-site-f);   /* CNH — emprestada; o roxo dele reprovou   */
  --med-fatia: 50;                /* % do primeiro pedaço; o portal reescreve */
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: conic-gradient(
    var(--med-um) 0 calc(var(--med-fatia) * 1%),
    var(--med-dois) calc(var(--med-fatia) * 1%) 100%);
  -webkit-mask: radial-gradient(closest-side, #0000 56%, #000 57%);
          mask: radial-gradient(closest-side, #0000 56%, #000 57%);
}
/* Fila vazia não desenha rosca nenhuma — uma rosca toda apagada parece dado
   que não carregou, e este medidor aparece justamente para dizer que carregou. */
.ct-contador__quebra {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  font-weight: var(--ct-peso-medio); white-space: nowrap;
}
/* A legenda repete a cor da fatia num ponto de 6px, como no desenho que a dona
   mandou. Ele é o separador: com o ponto na frente de cada número, o "·" que
   havia aqui virava um terceiro sinal dizendo a mesma coisa. */
.ct-contador__qpt {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--med-um, var(--e-novo-f));
}
.ct-contador__qpt--dois { background: var(--med-dois, var(--e-site-f)); margin-left: 4px; }
.ct-contador__n { font-family: var(--ct-mono); font-variant-numeric: tabular-nums; }
.ct-contador__r { font-weight: var(--ct-peso-medio); }
/* O FUNDO DA PASTILHA SAI DA PRÓPRIA COR DO TEXTO, diluída (09/08/2026).

   Era `--e-*-s` (o tom suave) no fundo e `--e-*-b` na borda. Enquanto a barra
   foi CLARA isso estava certo. Com a barra preta, quebrou de um jeito que a
   dona viu na tela antes de qualquer teste: o `.ct-inv` redefine só o `-f`, o
   tom de TEXTO — o `-s` e o `-b` seguem o tema da PÁGINA e continuavam sendo
   os tons de papel branco. Resultado: pastilha quase BRANCA na barra preta, e,
   pior, o texto claro do escopo por cima dela — o grupo "a conferir · Multas ·
   CNH" ficou ilegível, e o "em atenção" virou um bloco rosa.

   Diluir o próprio `-f` resolve os dois lados de uma vez, sem tabela nova:
   sobre papel branco o `-f` é o tom fechado e uma pitada dele dá o mesmo rosa
   claro de antes; dentro do escopo o `-f` já é o tom claro, e a mesma pitada
   sobre o preto dá a pastilha discreta. A cor do texto continua sendo o `-f`
   inteiro, que é o tom medido para o fundo de cada caso.

   AS DUAS PORCENTAGENS SÃO MEDIDAS. O fundo de 18% fica de propósito quase
   invisível (1,43 a 1,60 contra a barra): quem desenha a pastilha é a BORDA, e
   é ela que precisa passar no piso de 3:1 da WCAG 1.4.11 para elemento não
   textual. A 34% ela dava 2,17 — reprovava. A 55% dá de 3,72 a 5,06, e o texto
   fica entre 6,72 e 9,00. */
.ct-contador--novo    { background: color-mix(in srgb, var(--e-novo-f) 18%, transparent);    border-color: color-mix(in srgb, var(--e-novo-f) 55%, transparent);    color: var(--e-novo-f); }
.ct-contador--aguar   { background: color-mix(in srgb, var(--e-aguar-f) 18%, transparent);   border-color: color-mix(in srgb, var(--e-aguar-f) 55%, transparent);   color: var(--e-aguar-f); }
.ct-contador--ok      { background: color-mix(in srgb, var(--e-ok-f) 18%, transparent);      border-color: color-mix(in srgb, var(--e-ok-f) 55%, transparent);      color: var(--e-ok-f); }
.ct-contador--decurso { background: color-mix(in srgb, var(--e-decurso-f) 18%, transparent); border-color: color-mix(in srgb, var(--e-decurso-f) 55%, transparent); color: var(--e-decurso-f); }
.ct-contador--site    { background: color-mix(in srgb, var(--e-site-f) 18%, transparent);    border-color: color-mix(in srgb, var(--e-site-f) 55%, transparent);    color: var(--e-site-f); }
.ct-contador--alerta  { background: color-mix(in srgb, var(--e-alerta-f) 18%, transparent);  border-color: color-mix(in srgb, var(--e-alerta-f) 55%, transparent);  color: var(--e-alerta-f); }
.ct-contador--novo    .ct-contador__pt { background: var(--e-novo); }
.ct-contador--aguar   .ct-contador__pt { background: var(--e-aguar); }
.ct-contador--ok      .ct-contador__pt { background: var(--e-ok); }
.ct-contador--decurso .ct-contador__pt { background: var(--e-decurso); }
.ct-contador--site    .ct-contador__pt { background: var(--e-site); }
/* O UNICO QUE PULSA. Nome proprio: `ct-pulsar` (secao 12.3) ja existe e e
   outra coisa — opacidade, para esqueleto de carga. */
.ct-contador--alerta .ct-contador__pt {
  background: var(--e-alerta); animation: ct-halo 2.2s ease-in-out infinite;
}
/* Zero nao pulsa. Alarme sobre coisa nenhuma e o jeito mais rapido de ensinar
   a equipe a ignorar o alarme. */
.ct-contador[data-zero] .ct-contador__pt { animation: none; }
@keyframes ct-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
  70%      { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
}
/* A BARRA TEM UMA LARGURA SO, e o que sai primeiro e o que menos custa: com a
   busca em 460px, a marca e o fim, as pastilhas so cabem em tela de mesa.
   Elas informam; o menu lateral tem os mesmos numeros fila a fila.
   O CORTE SUBIU DE 1180 PARA 1400 quando elas ganharam o medidor e a quebra
   por sistema: a pastilha quase dobrou de largura, e espremida ela empurrava a
   busca para 130px — trocando um numero a mais por uma busca inutilizavel. */
@media (max-width: 1400px) { .ct-contadores { display: none; } }

/* --- 1.1.3 A trilha: onde eu estou -----------------------------------------
   Segunda linha, logo abaixo da barra: "sistema › painel", e o selo de
   gravacao na ponta direita.

   ELA VIVE SOBRE --ct-rebaixo, e nao sobre a superficie, porque a barra ja e
   superficie: duas faixas claras coladas viram uma faixa alta so, e a pessoa
   perde a divisa entre "a casa" e "onde estou dentro dela".

   O SELO SO APARECE QUANDO HA O QUE GRAVAR. Numa tela que nao escreve nada,
   "tudo salvo" e uma promessa sobre coisa nenhuma.                           */
/* ALTURA FIXA, e nao padding: quem monta a casca precisa saber quanto o topo
   ocupa para posicionar gaveta e veu abaixo dele. 34px com box-sizing:
   border-box ja inclui a borda, entao barra + trilha = 64 + 34 = 98 exatos.
   Trocar este numero obriga a trocar o --casca-topo de quem a usa. */
.ct-trilha {
  display: flex; align-items: center; gap: var(--ct-sp-3);
  height: 34px; padding: 0 var(--ct-sp-5);
  background: var(--ct-rebaixo);
  border-bottom: 1px solid var(--ct-linha);
  font-size: var(--ct-fs-meta); color: var(--ct-tinta-3);  /* 4,92 sobre o rebaixo */
}
.ct-trilha[hidden] { display: none; }
.ct-trilha b { font-weight: var(--ct-peso-forte); color: var(--ct-tinta); }
.ct-trilha__sep { color: var(--ct-linha-forte); }
.ct-trilha__selo {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--ct-sp-2);
  border-radius: var(--ct-r-pill); padding: 3px 10px;
  font-size: var(--ct-fs-rotulo); font-weight: var(--ct-peso-forte);
  background: var(--e-ok-s); color: var(--e-ok-f); border: 1px solid var(--e-ok-b);
}
/* Sujo e ESPERA, e nao alarme: nada se perdeu ainda. Vermelho aqui gastaria o
   alarme na situacao mais comum da tela. */
.ct-trilha__selo--sujo {
  background: var(--e-aguar-s); color: var(--e-aguar-f); border-color: var(--e-aguar-b);
}

/* --- 1.2 Menu lateral recolhivel ------------------------------------------ */
.ct-rail {
  position: fixed; inset: 0 auto 0 0; z-index: var(--ct-z-rail);
  width: 260px;
  display: flex; flex-direction: column; gap: var(--ct-sp-1);
  padding: var(--ct-sp-5) var(--ct-sp-3);
  background: var(--ct-superficie);
  border-right: 1px solid var(--ct-linha);
  overflow-y: auto;
  transition: width var(--ct-t-lento) var(--ct-mov-mola);
}
[data-rail="recolhido"] .ct-rail { width: 72px; }
.ct-rail__grupo {
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  letter-spacing: var(--ct-ls-rotulo); text-transform: uppercase;
  color: var(--ct-tinta-3);
  padding: var(--ct-sp-4) var(--ct-sp-3) var(--ct-sp-1);
  white-space: nowrap;
  transition: opacity var(--ct-t-padrao) var(--ct-mov);
}
.ct-rail__item {
  position: relative;
  display: flex; align-items: center; gap: var(--ct-sp-3);
  min-height: var(--ct-alvo);
  padding: var(--ct-sp-2) var(--ct-sp-3);
  border: 0; border-radius: var(--ct-r-sm);
  background: none; color: var(--ct-tinta-2);
  font: inherit; font-size: var(--ct-fs-corpo); font-weight: var(--ct-peso-medio);
  text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--ct-t-rapido) var(--ct-mov), color var(--ct-t-rapido) var(--ct-mov);
}
.ct-rail__item svg { width: 20px; height: 20px; flex: none; }
.ct-rail__item:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }
.ct-rail__item[aria-current="page"] {
  background: var(--ct-rebaixo); color: var(--ct-tinta); font-weight: var(--ct-peso-forte);
}
/* Marcador dourado: destaque que NAO e acionavel. Por isso nao e lime. */
.ct-rail__item[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(var(--ct-sp-3) * -1);
  top: var(--ct-sp-2); bottom: var(--ct-sp-2); width: 3px;
  background: var(--ct-dourado-fill); border-radius: 0 3px 3px 0;
}
.ct-rail__conta { margin-left: auto; font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); font-variant-numeric: tabular-nums; }
.ct-rail__texto { transition: opacity var(--ct-t-padrao) var(--ct-mov); }
[data-rail="recolhido"] .ct-rail__texto,
[data-rail="recolhido"] .ct-rail__conta,
[data-rail="recolhido"] .ct-rail__grupo { opacity: 0; pointer-events: none; }

/* --- 1.3 Area principal e grade de 12 colunas ----------------------------- */
.ct-principal { margin-left: 260px; min-width: 0; transition: margin-left var(--ct-t-lento) var(--ct-mov-mola); }
[data-rail="recolhido"] .ct-principal { margin-left: 72px; }
.ct-conteudo { padding: var(--ct-pad-secao); max-width: var(--ct-largura-max); }

.ct-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ct-gap-grade); }
.ct-col-3  { grid-column: span 3; }
.ct-col-4  { grid-column: span 4; }
.ct-col-6  { grid-column: span 6; }
.ct-col-8  { grid-column: span 8; }
.ct-col-12 { grid-column: span 12; }

/* --- 1.4 Cabecalho de pagina ---------------------------------------------- */
.ct-titulo-pagina {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--ct-sp-5); flex-wrap: wrap; margin-bottom: var(--ct-sp-5);
}
.ct-titulo-pagina p { color: var(--ct-tinta-2); font-size: var(--ct-fs-meta); margin-top: var(--ct-sp-0); }
.ct-acoes { display: flex; gap: var(--ct-sp-2); flex-wrap: wrap; }


/* ===========================================================================
   2. BUSCA GLOBAL
   Um campo so, em toda a casa, alcancavel por Ctrl+K ou barra. E o atalho
   mais barato que existe para quem passa o dia procurando placa e CPF.
   =========================================================================== */
.ct-busca { position: relative; flex: 1; max-width: 520px; }
.ct-busca > svg {
  position: absolute; left: var(--ct-sp-3); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ct-tinta-3); pointer-events: none;
}
.ct-busca input {
  width: 100%; min-height: var(--ct-alvo);
  padding: var(--ct-sp-2) var(--ct-sp-9) var(--ct-sp-2) 42px;
  font: inherit; font-size: var(--ct-fs-campo);
  color: var(--ct-tinta); background: var(--ct-superficie);
  border: 1px solid var(--ct-linha-forte); border-radius: var(--ct-r-sm);
  transition: border-color var(--ct-t-rapido) var(--ct-mov);
}
.ct-busca input::placeholder { color: var(--ct-tinta-3); }
.ct-busca kbd {
  position: absolute; right: var(--ct-sp-2); top: 50%; transform: translateY(-50%);
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  color: var(--ct-tinta-3); background: var(--ct-rebaixo);
  border: 1px solid var(--ct-linha); border-radius: var(--ct-r-xs);
  padding: 2px 5px; pointer-events: none;
}
/* Resultados da busca: o trecho que casou vai de marca-texto lime, e o texto
   por cima continua tinta. E o que um marca-texto faz. */
.ct-marca-texto { background: var(--ct-lime); color: var(--ct-tinta); border-radius: var(--ct-r-xs); padding: 0 2px; }


/* ===========================================================================
   3. BOTAO
   Uma acao principal por bloco. Se houver duas em lime na mesma tela, uma
   delas esta errada. Isso ja aconteceu: eram cinco cores cheias lado a lado
   e nenhuma dizia qual era a acao principal.
   =========================================================================== */
.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ct-sp-2);
  min-height: var(--ct-alvo);
  padding: var(--ct-sp-2) var(--ct-sp-4);
  font: inherit; font-size: var(--ct-fs-corpo); font-weight: var(--ct-peso-medio);
  line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--ct-tinta-2);
  background: var(--ct-superficie);
  border: 1px solid var(--ct-linha-forte);
  border-radius: var(--ct-r-sm);
  /* A cor do anel de "trabalhando": e sempre a cor de TEXTO do proprio
     degrau. Ver o bloco dos efeitos, mais abaixo. O neutro le a dele. */
  --b-anel: var(--ct-tinta-2);
  transition: background var(--ct-t-rapido) var(--ct-mov),
              border-color var(--ct-t-rapido) var(--ct-mov),
              color var(--ct-t-rapido) var(--ct-mov);
}
.ct-btn svg { width: 18px; height: 18px; flex: none; }
.ct-btn:hover  { background: var(--ct-rebaixo); color: var(--ct-tinta); }
.ct-btn:active { background: var(--ct-linha-suave); }
.ct-btn:disabled, .ct-btn[aria-disabled="true"] {
  background: var(--ct-rebaixo); color: var(--ct-tinta-fraca);
  border-color: var(--ct-linha); cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   OS QUATRO DEGRAUS  (passo 1b, 08/08/2026 — desenho de docs/botoes-proposta.html)

     PRINCIPAL   gradiente preto, letra branca, brilho e lustro    uma por bloco
     DE DOMINIO  preenchimento forte na cor do DESTINO da acao     nunca duas
                                                                   da mesma cor
                                                                   lado a lado
     PERIGO      contorno na lista; cheio so no que confirma
                 dentro do dialogo
     FANTASMA    mostarda cheia; CONTORNO quando se repete em lista

   O LIME SAIU DE BOTAO por decisao da dona. Ele CONTINUA existindo como token
   (--ct-lime*) e e usado em outros lugares do sistema — nenhum token foi
   apagado; so nenhum botao os acende mais.

   O AVISO DA VIZINHANCA, e e a mais apertada de todo o sistema:
   PRETO AGORA E DUAS COISAS — acao principal (aqui) e "aguardando" (etiqueta,
   trilho e selo da secao 17, pelo --e-aguar). ELAS NUNCA APARECEM NA MESMA
   PECA: botao e botao, trilho e trilho. Isto foi DECIDIDO, nao esquecido, e
   quem vier depois precisa saber disso antes de "unificar" as duas famílias.
   O testes/botoes.mjs trava os dois lados: nenhum --e-* vira preenchimento de
   botao, e nenhum --b-* vira etiqueta.
   --------------------------------------------------------------------------- */

/* 1. PRINCIPAL. Continua se chamando `--primaria`: e o nome que o sistema ja
   escreve e que o portal.html ja usa, e dar DOIS nomes ao mesmo botao e como
   nascem as copias que este projeto existe para acabar. O que mudou foi a
   aparencia, nao o endereco.

   Gradiente e o unico preenchimento que carrega texto nas DUAS pontas e nos
   dois temas (branco da 11,45 na ponta clara e 17,25 na escura). No escuro ele
   INVERTE — o motivo esta no tokens.css 1.8 e nao e preferencia. */
.ct-btn--primaria {
  background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto));
  border-color: transparent;
  color: var(--b-preto-letra); font-weight: var(--ct-peso-forte);
  --b-anel: var(--b-preto-letra);
  box-shadow: 0 2px 9px -2px var(--b-halo-preto), var(--ct-sombra-1);
  position: relative; overflow: hidden;
}
.ct-btn--primaria:hover  { background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto)); color: var(--b-preto-letra); box-shadow: 0 8px 20px -4px var(--b-halo-preto); }
.ct-btn--primaria:active { box-shadow: 0 2px 6px -2px var(--b-halo-preto); }
.ct-btn--primaria:disabled { background: var(--ct-rebaixo); border-color: var(--ct-linha); color: var(--ct-tinta-fraca); box-shadow: none; }

/* O LUSTRO: uma faixa atravessa uma vez, no hover, e SO no principal. Clara no
   claro, escura no escuro (var --b-lustro) — faixa clara sobre um principal
   claro nao se veria. */
.ct-btn--primaria::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, var(--b-lustro) 50%, transparent 65%);
  transform: translateX(-120%);
}
.ct-btn--primaria:hover::after { animation: ct-lustro .75s var(--ct-mov-sai); }
@keyframes ct-lustro { to { transform: translateX(120%); } }

/* `--contraste` era "contraste maximo contra a superficie", que e exatamente o
   que o principal passou a ser. Vira APELIDO em vez de uma segunda aparencia:
   duas classes com o mesmo papel e aparencia diferente e o defeito de origem
   deste projeto. */
.ct-btn--contraste { background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto)); border-color: transparent; color: var(--b-preto-letra); font-weight: var(--ct-peso-medio); --b-anel: var(--b-preto-letra); }
.ct-btn--contraste:hover { background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto)); color: var(--b-preto-letra); filter: brightness(1.08); }

/* 2. DE DOMINIO. A cor vem do DESTINO da acao, nunca do estado do card:
     azul    leva ao Site 1, ou abre um card
     roxo    leva ao Gestao CNH
     verde   conclui alguma coisa (conferir, dar baixa)
     preto   poe em espera de outra pessoa (mandar para conferencia)
     laranja toca as consultas do site
     vermelho apaga ou desfaz, e NADA MAIS (por isso ele nao esta aqui: mora
              no degrau de perigo, que e onde a confirmacao vive)
   Sem essa regra, azul quereria dizer duas coisas na mesma tela — "isto leva
   ao Site 1" e "este card e novo". */
.ct-btn--dominio {
  background: var(--b-cor); border-color: transparent; color: var(--b-letra);
  font-weight: var(--ct-peso-medio); --b-anel: var(--b-letra);
  box-shadow: 0 2px 8px -3px var(--b-halo), var(--ct-sombra-1);
}
.ct-btn--dominio:hover  { background: var(--b-cor); color: var(--b-letra); box-shadow: 0 8px 20px -5px var(--b-halo), var(--ct-sombra-1); filter: brightness(1.08); }
.ct-btn--dominio:active { filter: brightness(.96); }
.ct-btn--dominio:disabled { background: var(--ct-rebaixo); border-color: var(--ct-linha); color: var(--ct-tinta-fraca); box-shadow: none; filter: none; }
.ct-btn--azul    { --b-cor: var(--b-azul);    --b-halo: var(--b-halo-azul); }
.ct-btn--roxo    { --b-cor: var(--b-roxo);    --b-halo: var(--b-halo-roxo); }
.ct-btn--verde   { --b-cor: var(--b-verde);   --b-halo: var(--b-halo-verde); }
.ct-btn--laranja { --b-cor: var(--b-laranja); --b-halo: var(--b-halo-laranja); }
/* O preto de dominio acompanha o principal na inversao do tema escuro: senao
   ele seria o unico botao invisivel a noite. */
.ct-btn--preto   { --b-cor: var(--b-preto);   --b-halo: var(--b-halo-preto); color: var(--b-preto-letra); --b-anel: var(--b-preto-letra); }
.ct-btn--preto:hover { color: var(--b-preto-letra); }

/* Perigo: contorno em repouso, preenchido so quando confirma dentro do modal.
   Botao vermelho cheio na tela de lista convida ao clique errado.
   DESDE 08/08/2026 (passo 2, deploy 1.3) o contorno em repouso usa a BORDA
   SUAVE da familia (--e-alerta-b), nao a cor forte: com o vermelho novo do
   repontar, o contorno forte deixava o botao mais saliente que o conteudo da
   lista. O texto continua no -f, que e o tom de texto da familia; o vermelho
   cheio fica so no confirmar dentro do dialogo, onde a acao acontece. */
.ct-btn--perigo { border-color: var(--e-alerta-b); color: var(--e-alerta-f); background: var(--ct-superficie); --b-anel: var(--e-alerta-f); }
.ct-btn--perigo:hover { background: var(--ct-alerta-suave); color: var(--e-alerta-f); border-color: var(--e-alerta-b); box-shadow: 0 6px 16px -5px var(--b-halo-vermelho); }
/* O CHEIO passou a usar o vermelho de BOTAO (--b-vermelho), e nao o de estado:
   e o unico que carrega letra branca por regra da secao 1.8, e no escuro o
   --ct-alerta e um salmao claro, onde "vermelho cheio de confirmacao" deixaria
   de parecer o que e. Letra branca fixa: 4,83:1 nos dois temas. */
.ct-btn--perigo-cheio { background: var(--b-vermelho); border-color: transparent; color: var(--b-letra); font-weight: var(--ct-peso-medio); --b-anel: var(--b-letra); box-shadow: 0 2px 9px -2px var(--b-halo-vermelho); }
.ct-btn--perigo-cheio:hover { background: var(--b-vermelho); color: var(--b-letra); box-shadow: 0 8px 20px -4px var(--b-halo-vermelho); filter: brightness(1.08); }

/* 4. FANTASMA — a acao que se REPETE (Copiar, os tres pontos, Ver comprovante).

   DECIDIDO PELA DONA em 08/08/2026, e nao e mais pergunta em aberto: CHEIA
   quando o botao aparece UMA vez na tela; CONTORNO quando ele SE REPETE em
   linha de lista ou de card.

   O motivo esta visivel no proprio prototipo: em mostarda cheia, uma lista de
   seis linhas tem doze manchas quentes na coluna da direita, e a acao que
   DECIDE — o principal preto — passa a disputar com a que menos importa. O
   contorno guarda a mostarda como a cara do fantasma e devolve o primeiro
   lugar do olho para a acao que decide.

   As duas classes continuam separadas porque elas dizem coisas diferentes, e
   nao mais porque a decisao estava pendente. */
.ct-btn--fantasma {
  background: var(--b-amarelo); border-color: transparent; color: var(--b-letra);
  font-weight: var(--ct-peso-medio); --b-anel: var(--b-letra);
  box-shadow: 0 2px 8px -3px var(--b-halo-amarelo), var(--ct-sombra-1);
}
.ct-btn--fantasma:hover  { background: var(--b-amarelo); color: var(--b-letra); box-shadow: 0 8px 20px -5px var(--b-halo-amarelo); filter: brightness(1.08); }
.ct-btn--fantasma:active { filter: brightness(.96); }
.ct-btn--fantasma-linha {
  background: transparent; border-color: var(--b-amarelo); color: var(--b-amarelo);
  font-weight: var(--ct-peso-medio); box-shadow: none; --b-anel: var(--b-amarelo);
}
.ct-btn--fantasma-linha:hover { background: var(--ct-dourado-suave); border-color: var(--b-amarelo); color: var(--b-amarelo); }
/* No escuro o --b-amarelo (#9E6A0B) daria 1,84:1 como TEXTO sobre a superficie
   escura — o contorno sumiria. Cheio ele continua valendo (a letra e branca e
   o contraste e do preenchimento); so o CONTORNO precisa do tom de texto da
   familia, que o sistema ja tem medido. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ct-btn--fantasma-linha { border-color: var(--ct-dourado); color: var(--ct-dourado); }
}
:root[data-theme="dark"] .ct-btn--fantasma-linha { border-color: var(--ct-dourado); color: var(--ct-dourado); }

/* Link: acao terciaria dentro de texto corrido. */
.ct-btn--link {
  min-height: 0; padding: 0; border: 0; background: none;
  color: var(--ct-info); font-weight: var(--ct-peso-medio);
}
.ct-btn--link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* Icone puro: SEMPRE precisa de aria-label. */
.ct-btn--icone { width: var(--ct-alvo); min-width: var(--ct-alvo); padding: 0; }

/* Tamanhos. O --pequeno reduz o DESENHO, nunca a area de toque: o
   pseudo-elemento mantem 44px de alvo. E o que corrige os controles de card
   que hoje tem entre 13 e 29px de altura. */
.ct-btn--pequeno {
  min-height: 30px; padding: var(--ct-sp-1) var(--ct-sp-3);
  font-size: var(--ct-fs-meta); position: relative;
}
.ct-btn--pequeno::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: var(--ct-alvo); min-height: var(--ct-alvo);
}
.ct-btn--largo { width: 100%; }

/* ---------------------------------------------------------------------------
   OS EFEITOS  (1b.3)
   --------------------------------------------------------------------------- */

/* TRABALHANDO: o botao trava, o texto some e um anel gira no lugar. Sem isso a
   pessoa clica duas vezes e o processo entra duplicado.

   O ROTULO SOME por `color:transparent`, que e o jeito que preserva a largura
   do botao (a tela nao pula quando ele comeca a trabalhar). Mas isso apagaria
   junto um anel escrito com `currentColor` — por isso cada degrau declara o
   `--b-anel`, que e sempre a cor de texto DELE: branca nos coloridos, escura
   no principal invertido do tema escuro. Antes havia um `color:` cravado no
   lime aqui, que pintava o anel de verde-escuro em botao nenhum verde. */
.ct-btn[data-carregando="sim"] { pointer-events: none; color: transparent; position: relative; }
.ct-btn[data-carregando="sim"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--b-anel); border-right-color: transparent;
  animation: ct-girar .7s linear infinite;
}
@keyframes ct-girar { to { transform: rotate(360deg); } }

/* FEITO: vira verde com o rotulo de conclusao e VOLTA SOZINHO em dois segundos.
   Botao que fica verde para sempre mente sobre o estado da tela — dali a uma
   hora ele ainda diz "salvo" sobre um formulario que mudou desde entao.
   Quem devolve o rotulo e o JS da tela; esta classe so pinta. */
.ct-btn--feito,
.ct-btn--feito:hover {
  background: var(--b-verde); border-color: transparent; color: var(--b-letra);
  box-shadow: 0 2px 9px -2px var(--b-halo-verde);
  filter: none;
}
.ct-btn--feito::after { content: none; }   /* sem lustro por cima do verde */

/* FOCO: anel de dois pixels, FORA do botao. No claro ele e o azul de botao,
   como o desenho pediu (5,17:1 sobre o branco). No ESCURO ele continua sendo o
   --ct-anel do sistema: o azul de botao da 3,30:1 contra o plano escuro, e o
   amarelo do sistema da 11,57 — trocar seria pagar oito pontos de contraste no
   unico anel que o teclado tem para se achar. */
.ct-btn:focus-visible { outline: var(--ct-anel-largura) solid var(--b-azul); outline-offset: var(--ct-anel-fora); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ct-btn:focus-visible { outline-color: var(--ct-anel); }
}
:root[data-theme="dark"] .ct-btn:focus-visible { outline-color: var(--ct-anel); }

/* O leve subir no hover, e onde ele para. Movimento e do sistema (secao 12 do
   tokens), mas transform nao e transition: quem pede menos movimento precisa
   da regra explicita, senao o botao continua pulando. */
.ct-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ct-btn:active:not(:disabled) { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ct-btn:hover:not(:disabled) { transform: none; }
  .ct-btn--primaria:hover::after { animation: none; }
}


/* ===========================================================================
   4. CAMPO
   Todo campo tem 16px de fonte. Abaixo disso o Safari do iPhone amplia a
   pagina sozinho a cada toque e nao desamplia: quatro saltos de tela por
   visita so para preencher placa e RENAVAM.
   =========================================================================== */
.ct-grupo { display: block; margin-bottom: var(--ct-sp-4); min-width: 0; }
.ct-grupo__dica  { display: block; font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); margin-top: var(--ct-sp-1); }
.ct-grupo__erro  { display: block; font-size: var(--ct-fs-meta); color: var(--ct-alerta); margin-top: var(--ct-sp-1); }
.ct-obrigatorio  { color: var(--ct-alerta); margin-left: 2px; }

.ct-campo {
  width: 100%; min-height: var(--ct-alvo);
  padding: var(--ct-sp-2) var(--ct-sp-3);
  font: inherit; font-size: var(--ct-fs-campo);
  color: var(--ct-tinta); background: var(--ct-superficie);
  border: 1px solid var(--ct-linha-forte);
  border-radius: var(--ct-r-sm);
  transition: border-color var(--ct-t-rapido) var(--ct-mov);
}
.ct-campo::placeholder { color: var(--ct-tinta-3); }
.ct-campo:hover:not(:disabled) { border-color: var(--ct-tinta-3); }
.ct-campo:disabled, .ct-campo[readonly] {
  background: var(--ct-rebaixo); color: var(--ct-tinta-fraca);
  border-color: var(--ct-linha); cursor: not-allowed;
}
.ct-campo[aria-invalid="true"] { border-color: var(--ct-alerta); }

/* Identificador digitado: placa, CPF, CNH, RENAVAM, protocolo, chave PIX. */
.ct-campo--codigo { font-family: var(--ct-mono); letter-spacing: .04em; text-transform: uppercase; }
/* Numero e moeda alinham a direita e comparam em coluna. */
.ct-campo--numero, .ct-campo--moeda { font-family: var(--ct-mono); text-align: right; font-variant-numeric: tabular-nums; }
.ct-campo--moeda { padding-left: 42px; }

.ct-campo-moeda { position: relative; }
.ct-campo-moeda::before {
  content: "R$"; position: absolute; left: var(--ct-sp-3); top: 50%; transform: translateY(-50%);
  font-family: var(--ct-mono); font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); pointer-events: none;
}

textarea.ct-campo { min-height: 120px; resize: vertical; line-height: var(--ct-lh-padrao); }

select.ct-campo {
  appearance: none; padding-right: 38px; cursor: pointer;
  /* seta desenhada com gradiente conico: sem imagem externa, sem SVG inline */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Data: o Chrome desenha o proprio icone; so garantimos alvo e alinhamento. */
input[type="date"].ct-campo, input[type="datetime-local"].ct-campo { font-family: var(--ct-mono); }

/* Arquivo: o input nativo e feio e nao aceita estilo. Escondemos e usamos o
   label como botao. O input continua no DOM e continua acessivel. */
.ct-arquivo { display: flex; align-items: center; gap: var(--ct-sp-3); flex-wrap: wrap; }
.ct-arquivo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ct-arquivo input[type="file"]:focus-visible + label {
  outline: var(--ct-anel-largura) solid var(--ct-anel); outline-offset: var(--ct-anel-fora);
}
.ct-arquivo__nome { font-size: var(--ct-fs-meta); color: var(--ct-tinta-2); min-width: 0; overflow-wrap: anywhere; }
.ct-arquivo__solta {
  border: 1px dashed var(--ct-linha-forte); border-radius: var(--ct-r-md);
  padding: var(--ct-sp-6); text-align: center; color: var(--ct-tinta-2);
  background: var(--ct-rebaixo);
  transition: border-color var(--ct-t-rapido) var(--ct-mov), background var(--ct-t-rapido) var(--ct-mov);
}
.ct-arquivo__solta[data-sobre="sim"] { border-color: var(--ct-lime-linha); background: var(--ct-lime-suave); }

/* Campo de busca dentro de formulario (nao o global). */
.ct-campo--busca { padding-left: 40px; }


/* ===========================================================================
   5. ETIQUETA DE ESTADO E CHIP DE FILTRO
   UMA etiqueta por item, nunca cinco. Ja houve cinco pilulas lado a lado e o
   resultado foi que nenhuma era lida.
   =========================================================================== */
.ct-estado {
  display: inline-flex; align-items: center; gap: var(--ct-sp-1);
  white-space: nowrap;
  font-size: var(--ct-fs-meta); font-weight: var(--ct-peso-medio);
  padding: var(--ct-sp-1) var(--ct-sp-3);
  border-radius: var(--ct-r-pill);
  background: var(--ct-rebaixo); color: var(--ct-tinta-2);
  border: 1px solid var(--ct-linha);
}
/* A bolinha usa currentColor: acompanha o texto e nunca vira informacao
   isolada por cor. */
.ct-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ct-estado--info    { background: var(--ct-info-suave);    color: var(--ct-info);    border-color: var(--ct-info-linha); }
.ct-estado--ok      { background: var(--ct-ok-suave);      color: var(--ct-ok);      border-color: var(--ct-ok-linha); }
.ct-estado--atencao { background: var(--ct-atencao-suave); color: var(--ct-atencao); border-color: var(--ct-atencao-linha); }
.ct-estado--alerta  { background: var(--ct-alerta-suave);  color: var(--ct-alerta);  border-color: var(--ct-alerta-linha); }

/* Etiqueta publica: o que o CLIENTE FINAL ve. Sempre em linguagem simples,
   sempre com menos degraus que a interna. Nunca mostra fila nem cargo. */
.ct-estado--publico { font-family: var(--ct-fonte); text-transform: none; }

.ct-chip {
  display: inline-flex; align-items: center; gap: var(--ct-sp-1);
  min-height: 34px; position: relative;
  padding: var(--ct-sp-1) var(--ct-sp-3);
  font: inherit; font-size: var(--ct-fs-meta);
  color: var(--ct-tinta-2); background: var(--ct-superficie);
  border: 1px solid var(--ct-linha-forte); border-radius: var(--ct-r-pill);
  cursor: pointer;
  transition: background var(--ct-t-rapido) var(--ct-mov), color var(--ct-t-rapido) var(--ct-mov), border-color var(--ct-t-rapido) var(--ct-mov);
}
.ct-chip::after {  /* alvo de 44px sem engordar o chip */
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; height: var(--ct-alvo);
}
.ct-chip:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }
/* Selecionado por inversao de tinta e superficie: preto no claro, claro no
   escuro. Mesmo motivo do .ct-btn--contraste. */
.ct-chip[aria-pressed="true"] {
  background: var(--ct-tinta); border-color: var(--ct-tinta); color: var(--ct-superficie);
}
.ct-chip__n { opacity: .7; font-variant-numeric: tabular-nums; }
.ct-chips { display: flex; flex-wrap: wrap; gap: var(--ct-sp-2); }


/* ===========================================================================
   6. CARD DE PROCESSO
   =========================================================================== */
.ct-card {
  position: relative; overflow: hidden;
  background: var(--ct-superficie);
  border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-md);
  box-shadow: var(--ct-sombra-1);
  transition: border-color var(--ct-t-rapido) var(--ct-mov), box-shadow var(--ct-t-rapido) var(--ct-mov);
}
.ct-card + .ct-card { margin-top: var(--ct-gap); }
.ct-card:hover { border-color: var(--ct-linha-forte); box-shadow: var(--ct-sombra-2); }

/* O TRILHO DO CARD, E ELE DIZ A FILA (08/08/2026, tarefa 2 do fechamento).

   ANTES ELE DIZIA ESTADO, e o card dizia o estado em dois lugares: aqui e na
   pastilha, os dois saindo da MESMA conta. O proprio codigo registrava isso
   como virtude ("assim nunca se contradizem") — nunca se contradiziam porque
   diziam a mesma coisa, e dois canais dizendo o mesmo e um canal desperdicado.
   Agora o trilho diz FILA e a pastilha diz PRAZO: dois fatos, dois canais.

   ELE E DOS DOIS SITES, e o valor dele e justamente as cores serem AS MESMAS:
   quem trabalha no Site 1 e no Site 2 nao reaprende a cor ao trocar de aba.
   Por isso mora aqui, e nao dentro de cada pagina — o Site 2 tinha a propria
   copia desde o passo 4, e o Site 1 ganhou a dele na etapa 7.1. Duas copias da
   mesma tabela de cores divergem no primeiro ajuste.

   CHAPADO, e nao gradiente: gradiente forte e das seis cores de ESTADO, e aqui
   a cor diz FILA. Sao vizinhos, e a diferenca de acabamento e o que impede o
   olho de somar os dois. Quatro pixels, e cada cor passa 3:1 contra a
   superficie — quando o card esta fechado, ele e o unico sinal da fila.

   O NEUTRO E TRANSPARENTE, e nao cinza: "Arquivados" nao tem trilho, e um
   cinza claro ali daria 1,35:1 e pareceria um trilho apagado em vez de
   ausencia de trilho. Quem quer o cinza CHAPADO de "nao e fila de trabalho"
   pede --neutro, que e o caso de "Registrados". */
.ct-trilho { position: absolute; left: 0; top: 0; bottom: 0; width: var(--ct-trilho); background: transparent; }
.ct-trilho--novo    { background: var(--e-novo); }      /* Operacional · Operacao CNH */
.ct-trilho--aguar   { background: var(--e-aguar); }     /* Conferencia — espera outra pessoa */
.ct-trilho--ok      { background: var(--e-ok); }        /* Conferidos */
.ct-trilho--site    { background: var(--e-site); }      /* Continuidade */
.ct-trilho--decurso { background: var(--e-decurso); }   /* Decurso — SO no Site 2 */
.ct-trilho--alerta  { background: var(--e-alerta); }    /* Atencao – Pendencia */
.ct-trilho--neutro  { background: var(--ct-linha-forte); } /* Registrados */

.ct-card__topo {
  display: flex; align-items: flex-start; gap: var(--ct-sp-4);
  padding: var(--ct-sp-4) var(--ct-pad-card) var(--ct-sp-3) calc(var(--ct-pad-card) + var(--ct-trilho));
}
.ct-card__titulos { flex: 1; min-width: 0; }
.ct-card__titulos h3 { font-size: var(--ct-fs-card); font-weight: var(--ct-peso-forte); letter-spacing: var(--ct-ls-card); }
.ct-card__fim { display: flex; align-items: center; gap: var(--ct-sp-2); flex-wrap: wrap; justify-content: flex-end; }
.ct-card__corpo { padding: var(--ct-sp-3) var(--ct-pad-card) var(--ct-sp-3) calc(var(--ct-pad-card) + var(--ct-trilho)); border-top: 1px solid var(--ct-linha-suave); }
.ct-card__pe {
  display: flex; align-items: center; gap: var(--ct-sp-2); flex-wrap: wrap;
  padding: var(--ct-sp-3) var(--ct-pad-card) var(--ct-sp-3) calc(var(--ct-pad-card) + var(--ct-trilho));
  border-top: 1px solid var(--ct-linha-suave); background: var(--ct-rebaixo);
}
.ct-card__pe .ct-espaco { flex: 1; }

/* Faixa de contexto: diz qual e o PROXIMO PASSO daquele processo. */
.ct-contexto {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ct-sp-4);
  padding: var(--ct-sp-3) var(--ct-pad-card) var(--ct-sp-3) calc(var(--ct-pad-card) + var(--ct-trilho));
  border-top: 1px solid var(--ct-linha-suave);
  background: var(--ct-rebaixo); color: var(--ct-tinta-2); font-size: var(--ct-fs-meta);
}
.ct-contexto b { font-weight: var(--ct-peso-medio); color: var(--ct-tinta); }

/* Grade de identificadores do card */
.ct-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--ct-linha-suave); }
.ct-campos > div { padding: var(--ct-sp-3) var(--ct-pad-card); border-right: 1px solid var(--ct-linha-suave); min-width: 0; }
.ct-campos > div:last-child { border-right: 0; }

/* Revelar dado sensivel (CPF, CNH, RENAVAM). Fica mascarado por padrao e o
   ato de revelar deve ficar registrado na auditoria. O botao e pequeno no
   desenho e grande no toque. */
.ct-revelar {
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  text-transform: uppercase; letter-spacing: .08em;
  background: none; border: 0; padding: 0 var(--ct-sp-2);
  color: var(--ct-tinta-3); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  position: relative;
}
.ct-revelar::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: var(--ct-alvo); min-height: var(--ct-alvo);
}
.ct-revelar:hover { color: var(--ct-tinta); }

/* --- 6.1 Placa Mercosul ----------------------------------------------------
   COR LITERAL, e a excecao declarada da regra "nenhum hex nesta folha".
   A placa imita um objeto real: e por ela que o olho acha o processo na
   lista. Ela NAO inverte no tema escuro pelo mesmo motivo: placa preta nao
   existe no mundo. No escuro ela so perde a sombra e ganha moldura mais
   discreta.
   Proporcao real 40x13cm (3,08:1), por isso o respiro lateral e maior.       */
.ct-placa {
  display: inline-block; line-height: 1; white-space: nowrap;
  border: 2px solid #141412; border-radius: 6px;
  background: #FFFFFF; overflow: hidden; text-align: center;
  box-shadow: var(--ct-sombra-1);
}
.ct-placa small {
  display: block; background: #0B3E8D; color: #FFFFFF;  /* 10,06:1 */
  font-family: var(--ct-fonte); font-size: 8px; font-weight: var(--ct-peso-forte);
  letter-spacing: .22em; padding: 2px 12px;
}
.ct-placa b {
  display: block; font-family: var(--ct-mono);
  font-weight: var(--ct-peso-forte);   /* 600: a fonte NAO serve 700 */
  font-size: 21px; letter-spacing: var(--ct-ls-placa);
  color: #111111;                      /* 18,88:1 sobre o branco */
  padding: 4px 16px 5px;
  /* Processo sem placa cadastrada existe. Sem o minimo a moldura encolhe e
     deixa de parecer placa justo na linha em que algo esta faltando. */
  min-width: 100px; box-sizing: content-box;
}

/* --- 6.2 Cracha da CNH (ancora do Site 2) --------------------------------- */
.ct-cracha {
  display: inline-flex; flex-direction: column; gap: 2px;
  min-width: 200px; padding: var(--ct-sp-2) var(--ct-sp-3);
  border: 1px solid var(--ct-linha-forte); border-left: 4px solid var(--ct-dourado-linha);
  border-radius: var(--ct-r-sm); background: var(--ct-superficie);
}
.ct-cracha__rotulo { font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo); letter-spacing: var(--ct-ls-rotulo); text-transform: uppercase; color: var(--ct-tinta-3); }
.ct-cracha__numero { font-family: var(--ct-mono); font-size: 17px; color: var(--ct-tinta); font-variant-numeric: tabular-nums; letter-spacing: .04em; }


/* ===========================================================================
   7. TABELA
   =========================================================================== */
.ct-tabela-caixa { overflow-x: auto; border: 1px solid var(--ct-linha); border-radius: var(--ct-r-md); background: var(--ct-superficie); }
.ct-tabela { width: 100%; border-collapse: collapse; font-size: var(--ct-fs-meta); }
.ct-tabela th, .ct-tabela td {
  padding: var(--ct-sp-3) var(--ct-sp-4); text-align: left;
  border-bottom: 1px solid var(--ct-linha-suave); vertical-align: middle;
}
.ct-tabela thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ct-rebaixo);
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  font-weight: var(--ct-peso-medio); letter-spacing: var(--ct-ls-rotulo);
  text-transform: uppercase; color: var(--ct-tinta-3); white-space: nowrap;
}
.ct-tabela tbody tr:last-child td { border-bottom: 0; }
.ct-tabela tbody tr { transition: background var(--ct-t-instante) var(--ct-mov); }
.ct-tabela tbody tr:hover { background: var(--ct-rebaixo); }
.ct-tabela .num, .ct-tabela td.num { text-align: right; font-family: var(--ct-mono); font-variant-numeric: tabular-nums; }

/* Ordenacao: o cabecalho vira botao. aria-sort e obrigatorio, e a seta e
   consequencia dele, nunca uma classe solta. */
.ct-tabela th button {
  display: inline-flex; align-items: center; gap: var(--ct-sp-1);
  min-height: var(--ct-alvo);
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ct-tabela th[aria-sort] button::after { content: "\2195"; opacity: .45; }
.ct-tabela th[aria-sort="ascending"]  button::after { content: "\2191"; opacity: 1; color: var(--ct-tinta); }
.ct-tabela th[aria-sort="descending"] button::after { content: "\2193"; opacity: 1; color: var(--ct-tinta); }

/* Paginacao */
.ct-paginacao {
  display: flex; align-items: center; gap: var(--ct-sp-2); flex-wrap: wrap;
  padding: var(--ct-sp-3) var(--ct-sp-4);
  border-top: 1px solid var(--ct-linha); font-size: var(--ct-fs-meta); color: var(--ct-tinta-2);
}
.ct-paginacao__info { margin-right: auto; font-variant-numeric: tabular-nums; }
.ct-paginacao button {
  min-width: var(--ct-alvo); min-height: var(--ct-alvo);
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-variant-numeric: tabular-nums;
  background: var(--ct-superficie); color: var(--ct-tinta-2);
  border: 1px solid var(--ct-linha-forte); border-radius: var(--ct-r-sm); cursor: pointer;
}
.ct-paginacao button[aria-current="page"] { background: var(--ct-tinta); border-color: var(--ct-tinta); color: var(--ct-superficie); }
.ct-paginacao button:disabled { color: var(--ct-tinta-fraca); border-color: var(--ct-linha); cursor: not-allowed; }


/* ===========================================================================
   8. ABAS
   A fila rola na horizontal quando nao cabe, e SEMPRE avisa que rola.
   Ninguem procura o que nao sabe que existe: hoje o Site 1 tem 16 abas com
   overflow-x sem nenhum sinal, e as ultimas ficam cortadas no notebook.
   =========================================================================== */
.ct-abas { position: relative; display: flex; gap: var(--ct-sp-1); overflow-x: auto; scrollbar-width: thin; }
.ct-abas::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--ct-superficie));
}
.ct-aba {
  display: inline-flex; align-items: center; gap: var(--ct-sp-2);
  min-height: var(--ct-alvo);
  padding: var(--ct-sp-2) var(--ct-sp-4);
  font: inherit; font-size: var(--ct-fs-corpo); font-weight: var(--ct-peso-medio);
  color: var(--ct-tinta-2); background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color var(--ct-t-rapido) var(--ct-mov), border-color var(--ct-t-rapido) var(--ct-mov);
}
.ct-aba:hover { color: var(--ct-tinta); }
.ct-aba[aria-selected="true"] { color: var(--ct-tinta); border-bottom-color: var(--ct-dourado-linha); }
.ct-aba:disabled { color: var(--ct-tinta-fraca); cursor: not-allowed; }
.ct-aba__n { font-variant-numeric: tabular-nums; color: var(--ct-tinta-3); }

/* Abas dentro da barra preta: herdam a tinta invertida via .ct-inv, e a aba
   ativa e amarela porque amarelo e a marca sobre o preto. */
.ct-inv .ct-aba[aria-selected="true"] { color: var(--ct-amarelo); border-bottom-color: var(--ct-amarelo); }
.ct-inv .ct-abas::after { background: linear-gradient(to right, transparent, var(--ct-inverso)); }


/* ===========================================================================
   9. MODAL E GAVETA
   Modal = decisao curta que bloqueia. Gaveta = trabalho longo ao lado do
   contexto. Card de cliente, historico e conversa vao para a GAVETA, porque
   a pessoa precisa continuar vendo a lista atras.
   =========================================================================== */
.ct-veu {
  position: fixed; inset: 0; z-index: var(--ct-z-veu);
  background: var(--ct-veu);
  animation: ct-aparecer var(--ct-t-padrao) var(--ct-mov-entra) both;
}
@keyframes ct-aparecer { from { opacity: 0; } to { opacity: 1; } }

.ct-modal {
  position: fixed; z-index: var(--ct-z-modal);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - var(--ct-sp-7)));
  max-height: calc(100vh - var(--ct-sp-8));
  display: flex; flex-direction: column;
  background: var(--ct-elevado); color: var(--ct-tinta);
  border: 1px solid var(--ct-borda-elevada);
  border-radius: var(--ct-r-lg); box-shadow: var(--ct-sombra-3);
  animation: ct-modal-entra var(--ct-t-padrao) var(--ct-mov-entra) both;
}
@keyframes ct-modal-entra { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
.ct-modal__topo { display: flex; align-items: flex-start; gap: var(--ct-sp-4); padding: var(--ct-sp-5) var(--ct-sp-5) var(--ct-sp-3); }
.ct-modal__topo h2 { flex: 1; font-size: var(--ct-fs-secao); }
.ct-modal__corpo { padding: 0 var(--ct-sp-5) var(--ct-sp-4); overflow-y: auto; }
.ct-modal__pe {
  display: flex; gap: var(--ct-sp-2); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--ct-sp-4) var(--ct-sp-5); border-top: 1px solid var(--ct-linha);
  background: var(--ct-rebaixo);
  border-radius: 0 0 var(--ct-r-lg) var(--ct-r-lg);
}

.ct-gaveta {
  position: fixed; z-index: var(--ct-z-gaveta); inset: 0 0 0 auto;
  width: min(520px, 100vw);
  display: flex; flex-direction: column;
  background: var(--ct-elevado); color: var(--ct-tinta);
  border-left: 1px solid var(--ct-borda-elevada); box-shadow: var(--ct-sombra-3);
  animation: ct-gaveta-entra var(--ct-t-lento) var(--ct-mov-mola) both;
}
@keyframes ct-gaveta-entra { from { transform: translateX(100%); } }
.ct-gaveta__topo { display: flex; align-items: center; gap: var(--ct-sp-3); padding: var(--ct-sp-4) var(--ct-sp-5); border-bottom: 1px solid var(--ct-linha); }
.ct-gaveta__corpo { flex: 1; overflow-y: auto; padding: var(--ct-sp-5); }
.ct-gaveta__pe { padding: var(--ct-sp-4) var(--ct-sp-5); border-top: 1px solid var(--ct-linha); background: var(--ct-rebaixo); display: flex; gap: var(--ct-sp-2); justify-content: flex-end; }

/* Movimento reduzido: entra sem deslocar, so aparece. */
@media (prefers-reduced-motion: reduce) {
  .ct-modal, .ct-gaveta { animation: ct-aparecer .01ms both; }
}


/* ===========================================================================
   10. AVISO, TOOLTIP, AVATAR
   Uma gramatica so para aviso. Hoje sao quatro: moldura inteira, barra a
   esquerda, texto colorido solto e tarja preta flutuante. O mesmo erro tem
   quatro aparencias dependendo de em qual sistema a pessoa esta.
   ESCOLHA: barra a esquerda mais fundo suave. Le rapido, nao grita e
   sobrevive a fundo claro e escuro.
   =========================================================================== */
.ct-aviso {
  display: flex; gap: var(--ct-sp-3);
  padding: var(--ct-sp-3) var(--ct-sp-4);
  border: 1px solid var(--ct-linha);
  border-left: 4px solid var(--ct-tinta-3);
  border-radius: var(--ct-r-sm);
  background: var(--ct-rebaixo); color: var(--ct-tinta);
  font-size: var(--ct-fs-meta); line-height: var(--ct-lh-padrao);
}
.ct-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ct-aviso__corpo { min-width: 0; }
.ct-aviso__titulo { font-weight: var(--ct-peso-forte); margin-bottom: 2px; }
.ct-aviso--info    { background: var(--ct-info-suave);    border-color: var(--ct-info-linha);    border-left-color: var(--ct-info);    color: var(--ct-tinta); }
.ct-aviso--ok      { background: var(--ct-ok-suave);      border-color: var(--ct-ok-linha);      border-left-color: var(--ct-ok); }
.ct-aviso--atencao { background: var(--ct-atencao-suave); border-color: var(--ct-atencao-linha); border-left-color: var(--ct-atencao); }
.ct-aviso--alerta  { background: var(--ct-alerta-suave);  border-color: var(--ct-alerta-linha);  border-left-color: var(--ct-alerta); }

/* Tooltip. Explica, nunca esconde informacao necessaria: se o texto for
   preciso para concluir a tarefa, ele fica na tela. */
.ct-tooltip {
  position: absolute; z-index: var(--ct-z-tooltip);
  max-width: 260px; padding: var(--ct-sp-2) var(--ct-sp-3);
  background: var(--ct-inverso); color: var(--ct-tinta-inv);
  border-radius: var(--ct-r-sm); font-size: var(--ct-fs-meta); line-height: 1.4;
  box-shadow: var(--ct-sombra-2); pointer-events: none;
  opacity: 0; transition: opacity var(--ct-t-rapido) var(--ct-mov);
}
.ct-tooltip[data-visivel="sim"] { opacity: 1; }

.ct-avatar {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ct-rebaixo); color: var(--ct-tinta-2);
  border: 1px solid var(--ct-linha-forte);
  font-size: var(--ct-fs-meta); font-weight: var(--ct-peso-forte);
  font-family: var(--ct-mono); text-transform: uppercase; overflow: hidden;
}
.ct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ct-avatar--grande { width: 48px; height: 48px; font-size: var(--ct-fs-corpo); }


/* ===========================================================================
   11. LINHA DO TEMPO
   Historico do processo, e a mesma peca serve para o cliente final (com menos
   linhas e sem dado interno) e para a equipe.
   =========================================================================== */
.ct-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.ct-tempo::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--ct-linha); }
.ct-tempo li { position: relative; padding: 0 0 var(--ct-sp-5) var(--ct-sp-7); }
.ct-tempo li::before {
  content: ""; position: absolute; left: 6px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ct-superficie); border: 2px solid var(--ct-linha-forte);
}
.ct-tempo li[data-marco="ok"]::before      { border-color: var(--ct-ok);      background: var(--ct-ok); }
.ct-tempo li[data-marco="atencao"]::before { border-color: var(--ct-atencao); background: var(--ct-atencao); }
.ct-tempo li[data-marco="alerta"]::before  { border-color: var(--ct-alerta);  background: var(--ct-alerta); }
.ct-tempo li[data-marco="agora"]::before   { border-color: var(--ct-lime-linha); background: var(--ct-lime); }
.ct-tempo__quando { font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo); letter-spacing: var(--ct-ls-rotulo); text-transform: uppercase; color: var(--ct-tinta-3); }
.ct-tempo__oque { font-size: var(--ct-fs-corpo); }
.ct-tempo__quem { font-size: var(--ct-fs-meta); color: var(--ct-tinta-2); }


/* ===========================================================================
   12. PROGRESSO
   Duas formas, e as duas continuam se movendo com movimento reduzido, porque
   indicador congelado nao informa que o sistema esta trabalhando: informa que
   ele travou.
   =========================================================================== */
/* 12.1 Determinado: barra com porcentagem real */
.ct-progresso { height: 8px; border-radius: var(--ct-r-pill); background: var(--ct-rebaixo); overflow: hidden; }
.ct-progresso__barra {
  height: 100%; border-radius: var(--ct-r-pill);
  background: var(--ct-lime-linha);
  transition: width var(--ct-t-padrao) var(--ct-mov);
}
/* 12.2 Indeterminado: anel. Marcado como movimento essencial. */
.ct-anel-carga {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  display: inline-block;
  animation: ct-girar .7s linear infinite;
}
.ct-anel-carga--grande { width: 34px; height: 34px; border-width: 3px; }

/* 12.3 Esqueleto: para lista que ja sabe quantos itens vem.
   Pulsa por opacidade, nunca por deslocamento. */
.ct-esqueleto {
  background: var(--ct-rebaixo); border-radius: var(--ct-r-sm);
  animation: ct-pulsar 1.4s ease-in-out infinite;
}
@keyframes ct-pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }


/* ===========================================================================
   13. NOTIFICACAO EFEMERA
   O unico estado que ja esta coerente no sistema atual: lime, aparece e some.
   Serve de modelo para os outros tres.
   Confirma acao concluida. NUNCA carrega erro: erro precisa ficar na tela.
   =========================================================================== */
.ct-efemero-area {
  position: fixed; z-index: var(--ct-z-efemero);
  left: 50%; bottom: var(--ct-sp-6); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--ct-sp-2); align-items: center;
  pointer-events: none;
}
.ct-efemero {
  display: inline-flex; align-items: center; gap: var(--ct-sp-3);
  padding: var(--ct-sp-3) var(--ct-sp-4);
  background: var(--ct-lime); color: var(--ct-lime-sobre);
  border-radius: var(--ct-r-md); box-shadow: var(--ct-sombra-3);
  font-size: var(--ct-fs-corpo); font-weight: var(--ct-peso-medio);
  pointer-events: auto;
  animation: ct-efemero-entra var(--ct-t-entrada) var(--ct-mov-entra) both;
}
@keyframes ct-efemero-entra { from { opacity: 0; transform: translateY(8px); } }
.ct-efemero__marca {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--ct-lime-sobre); color: var(--ct-lime);
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .ct-efemero { animation: ct-aparecer .01ms both; }
}


/* ===========================================================================
   14. OS QUATRO ESTADOS
   Vazio, carregando, erro e sucesso. Hoje sao mais de seis invencoes soltas
   ("Nenhum registro" 12 vezes, "Sem dados" 7 vezes, quatro spinners, cinco
   desenhos de vazio) e nenhuma delas diz o que fazer a seguir.
   Aqui sao QUATRO pecas, com a mesma anatomia:
       icone -> titulo -> explicacao -> PROXIMO PASSO
   O proximo passo e obrigatorio. Se nao houver acao possivel, o texto diz
   por que nao ha.
   =========================================================================== */
.ct-estado-tela {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--ct-sp-3);
  padding: var(--ct-sp-8) var(--ct-sp-5);
  color: var(--ct-tinta-2);
}
.ct-estado-tela__icone {
  width: 48px; height: 48px; border-radius: var(--ct-r-md);
  display: grid; place-items: center;
  background: var(--ct-rebaixo); color: var(--ct-tinta-3);
}
.ct-estado-tela__icone svg { width: 24px; height: 24px; }
.ct-estado-tela h3 { font-size: var(--ct-fs-card); color: var(--ct-tinta); }
.ct-estado-tela p { max-width: 46ch; font-size: var(--ct-fs-meta); }

/* 14.1 VAZIO: nada aqui, e isso e normal. Tom neutro, nunca de erro. */
.ct-estado-tela--vazio .ct-estado-tela__icone { background: var(--ct-rebaixo); color: var(--ct-tinta-3); }

/* 14.2 CARREGANDO: dentro do proprio bloco, sem trocar a tela inteira.
   O que carrega dado ja conhecido usa esqueleto; o que carrega dado
   desconhecido usa anel. */
.ct-estado-tela--carregando .ct-estado-tela__icone { background: none; color: var(--ct-tinta-3); }

/* 14.3 ERRO: cor de alerta, causa em linguagem humana, botao de tentar de
   novo e codigo tecnico dobrado num detalhe. */
.ct-estado-tela--erro .ct-estado-tela__icone { background: var(--ct-alerta-suave); color: var(--ct-alerta); }
.ct-estado-tela details { font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); }
.ct-estado-tela details pre {
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  background: var(--ct-rebaixo); border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-sm); padding: var(--ct-sp-2);
  text-align: left; overflow-x: auto; margin-top: var(--ct-sp-2);
}

/* 14.4 SUCESSO de tela cheia: so quando encerra um fluxo (orcamento enviado,
   pagamento confirmado). Confirmacao de acao rotineira e a efemera lime. */
.ct-estado-tela--sucesso .ct-estado-tela__icone { background: var(--ct-lime-suave); color: var(--ct-lime-tinta); }

/* Regiao viva: TODA mensagem que aparece sem clique tem que ser anunciada.
   aria-live="polite" para sucesso e vazio, "assertive" so para erro que
   interrompe. */
.ct-vivo { position: relative; }


/* ===========================================================================
   15. INDICADOR (stat tile)
   Rotulo em mono, valor grande em tabular-nums, variacao e nota. Era a mesma
   peca reinventada quatro vezes, com o valor em 19, 23, 26 e 30px.
   =========================================================================== */
.ct-indicador {
  background: var(--ct-superficie); border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-md); box-shadow: var(--ct-sombra-1);
  padding: var(--ct-sp-4); min-width: 0;
}
.ct-indicador__topo { display: flex; align-items: center; gap: var(--ct-sp-2); }
.ct-indicador__valor {
  font-size: var(--ct-fs-numero); font-weight: var(--ct-peso-forte);
  letter-spacing: -.03em; line-height: var(--ct-lh-apertada);
  font-variant-numeric: tabular-nums; margin-top: var(--ct-sp-3);
}
.ct-indicador__nota { font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); margin-top: var(--ct-sp-1); }
.ct-variacao {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--ct-fs-meta); font-weight: var(--ct-peso-medio);
  padding: 2px var(--ct-sp-2); border-radius: var(--ct-r-pill);
  font-variant-numeric: tabular-nums;
}
.ct-variacao--sobe  { color: var(--ct-ok);      background: var(--ct-ok-suave); }
.ct-variacao--desce { color: var(--ct-alerta);  background: var(--ct-alerta-suave); }
.ct-variacao--igual { color: var(--ct-tinta-2); background: var(--ct-rebaixo); }


/* ===========================================================================
   16. RESPONSIVIDADE
   Tres media queries. Nenhuma pagina pode inventar um quarto ponto.
   =========================================================================== */

/* AMPLO e abaixo (< 1280): a grade de 12 vira 8 e depois 6 na pratica. */
@media (max-width: 1279px) {
  .ct-col-3 { grid-column: span 4; }
  .ct-col-8 { grid-column: span 12; }
  .ct-col-4 { grid-column: span 6; }
}

/* MEDIO e abaixo (< 900): o rail vira gaveta sobre o conteudo. */
@media (max-width: 899px) {
  .ct-rail {
    transform: translateX(-100%);
    transition: transform var(--ct-t-lento) var(--ct-mov-mola);
    box-shadow: var(--ct-sombra-3);
  }
  [data-rail="aberto"] .ct-rail { transform: translateX(0); }
  [data-rail="recolhido"] .ct-rail { width: 260px; }
  .ct-principal, [data-rail="recolhido"] .ct-principal { margin-left: 0; }
  .ct-conteudo { padding: var(--ct-sp-4); }
  .ct-col-3, .ct-col-4, .ct-col-6 { grid-column: span 6; }
  .ct-busca kbd { display: none; }
}

/* COMPACTO (< 600): uma coluna, card em pilha, gaveta e modal viram folha. */
@media (max-width: 599px) {
  .ct-conteudo { padding: var(--ct-sp-3); }
  .ct-col-3, .ct-col-4, .ct-col-6, .ct-col-8 { grid-column: span 12; }
  .ct-grade { gap: var(--ct-sp-3); }

  /* Sem isto a etiqueta de estado e CORTADA pelo overflow do card, e ela e a
     unica coisa que diz o que fazer com o processo. */
  .ct-card__topo { flex-wrap: wrap; }
  .ct-card__fim { width: 100%; justify-content: flex-start; }
  .ct-campos { grid-template-columns: 1fr; }
  .ct-campos > div { border-right: 0; border-bottom: 1px solid var(--ct-linha-suave); }

  .ct-gaveta { inset: 0; width: 100vw; border-left: 0; }
  .ct-modal {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100vw; max-height: 90vh; border-radius: var(--ct-r-lg) var(--ct-r-lg) 0 0;
    animation: ct-folha-entra var(--ct-t-lento) var(--ct-mov-mola) both;
  }
  @keyframes ct-folha-entra { from { transform: translateY(100%); } }

  .ct-btn { width: 100%; }
  .ct-btn--icone, .ct-btn--pequeno, .ct-acoes .ct-btn { width: auto; }
  .ct-modal__pe .ct-btn { flex: 1; }

  .ct-efemero-area { left: var(--ct-sp-3); right: var(--ct-sp-3); transform: none; }
  .ct-efemero { width: 100%; }

  .ct-tabela-caixa { border-radius: 0; border-left: 0; border-right: 0; }
}


/* ===========================================================================
   17. COMPONENTES DE ESTADO DAS SEIS CORES
   ---------------------------------------------------------------------------
   Vieram do central.html em 08/08/2026 (passo 1 do projeto visual), onde
   nasceram nas fatias 2 e 3 do redesenho e moraram ate a paleta assentar.
   Falam a lingua da secao 1.5 do tokens.css (--e-*): sao as pecas que vestem
   a cor forte — etiqueta, selo, card de indicador, trilho e faixa de
   urgencia. Os nomes NAO ganham prefixo ct- de proposito: e o JavaScript das
   telas que os escreve (tag ok/bad/warn em dezenas de lugares, selo, metric),
   e renomear seria mexer na logica para trocar a aparencia.

   A ORDEM INTERNA DESTA SECAO E CARGA, nao arrumacao: .tile--espera vem
   antes de .tile--alerta, e o trilho neutro do .metric vem depois dos
   gradientes do .tile — mesma forca, o ultimo vence, e era exatamente assim
   que as fatias se empilhavam na pagina de origem.
   =========================================================================== */

/* --- 17.1 Etiqueta de estado (.tag) ----------------------------------------
   Duas origens fundidas num rumo so: a pilula da casca da Central e a voz
   mono em caixa alta da leva 2 (que vencia no tamanho: rotulo, nao texto). */
.tag {
  display: inline-flex; align-items: center;
  border-radius: var(--ct-r-pill); padding: 4px 10px; border: 0;
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  font-weight: var(--ct-peso-medio); letter-spacing: .04em; text-transform: uppercase;
}
.tag--novo    { background: var(--e-novo-s);    color: var(--e-novo-f);    border: 1px solid var(--e-novo-b); }
.tag--aguar   { background: var(--e-aguar-s);   color: var(--e-aguar-f);   border: 1px solid var(--e-aguar-b); }
.tag--ok      { background: var(--e-ok-s);      color: var(--e-ok-f);      border: 1px solid var(--e-ok-b); }
.tag--alerta  { background: var(--e-alerta-s);  color: var(--e-alerta-f);  border: 1px solid var(--e-alerta-b); }
/* As duas que faltavam (criadas em 08/08/2026): roxo e a fila de decurso do
   Gestao CNH, rosa e a das consultas do site. Nascem prontas para o passo de
   cada tela — ate la, nenhuma marcacao as usa. */
.tag--decurso { background: var(--e-decurso-s); color: var(--e-decurso-f); border: 1px solid var(--e-decurso-b); }
.tag--site    { background: var(--e-site-s);    color: var(--e-site-f);    border: 1px solid var(--e-site-b); }
.tag--neutro  { background: var(--ct-rebaixo);  color: var(--ct-tinta-3);  border: 1px solid var(--ct-linha); }
/* Os nomes que o JavaScript ja escreve em dezenas de lugares — NAO renomear.
   Ganham borda como as irmas de cima: sobre o fundo rebaixado da tabela,
   fundo suave sem borda quase desaparece.
   O `warn` e ATENCAO, nao "aguardando" (e a situacao que nao e apta nem
   bloqueada — a que pede olho): quando a mostarda virou PRETO em
   08/08/2026, os dois sentidos que ela carregava se separaram, e o warn
   foi com o dourado, que e o --ct-atencao. */
.tag.ok   { background: var(--e-ok-s);     color: var(--e-ok-f);     border: 1px solid var(--e-ok-b); }
.tag.bad  { background: var(--e-alerta-s); color: var(--e-alerta-f); border: 1px solid var(--e-alerta-b); }
.tag.warn { background: var(--ct-atencao-suave); color: var(--ct-atencao); border: 1px solid var(--ct-atencao-linha); }

/* --- 17.2 Selo: ponto antes do texto ---------------------------------------
   O fluxo do parceiro tem tres momentos (nada feito / pagamento informado /
   tudo enviado) e eles se distinguem pela cor. O --ok apontava para o AZUL de
   informacao; a ligacao foi consertada em 08/08/2026 — o nome ficou, porque e
   o JavaScript que o escreve. Com isso --ok e --enviado dizem a MESMA cor de
   proposito: os dois sao "positivo, feito". */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--ct-r-pill); padding: 4px 10px;
  font-size: var(--ct-fs-meta); font-weight: var(--ct-peso-medio);
  border: 0; white-space: nowrap;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--ok      { background: var(--ct-ok-suave);     color: var(--ct-ok); }
.selo--enviado { background: var(--ct-ok-suave);     color: var(--ct-ok); }
.selo--vazio   { background: var(--ct-rebaixo);      color: var(--ct-tinta-3); }
.selo--vencida { background: var(--ct-alerta-suave); color: var(--ct-alerta); }
/* As seis cores tambem como selo (passo 2, deploy 2.1): os nomes acima sao os
   que o JavaScript ja escreve e ficam. O verde da lingua completa e o proprio
   .selo--ok (mesma familia depois do conserto da ligacao); os que faltavam
   entram aqui, para a proxima tela nao inventar o setimo selo. */
/* "Pagamento informado" (passo 2, deploy 5.3): o parceiro pagou e a bola
   esta com a CASA — e a mesma semantica da coluna "Aguardando conferencia"
   do quadro, entao veste a MESMA cor ("precisa de voce agora"). Verde aqui
   mentiria: verde e "resolvido", e isto ainda espera a conferencia. */
.selo--informado { background: var(--e-site-s); color: var(--e-site-f); }
.selo--novo    { background: var(--e-novo-s);    color: var(--e-novo-f); }
.selo--aguar   { background: var(--e-aguar-s);   color: var(--e-aguar-f); }
.selo--alerta  { background: var(--e-alerta-s);  color: var(--e-alerta-f); }
.selo--decurso { background: var(--e-decurso-s); color: var(--e-decurso-f); }
.selo--site    { background: var(--e-site-s);    color: var(--e-site-f); }

/* --- 17.3 Card de indicador (.tile, .bolha) e o trilho do .metric ----------
   O .tile e um .metric com a comparacao de periodo e um ponto de estado.
   O NUMERO FICA EM TINTA COMUM, e isso e de proposito: um "12" vermelho de
   30px grita mais alto que o total. O estado vive no trilho de gradiente, na
   bolha e no ponto do rotulo — tres canais, nenhum deles so a cor.
   overflow:hidden aqui e decisao: o card da Visao geral mostra CONTAGEM e
   pode cortar; o .metric dos paineis mostra DINHEIRO e nao corta (por isso o
   trilho dele, logo abaixo, tem o proprio arredondamento). */
.tile {
  position: relative; overflow: hidden; padding-top: 17px;
  border-left: 1px solid var(--ct-linha);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: ctSobe .4s ease both;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--ct-sombra-2); }
.tile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ct-linha); }
.tile--novo::after   { background: var(--g-novo); }
.tile--aguar::after  { background: var(--g-aguar); }
.tile--ok::after     { background: var(--g-ok); }
.tile--alerta::after { background: var(--g-alerta); }
.tile__cab { display: flex; align-items: center; gap: 9px; }
.tile__cab span { text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 12.5px; color: var(--ct-tinta-2); }
.tile strong { font-size: 30px; margin-top: 9px; line-height: 1; }
.tile__delta { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ct-tinta-3); font-variant-numeric: tabular-nums; }
.tile__delta b { font-weight: 600; color: var(--ct-tinta-2); }
/* O ponto e o segundo canal do estado: o rotulo ao lado dele e que carrega o
   sentido, para nao depender so de enxergar cor. */
.tile__estado { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--ct-tinta-2); }
.tile__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
/* Antes das variantes de cor forte, para que, quando um card carrega as duas
   classes, a cor da familia (--e-*) venca — como na pagina de origem. */
.tile--espera  .tile__estado { color: var(--ct-dourado); }
.tile--vencido .tile__estado { color: var(--ct-alerta); }
.tile--alerta  .tile__estado { color: var(--e-alerta-f); }
.tile--aguar   .tile__estado { color: var(--e-aguar-f); }
.bolha { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; background: var(--ct-rebaixo); color: var(--ct-tinta-3); }
.bolha svg { width: 15px; height: 15px; }
.b--novo   { background: var(--e-novo-s);   color: var(--e-novo-f); }
.b--aguar  { background: var(--e-aguar-s);  color: var(--e-aguar-f); }
.b--ok     { background: var(--e-ok-s);     color: var(--e-ok-f); }
.b--alerta { background: var(--e-alerta-s); color: var(--e-alerta-f); }

/* O TRILHO DO .metric SAI DA ESQUERDA E VAI PARA O TOPO (fatia 3). O ::after
   precisa de um pai posicionado; a Central ja o da, e esta linha garante o
   mesmo para as proximas telas sem que cada uma precise lembrar. */
.metric { position: relative; }
/* O `:not(.tile)` NAO E ENFEITE. Esta regra vem depois dos gradientes do
   .tile, e um trilho cinza escrito com a mesma forca (`.metric::after` e
   `.tile--novo::after` valem uma classe cada) apagaria os gradientes dos
   cards da Visao geral — que continuariam la, cinzas, sem erro nenhum.
   O .tile ja cuida do proprio trilho; aqui fica so o dos outros.
   E o trilho tem o PROPRIO arredondamento em vez de depender de corte:
   estes indicadores mostram dinheiro, e overflow:hidden cortaria o numero. */
.metric:not(.tile)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ct-linha); border-radius: var(--ct-r-md) var(--ct-r-md) 0 0; }
.metric.g::after { background: var(--g-ok); }
/* A classe `a` sempre foi ATENCAO ("faturas em aberto, revisar"), e nao a
   fila de aguardando — a mostarda parecia dourado e escondia a diferenca.
   Com o preto (08/08/2026) o trilho dela vai para o TRILHO DOURADO da casa
   (--ct-dourado-linha, 3,53:1 no branco), chapado: gradiente forte agora e
   so das seis cores de estado. */
.metric.a::after { background: var(--ct-dourado-linha); }
.metric.r::after { background: var(--g-alerta); }
.metric.b::after { background: var(--g-novo); }

/* O INDICADOR DE MODALIDADE DE PRECO (passo 1b, 08/08/2026). Padrão, Expresso
   e Imediato são CATEGORIA, não estado: pintá-los de verde, dourado e azul
   fazia a mesma cor querer dizer duas coisas na mesma tela — "deu certo" na
   etiqueta ao lado e "é o mais barato" aqui.

   O trilho fica NEUTRO e a modalidade passa a ser dita pelo PESO do rótulo,
   que é o canal certo: hierarquia de categoria é tipografia, não cor. A
   distinção entre os três continua existindo — pelo rótulo, pela ordem e pelo
   valor embaixo, que é o que a pessoa está de fato comparando. */
.metric--modo::after { background: var(--ct-linha-forte); }
.metric--modo > span { font-weight: var(--ct-peso-forte); color: var(--ct-tinta-2); }

/* A ESCOLHIDA (tarefa 4, 08/08/2026). Os três totais aparecem ao mesmo tempo
   porque a pergunta do cliente no WhatsApp é "e se for o mais rápido?" — a
   resposta tem de estar na tela sem clique. Mas uma das três é a que vai para
   a mensagem e para o fechamento, e ela precisa se distinguir das outras duas.

   PRETO, e não uma quarta cor. O sistema já usa o preto para "é isto que
   decide" — é o botão principal. Dar uma cor própria à modalidade escolhida
   seria inventar um quinto significado de cor numa tela que já carrega seis
   estados; o preto diz "esta é a que vale" sem competir com nenhum deles.

   O trilho vira preto CHAPADO e não gradiente: gradiente forte, nesta casa, é
   sempre estado. Modalidade continua sendo categoria mesmo quando escolhida. */
/* Ele virou <button> para poder ser escolhido pelo teclado e ser anunciado
   como escolha (aria-pressed). O reset e curto porque o resto vem do .metric,
   que ja e classe e vence o padrao do navegador — so a FONTE nao vinha, e sem
   ela o valor sairia em Arial 13px no meio da tela toda. */
.metric--modo { font: inherit; color: inherit; text-align: left; width: 100%;
  cursor: pointer; transition: border-color var(--ct-t-rapido) var(--ct-mov); }
.metric--modo:hover { border-color: var(--ct-linha-forte); }
.metric--modo[aria-pressed="true"]::after { background: var(--ct-tinta); }
.metric--modo[aria-pressed="true"] { border-color: var(--ct-tinta); }
.metric--modo[aria-pressed="true"] > span { color: var(--ct-tinta); }
.metric--modo[aria-pressed="true"] > strong { color: var(--ct-tinta); }

/* --- 17.4 Faixa de urgencia (.urg) -----------------------------------------
   UM elemento pulsa por tela, e e este. Dois pulsando e os dois param de
   chamar atencao — vira decoracao animada. O `.urg .act` posiciona o botao
   da faixa na classe que a Central usa; outra tela poe o botao dela no
   mesmo lugar com a mesma regra. */
.urg {
  display: flex; gap: 13px; align-items: flex-start;
  border-radius: var(--ct-r-md); padding: 14px 16px; margin-bottom: 18px;
  background: var(--e-alerta-s);
  border: 1px solid var(--e-alerta-b); border-left: 4px solid var(--e-alerta);
  box-shadow: var(--ct-sombra-1);
}
/* O NOME E `ctPulsaUrg`, E NAO `ctPulsa`. O central.html tem um @keyframes
   ctPulsa proprio (o pisca do selo "Gravando..."), e keyframes nao se somam:
   o ultimo definido vence, na folha INTEIRA — inclusive entre arquivos.
   Chamar este de ctPulsa trocaria a animacao do selo por esta, sem erro
   nenhum. Antes de nomear animacao nova, procure o nome em todas as folhas
   que a pagina carrega. */
.urg__p { width: 10px; height: 10px; border-radius: 50%; background: var(--e-alerta); margin-top: 6px; flex: 0 0 auto; animation: ctPulsaUrg 2s ease-in-out infinite; }
/* O halo e a propria cor de alerta com transparencia, via color-mix: esta
   folha nao escreve cor crua, e rgba fixo aqui seria a paleta em dois
   lugares. */
@keyframes ctPulsaUrg {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--e-alerta) 50%, transparent); }
  70%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--e-alerta) 0%, transparent); }
}
.urg strong { display: block; font-size: 14px; color: var(--e-alerta-f); }
.urg p { margin: 3px 0 0; font-size: 13px; color: var(--ct-tinta-2); }
.urg .act { margin-left: auto; flex: none; }

/* O GESTO DE ENTRADA da casa: painel, card de indicador e card do quadro
   aparecem com ele. Veio do central.html junto com o .tile — e como keyframes
   de nome repetido nao somam (o ultimo vence na folha inteira), ele mora SO
   aqui; o .tabPanel de la continua a usa-lo daqui. */
@keyframes ctSobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Quem pede menos movimento recebe menos — tambem nas pecas desta secao.
   O tokens.css (secao 12) ja reduz tudo; este bloco e a garantia explicita
   das pecas que pulsam ou entram animadas. */
@media (prefers-reduced-motion: reduce) {
  .tile, .urg__p { animation: none !important; transition: none !important; }
  .tile:hover { transform: none !important; }
}

/* ===========================================================================
   18. A ANATOMIA DO CARD DE PROCESSO
   ---------------------------------------------------------------------------
   AS DOZE QUE FICARAM SEM FOLHA (08/08/2026). Elas moravam no ct-tokens.css, e
   quando o Site 1 saiu daquela folha (passo 7, etapa 7.5) ficaram sem casa: a
   marcacao continuava emitindo <div class="ct-plate">, o elemento existia, e
   nao tinha estilo nenhum. A PLACA SUMIU DOS CARDS NO AR.

   E NAO ERA SO O SITE 1. O Site 2 tinha saido da mesma folha no passo 4, e usa
   as mesmas doze 22 vezes — .ct-fields, .ct-label, .ct-meta, .ct-sep,
   .ct-state e .ct-code estavam sem regra base la tambem. Duas telas, o mesmo
   buraco, e so uma delas foi vista.

   POR QUE AQUI E NAO DENTRO DE CADA PAGINA: o card e a peca que os dois sites
   dividem — a mesma gramatica, com a placa titulando de um lado e o numero do
   processo do outro. Duas copias divergiriam no primeiro ajuste, que e o
   defeito que este projeto existe para acabar.

   O QUE MUDOU DAS REGRAS ORIGINAIS: os nomes de token da v1 viraram os do
   sistema, entao elas viram com o tema — no ct-tokens.css nao viravam. E o
   `.ct-rail` NAO VEIO JUNTO, de proposito: ele ja tem outro dono nesta folha
   (a lateral de navegacao da secao 1), e as duas telas o chamam de
   `.ct-trilho` desde o passo 4. Dois significados para a mesma classe foi
   como a placa sumiu; nao se repete o caminho.
   =========================================================================== */

/* --- 18.1 O cabecalho do card --------------------------------------------- */
.ct-card__head { display: flex; align-items: flex-start; gap: 14px; padding: 16px var(--ct-pad-card) 14px 21px; }
.ct-card__head-fim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ct-titles { flex: 1; min-width: 0; }
.ct-titles h2 {
  margin: 0 0 3px; font-size: var(--ct-fs-card); font-weight: var(--ct-peso-forte);
  letter-spacing: var(--ct-ls-card); color: var(--ct-tinta);
}
/* Telas estreitas: o cabecalho quebra e a etiqueta de estado desce INTEIRA.
   Sem isto ela e cortada — o card tem overflow:hidden, entao o estado (a unica
   coisa que diz o que fazer com o processo) some fora da moldura, sem barra de
   rolagem para revelar. */
@media (max-width: 720px) {
  .ct-card__head { flex-wrap: wrap; }
  .ct-card__head-fim { width: 100%; justify-content: flex-start; }
}

/* --- 18.2 A grade de identificadores -------------------------------------- */
.ct-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--ct-linha-suave);
}
.ct-fields > div { padding: 11px var(--ct-pad-card) 12px 21px; border-right: 1px solid var(--ct-linha-suave); }
.ct-fields > div:last-child { border-right: 0; }

/* --- 18.3 Rotulo, apoio e separador --------------------------------------- */
/* O rotulo do sistema: sempre mono, sempre caixa alta pequena. */
.ct-label {
  font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
  letter-spacing: var(--ct-ls-rotulo); text-transform: uppercase;
  color: var(--ct-tinta-3); display: block; margin-bottom: 3px;
}
.ct-meta { font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); }
.ct-sep  { color: var(--ct-tinta-3); }
/* Identificador que se confere caractere a caractere. */
.ct-code {
  font-family: var(--ct-mono); font-size: var(--ct-fs-codigo);
  letter-spacing: -.01em; color: var(--ct-tinta);
}

/* --- 18.4 A PLACA MERCOSUL, e ela e literal de proposito -------------------
   Tarja azul em cima com BRASIL, corpo branco, caracteres pretos, moldura
   preta. Nao e enfeite: e por ela que a pessoa acha o processo na lista, e
   quanto mais parecida com o objeto real, mais rapido o olho reconhece. E o
   unico elemento do card que pode se dar ao luxo de ser literal.

   ELA NAO INVERTE NO TEMA ESCURO, e e a mesma razao: ela imita um objeto do
   mundo, e placa de carro e branca com letra preta as duas horas do dia. O
   cabecalho do ds/tokens.css ja registra essa excecao. Por isso os tres hex
   daqui — sao a cor do OBJETO, nao a cor do sistema. */
.ct-plate {
  display: inline-block; line-height: 1; white-space: nowrap;
  border: 2px solid #141412; border-radius: 6px;
  background: #FFFFFF; overflow: hidden; padding: 0;
  text-align: center;
  box-shadow: var(--ct-sombra-1);
}
.ct-plate small {
  display: block;
  background: #0B3E8D; color: #FFFFFF;   /* 10,06:1 — o azul do padrao Mercosul */
  font-family: var(--ct-fonte);
  font-size: 8px; font-weight: var(--ct-peso-forte); letter-spacing: .22em;
  padding: 2px 12px 2px;
}
/* Os caracteres. O respiro lateral e maior que o vertical de proposito: a
   placa real e 40x13 cm (3,08:1), e sem isso ela sai quadrada demais. */
.ct-plate b {
  display: block; font-weight: var(--ct-peso-forte);
  font-family: var(--ct-mono);
  font-size: 21px; letter-spacing: .1em;
  color: #111111;                        /* 18,88:1 sobre o branco da placa */
  padding: 4px 16px 5px;
  /* Processo sem placa cadastrada existe. Sem o minimo, a moldura encolhia ate
     virar um quadradinho e deixava de parecer placa justo na linha em que algo
     esta faltando. */
  min-width: 100px; box-sizing: content-box;
}

/* --- 18.5 O selo de estado e as caixas de aviso --------------------------- */
.ct-state {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--ct-fs-meta); font-weight: var(--ct-peso-medio);
  padding: 4px 10px; border-radius: var(--ct-r-pill);
  background: var(--ct-rebaixo); color: var(--ct-tinta-3);
}
.ct-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ct-state--alert { background: var(--ct-alerta-suave); color: var(--ct-alerta); }
.ct-state--info  { background: var(--ct-info-suave);   color: var(--ct-info); }
.ct-state--ok    { background: var(--ct-ok-suave);     color: var(--ct-ok); }

.ct-note {
  border-left: 3px solid var(--ct-info); border-radius: 0;
  background: var(--ct-info-suave); color: var(--ct-tinta);
  padding: 11px 14px; font-size: var(--ct-fs-corpo);
}
.ct-note--ok    { border-color: var(--ct-ok);     background: var(--ct-ok-suave); }
.ct-note--alert { border-color: var(--ct-alerta); background: var(--ct-alerta-suave); }

/* --- 18.6 As DUAS a mais que a trava achou -------------------------------
   O teste de classe-sem-folha, escrito para a placa, achou mais duas — e
   nenhuma das duas estava na lista da ordem de servico:

     .row-meta   usada pelo cnh.html
     .card-head  usada pelo painel.html

   As duas so existiam no premium-redesign.css e no ui-modern.css, que estao
   DESLIGADOS desde antes deste projeto (o index.html tem os dois <link>
   comentados). Ou seja: estavam sem estilo ha muito tempo, e nao por causa de
   nenhuma etapa daqui — a trava simplesmente foi a primeira coisa a olhar.

   Os valores sao os que o index.html ja usava para as mesmas classes: onde
   havia uma versao viva, ela e que vale. */
.row-meta  { color: var(--ct-tinta-3); font-size: var(--ct-fs-meta); line-height: 1.55; }
.card-head { padding: var(--ct-sp-6) var(--ct-sp-7); border-bottom: 1px solid var(--ct-linha); }

/* --- 18.7 A pastilha do prazo -------------------------------------------
   (O TRILHO DA FILA subiu para a secao 6, que e onde o card mora: escrever a
   mesma classe duas vezes na mesma folha e a armadilha em que a de baixo vence
   e a de cima fica parecendo viva. Duas variantes ate tinham valores
   diferentes nos dois lugares — --ok e --alerta.)

   O vermelho e o unico que pulsa, e so quando ha algo que a pessoa possa
   resolver HOJE: vencido e vence hoje. "Cadastro incompleto" e "Pendencia" sao
   vermelhos e NAO pulsam — eles esperam cadastro e resposta de terceiro, nao
   prazo. Um elemento pulsando por tela; dois sao dois que param de chamar
   atencao. */

/* A PASTILHA DO PRAZO. O vermelho e o unico que pulsa, e so quando ha algo que
   a pessoa possa resolver HOJE: vencido e vence hoje. "Cadastro incompleto" e
   "Pendencia" sao vermelhos e NAO pulsam — eles esperam cadastro e resposta de
   terceiro, nao prazo. Um elemento pulsando por tela; dois sao dois que param
   de chamar atencao. */
.ct-pas--pulsa { animation: ctPasPulsa 2.2s ease-in-out infinite; }
@keyframes ctPasPulsa { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--e-alerta) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ct-pas--pulsa { animation: none; } }

/* ===========================================================================
   A FOTO DO AVISO  (11/08/2026, pedido da dona)
   O quadro de avisos passou a aceitar uma foto por recado. A miniatura tem
   teto de altura: sem ele, uma foto em pé empurra os avisos seguintes para
   fora da tela e o quadro deixa de ser uma conversa.
   =========================================================================== */
.aviso__foto { display: block; margin-top: 8px; border-radius: var(--ct-r-sm); overflow: hidden; }
.aviso__foto img {
  display: block; max-width: 100%; max-height: 220px;
  object-fit: cover; border: 1px solid var(--ct-linha); border-radius: var(--ct-r-sm);
}
.aviso__foto:hover img { border-color: var(--ct-linha-forte); }

/* O botão de anexar, na barra de ações do campo. */
.avisos__foto {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12.5px; color: var(--ct-tinta-2);
  border: 1px solid var(--ct-linha); border-radius: var(--ct-r-pill); padding: 3px 10px;
}
.avisos__foto:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }

/* A prévia do que vai junto: pequena, com o nome ao lado e um ✕ para desistir. */
.avisos__anexo {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0;
  padding: 6px 8px; border: 1px solid var(--ct-linha); border-radius: var(--ct-r-sm);
  background: var(--ct-rebaixo);
}
.avisos__anexo img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.avisos__anexo__nome {
  flex: 1; min-width: 0; font-size: 12px; color: var(--ct-tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avisos__anexo__x {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ct-tinta-3); font-size: 13px; padding: 4px 6px; border-radius: 6px;
}
.avisos__anexo__x:hover { background: var(--ct-alerta-suave); color: var(--ct-alerta); }


/* ===========================================================================
   19. BARRA DE ACESSO (#firebaseAuthBanner)
   ---------------------------------------------------------------------------
   Veio do <style> do index.html em 12/08/2026, e virou secao numerada como as
   outras: o teste dos botoes recortava "da secao 17 ate o fim do arquivo", e
   bloco novo colado no fim caia dentro daquele recorte sem ser daquela familia.

   QUEM DESENHA ESTE LOGIN E O ADAPTER, nao a pagina: `renderAuthBanner()`, no
   firebase-adapter.js, monta a marcacao com as classes do redesign "premium"
   (ct-login-form, ct-user-pill, ct-topbar-*). O premium-redesign.css e o
   ui-modern.css, que as vestiam, estao comentados desde que aquele redesign
   quebrou as permissoes — entao a marcacao nasceu orfa de folha.

   O index.html tinha consertado isso PARA SI, com uma copia privada destas
   regras. O atendimento.html carrega o MESMO adapter e nunca recebeu o
   conserto: o formulario saia sem forma nenhuma, com o campo de e-mail em 841
   px (contra 209 no index) — o sintoma que o comentario original ja descrevia,
   "quem precisava entrar nao achava onde".

   POR ISSO ESTE BLOCO MORA AQUI AGORA, e nao em duas copias. Todo seletor esta
   presO ao #firebaseAuthBanner, entao as outras nove paginas que carregam esta
   folha nao veem diferenca: elas nao tem essa barra. Os tokens usados
   (--b-preto*, --ct-*) vivem todos no ds/tokens.css, que vem antes.

   O botao "Entrar" usa os tokens --b-preto*, e usa com razao: ele E botao, e o
   unico que decide nesta barra.
   =========================================================================== */
#firebaseAuthBanner {
  background: var(--ct-superficie);
  border-bottom: 1px solid var(--ct-linha);
  box-shadow: none;
  padding: 10px 20px;
  /* O JS escreve `display:flex` inline; aqui so completamos o alinhamento. */
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--ct-fonte);
}

/* Controles MORTOS: o botao de recolher menu e a busca global do topo só
   eram ligados pelo premium-ui.js, que está desativado. Sem ele nao fazem
   nada - clicar nao produz efeito algum. Ficam escondidos ate que voltem a
   ter funcao; um controle que nao responde e pior que controle nenhum.
   Isto NAO tem relacao com permissao: nao ha cargo que os use.

   O `.ct-alert-dot` entrou em 12/08/2026: e o pontinho de notificacao DENTRO
   do .ct-icon-btn, entao ja nao aparecia — sumia junto com o pai. Esta aqui
   porque escondido por heranca e invisivel para quem le a folha. */
#firebaseAuthBanner .ct-menu-toggle,
#firebaseAuthBanner .ct-topbar-search,
#firebaseAuthBanner .ct-alert-dot,
#firebaseAuthBanner .ct-icon-btn { display: none; }

#firebaseAuthBanner .ct-topbar-left { display: none; }

#firebaseAuthBanner .ct-topbar-actions,
#firebaseAuthBanner .ct-login-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- deslogado: o formulario de entrada --- */
#firebaseAuthBanner .ct-login-form > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--ct-tinta-2);
  white-space: nowrap;
}
#firebaseAuthBanner .ct-login-form input {
  width: auto;
  min-width: 190px;
  padding: 9px 12px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ct-tinta);
  background: var(--ct-superficie);
  border: 1px solid var(--ct-linha);
  border-radius: var(--ct-r-sm);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#firebaseAuthBanner .ct-login-form input:focus {
  border-color: var(--ct-anel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent);
}
/* O botao era dourado, depois lime. Desde 11/08/2026 ele e o PRETO da acao
   principal, como todo botao que decide nesta pagina — "Entrar" e a acao
   desta barra, e ela nao tem outra. */
#firebaseAuthBanner #firebaseEmailLoginBtn {
  padding: 9px 20px;
  font-size: 14.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--b-preto-letra);
  background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto));
  border: 1px solid transparent;
  border-radius: var(--ct-r-sm);
  cursor: pointer;
  box-shadow: 0 2px 9px -2px var(--b-halo-preto);
  transition: box-shadow .12s ease, filter .12s ease;
}
#firebaseAuthBanner #firebaseEmailLoginBtn:hover {
  box-shadow: 0 8px 20px -4px var(--b-halo-preto); filter: brightness(1.08);
}
/* A mensagem ("Entrando...", "Informe e-mail e senha.") ganha a linha
   inteira: em cima ela era empurrada para o lado do botao e passava
   despercebida justamente quando mais importava. */
#firebaseAuthBanner .ct-login-msg {
  flex-basis: 100%;
  text-align: right;
  font-size: 12.5px;
  color: var(--ct-tinta-3);
  margin-top: 2px;
}

/* --- logado: identificacao e sair --- */
#firebaseAuthBanner .ct-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  background: var(--ct-rebaixo);
  border: 1px solid var(--ct-linha);
  border-radius: 999px;
}
/* O avatar era dourado. Vira neutro: ele precisa que a inicial se leia, e
   nao de cor de marca — assim a duvida sobre dourado x lime nem se coloca. */
#firebaseAuthBanner .ct-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ct-rebaixo);
  border: 1px solid var(--ct-linha);
  color: var(--ct-tinta-2);
  font-family: var(--ct-mono);
  font-size: 12px;
  font-weight: 500;
}
#firebaseAuthBanner .ct-user-copy { display: flex; flex-direction: column; line-height: 1.25; }
#firebaseAuthBanner .ct-user-copy strong { font-size: 13.5px; color: var(--ct-tinta); }
#firebaseAuthBanner .ct-user-copy small { font-size: 11.5px; color: var(--ct-tinta-3); }
#firebaseAuthBanner .ct-logout-btn {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ct-tinta-2);
  background: transparent;
  border: 1px solid var(--ct-linha);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .18s;
}
#firebaseAuthBanner .ct-logout-btn:hover { background: var(--ct-rebaixo); }

@media (max-width: 720px) {
  #firebaseAuthBanner { padding: 10px 14px; }
  #firebaseAuthBanner .ct-login-form { width: 100%; }
  #firebaseAuthBanner .ct-login-form input { flex: 1 1 160px; min-width: 0; }
}

/* ===========================================================================
   ANATOMIA DO CARD E O AJUDANTE DE GRADE, VINDOS DO index.html  (18/08/2026)

   Estas cinco regras moravam no <style> do index.html. Quando ele virou
   arquivo (ds/site1-index.css, para valer cache), a trava `classe-sem-folha`
   pos a luz num defeito que existia ANTES e ninguem via: o cnh.html usa
   `card-main-body`, `card-main-toggle` e `card-collapse-body`, e o painel.html
   usa `full` -- e nenhuma das duas paginas carregava aquele <style>.

   Ou seja: elas ja estavam sem folha em producao. O que a extracao fez foi
   deixar isso VISIVEL para a regua.

   O lugar e aqui porque as tres primeiras sao ANATOMIA DE CARD, que ja mora
   nesta folha compartilhada, e porque as tres paginas carregam este arquivo.
   Foram MOVIDAS, e nao copiadas: duas definicoes do mesmo seletor divergem.
   =========================================================================== */
.full { grid-column: 1 / -1; }
.card-main-toggle {
  min-width: 96px;
}
.card-main-body {
  padding-top: 2px;
}
.card-main-body[hidden] {
  display: none;
}
.card-collapse-body {
  padding: 12px;
}