/* ══════════════════════════════════════════════════════════════════════════════════════════
   style-all.css — AS DUAS FOLHAS EM UMA (gerado em 17/10/2026)

   POR QUE ESTE ARQUIVO EXISTE
   O `base.html` carregava `style.css` (103.333 B) e logo depois `style-v3.css` (68.494 B).
   Medido: as duas folhas disputam **316 seletores**, e como o v3 vem depois, ele decide —
   ou seja, boa parte do `style.css` era baixada para ser imediatamente sobrescrita.

   O QUE ESTE ARQUIVO É
   A concatenacao literal das duas, nesta ordem: style.css e depois style-v3.css. A cascata
   e IDENTICA a de antes (mesmo conteudo, mesma ordem), entao nada muda de aparencia. O que
   muda e o custo: uma requisicao em vez de duas, e um lugar unico para a proxima limpeza.

   COMO REGENERAR (se editar qualquer uma das duas)
     cat static/style.css static/style-v3.css > static/style-all.css
   — mas preservando este cabecalho no topo.

   POR QUE NAO REESCREVI AS DUAS NUMA SO "DE VERDADE"
   Podar os 316 seletores mortos de `style.css` e uma cirurgia que precisa de comparacao
   visual tela por tela. Fica como proximo passo, com o inventario em
   `evidence/conflito-css-e-rotas.txt`. Aqui o ganho e estrutural e reversivel.

   ROLLBACK: no `base.html`, trocar as DUAS linhas por esta sozinha de volta.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   CONSOLE RENAJUD — LINGUAGEM VISUAL "LIMPA" (06/10/2026)

   PEDIDO DO OPERADOR: *"o design do site tá muito confuso, muita coisa, tente deixar clean e
   copiar a estética desse https://seuimposto.com/"*

   A REFERÊNCIA FOI MEDIDA, NÃO IMITADA DE MEMÓRIA (`deploy/estuda-referencia.cjs` leu as
   propriedades computadas no Chrome, em 1440 px):

     fundo ......... rgb(15, 14, 13)          → quase preto, quente
     superfície .... rgba(21, 20, 18, 0.84)   → vidro escuro
     texto ......... rgb(250, 250, 249)       | secundário rgb(166, 163, 156)
     acento ........ rgb(93, 126, 233) azul   | alerta rgb(241, 66, 66)
     UI ............ Geist 13 px / entrelinha 1.45   | display: Faustina (serifada)
     cartão ........ raio 16 px, borda 1px rgba(250,250,249,0.08), SEM sombra, padding 16 px
     pílulas ....... raio 100 px, fundo rgba(250,250,249,0.07–0.14)
     cromo ......... topo fino translúcido, SEM rodapé de colunas — minimalismo editorial

   O QUE SAIU, e por que isto é "clean": a faixa institucional, o cabeçalho azul com relevo, a
   régua dourada, os botões biselados, o papel creme, as sombras e as molduras duplas. Ficou
   UMA superfície, bordas de fio de cabelo, UM acento, tipografia densa e controle em pílula.

   CONTRATO PRESERVADO: todos os nomes de classe dos templates continuam valendo, e os literais
   exigidos pelos verificadores estão intactos (`.detalhe-bloco`, `.detalhe-grade`).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Fontes próprias (a CSP é `default-src 'self'`: fonte de CDN não carrega) ── */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/geist-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/geist-sans-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/geist-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Faustina"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/faustina-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Faustina"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/faustina-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Faustina"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/faustina-latin-600.woff2") format("woff2"); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PATCH 28 (17/10/2026) — TOKENS QUE O TEMA CLARO HERDOU DO TEMA ESCURO
   ───────────────────────────────────────────────────────────────────────────────────────────
   Aqui ficava o `:root` do tema ESCURO completo (`--fundo: #0f0e0d`, `--tinta: #fafaf9`,
   `--superficie: rgba(21,20,18,.84)`). O tema claro, declarado mais abaixo, redefine quase
   tudo — e onde redefine, é o valor dele que o browser pinta, não o daqui.

   Manter a duplicata tinha dois custos reais:
     · quem edita a linha de cima não vê efeito nenhum (foi o que aconteceu na patch 23, que
       escureceu `--tinta-3` aqui e o browser continuou com o valor de baixo);
     · os tokens que o tema claro NÃO redefine continuavam vindo do tema escuro por acidente,
       não por decisão.

   Então este bloco passou a conter SÓ o segundo caso: os tokens que sobrevivem de fato, aqui,
   do jeito que estão em uso. Superfícies, tintas, linhas, cores semânticas, raios, largura e
   fontes são declarados uma única vez, no bloco do tema claro.
   `--toque` também saiu daqui: o tema claro o define, e o valor que vale é o de lá.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Matizados para o fundo CLARO deste console (patch 29B). `--foco` era #8fa8f0, um
     azul-claro que dava 2,2:1 sobre branco. #4a7fd4 passa de 3:1 tanto sobre o papel claro
     (#ffffff) quanto sobre o navy do cabeçalho (#062b47) — as duas superfícies onde um foco
     cai aqui. `--acento-forte` escureceu na mesma direção. */
  --acento-forte:  #8cc2f5;
  --foco:          #9ccdf8;

  /* Escala de tipos: nomeada por degrau, valor por papel. Vale para o tema claro também. */
  --fs-3xs: 0.75rem;   /* 12 — miúdo: rótulo de célula, código, nota */
  --fs-2xs: 0.75rem;   /* 12 */
  --fs-xs:  0.75rem;   /* 12 */
  --fs-sm:  0.875rem;  /* 14 — CORPO: o degrau do texto corrente */
  --fs-md:  0.875rem;  /* 14 */
  --fs-lg:  1.0625rem; /* 17 — destaque */
  --fs-xl:  1.25rem;   /* 20 — subtítulo de seção */
  --fs-2xl: 1.5rem;    /* 24 — título */
  --fs-3xl: 1.5rem;    /* 24 */

  /* Altura de linha por papel, em vez de oito literais espalhados. */
  --lh-apertado: 1.1; --lh-titulo: 1.25; --lh-subtitulo: 1.35; --lh: 1.45; --lh-solto: 1.55;

  /* Escala de espaçamento. */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px;
  --e7: 32px; --e8: 40px; --e9: 48px; --e10: 64px;

  /* Respiro derivado da escala — depende de --e4/--e5/--e7/--e8 acima. */
  --goteira: clamp(var(--e4), 3vw, var(--e7));
  --respiro-pagina: clamp(var(--e5), 3vw, var(--e8));
}

/* ── DENSIDADE: COMPACTO x ESPAÇADO (06/10/2026) ──────────────────────────────────────────────
   A QUEIXA VIVA: *"o site muito confuso para usar, muita informação"*. Densidade é escolha do
   OPERADOR: monitor grande pede mais linhas por tela; tela pequena pede respiro. O CSS já tinha um
   modo compacto e **nada o ligava** — agora tem alternador no cabeçalho, e ele sobrevive à navegação.

   DUAS CORREÇÕES DE RUMO, as duas medidas:

   1. o compacto mexia em TAMANHO DE FONTE (`--fs-sm: 13px`), reintroduzindo um degrau que a rodada 10
      consolidou — a escala do console é 12 · 14 · 17 · 20 · 24, e 13 era justamente o tipo de degrau
      indistinguível que fazia tudo parecer igualmente importante. **O compacto mexe em ESPAÇO.**

   2. a primeira versão desta rodada ajustava componente por componente, com valores SUPOSTOS — e onde
      o original era menor, o "compacto" AUMENTOU a página (a home passou de 2364 para 2643 px). Agora
      a alavanca é UMA: a escala de espaçamento, reduzida ~20%. Todo uso de `--e*` é padding, margin ou
      gap, então a redução só pode diminuir — e `--toque` fica de fora, porque **alvo de toque não
      encolhe** (WCAG 2.5.8). */
/* O TEXTO NÃO ENCOLHE (a escala tipográfica fica intacta de propósito). */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fonte-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh);
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--acento); text-decoration: none; }
a:hover { color: #8fa8f0; text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: #a08fd8; }
/* LINK SEM CLASSE EM ÁREA DE DETALHE (06/10/2026): o `/admin/escritas` monta `<details>` com
   links dentro, e alguns chegaram a sair com a cor PADRÃO DO NAVEGADOR (rgb(16,82,137)) sobre
   fundo escuro — 2.04:1, quase invisível. Aqui toda âncora dentro de bloco de detalhe herda a
   cor do sistema. */
details a, summary a, .bloco-codigo a, pre a, code a { color: var(--acento); }
details a:visited, summary a:visited, .bloco-codigo a:visited, pre a:visited, code a:visited {
  color: #a08fd8;
}
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio); }

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--fundo-2); color: var(--tinta);
  border: 1px solid var(--linha-forte); padding: var(--e3) var(--e4); border-radius: var(--raio);
  min-height: var(--toque);
  display: inline-flex;
  align-items: center;
}
.pular-para-conteudo:focus { left: var(--e3); top: var(--e3); }

.container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--goteira); }

/* ── Topo fino e translúcido ───────────────────────────────────────────────── */
.faixa-util, .gov-faixa, .faixa-inner, .gov-faixa-inner, .faixa-selo { display: none; }
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 14, 13, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo-inner {
  max-width: 1440px; margin-inline: auto; padding: var(--e3) var(--goteira);
  display: flex; align-items: center; gap: var(--e5);
}
.marca { display: flex; align-items: baseline; gap: var(--e3); text-decoration: none; }
.marca-titulo { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.2px; color: var(--tinta); }
.marca-titulo span { color: var(--tinta-2); }
.marca-linha { font-size: var(--fs-2xs); color: var(--tinta-3); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--e4); }
.topo-servico { display: inline-flex; align-items: center; font-size: var(--fs-xs); color: var(--tinta-2); }
.topo-usuario { text-align: right; line-height: var(--lh-titulo); }
.topo-usuario-nome { display: block; font-size: var(--fs-xs); font-weight: 500; }
.topo-usuario-papel { display: block; font-size: var(--fs-3xs); color: var(--tinta-3); }
.form-sair { display: inline-flex; margin: 0; }
body.sem-sessao .topo-acoes { display: none; }
body.sem-sessao .corpo { grid-template-columns: 1fr; }

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: var(--e2); vertical-align: middle; }
.dot-online  { background: var(--ok); }
.dot-offline { background: var(--erro); }

.topo-menu { display: none; }
.topo-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--e2);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-pilula);
  padding: 5px var(--e4); font-size: var(--fs-xs); font-weight: 500; color: var(--tinta);
}
.topo-menu > summary::-webkit-details-marker { display: none; }
.topo-menu-painel {
  position: absolute; left: 0; right: 0; background: var(--fundo-2);
  border-bottom: 1px solid var(--linha); padding: var(--e4) var(--goteira) var(--e6); z-index: 60;
}
.topo-menu:not([open]) .topo-menu-painel { display: none; }

/* ── Corpo: lateral + conteúdo ─────────────────────────────────────────────── */
.corpo {
  max-width: 1440px; margin-inline: auto;
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--e8); padding: var(--e7) var(--goteira) var(--e10); align-items: start;
}
.lateral { position: sticky; top: 68px; display: flex; flex-direction: column; gap: var(--e5); }
.lateral-rotulo {
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); font-weight: 500; padding: 0 var(--e3) var(--e2);
}
.lateral-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lateral-lista a {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3);
  border-radius: var(--raio); color: var(--tinta-2); text-decoration: none;
  font-size: var(--fs-xs); font-weight: 500;
  transition: background var(--transicao), color var(--transicao);
}
.lateral-lista a:hover { background: var(--superficie-3); color: var(--tinta); }
.lateral-lista a.ativo { background: var(--superficie-4); color: var(--tinta); font-weight: 600; }
.lateral-lista .ico { color: var(--tinta-3); width: 16px; height: 16px; }
.lateral-lista a.ativo .ico { color: var(--acento); }
.lateral-texto { flex: 1 1 auto; min-width: 0; }
.lateral-contador {
  background: var(--erro-solido); color: #fff; border-radius: var(--raio-pilula);
  font-size: var(--fs-3xs); font-weight: 600; padding: 0 var(--e2); min-width: 18px; text-align: center;
}
.lateral-rodape { border-top: 1px solid var(--linha); padding-top: var(--e4); margin-top: var(--e2); }
.lateral-rodape-titulo, .lateral-bloco-indice { display: none; }
.lateral-rodape-item { font-size: var(--fs-2xs); color: var(--tinta-2); margin-bottom: var(--e1); }
.lateral-rotulo-mini { color: var(--tinta-3); }
.ico { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }

/* ── Cabeçalho de página ───────────────────────────────────────────────────── */
.pagina-cabecalho {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--e6); flex-wrap: wrap; margin-bottom: var(--e7);
}
.pagina-cabecalho-txt { min-width: 0; flex: 1 1 auto; }
.trilha-inline { font-size: var(--fs-2xs); color: var(--tinta-3); margin-bottom: var(--e2); }
.trilha-inline a { color: var(--tinta-2); }
.pagina-titulo {
  font-family: var(--fonte-display); font-size: var(--fs-3xl); font-weight: 500;
  line-height: var(--lh-apertado); letter-spacing: -0.01em; color: var(--tinta); margin: 0;
}
.secao-sub { font-size: var(--fs-xs); color: var(--tinta-2); margin-top: var(--e2); max-width: 68ch; }
.secao { margin-bottom: var(--e8); }
.pagina-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }

.cat-header, .titulo-secao {
  font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); margin-bottom: var(--e4);
}
h1, h2, h3 { font-weight: 500; letter-spacing: -0.01em; }
h2 { font-family: var(--fonte-display); font-size: var(--fs-xl); margin-bottom: var(--e3); }
h3 { font-size: var(--fs-md); margin-bottom: var(--e2); }

/* ── Superfície única ──────────────────────────────────────────────────────── */
.card-acao, .veiculo-card, .status-panel, .panel, .painel-grafico, .lateral-bloco,
.form-consulta, .login-card, .login-contexto, .comprovante-consulta {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-caixa); box-shadow: none;
}
.card-acao { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e2);
  transition: background var(--transicao), border-color var(--transicao); }
.card-acao:hover { background: var(--superficie-3); border-color: var(--linha-forte); text-decoration: none; }
.card-acao h3 { font-size: var(--fs-md); color: var(--tinta); margin: 0; }
.card-acao p { color: var(--tinta-2); font-size: var(--fs-xs); flex: 1 1 auto; }
.card-acao .card-rotulo, .card-rot {
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); font-weight: 500;
}
.card-rodape { margin-top: var(--e3); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--e4); }

.panel-header, .veiculo-card .card-header {
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linha);
  font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); background: none;
}
.veiculo-card .card-header { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0;
  color: var(--tinta); font-weight: 600; }
.panel-body, .veiculo-card .card-body { padding: var(--e5); }
.status-panel, .panel, .veiculo-card, .painel-grafico { margin-bottom: var(--e5); overflow: hidden; }
.login-card, .login-contexto { padding: var(--e6); max-width: 420px; margin-inline: auto; }

.card-grade {
  display: grid;
  /* LARGURA APROVEITADA (06/10/2026): era minmax(230px, 1fr) com gap de 24px, e numa grade de
     730px isso dava 3 x 230 + 2 x 24 = 738 — oito pixels a mais que o disponível, e o auto-fit
     caía para DUAS colunas de 353px, jogando 15 campos em 11 linhas. Com minmax(200px, 1fr)
     cabem três colunas (648px) e a ficha encurta sem esconder um único dado. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e4) var(--e6);
}
.card-campo { display: block; min-width: 0; }
.card-campo-largo { grid-column: 1 / -1; }
.heroi { display: none; }

/* ── Botões em pílula ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  padding: 6px var(--e4); min-height: 32px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio-pilula);
  background: var(--superficie-2); color: var(--tinta);
  text-decoration: none; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
  /* RÓTULO DE BOTÃO É UMA UNIDADE (06/10/2026): na coluna estreita de `/admin` o botão "Ver"
     saía quebrado em duas linhas. Rótulo de controle é uma unidade. */
  white-space: nowrap;
}
.btn:hover { background: var(--superficie-4); color: var(--tinta); text-decoration: none; }
.btn-primario, .btn-green {
  /* CONTRASTE AA (06/10/2026): era `var(--acento)` (#5d7ee9), que com texto branco dá 3.73:1 —
     abaixo do 4.5 exigido para texto normal, e é o estilo de "Copiar comprovante" e "Consultar
     veículo". O `--acento-solido` (#5371d1) dá 4.52:1. `--acento` segue como cor de TEXTO, borda
     e estado, onde o fundo é o escuro da página. */
  background: var(--acento-solido); border-color: var(--acento-solido); color: #fff;
}
.btn-primario:hover, .btn-green:hover { background: var(--acento-forte); border-color: var(--acento-forte);
  color: #fff; }
.btn-red { background: rgba(241, 66, 66, 0.16); border-color: rgba(241, 66, 66, 0.4); color: #ff9c9c; }
.btn-red:hover { background: rgba(241, 66, 66, 0.28); color: #ffc4c4; }
.btn-grande { font-size: var(--fs-sm); padding: 9px var(--e6); min-height: 40px; }
.btn-compacto { padding: 3px var(--e3); min-height: 26px; font-size: var(--fs-2xs); }
.btn-bloco { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Selos e chips em pílula ───────────────────────────────────────────────── */
.badge-active, .badge-inactive, .badge-neutro, .badge-web, .badge-ws, .chip, .estado-inline {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--fs-3xs); font-weight: 500; padding: 1px var(--e3);
  border-radius: var(--raio-pilula); border: 1px solid var(--linha);
  background: var(--superficie-2); color: var(--tinta-2);
  white-space: nowrap; vertical-align: middle;
}
.badge-active { background: var(--ok-fundo); color: var(--ok); border-color: rgba(62, 207, 142, 0.3); }
.badge-inactive { color: var(--tinta-3); }
.badge-web { background: var(--aviso-fundo); color: var(--aviso); border-color: rgba(229, 160, 0, 0.3); }
.badge-ws {
  /* CONTRASTE AA (06/10/2026): o texto usava `--acento`, validado sobre o fundo ESCURO da
     página — mas dentro do selo o fundo é azulado, e a combinação dava 4.04:1. Este é o tom de
     acento calculado PARA O FUNDO DO SELO. */
  background: var(--acento-fundo); color: var(--acento-texto);
  border-color: rgba(93, 126, 233, 0.3);
}
.estado-ok { color: var(--ok); border-color: rgba(62, 207, 142, 0.3); }
.estado-erro { color: var(--erro); border-color: rgba(241, 66, 66, 0.3); }
.restricao-badge { margin-left: var(--e2); }
.chip-forte { background: var(--superficie-4); color: var(--tinta); border-color: transparent; }
.chip-fraco { color: var(--tinta-3); }
.faixa-resumo { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-bottom: var(--e3); }

/* ── Indicadores ───────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e4); margin-bottom: var(--e7); }
.kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-caixa);
  padding: var(--e5); display: flex; flex-direction: column; gap: var(--e1); }
.kpi-alerta, .kpi-bom, .kpi-ouro { border-color: var(--linha); }
.kpi-rotulo { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); font-weight: 500; display: flex; align-items: center; gap: var(--e2); }
.kpi-valor { font-size: var(--fs-2xl); font-weight: 500; color: var(--tinta); line-height: var(--lh-apertado);
  font-variant-numeric: tabular-nums; }
.kpi-nota { font-size: var(--fs-2xs); color: var(--tinta-3); }

/* ── Gráficos ──────────────────────────────────────────────────────────────── */
.grafico-corpo { padding: var(--e5); }
.grafico-svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-rotulo { font-size: var(--fs-3xs); fill: var(--tinta-3); font-family: var(--fonte-ui); }
.grafico-barra { fill: var(--acento); }
.grafico-barra-alt { fill: rgba(93, 126, 233, 0.45); }
.grafico-eixo { stroke: var(--linha); stroke-width: 1; }
.grafico-valor { fill: var(--tinta-2); font-weight: 600; }
.grafico-titulo-serie { font-size: var(--fs-2xs); color: var(--tinta-2); margin-bottom: var(--e2);
  display: flex; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.grafico-max { color: var(--tinta-3); }
.grafico-legenda { display: flex; gap: var(--e5); flex-wrap: wrap; margin-top: var(--e3);
  font-size: var(--fs-2xs); color: var(--tinta-2); }
.grafico-legenda span { display: inline-flex; align-items: center; gap: var(--e2); }
.amostra-cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.amostra-azul { background: var(--acento); }
.amostra-medio { background: rgba(93, 126, 233, 0.45); }
.grade-dupla { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--e5); align-items: start; }

/* ── Barras horizontais ────────────────────────────────────────────────────── */
.barra-linha { display: grid; grid-template-columns: minmax(96px, 148px) minmax(0, 1fr) 44px;
  gap: var(--e3); align-items: center; margin-bottom: var(--e2); }
.barra-rotulo { font-size: var(--fs-2xs); color: var(--tinta-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; 
  /* SEM `text-transform: capitalize` (06/10/2026): em português ele escreve errado —
     "Comprovante Da Retirada (2ª Via)". Os rótulos já vêm capitalizados do `rotulo_acao`,
     e o CSS estava desfazendo esse trabalho. */}
.barra-trilha { height: 6px; background: var(--superficie-3); border-radius: var(--raio-pilula); overflow: hidden; display: block; }
.barra-preenchida { display: block; height: 100%; background: var(--acento); border-radius: var(--raio-pilula); min-width: 3px; }
.barra-alt { background: rgba(93, 126, 233, 0.5); }
.barra-numero { font-size: var(--fs-2xs); color: var(--tinta-2); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Atividade ─────────────────────────────────────────────────────────────── */
.feed { list-style: none; margin: 0; padding: 0; }
.feed-item { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--linha); }
.feed-item:last-child { border-bottom: none; }
.feed-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-3); margin-top: 6px; flex: 0 0 auto; }
.feed-ponto-alerta { background: var(--erro); }
.feed-ponto-bom { background: var(--ok); }
.feed-txt { flex: 1 1 auto; min-width: 0; }
.feed-titulo { font-size: var(--fs-xs); color: var(--tinta); }
.feed-meta { font-size: var(--fs-3xs); color: var(--tinta-3); }

/* ── Tabelas planas ────────────────────────────────────────────────────────── */
.forum-table, .form-table, .tabela-retirada, .tabela-permissoes {
  width: 100%; border-collapse: collapse; font-size: var(--fs-xs);
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-caixa); overflow: hidden; margin-bottom: var(--e5);
}
.forum-table th, .form-table th, .tabela-retirada th, .tabela-permissoes th {
  background: none; color: var(--tinta-3); text-align: left; font-weight: 500;
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha);
  white-space: nowrap; position: sticky; top: 0; z-index: 1; backdrop-filter: blur(8px);
}
.forum-table td, .form-table td, .tabela-retirada td, .tabela-permissoes td {
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); vertical-align: top; color: var(--tinta-2);
}
.forum-table tr:last-child td, .tabela-retirada tr:last-child td { border-bottom: none; }
.forum-table tbody tr:hover td, .tabela-retirada tbody tr:hover td { background: var(--superficie-2); }
.forum-table td.num, .forum-table th.num, .tabela-retirada td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.linha-principal > td { color: var(--tinta); }
.ordenar-dica { color: var(--tinta-3); }
th[aria-sort="ascending"] .ordenar-dica::after { content: " ↑"; color: var(--acento); }
th[aria-sort="descending"] .ordenar-dica::after { content: " ↓"; color: var(--acento); }

.detalhe-grade { display: grid; grid-template-columns: 168px 1fr; gap: var(--e1) var(--e5); font-size: var(--fs-2xs); }
/* GRADE DE RÓTULO E VALOR (06/10/2026): antes `display: block` com `grid-column: 1 / -1`, o que
   fazia rótulo e valor correrem como texto na mesma linha — com a grade de duas colunas existindo
   ao lado, sem uso. Cada bloco agora é a sua própria grade de duas colunas com o MESMO trilho de
   168px, então todos os rótulos alinham entre si e todos os valores começam no mesmo ponto. O
   `white-space: normal` e a quebra de linha continuam — o texto longo (endereço, órgão) flui na
   coluna do valor, e não volta para debaixo do rótulo. */
.detalhe-bloco {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0 var(--e5);
  margin: 0; white-space: normal; grid-column: 1 / -1; align-items: baseline;
}
.detalhe-bloco > .detalhe-rotulo { grid-column: 1; }
.detalhe-bloco > .detalhe-rotulo ~ *:not(.detalhe-rotulo) { grid-column: 2; }
.detalhe-rotulo { color: var(--tinta-3); }
.detalhe-sep { display: none; }
.detalhe-cod { color: var(--tinta-3); font-family: var(--fonte-num); font-size: var(--fs-3xs); }
.celula-orgao { color: var(--tinta-2); }
.celula-acoes { white-space: nowrap; }
.fipe-detalhe { font-size: var(--fs-2xs); color: var(--tinta-3); }
.fipe-valor { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.item-retirada { display: inline-block; }
.item-retirada .item-orgao { color: var(--tinta-3); }
.item-retirada + br { line-height: calc(var(--lh-solto) + 0.35); }

.barra-tabela { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3);
  background: var(--superficie); border: 1px solid var(--linha); border-bottom: none;
  border-radius: var(--raio-caixa) var(--raio-caixa) 0 0; padding: var(--e4) var(--e5); }
.barra-tabela-campo { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.barra-tabela-campo label { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); font-weight: 500; }
.barra-tabela-campo input[type="search"] { min-width: 220px; }
.barra-tabela-campo select { min-width: 170px; }
.barra-tabela-acoes { display: flex; align-items: center; gap: var(--e3); margin-left: auto; }
.barra-tabela-contagem { font-size: var(--fs-2xs); color: var(--tinta-3); white-space: nowrap; }
.barra-tabela + table.forum-table { border-radius: 0 0 var(--raio-caixa) var(--raio-caixa); margin-top: 0; }
.tabela-vazio { border: 1px solid var(--linha); border-top: none; border-radius: 0 0 var(--raio-caixa) var(--raio-caixa);
  background: var(--superficie-2); padding: var(--e5); font-size: var(--fs-xs); color: var(--tinta-2);
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.tabela-vazio[hidden] { display: none; }

/* ── Ficha ─────────────────────────────────────────────────────────────────── */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e7); align-items: start; }
.ficha-principal { min-width: 0; }
.ficha-lateral { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--e4); }
.lateral-bloco-titulo { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); font-weight: 500; padding: var(--e4) var(--e5) 0; }
.lateral-acoes { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) var(--e5) var(--e5); }
.resumo-dl { margin: 0; padding: var(--e4) var(--e5) var(--e5); }
.resumo-dl dt { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-3); margin-top: var(--e3); }
.resumo-dl dt:first-child { margin-top: 0; }
.resumo-dl dd { font-size: var(--fs-xs); margin: 1px 0 0; overflow-wrap: anywhere; }
.lateral-indice { list-style: none; margin: 0; padding: var(--e4) var(--e5) var(--e5); }
.lateral-indice li { margin-bottom: var(--e2); }
.lateral-indice a { font-size: var(--fs-xs); }

/* ── Formulários ───────────────────────────────────────────────────────────── */
.form-consulta { padding: var(--e5); margin-bottom: var(--e5); }
.form-consulta > summary { cursor: pointer; font-size: var(--fs-md); font-weight: 500; color: var(--tinta);
  list-style: none; display: flex; align-items: center; gap: var(--e3); }
.form-consulta > summary::-webkit-details-marker { display: none; }
.form-consulta[open] > summary { margin-bottom: var(--e5); padding-bottom: var(--e4); border-bottom: 1px solid var(--linha); }
.form-table { border: none; background: none; border-radius: 0; }
/* RÓTULO DE FORMULÁRIO QUEBRA LINHA (06/10/2026): o `nowrap` dos `<th>` vale para cabeçalho de
   tabela de DADOS ("ID", "Tipo"), onde o orçamento de colunas depende dele. Aqui o rótulo é uma
   FRASE — com zoom 200% ela era cortada em 8 px pelo `overflow: hidden` do container, sem aviso. */
.form-table th, .form-table td { white-space: normal; }
/* a célula de rótulo do formulário também: era `nowrap` com 160 px fixos, e a coluna de opções
   precisava de 635 — juntas davam 795 numa tabela de 635, e o `overflow: hidden` do container
   cortava 8 px. Medido com `deploy/mede-zoom-200.cjs` e a sonda que aponta QUAL filho transborda. */
.form-table th { background: none; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs);
  color: var(--tinta-2); font-weight: 500; padding: var(--e2) var(--e5) var(--e2) 0; border: none;
  vertical-align: middle; position: static; }
.form-table td { padding: var(--e2) 0; border-bottom: none; }
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e4); }
.form-acao { grid-column: 1 / -1; display: flex; gap: var(--e3); flex-wrap: wrap; }
label { font-size: var(--fs-xs); color: var(--tinta-2); }
.campo-ajuda { display: block; font-size: var(--fs-3xs); color: var(--tinta-3); margin-top: var(--e1); }

input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="email"], select, textarea {
  font-family: inherit; font-size: var(--fs-xs); color: var(--tinta);
  background: var(--superficie-2); border: 1px solid var(--linha-forte);
  border-radius: var(--raio); padding: var(--e2) var(--e3); min-height: 34px; max-width: 100%;
  transition: border-color var(--transicao), background var(--transicao);
}
input:hover, select:hover, textarea:hover { background: var(--superficie-3); }
input:focus, select:focus, textarea:focus { border-color: var(--acento);
  /* PATCH 29B: `outline` no `:focus` (nao so no `:focus-visible`). Duas razoes medidas:
     o `outline: none` daqui vencia o anel por especificidade, e campo de formulario deve
     mostrar o anel em QUALQUER foco — e o padrao de design system para input e o que o
     teclado do operador encontra. O halo em `--acento-fundo` (#e8f1f9) era invisivel. */
  outline: 2px solid var(--foco); outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(74, 127, 212, .30); }
.placa-input { font-family: var(--fonte-num); font-size: var(--fs-lg); letter-spacing: 2px;
  text-transform: uppercase; min-height: 42px; }
select option { background: var(--fundo-2); color: var(--tinta); }

/* ── Avisos ────────────────────────────────────────────────────────────────── */
.alert { border: 1px solid var(--linha); border-radius: var(--raio-caixa);
  padding: var(--e4) var(--e5); margin-bottom: var(--e4); font-size: var(--fs-xs);
  background: var(--superficie); color: var(--tinta-2);
  /* O TEXTO DO ALERTA FLUI; SÓ O RÓTULO FICA AO LADO (06/10/2026). Aqui era `display: flex`,
  e isso transformava CADA `<b>` da frase num item de flex — o texto quebrava em cada negrito e
  virava frases soltas com parêntese órfão: "…são os crus , como saíram". Marcação certa, layout
  errado. Com `block` + rótulo `inline-block`, o alerta continua tendo o seu rótulo à esquerda e o
  texto volta a ser texto. */
  display: block; }
.alert::before { display: inline-block; margin-right: var(--e3); }
.alert-ok { background: var(--ok-fundo); border-color: rgba(62, 207, 142, 0.25); }
.alert-error { background: var(--erro-fundo); border-color: rgba(241, 66, 66, 0.25); }
.alert-warning { background: var(--aviso-fundo); border-color: rgba(229, 160, 0, 0.25); }
.alert-info { background: var(--info-fundo); border-color: rgba(93, 126, 233, 0.25); }
.alert-ok::before      { content: "OK"; color: var(--ok); font-weight: 600; }
.alert-error::before   { content: "ERRO"; color: var(--erro); font-weight: 600; }
.alert-warning::before { content: "ATENÇÃO"; color: var(--aviso); font-weight: 600; }
.alert-info::before    { content: "AVISO"; color: var(--acento); font-weight: 600; }

/* ── Colunas de valor curto NÃO quebram ──────────────────────────────────────
   Defeito MEDIDO no ar em 06/10/2026 (rodada 13): a tabela de administração é
   `table-layout` automático com larguras declaradas no `<th>` — e o navegador
   parte a palavra quando a largura declarada é menor que o conteúdo. Na captura
   de 1440px, o id 97 saía como "9" numa linha e "7" na de baixo, e o papel
   "admin" como "admi"/"n". Isso não é só feio: ID quebrado se lê como outro
   número. O `white-space: nowrap` já existia, mas SÓ no bloco responsivo (onde
   a tabela vira rolável) — no desktop não valia para nada.
   Regra: célula de identificador, código, data/hora, IP, porta ou contagem
   recebe `.col-curta`. Texto corrido (rota, nome, corpo) continua quebrando. */
.col-curta { white-space: nowrap; }

/* Orientacao de campo — NAO e aviso. A caixa `.alert` reserva o prefixo "AVISO"/
   "ATENÇÃO" e uma cor de fundo para o que o operador precisa NOTAR. Uma instrucao de
   preenchimento ("escolha o tipo de busca...") nao e isso: usava o mesmo desenho e
   competia com o formulario. Medido na tela de 06/10 (rodada 11). */
.dica-campo { font-size: var(--fs-2xs); color: var(--tinta-3); margin: var(--e3) 0 var(--e4); max-width: 60ch; }
.dica-campo b { color: var(--tinta-2); }

/* ── Estatísticas ──────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e5); }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--e6); }
.stat-cell, .stat-item { flex: 1 1 180px; min-width: 0; }
.stat-label { display: block; font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-3); font-weight: 500; margin-bottom: var(--e1); }
.stat-value { display: block; font-size: var(--fs-lg); color: var(--tinta); font-weight: 500;
  font-variant-numeric: tabular-nums; }

/* ── Utilitários ───────────────────────────────────────────────────────────── */
.spacer-10 { height: var(--e5); }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.font-small { font-size: var(--fs-2xs); }
.font-bold { font-weight: 600; }
.color-red { color: var(--erro); }
.color-green { color: var(--ok); }
.color-blue { color: var(--acento); }
.label { color: var(--tinta-2); }
.linha-detalhe { padding-left: var(--e5); }
.linha-familia { background: var(--superficie-2); font-weight: 500; }
.removidas, .erros { font-size: var(--fs-xs); }
.erros { color: var(--erro); }
.filter, .filtro { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-bottom: var(--e5); }
.category { font-family: var(--fonte-display); font-size: var(--fs-xl); color: var(--tinta); }
.col-perm { white-space: nowrap; }
.tabela-permissoes td, .tabela-permissoes th { font-size: var(--fs-2xs); }
.totp-bar { height: 4px; background: var(--superficie-3); border-radius: var(--raio-pilula); overflow: hidden; margin-top: var(--e2); }
.totp-bar-fill { height: 100%; background: var(--ok); transform-origin: left; transition: transform 1s linear; width: 100%; }

.stat-value, .fipe-detalhe, .detalhe-cod, .detalhe-bloco, .card-campo, td, .alert,
code, pre, .panel-body, .font-small, .status-panel { overflow-wrap: anywhere; }
/* BLOCO DE CÓDIGO/JSON NO TEMA (06/10/2026): três telas montavam a caixa com estilo em linha e
   cor CLARA fixa (`#f4f6f8` com borda `#dde3e8`) — um retângulo branco no meio de uma interface
   escura. Aqui o bloco passa a ter a mesma linguagem das outras superfícies (fundo translúcido
   sobre a superfície, borda do tema), mantendo o que ele precisa dizer: "isto é conteúdo cru,
   como o alvo devolveu". A ROLAGEM continua, porque payload não se corta. */
/* Linha de tabela com erro: mesma linguagem do alerta de erro, e NÃO o rosa claro que estava
   fixo no estilo em linha (#fff0f0) dentro do tema escuro. */
/* CONTRASTE DENTRO DO BLOCO DE ERRO (06/10/2026): no /admin/escritas, o vermelho do código e o
   link do ID ficavam em 4.42:1 e 4.44:1 sobre o fundo do bloco (47,25,23) — reprovam igual a
   2:1, porque a régua é 4.5. Aqui os dois ganham o tom calculado PARA ESTE fundo. */
.linha-erro .color-red, .linha-erro .color-green { color: #f14747; }
.linha-erro a { color: #5f80eb; }
.linha-erro { background: var(--erro-fundo); }
tr.linha-erro td { border-bottom-color: rgba(241, 66, 66, 0.18); }

.bloco-codigo {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-caixa);
  padding: var(--e4);
  margin: 0 0 var(--e4);
  max-height: 320px;
  overflow: auto;
  font-size: var(--fs-2xs);
  line-height: var(--lh);
  color: var(--tinta-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
code, pre { font-family: var(--fonte-num); font-size: var(--fs-2xs); color: var(--tinta-2);
  background: var(--superficie-2); padding: 1px 5px; border-radius: 4px; }
img, table, pre { max-width: 100%; }

/* ── Rodapé: uma faixa só ──────────────────────────────────────────────────── */
.site-footer, #footer { border-top: 1px solid var(--linha); padding: var(--e6) 0;
  font-size: var(--fs-2xs); color: var(--tinta-3); margin-top: var(--e9); }
/* ALTURA RESERVADA (06/10/2026, rodada 21). O CLS das telas de formulario media 0.088 com a
   fonte sendo o RODAPE: as colunas subiam 71px de uma vez quando a fonte web (Geist) entrava
   no lugar da de fallback — larguras de texto diferentes mudam onde a linha quebra. Reservar
   a altura que o bloco ocupa resolve sem esconder nada: o espaco ja esta la quando o texto
   chega. As imagens da marca receberam largura explicita pelo mesmo motivo. */
.footer-grade { display: flex; flex-wrap: wrap; gap: var(--e5) var(--e8); align-items: baseline; padding-block: 0; min-height: 150px; }
.footer-col { flex: 0 1 auto; }
.footer-col h2, .footer-col h3 { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); font-weight: 500; margin-bottom: var(--e2); }
.footer-col ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e3); }
.footer-col li { margin: 0; }
.footer-col a { color: var(--tinta-2); font-size: var(--fs-2xs); }
.footer-col p { color: var(--tinta-3); font-size: var(--fs-2xs); max-width: 46ch; }
.footer-identificador { border-top: 1px solid var(--linha); margin-top: var(--e5); padding-top: var(--e4); }
.footer-identificador .container { display: flex; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.assinatura { font-size: var(--fs-3xs); color: var(--tinta-3); }
.footer-meta { font-size: var(--fs-3xs); color: var(--tinta-3); }
#conteudo { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   COMPONENTES DAS TELAS (classes introduzidas na revisão anterior, reestilizadas
   aqui na linguagem limpa). Sem estas regras, as telas de login, o painel de
   atalhos e a prévia do comprovante ficariam SEM estilo — o levantamento de
   classes contra os 15 templates é o que garante isso.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Acessibilidade: texto só para leitor de tela */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.sep { color: var(--tinta-3); margin-inline: var(--e2); }
.topo-servico-txt { white-space: nowrap; }
.acao-inline { display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.celula-id { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.celula-estado { white-space: nowrap; }
.estado-aviso { color: var(--aviso); border-color: rgba(229, 160, 0, 0.3); }
.estado-info { color: var(--acento); border-color: rgba(93, 126, 233, 0.3); }

/* Login: cartão único, centrado, sem moldura dramática */
.login-shell { min-height: calc(100vh - 120px); display: grid; place-items: center; padding: var(--e7) 0; }
.login-card { width: 100%; padding: var(--e8); }
.login-contexto { width: 100%; margin-top: var(--e4); padding: var(--e6); }
.login-contexto-icone { width: 28px; height: 28px; color: var(--acento); margin-bottom: var(--e3); }
.login-recuperacao { display: block; margin-top: var(--e4); font-size: var(--fs-2xs); color: var(--tinta-3); }

/* Atalhos de operação (painel) */
.atalhos-titulo { font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--tinta-3); margin-bottom: var(--e4); }
.atalhos-operacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
.atalho-linha {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-caixa);
  color: var(--tinta); text-decoration: none; font-size: var(--fs-xs);
  transition: background var(--transicao), border-color var(--transicao);
}
.atalho-linha:hover { background: var(--superficie-3); border-color: var(--linha-forte); text-decoration: none; }
.atalho-perigo { color: #ff9c9c; }
.atalho-perigo:hover { background: rgba(241, 66, 66, 0.12); border-color: rgba(241, 66, 66, 0.35); }
.atalho-seta { margin-left: auto; color: var(--tinta-3); }

/* Blocos de operação e formulário do painel */
.grade-operacao { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e5); align-items: start; }
.operacao-cabecalho { margin-bottom: var(--e3); }
.operacao-sobretitulo { font-size: var(--fs-2xs); color: var(--tinta-3); }
.operacao-principal { min-width: 0; }
.painel-formulario { padding: var(--e5); }
.consulta-rapida { display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap; }
.form-grade-compacta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e3); }
.form-pilha { display: flex; flex-direction: column; gap: var(--e2); }
.lateral-bloco-acoes, .lateral-bloco-resumo { border-radius: var(--raio-caixa); overflow: hidden; }

/* Prévia do comprovante: é DOCUMENTO — sai em papel claro, mesmo no tema escuro */
.comprovante-visual {
  background: #fbfbfa; color: #1a1a18;
  border: 1px solid rgba(0, 0, 0, 0.12); border-radius: var(--raio);
  padding: var(--e6); font-size: var(--fs-2xs); line-height: var(--lh-solto);
}
.comprovante-visual h2, .comprovante-visual h3, .comprovante-visual b { color: #111; }
.comprovante-visual a { color: #2b4bb5; }
.comprovante-visual code { background: rgba(0, 0, 0, 0.06); color: #333; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOVIMENTO E MARCA (06/10/2026)

   PEDIDO DO OPERADOR: *"crie sistemas e animações únicas e profissionais e tente
   deixar mais clean e use logos oficiais png do renajud e gov"*

   PRINCÍPIO DO MOVIMENTO AQUI: animação é INFORMAÇÃO, não enfeite. Cada uma das
   abaixo responde a uma pergunta do operador — "o que mudou?", "está carregando?",
   "onde eu cliquei?" — e nenhuma passa de 240 ms. Nada de parallax, nada de blobs,
   nada de laço infinito decorativo.

   As marcas são ARQUIVOS OFICIAIS baixados das fontes (ver `static/img/PROCEDENCIA.md`):
   o RENAJUD vem do próprio sistema e o gov.br do tema do Portal do Governo Federal.
   Nenhuma foi redesenhada ou recolorida — só escalada mantendo a proporção.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Movimento — declarado UMA vez. Antes eram dois `:root` (764 e 1002) repetindo as mesmas
   três durações, separados por 240 linhas de regras. `--stagger` e `--dist-entrada` só
   existiam no segundo. */
:root {
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --stagger: 28ms;
  --dist-entrada: 6px;
}

/* ── 1. ENTRADA: o conteúdo assenta em vez de aparecer de uma vez ────────────
   O índice de escalonamento (`--i`) é distribuído pelo `ux.js`. Sem JavaScript, a
   animação simplesmente não roda e a página fica completa e estática — nunca vazia. */
@keyframes assenta {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.rx { animation: assenta var(--dur-3) var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }

/* ── 2. FOCO E TOQUE: o alvo responde a quem chegou nele ────────────────────── */
.card-acao, .atalho-linha, .lateral-lista a, .btn, .forum-table tbody tr {
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card-acao:hover, .atalho-linha:hover { transform: translateY(-1px); }
.lateral-lista a:hover .ico { transform: translateX(2px); }
.lateral-lista .ico { transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.forum-table tbody tr:hover td { background: var(--superficie-3); }
.btn:active { transform: scale(0.985); }

/* ── 3. PROGRESSO: "está trabalhando" — barra fina no topo, sem travar a tela ── */
.barra-progresso {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--acento);
  transform-origin: left; transform: scaleX(0);
  z-index: 999; opacity: 0;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
.barra-progresso.ativa {
  opacity: 1;
  animation: progride 1.4s var(--ease) infinite;
}
@keyframes progride {
  0%   { transform: scaleX(0); }
  55%  { transform: scaleX(0.72); }
  100% { transform: scaleX(1); opacity: 0.35; }
}

/* ── 4. ESPERA: esqueleto no lugar do conteúdo que ainda não chegou ─────────── */
.esqueleto {
  position: relative; overflow: hidden;
  background: var(--superficie-2); border-radius: var(--raio);
  color: transparent !important; user-select: none;
}
.esqueleto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(250, 250, 249, 0.06), transparent);
  animation: varredura 1.2s linear infinite;
}
@keyframes varredura {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.linha-esqueleto { height: 12px; margin: var(--e2) 0; border-radius: var(--raio-pilula); }

/* ── 5. DIVULGAÇÃO: abrir uma seção tem direção, fechar não pisca ───────────── */
details[open] > *:not(summary) { animation: assenta var(--dur-2) var(--ease) both; }
details.form-consulta[open] > summary { color: var(--tinta); }

/* ── 6. AVISO: entra deslizando de cima, uma vez ────────────────────────────── */
@keyframes entraAviso {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.alert { animation: entraAviso var(--dur-2) var(--ease) both; }

/* ── 7. MARCA: logos oficiais, com área de respiro, sem recolorir ───────────── */
.marca-logo { height: 30px; width: 89px; display: block; }
/* LARGURA EXPLICITA, NAO `width:auto` (06/10/2026, rodada 21). DEFEITO MEDIDO: o CLS das
   telas de formulario ficava em 0.092-0.098, a um fio da meta 0.1, e a fonte era o RODAPE.
   O HTML declara `width="543" height="197"` (o tamanho real do arquivo) e o CSS reservava
   `height:22px; width:auto`: o navegador reservava 543x197 e encolhia para ~61x22 quando a
   imagem chegava — o rodape inteiro subia 28px depois. Com a largura declarada, a caixa ja
   nasce no tamanho final. As regras irma (`.marca-logo`) sofriam do mesmo defeito. */
.marca-logo-gov { height: 22px; width: 61px; display: block; opacity: 0.9; }
.rodape-marca { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e3); }
.login-marca { display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  margin-bottom: var(--e5); flex-wrap: wrap; }
.login-marca img { height: 34px; width: auto; }
.login-selo-certificado { height: 40px; width: auto; }
.marca { align-items: center; }

/* Em fundo escuro, a marca do gov.br clara é a que mantém contraste legível. */
.rodape-marca img { filter: none; }

/* ── PLACA DA MARCA: o logo oficial do RENAJUD é DESENHADO PARA FUNDO CLARO (medido: 41% dos
   pixels são escuros, luminância média 91). Em fundo escuro ele sumiria — e inverter a cor
   seria ALTERAR a marca, o que o manual proíbe. A solução correta é a placa clara: o arquivo
   original, sem toque, sobre uma superfície neutra. Vale para o topo e para o login. ── */
.marca-plate {
  background: #fbfbfa;
  border-radius: var(--raio);
  padding: 4px var(--e3);
  display: inline-flex; align-items: center;
}
.marca-plate .marca-logo { height: 22px; width: 65px; display: block; }
.marca { gap: var(--e4); }
.login-marca {
  background: #fbfbfa; border-radius: var(--raio);
  padding: var(--e3) var(--e4);
}
.login-marca img { height: 30px; width: auto; display: block; }
.login-selo-certificado { height: 34px !important; }

/* ── PLACA DESENHADA (06/10/2026) ─────────────────────────────────────────────
   A figura é SVG com 1 unidade = 1 mm (medidas da norma do CONTRAN, documentadas em
   `templates/_placa.html`). Aqui só se decide o TAMANHO na tela: a placa nunca estica
   fora de proporção e nunca passa da largura disponível. ─────────────────────────── */
.placa-figura { display: inline-block; max-width: 100%; line-height: 0; }
.placa-svg {
  display: block; width: 100%; height: auto; border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.35);
}
.placa-compacta { width: 92px; }
.placa-compacta .placa-svg { border-radius: 3px; box-shadow: none; }
.placa-vazia {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px; min-height: 30px; padding: 0 var(--e3);
  border: 1px dashed var(--linha-forte); border-radius: var(--raio);
  font-size: var(--fs-3xs); color: var(--tinta-3);
}
.card-campo-placa { display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }
.card-campo-placa .card-rot { order: 2; }
td .placa-figura { width: 104px; }

/* ── ESPERA COM FORMA: enquanto a consulta corre, a placa aparece sendo "lida" ──── */
.espera-placa {
  display: flex; gap: var(--e5); align-items: center; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-caixa); padding: var(--e5); margin-bottom: var(--e5);
}
.espera-placa-figura { position: relative; overflow: hidden; border-radius: 5px; }
.espera-placa-figura .placa-svg { filter: grayscale(1) brightness(0.55); box-shadow: none; }
.espera-placa-figura::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(250, 250, 249, 0.2) 50%, transparent 80%);
  animation: varredura 1.6s ease-in-out infinite;
}
.espera-linhas { flex: 1 1 240px; min-width: 200px; }
.espera-linhas .linha-esqueleto { display: block; height: 10px; margin: var(--e3) 0; }
.espera-linhas .linha-esqueleto:first-child { margin-top: 0; }

@media (max-width: 420px) {
  .card-campo-placa { align-items: stretch; }
  .card-campo-placa .placa-figura { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ELEVAÇÃO DE ACABAMENTO (06/10/2026) — revisão geral guiada pelas referências do
   CLPZ Build (`institutional-web-language.md` e `motion-material-sound.md`).

   O QUE A AUDITORIA MEDIU (`deploy/audita-contraste-e-tipo.cjs`), e o que cada
   bloco abaixo responde:
     · contraste ....... 0 falhas em 332 textos — o tema escuro já passa em AA. Nada a fazer.
     · medida de linha . 10 blocos fora de 45–75 caracteres (um com ~170). CORRIGIDO aqui.
     · caixa alta ...... 78 rótulos em CAIXA ALTA. A referência usa frase normal em cabeçalho;
                         caixa alta é para selo e metadado curtíssimo. Convertido.
     · nativos ......... seletor, barra de rolagem e marcador ainda saíam CLAROS no tema escuro
                         (o `color-scheme` não estava declarado). Corrigido.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. NATIVOS NO TEMA ESCURO ──────────────────────────────────────────────────
   Sem `color-scheme`, o Windows desenha o menu do `<select>`, a barra de rolagem e os
   controles nativos em CLARO no meio de uma tela escura — o detalhe que mais denuncia
   interface inacabada. `accent-color` acerta marcador de rádio e caixa de seleção. */
/* PATCH 29B (17/10/2026) — o console e de fundo CLARO; `color-scheme: dark` aqui mandava o
   browser pintar os controles NATIVOS no escuro (seletor de data, barra de rolagem, autofill).
   Medido: 8 de 9 telas reportavam `dark` com um papel branco atras. */
:root { color-scheme: dark; accent-color: var(--acento); }
::selection { background: var(--acento-solido); color: #f2f7fc; }

/* Barra de rolagem fina e escura (Firefox pelas propriedades padrão, Chrome pelo prefixo). */
* { scrollbar-width: thin; scrollbar-color: rgba(250, 250, 249, 0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(250, 249, 249, 0.18); border-radius: var(--raio-pilula);
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(250, 250, 249, 0.3); background-clip: content-box; }

/* Texto de exemplo legível: o padrão do navegador fica abaixo do contraste no fundo escuro. */
::placeholder { color: #9a948c; opacity: 1; }

/* ── 2. MEDIDA DE LINHA: 45–75 CARACTERES ───────────────────────────────────────
   Onde o texto CORRE (parágrafo, aviso, ajuda), a caixa para em ~72 caracteres. Tabela,
   lista de definição e grade de campos NÃO entram: nelas a largura é instrumento, não
   leitura. Foi a auditoria que apontou os dois piores casos (91 e 170 caracteres).

   POR QUE `em` E NÃO `ch` — medido, não escolhido: `ch` é a largura do dígito "0", que no
   Geist vale **0,672em**, enquanto o caractere MÉDIO do texto vale **0,499em**. Ou seja,
   `72ch` entrega 629 px e cabem ~97 caracteres por linha, não 72. A unidade que corresponde
   à convenção tipográfica é o `em`: 72 caracteres × 0,5em = 36em. A primeira versão desta
   regra usava `ch` e a própria auditoria reprovou. */
p, .secao-sub, .alert, .panel-body > p, .card-acao p, .campo-ajuda,
.aviso, .rodape-nota, #conteudo li.texto {
  max-width: 36em;
}
.alert { max-width: min(36em, 100%); }

/* ── 3. CAIXA ALTA SÓ ONDE É SELO ───────────────────────────────────────────────
   Cabeçalho de seção, rótulo de campo e título de painel passam a frase normal com peso
   médio — é o que a referência medida faz (H2/H3 dela são frase normal, 14 px, peso 500).
   Selo de estado e nome de coluna curta continuam em caixa alta porque ali é convenção. */
.cat-header, .titulo-secao, .panel-header, .lateral-rotulo, .lateral-bloco-titulo,
.kpi-rotulo, .stat-label, .card-rot, .card-rotulo, .atalhos-titulo, .resumo-dl dt,
.barra-tabela-campo label, .footer-col h2, .footer-col h3, .login-marca + .operacao-sobretitulo {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--tinta-3);
}
.kpi-rotulo, .stat-label, .card-rot, .card-rotulo, .resumo-dl dt { font-size: var(--fs-2xs); }
/* Cabeçalho de tabela: frase normal, discreto, sem parecer planilha de 1998. */
.forum-table th, .tabela-retirada th, .tabela-permissoes th, .form-table th {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-2xs); font-weight: 500;
}

/* ── 4. LINK NO MEIO DO TEXTO É LINK ────────────────────────────────────────────
   A referência da casa é explícita: link em texto corrido se sublinha e continua
   distinguível em todos os estados. Em menu, botão e ação, o sublinhado atrapalha. */
p a, li a, td a, .alert a, .panel-body a, .secao-sub a, .feed-titulo a, dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(93, 126, 233, 0.45);
}
p a:hover, li a:hover, td a:hover, .alert a:hover, .panel-body a:hover { text-decoration-color: currentColor; }
.lateral-lista a, .btn, .atalho-linha, .marca, .pular-para-conteudo { text-decoration: none; }

/* ── 5. MOVIMENTO: VALORES COM NOME ─────────────────────────────────────────────
   `motion-material-sound.md` pede duração, curva, distância e escalonamento como valores
   nomeados — não números soltos dentro do seletor. */

.rx { animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes assenta {
  from { opacity: 0; transform: translateY(var(--dist-entrada)); }
  to { opacity: 1; transform: none; }
}

/* ── 6. FOCO: VISÍVEL, NÃO OBSTRUÍDO E IGUAL EM TODO LUGAR ──────────────────────
   WCAG 2.2 (2.4.11/2.4.13): o anel não pode ser cortado por `overflow` nem sumir sobre
   fundo colorido. O contorno externo resolve os dois casos. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--raio);
}
.btn:focus-visible, .lateral-lista a:focus-visible, .atalho-linha:focus-visible {
  outline-offset: 3px;
}
/* PATCH 29B (17/10/2026) — aqui estava `outline: none`, e era ele que apagava o anel de
   foco de TODO input, select e textarea. Sobrava apenas o `box-shadow` da linha de foco, que
   usava `--acento-fundo` (#e8f1f9) — quase branco sobre papel branco. Medido no checkbox da
   tabela de permissoes: 1,00:1, anel invisivel. O `outline` volta, e o box-shadow abaixo
   passa a ser o HALO (complemento), nao o anel. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}
tr:focus-within td { background: var(--superficie-3); }

/* ── 7. ALVO DE TOQUE: 24 px NO MÍNIMO (WCAG 2.5.8), 44 px no dedo ────────────── */
@media (pointer: coarse) {
  .btn, .lateral-lista a, .atalho-linha, summary, input, select { min-height: 44px; }
}

/* ── 8. DENSIDADE E ZOOM: nada de altura fixa que estoure com 200% ─────────────
   A 200% de zoom o texto cresce e a caixa tem de acompanhar. `min-height` em vez de
   `height` nos controles, e o `line-height` sem trava. */
.topo { min-height: 55px; }
input, select, textarea { height: auto; }

/* ── ALVO DE TOQUE NO RODAPÉ (06/10/2026) ────────────────────────────────────────
   A medição de acessibilidade encontrou oito links de rodapé com 14 px de altura: abaixo dos
   24 px que a WCAG 2.5.8 exige. Link DENTRO de frase é isento — link de rodapé em lista NÃO
   é. Aqui o alvo cresce sem mexer no desenho: a caixa fica com 24 px e o texto continua no
   mesmo lugar (alinhado pelo centro). Serve também para o breadcrumb, que é usado no dedo. */
.footer-col ul { gap: var(--e2) var(--e3); }
.footer-col a, .trilha-inline a, .assinatura a, .footer-meta a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer-col a { padding-inline: 2px; }
.trilha-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); }
.trilha-inline .sep { margin-inline: var(--e1); }

/* ── ALVO EM NÚMERO CLICÁVEL (06/10/2026) ────────────────────────────────────────
   O painel de administração tem indicadores CLICÁVEIS — o número "0" leva para o log de
   escritas. Um algarismo sozinho mede 11x20 px, abaixo dos 24 px da WCAG 2.5.8. Aqui o alvo
   cresce em volta do número, sem mexer no tamanho da fonte nem no alinhamento da coluna. */
.stat-value a, .stat-item a, .kpi a {
  display: inline-flex; align-items: center; min-height: 24px; min-width: 24px;
  padding-block: 1px;
}
.kpi-valor a { display: inline-flex; align-items: center; min-height: 24px; }

/* ══════════════════════════════════════════════════════════════════════════════
   FICHA DA RESTRIÇÃO (06/10/2026) — o operador pediu botão para copiar e para
   imprimir uma restrição sem imprimir a tabela inteira.

   O painel é `<dialog>` nativo: ganha Esc, fundo inerte e foco preso sem uma linha
   de JavaScript para cada um. O que está aqui é só a APARÊNCIA — e a decisão de
   tamanho: no painel o texto sobe de 12 px para 15 px, porque a razão de existir
   da ficha é justamente ler o que na tabela está apertado.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Coluna de ação: dois botões compactos na mesma célula, sem quebrar a linha. */
.celula-acoes { white-space: nowrap; }
.celula-acoes .btn { margin-right: var(--e1); }
.celula-acoes .btn:last-child { margin-right: 0; }
.rotulo-curto { display: none; }
@media (max-width: 900px) {
  .rotulo-longo { display: none; }
  .rotulo-curto { display: inline; }
}

.dialogo-restricao {
  width: min(760px, calc(100vw - 2 * var(--e5)));
  max-height: min(86vh, 900px);
  padding: 0; border: 1px solid var(--linha-forte);
  border-radius: var(--raio-caixa);
  background: var(--fundo-2); color: var(--tinta);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.dialogo-restricao::backdrop { background: rgba(6, 6, 6, 0.66); backdrop-filter: blur(2px); }
.dialogo-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4);
  padding: var(--e5) var(--e6); border-bottom: 1px solid var(--linha);
  background: var(--superficie); position: sticky; top: 0; z-index: 1;
}
.dialogo-sobretitulo { display: block; font-size: var(--fs-2xs); color: var(--tinta-3); margin-bottom: 2px; }
.dialogo-cabecalho h2 {
  font-family: var(--fonte-ui); font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: -0.01em; margin: 0; color: var(--tinta);
}
.dialogo-corpo {
  padding: var(--e6);
  font-size: var(--fs-md);            /* 15 px: a ficha existe para ler o que na tabela aperta */
  line-height: var(--lh-solto);
  overflow-y: auto; max-height: calc(86vh - 190px);
}
.dialogo-corpo .detalhe-grade { grid-template-columns: 200px 1fr; gap: var(--e2) var(--e5); font-size: var(--fs-md); }
.dialogo-corpo .detalhe-bloco { font-size: var(--fs-md); }
.dialogo-corpo .detalhe-rotulo { color: var(--tinta-3); }
.dialogo-corpo .detalhe-cod { font-size: var(--fs-xs); }
.dialogo-acoes {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e5) var(--e6); border-top: 1px solid var(--linha); background: var(--superficie);
}
.dialogo-aviso { font-size: var(--fs-xs); color: var(--ok); margin-left: auto; }
.dialogo-aviso.erro { color: var(--erro); }

/* A linha de detalhe continua na tabela; a ficha é uma CÓPIA dela, feita no clique. */
#dialogo-corpo .linha-detalhe { display: contents; }
#dialogo-corpo td { display: block; }

/* ── ÁREA DE IMPRESSÃO DE UMA RESTRIÇÃO ──────────────────────────────────────
   Fica no documento e invisível na tela. No papel, ela é a ÚNICA coisa que sai:
   o `ux.js` move o conteúdo para cá antes de chamar `window.print()`. */
.area-impressao { display: none; }

@media print {
  body.imprimindo-uma > *:not(.area-impressao) { display: none !important; }
  body.imprimindo-uma .area-impressao {
    display: block !important; width: 100%; padding: 0; margin: 0;
    background: #fff; color: #000; font-size: 11pt; line-height: 1.5;
  }
  body.imprimindo-uma .area-impressao .detalhe-grade { grid-template-columns: 160px 1fr; }
  body.imprimindo-uma .area-impressao .dialogo-cabecalho {
    display: block; border: none; border-bottom: 2px solid #000; padding: 0 0 6pt;
    background: none; position: static;
  }
  body.imprimindo-uma .area-impressao .dialogo-cabecalho h2 { font-size: 15pt; color: #000; }
  body.imprimindo-uma .area-impressao .dialogo-sobretitulo { color: #444; }
  body.imprimindo-uma .area-impressao .badge-active,
  body.imprimindo-uma .area-impressao .badge-inactive,
  body.imprimindo-uma .area-impressao .badge-ws,
  body.imprimindo-uma .area-impressao .badge-web,
  body.imprimindo-uma .area-impressao .badge-neutro {
    border: 1px solid #666; color: #000; background: none;
  }
  body.imprimindo-uma .area-impressao .detalhe-rotulo { color: #333; }
  body.imprimindo-uma .area-impressao .dialogo-acoes { display: none; }
  body.imprimindo-uma .area-impressao::after {
    content: "Console RENAJUD — ficha de restrição impressa pelo operador";
    display: block; margin-top: 12pt; padding-top: 6pt; border-top: 1px solid #999;
    font-size: 8pt; color: #444;
  }
}

/* ── PLACA COMPACTA: MENOS É MAIS (06/10/2026) ───────────────────────────────────
   Na lista de retiradas a placa tem 92 px de largura. Fazendo a conta: a faixa azul fica
   com 5 px de altura, o "BRASIL" com 3 px de altura de letra e cada estrela do emblema com
   2 px. Nada disso se lê — só vira sujeira em cima do desenho, que é exatamente a queixa do
   operador ("a placa tá meio bugada").

   O que a versão compacta mantém é o que IDENTIFICA: a faixa azul, a bandeira e os
   caracteres. O resto sai. Em tamanho grande (ficha, ficha de restrição, impressão) tudo
   continua aparecendo. */
.placa-compacta .placa-detalhe { display: none; }

/* Na impressão da ficha, a placa nunca é compacta — mas se algum dia for, o detalhe volta:
   papel não tem o limite de 92 px. */
@media print {
  .placa-compacta .placa-detalhe { display: inline; }
}

/* ── ALINHAMENTO DE FILEIRA NO PAINEL (06/10/2026) ───────────────────────────────
   A auditoria de consistência (`deploy/audita-consistencia-visual.cjs`) mostrou os dois painéis
   de gráfico lado a lado terminando em alturas diferentes — 402 x 501 px e 246 x 221 px. É o
   tipo de desalinhamento que o olho percebe antes de saber nomear: a fileira fica torta.

   Com `align-items: stretch` os dois painéis da mesma linha fecham na mesma altura. O conteúdo
   continua no topo (o gráfico é SVG com altura própria), então o espaço extra vira respiro
   embaixo — em vez de um painel mais curto que o vizinho.

   A grade de OPERAÇÃO não entra aqui: ela é formulário de um lado e atalhos do outro, e colunas
   assimétricas são o desenho, não defeito. A auditoria foi ajustada para não cobrar igualdade
   onde ela não é esperada. */
.grade-dupla { align-items: stretch; }
.grade-dupla > .painel-grafico { display: flex; flex-direction: column; }
.grade-dupla > .painel-grafico > .grafico-corpo { flex: 1 1 auto; }

/* ── BARRA DE AÇÃO DO REGISTRO E SANFONA DAS LEGENDAS (06/10/2026) ─────────────────
   Queixa do operador: *"muita informação, fica difícil de achar as coisas que são importantes
   tipo comprovante"*. Medido: 40 elementos interativos na ficha, 22 na primeira dobra, e o
   comprovante como o 3º de 5 botões iguais no painel lateral.

   Duas decisões de projeto, na ordem em que o olho trabalha:

   1. O COMPROVANTE VEM PARA O TOPO DO REGISTRO, numa barra própria, com o texto explicando o que
      ele é e as duas saídas que o operador usa (copiar para Ctrl+V · baixar). Uma ação primária
      por região de decisão — o resto continua existindo, mas como secundário.
   2. AS LEGENDAS EXPLICATIVAS SAEM DO CAMPO VISUAL. Eram QUATRO blocos de texto cinza pequeno
      entre a tabela e o rodapé (origem WS/WEB, FIPE por linha, tabela de órgãos, avisos). São
      úteis para conferir e não para operar: vão para uma sanfona fechada, a um clique. Não
      perdem nada — o princípio é revelação progressiva, não esconder dado. */
.registro-acoes {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--raio-caixa);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e6);
}
.registro-acoes-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.registro-acoes-rotulo { font-size: var(--fs-md); font-weight: 600; color: var(--tinta); }
.registro-acoes-botoes { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.registro-acoes-aviso { font-size: var(--fs-xs); color: var(--ok); }
.registro-acoes-aviso.erro { color: var(--erro); }

/* Sanfona das legendas: fechada por padrão, com rótulo que diz o que tem dentro. */
.entenda-dados {
  margin-top: var(--e5);
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-caixa);
  padding: var(--e4) var(--e5);
}
.entenda-dados > summary {
  cursor: pointer; font-size: var(--fs-xs); font-weight: 500; color: var(--tinta-2);
  list-style: none; display: flex; align-items: center; gap: var(--e3);
}
.entenda-dados > summary::-webkit-details-marker { display: none; }
.entenda-dados > summary::before {
  content: "?";
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 1px solid var(--linha-forte); border-radius: 50%;
  font-size: var(--fs-2xs); color: var(--tinta-3);
}
.entenda-dados[open] > summary { margin-bottom: var(--e4); padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linha); color: var(--tinta); }
.entenda-dados .font-small { color: var(--tinta-3); }

@media (max-width: 768px) {
  .registro-acoes { flex-direction: column; align-items: stretch; }
  /* O `flex: 1 1 320px` do texto foi escrito para a LINHA (320 px de largura mínima). Em coluna, o
     mesmo valor vira 320 px de ALTURA e o bloco sai com um vazio enorme. `flex-basis` é relativo ao
     eixo principal — e o eixo mudou. */
  .registro-acoes-txt { flex: 0 0 auto; }
  .registro-acoes-botoes { justify-content: space-between; }
  .registro-acoes-botoes .btn { flex: 1 1 auto; }
}

/* ── PROCEDÊNCIA DO FIPE EM SANFONA (06/10/2026) ─────────────────────────────────
   O valor e o código ficam à vista; o resto da cadeia (modelo casado, regra, tabela, fonte,
   autenticação) fica a um clique. A regra da casa continua: preço não é inventado e a procedência
   não é escondida — ela só não disputa a leitura com a resposta. */
.fipe-procedencia { display: block; margin-top: 2px; }
.fipe-procedencia > summary {
  cursor: pointer; list-style: none; font-size: var(--fs-3xs); color: var(--tinta-3);
  text-decoration: underline; text-underline-offset: 2px;
}
.fipe-procedencia > summary::-webkit-details-marker { display: none; }
.fipe-procedencia[open] > summary { color: var(--tinta-2); }
.card-campo .fipe-procedencia { max-width: 100%; }

/* ── A ENTRADA DO PAINEL GANHA PESO (06/10/2026) ───────────────────────────────────────────
   O bloco de consulta passou a ser a PRIMEIRA coisa da página (medido: saiu de y=577 para y=182).
   Peso visual tem de acompanhar a posição: se ele abre a tela, precisa parecer a abertura — e não
   um formulário a mais entre estatísticas.

   Decisão de desenho, e o motivo de cada parte:
   · SUPERFÍCIE PRÓPRIA: o bloco vira uma faixa destacada, não texto solto. O olho pousa nela.
   · TÍTULO MAIOR: `--fs-2xl` contra os `--fs-lg` dos painéis vizinhos — hierarquia por tamanho,
     que é o sinal mais barato e mais confiável de "isto é o que importa aqui".
   · CAMPO MAIOR: entrada alta (48px) e botão da mesma altura, alinhados — a área de digitação
     cresce junto com a importância da ação.
   · SEM COMPETIÇÃO: nada de cor de alerta nem ícone piscando. Ação principal não grita; ela
     simplesmente é a maior. */
.secao-hero {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-caixa);
  padding: var(--e6) var(--e6) var(--e5);
  margin-bottom: var(--e6);
}
.secao-hero h2 { font-size: var(--fs-2xl); letter-spacing: -0.01em; margin: 2px 0 var(--e2); }
.secao-hero .operacao-sobretitulo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.secao-hero .consulta-rapida { margin-top: var(--e5); }
.secao-hero .consulta-rapida select,
.secao-hero .consulta-rapida input { height: 48px; font-size: var(--fs-md); }
.secao-hero .consulta-rapida #consulta-rapida-valor { min-width: 260px; flex: 1 1 260px; }
.secao-hero .consulta-rapida .btn { height: 48px; padding-inline: var(--e6); font-size: var(--fs-md); }

@media (max-width: 768px) {
  .secao-hero { padding: var(--e5); }
  .secao-hero h2 { font-size: var(--fs-xl); }
  .secao-hero .consulta-rapida { flex-direction: column; align-items: stretch; }
  .secao-hero .consulta-rapida select,
  .secao-hero .consulta-rapida input,
  .secao-hero .consulta-rapida .btn { width: 100%; }
}

/* ── TEXTO COLADO NA LINHA DE ATALHO (06/10/2026) ──────────────────────────────────────────
   DEFEITO VISTO NA CAPTURA do painel: cada linha de "Ações rápidas" mostrava
       "Inserir restriçãoRevisão obrigatória antes do envio"
   — o título e o texto de apoio são dois elementos (`<b>` e `<small>`) dentro de um `<span>` que
   era `inline`, então corriam na mesma linha sem separador nenhum. Não é detalhe estético: texto
   sem espaço entre palavras lê como erro do sistema.

   `flex-direction: column` empilha os dois, e o `gap` dá o respiro que antes não existia. */
.atalho-linha > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: var(--lh-subtitulo);
}
.atalho-linha small { color: var(--tinta-3); font-size: var(--fs-2xs); font-weight: 400; }

/* A mesma forma aparece nas listas de atalho do painel de administração. */
.atalho-linha b { font-weight: 500; }

/* ── LARGURA ÚTIL NA GRADE DE OPERAÇÃO (06/10/2026) ────────────────────────────────────────
   Com o bloco de consulta virando a entrada da página, a coluna de atalhos não precisa de tanto
   espaço: `minmax(240px, 1fr)` com `auto-fit` fazia cada atalho ocupar uma faixa larga e vazia. */
.atalhos-operacao { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ── FORMULÁRIO DE CONSULTA: A LARGURA ÚTIL (06/10/2026) ────────────────────────────────────
   DEFEITO VISTO NA CAPTURA da tela Consultar: o cartão do formulário ocupa a largura toda, mas os
   campos ficam espremidos na TERÇA PARTE esquerda — sobra um vazio grande à direita. Duas causas:

   1. a tabela de formulário herdava `border`, `background` e `margin-bottom` da TABELA DE DADOS
      (`.forum-table` etc.), o que faz um formulário parecer uma grade de resultados;
   2. a coluna do valor não pedia largura nenhuma, então o campo saía no tamanho mínimo.

   O que muda, e por quê:
   · o formulário perde a moldura de tabela — ele é um formulário, e a única linha visível passa a
     ser a separação entre linhas de campo;
   · a coluna de rótulo tem largura fixa e legível (160px), e a do campo ocupa o resto;
   · o campo de identificação do veículo cresce até 420px, com o botão ao lado — a linha inteira
     fica alinhada numa leitura só, sem vazio à direita. */
.form-table { background: none; border: none; border-radius: 0; margin-bottom: 0; }
.form-table th, .form-table td { border-bottom: 1px solid var(--linha); }
.form-table tr:last-child td { border-bottom: none; }
.form-table td.label { width: 160px; white-space: nowrap; color: var(--tinta-3); }
.form-table td { width: auto; }
.form-table input[type="text"],
.form-table select { max-width: 100%; }
#valor-veiculo, #id-restricao { width: min(420px, 100%); }
#campo-veiculo { max-width: 260px; }

/* A dica contextual: uma linha só, no tom de apoio, ligada ao campo que a explica. */
.dica-contexto { display: block; margin-top: 2px; line-height: var(--lh); }
.dica-contexto[hidden] { display: none; }

/* O botão do formulário alinha com os campos, não com o rótulo. */
.form-consulta .btn-primario { margin-top: var(--e2); }

/* ── FORMULÁRIOS DE OPERAÇÃO EM CARTÃO (06/10/2026) ────────────────────────────────────────
   DEFEITO VISTO NAS CAPTURAS de Inserir e Retirar: o formulário ficava numa FAIXA NUA no meio da
   página — rótulo encostado na margem esquerda, campo longe dele, e nenhuma superfície separando a
   ação do resto. Nas duas telas o resultado era o mesmo: parecia sobra de layout, não formulário.

   A correção é a mesma nas duas: a mesma superfície dos outros cartões (`--superficie` + borda +
   raio), o rótulo com largura fixa legível e o campo ocupando o espaço que existe. Rótulo e campo
   passam a formar UMA linha de leitura, que é como a pessoa lê um formulário. */
.form-operacao {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-caixa);
  padding: var(--e5);
  margin-bottom: var(--e5);
}
.form-operacao .form-table { width: 100%; }
.form-operacao td.label { width: 170px; }
.form-operacao input[type="text"] { width: min(320px, 100%); }
.form-operacao select { max-width: 320px; }

/* Nota de rodapé das telas de operação: informação de apoio, sem caixa de alerta.
   Alerta é para erro e risco; o que é só explicação não deve competir por atenção. */
.rodape-nota {
  font-size: var(--fs-xs);
  color: var(--tinta-3);
  margin: 0 0 var(--e3);
  max-width: 72ch;
}
.rodape-nota b { color: var(--tinta-2); font-weight: 500; }

@media (max-width: 768px) {
  .form-operacao td.label { width: auto; display: block; padding-bottom: 2px; }
  .form-operacao .form-table td { display: block; width: 100%; }
  .form-operacao input[type="text"], .form-operacao select { width: 100%; max-width: 100%; }
}

/* ── A TABELA DE RESTRIÇÕES CABE NA TELA (06/10/2026) ──────────────────────────────────────
   DEFEITO MEDIDO na captura da ficha: 8 colunas em 849 px, com **77 px de rolagem lateral** — o
   operador precisava rolar de lado para alcançar a coluna de AÇÃO, que é a que ele usa. E as
   colunas apertadas quebravam PALAVRA no meio: "TRANSFE RENCIA", "CURITIB A 16 VARA CIVEL".

   Três correções, e a terceira nasceu de eu ter errado a segunda:

   1. CONTEÚDO (no template): a coluna "Veículo (ano)" só existe quando carrega informação — na
      consulta por placa ela repetia o mesmo ano em todas as linhas, e o ano já está no cartão do
      veículo acima.

   2. TIPOGRAFIA: palavra partida no meio não é quebra de linha, é defeito — ninguém lê "TRANSFE
      RENCIA". Só identificador comprido SEM espaço (processo, ID, chave) pode quebrar.

   3. LARGURAS QUE SOMAM MENOS QUE O CONTÊINER. A primeira versão deste bloco deu `min-width: 200px`
      ao órgão e a rolagem lateral AUMENTOU (77 -> 140 px): o contêiner tem ~772 px e as colunas
      passaram a pedir ~912. Largura de coluna é orçamento: 7 colunas têm de somar menos que o
      espaço disponível, e o que sobra vai para a coluna que IDENTIFICA o registro (o órgão). */
#tabela-restricoes { table-layout: auto; width: 100%; }
#tabela-restricoes th, #tabela-restricoes td {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  vertical-align: top;
}
/* Identificador comprido SEM espaço (processo, ID, chave) pode quebrar: não há onde quebrar. */
#tabela-restricoes .celula-id, #tabela-restricoes td:nth-child(5) { overflow-wrap: anywhere; }
#tabela-restricoes .celula-orgao { min-width: 146px; }

/* ORÇAMENTO DAS COLUNAS (soma ~744 px para um contêiner de ~772 px):
   ID 88 · Tipo 108 · Origem 56 · Órgão 170+ · Processo 118 · Inclusão 76 · Ação 110
   O `!important` não é enfeite: os `<th>` trazem `style="width:..."` da marcação antiga, e estilo
   em linha vence folha de estilo. Enquanto os atributos estiverem no template, é isto que garante
   que o orçamento acima valha. */
#tabela-restricoes th, #tabela-restricoes td { padding: 9px 8px; }
#tabela-restricoes th:nth-child(1), #tabela-restricoes td:nth-child(1) { width: 74px !important; }
#tabela-restricoes th:nth-child(2), #tabela-restricoes td:nth-child(2) { width: 96px !important; }
#tabela-restricoes th:nth-child(3), #tabela-restricoes td:nth-child(3) { width: 46px !important; }
#tabela-restricoes th:nth-child(4), #tabela-restricoes td:nth-child(4) { width: auto !important; }
#tabela-restricoes th:nth-child(5), #tabela-restricoes td:nth-child(5) { width: 98px !important; }
#tabela-restricoes th:nth-child(6), #tabela-restricoes td:nth-child(6) { width: 66px !important; }
#tabela-restricoes th:nth-child(7), #tabela-restricoes td:nth-child(7) { width: 96px !important; }

/* A coluna de ação fica na ponta, sem rolagem lateral para alcançá-la. */
#tabela-restricoes .celula-acoes { white-space: nowrap; }
#tabela-restricoes .celula-acoes .btn { margin: 0 3px 4px 0; }

/* ── ALVO DE TOQUE NO CELULAR (06/10/2026) ─────────────────────────────────────────────────
   MEDIDO com `deploy/mede-toque.cjs` a 390 px, em oito telas — o operador consulta placa no pátio,
   pelo celular, e até agora o que existia era a matriz de transbordo (nada sai da tela), que NÃO
   mede se dá para acertar:

     · links do RODAPÉ ......... 24 px de altura em TODAS as telas
     · botões .................. 40 px ("Sair", "Consultar", "Retirar Agora", "Devolver ao veículo")
     · campos de texto ......... 34 px (placa, busca)
     · botão "Ver" da tabela ... 37×40 px

   A régua é a mesma do iOS (44 pt) e do Material (48 dp): alvo menor que 44×44 é difícil de acertar
   com o polegar, e alvos vizinhos precisam de 8 px de vão para o toque não cair no lado errado.

   O conserto é só no celular (`max-width: 768px`), porque no desktop o mouse é preciso e o ganho de
   densidade vale mais. O que muda: altura mínima de 44 px em todo alvo, com o padding fazendo o
   trabalho — nada de esticar botão pequeno para 44 px de largura à toa. */
@media (max-width: 768px) {
  /* O `min-height` dos botoes vem do token `--toque` (ver `:root`). Aqui ficam os alvos que NAO
     sao botao: campo de texto, selecao e a linha de resumo das sanfonas. */
  input[type="text"], input[type="password"], input[type="search"],
  select, textarea, summary {
    min-height: var(--toque);
  }
  /* O rótulo de um botão é centralizado verticalmente quando a altura mínima entra em ação. */
  .btn, button { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); }

  /* Rodapé: cada item vira uma linha tocável, com o alvo inteiro — não só o texto. */
  .footer-col li a, .footer-col a, .site-footer a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 var(--e2);
    margin-inline-start: calc(var(--e2) * -1);
  }
  /* E os títulos das colunas do rodapé ganham respiro, para os alvos não se encostarem. */
  .footer-col h2, .footer-col h3 { margin-bottom: var(--e2); }

  /* Tabelas de administração: "Ver" é alvo frequente e era 37×40. */
  .btn-compacto { min-width: 44px; }

  /* DOIS ALVOS DE NAVEGAÇÃO QUE A REFUTAÇÃO INDEPENDENTE ACHOU (06/10/2026) — e o meu medidor
     tinha isentado os dois por erro de heurístico ("pai com mais texto" não é "link dentro de
     frase"). No celular, o link da marca (30 px) e o item da trilha (24 px) ganham altura de toque:
     a marca é o caminho de volta ao painel, e a trilha é a navegação de quem se perdeu. */
  .marca { display: inline-flex; align-items: center; min-height: var(--toque); }
  /* (aqui havia `.trilha a, .breadcrumb a, nav.trilha a` — CSS MORTO: a classe real da trilha é
     `.trilha-inline`, então a regra nunca se aplicou. Trocada pela de baixo.) */
  .trilha-inline a {
    display: inline-flex; align-items: center; min-height: var(--toque);
  }
  /* LINK INLINE NUMA LINHA DENSA (o ID da restrição em "Minhas retiradas", 73x14 px — abaixo até do
     mínimo AA de 24x24). A linha de metadados tem de continuar compacta, então o alvo cresce por
     margem negativa: a CAIXA VISÍVEL não muda, a ÁREA CLICÁVEL quase quadruplica. */
  /* A MARGEM NEGATIVA SAIU (06/10/2026): com ela, duas linhas de metadados empilhadas davam caixas de
     toque SOBREPOSTAS (766-810 e 788-832, 22 px de colisão) — e alvo sobreposto é pior que alvo
     pequeno, porque o toque acerta o item de baixo. O truque serve para alvo isolado; em alvo
     empilhado, quem cresce é o PASSO DA LINHA. */
  /* ── A TABELA DE RETIRADAS VIRA CARTÕES NO CELULAR (06/10/2026) ─────────────────────────────
     Quatro colunas não cabem em 356 px. Liberar a quebra de linha sem refluir esmagou as colunas e
     partiu o texto em pedaços ("Co mp rov ante", "I/FIAT CRON OS 1.0") — pior que a rolagem lateral
     que havia antes. O que a norma recomenda é refluir: cada linha vira um cartão, cada campo leva o
     seu rótulo, e a ação ocupa a largura inteira. O `nowrap` da tabela de RESTRIÇÕES continua
     valendo — o orçamento de sete colunas depende dele. */
  .tabela-retirada { display: block; border: 0; background: none; }
  .tabela-retirada, .tabela-retirada th, .tabela-retirada td { white-space: normal; }
  /* a linha de cabeçalho sai: cada campo já leva o próprio rótulo */
  .tabela-retirada tr:first-child { display: none; }
  .tabela-retirada tr + tr {
    display: block; margin-bottom: var(--e4); padding: var(--e4);
    border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie);
  }
  .tabela-retirada td { display: block; width: auto !important; border: 0; padding: 0; }
  .tabela-retirada td + td { margin-top: var(--e3); }
  .tabela-retirada td::before {
    content: attr(data-rotulo); display: block;
    font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--tinta-3); margin-bottom: var(--e1);
  }
  /* O BOTÃO DO COMPROVANTE OCUPA A LARGURA TODA — é o que o operador veio buscar. */
  .tabela-retirada td[data-rotulo="Comprovante"] .btn { width: 100%; }
  .tabela-retirada .item-retirada { display: block; }
  .item-retirada { line-height: 1.35; }
  .item-retirada a {
    display: inline-flex; align-items: center;
    min-height: var(--toque);
    padding-inline: 2px;
  }

  /* NÚMERO COMO LINK (06/10/2026): em `/admin`, o total de escritas é um `<a>` sem classe dentro de
     um bloco de estatística — 24×27 px, o último alvo pequeno do console no celular. Aqui ele ganha
     área de toque de 44×44 com o número NEGATIVO de margem, para o desenho não mudar: quem ganha é o
     dedo, não o layout. */
  .stat-value a, .kpi-valor a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--toque); min-width: var(--toque);
    margin: calc(var(--e2) * -1);
  }
}

/* ── AJUDA ESCRITA COMO PERGUNTA (06/10/2026) ──────────────────────────────────────────────
   A sanfona "Entenda os dados desta tela" era um bloco de legendas em texto corrido, escrito como
   anexo de implementação (`Origem = origemRenajudWs do próprio registro`). Agora cada bloco abre com
   a PERGUNTA na língua do operador, e a resposta vem abaixo, em texto de apoio.

   Por que a pergunta em destaque: quem abre uma ajuda está procurando a SUA dúvida, e acha mais
   rápido quando ela está escrita como ele a faria. Peso e cor separam pergunta de resposta sem
   precisar de ícone nem de caixa — a hierarquia já existe no sistema. */
.ajuda-pergunta { margin-bottom: var(--e5); }
.ajuda-pergunta:last-child { margin-bottom: 0; }
.ajuda-q {
  margin: 0 0 var(--e2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tinta);
}
.ajuda-pergunta .font-small { margin: 0; line-height: var(--lh-solto); }
.ajuda-pergunta .badge-ws, .ajuda-pergunta .badge-web, .ajuda-pergunta .badge-neutro {
  margin-right: var(--e2);
}

/* ── DADOS DAS PARTES: REVELAÇÃO PROGRESSIVA (06/10/2026) ─────────────────────────────────────
   O cartão do veículo ocupava 20% da tela de resultado — 15 campos, sendo dois endereços completos de
   proprietário e possuidor. A queixa que abre o trabalho é *"muito confuso, muita informação"*, e o
   conserto NÃO é apagar dado: o que se confere de relance fica visível (placa, marca, ano, chassi,
   renavam, restrição, FIPE) e o que se consulta de vez em quando fica a um clique.

   O rótulo diz o que está lá dentro: revelação progressiva SEM rótulo é dado escondido. */
.dados-das-partes {
  grid-column: 1 / -1;
  margin-top: var(--e4);
  border-top: 1px solid var(--linha);
  padding-top: var(--e3);
}
.dados-das-partes > summary {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--fs-xs); color: var(--tinta-2);
  min-height: var(--toque);
}
.dados-das-partes > summary::-webkit-details-marker { display: none; }
.dados-das-partes > summary::before {
  content: "▸"; color: var(--tinta-3); font-size: var(--fs-sm);
}
.dados-das-partes[open] > summary::before { content: "▾"; }
.dados-das-partes[open] > summary { margin-bottom: var(--e3); }
/* fechado, o resumo mostra QUANTOS campos estão lá dentro — número, não promessa */
.dados-das-partes > summary .partes-contagem { color: var(--tinta-3); }

/* ── A TABELA DO FORMULÁRIO CORTA 8px A 768px (06/10/2026) ────────────────────────────────────
   MEDIDO, e reproduzido na página REAL (não só na fixture):

     768px : form-table 680 de 688  -> corta 8px, e NÃO está dentro de moldura de rolagem
     900px : form-table 572 de 572  -> 0
     1024px: form-table 689 de 689  -> 0

   Fora de moldura de rolagem, o que passa da largura é conteúdo PERDIDO — o operador não tem como
   alcançar. São 8px (a borda direita de um campo), e a causa é largura mínima de conteúdo que a célula
   não consegue reduzir: `overflow-wrap: anywhere` já vale em `td`, mas um `<select>` e um rótulo com
   largura mínima seguram a linha.

   O conserto não muda nada visualmente acima de 900px: só permite que a célula e o campo ENCOLHAM
   quando o espaço aperta, em vez de vazar. */
.form-table { width: 100%; }
.form-table td, .form-table th { min-width: 0; }
.form-table select, .form-table input, .form-table textarea { max-width: 100%; }

/* ── MINIATURA DO COMPROVANTE AO LADO DA AÇÃO (06/10/2026) ────────────────────────────────────
   MEDIDO com o medidor de encontrabilidade: o botão de copiar fica a 332px do topo e a imagem do
   documento a 2297px — 2,6 telas de rolagem entre a AÇÃO e o que ela copia. E o documento inteiro ainda
   vive dentro de um `<details>` fechado.

   A miniatura põe o documento ao lado da ação, como numa mesa: o operador CONFERE o que vai colar antes
   de colar. Custa zero de rede — é a mesma imagem `data:` que a página já carrega. */
.registro-miniatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e1);
  flex: 0 0 auto;
  padding: var(--e2);
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--fundo-suave, rgba(255, 255, 255, 0.02));
  text-decoration: none;
  min-height: var(--toque);
}
.registro-miniatura:hover { border-color: var(--acento); }
.registro-miniatura img {
  display: block;
  width: auto;
  max-width: 132px;
  max-height: 76px;
  height: auto;
  border-radius: 6px;
  background: #fff; /* o comprovante é desenhado para papel: fundo claro é a prévia fiel */
}
.registro-miniatura span {
  font-size: var(--fs-3xs);
  color: var(--tinta-2);
  text-transform: none;
}

/* No celular a miniatura fica acima dos botões, com o documento menor: o polegar não disputa espaço. */
@media (max-width: 560px) {
  .registro-acoes { flex-wrap: wrap; }
  .registro-miniatura { order: -1; width: 100%; flex-direction: row; justify-content: flex-start; }
  .registro-miniatura img { max-width: 108px; max-height: 62px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVO — matriz 320/390/768/1440 por `deploy/mede-overflow.cjs`.
   RITMO OBRIGATÓRIO: PAUSA_ROTAS_MS=4500 (o nginx bane o IP acima de 120 req/min).
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .corpo { grid-template-columns: 208px minmax(0, 1fr); gap: var(--e6); }
  .grade-dupla { grid-template-columns: 1fr; }
  /* A grade de OPERAÇÃO também colapsa (defeito medido em 06/10): ela é 1.6fr + 1fr e, esquecida
     em duas colunas no celular, empurrava a página para 484 px numa tela de 390. */
  .grade-operacao { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: minmax(0, 1fr) 268px; gap: var(--e5); }
}
@media (max-width: 900px) {
  /* ORDEM NO CELULAR (06/10/2026): era `order: -1` no painel lateral, o que punha o APOIO (Resumo,
     Ações) na frente do conteúdo e empurrava a ação primária — o comprovante — para 1.496 px numa
     dobra de 844. Em uma coluna só, a ordem É a interface: ação primária, depois conteúdo, depois
     apoio. */
  .ficha { grid-template-columns: 1fr; }
  .ficha-lateral { position: static; }
  .lateral-acoes { flex-direction: row; flex-wrap: wrap; }
  .btn-bloco { width: auto; flex: 1 1 46%; }
}
@media (max-width: 768px) {
  .topo { position: static; }
  .topo-menu { display: block; }
  .topo-inner { flex-wrap: wrap; gap: var(--e3); }
  .topo-acoes { width: 100%; margin-left: 0; justify-content: space-between; }
  .corpo { grid-template-columns: 1fr; padding: var(--e5) var(--goteira) var(--e9); gap: var(--e5); }
  .lateral { display: none; }
  .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td {
    display: block; width: 100%; max-width: 100%; }
  .form-table th { padding: var(--e2) 0 2px; }
  .form-table td { padding: 0 0 var(--e3); }
  .form-table input[type="text"], .form-table select, .form-table textarea,
  .form-table input[type="password"] { width: 100%; }
  .forum-table, .tabela-retirada, .tabela-permissoes {
    display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .forum-table th { position: static; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  .detalhe-grade { grid-template-columns: 1fr !important; }
  .card-grade { grid-template-columns: 1fr !important; }
  .form-grade { grid-template-columns: 1fr; }
  .form-acao { grid-column: auto; }
  .pagina-titulo { font-size: var(--fs-2xl); }
  .barra-tabela { flex-direction: column; align-items: stretch; }
  .barra-tabela-campo input[type="search"], .barra-tabela-campo select { min-width: 0; width: 100%; }
  .barra-tabela-acoes { margin-left: 0; justify-content: space-between; }
  .btn { min-height: var(--toque); }
}
@media (max-width: 420px) {
  .stat-cell, .stat-item { flex: 1 1 100%; }
  .kpi-grid { grid-template-columns: 1fr; }
  .topo-usuario { display: none; }
  .login-card, .login-contexto { padding: var(--e5); }
}

/* ── Impressão: DOCUMENTO É PAPEL — o comprovante sai claro, sempre. ───────── */
@media print {
  .topo, .lateral, .topo-menu, .faixa-util, .gov-faixa, .site-footer, #footer,
  .btn, .pular-para-conteudo, .pagina-acoes, .barra-tabela, .lateral-bloco,
  .lateral-acoes, .form-consulta, .comprovante-consulta { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .corpo { display: block; padding: 0; max-width: none; }
  #conteudo { width: 100%; padding: 0; }
  a { color: #000; text-decoration: none; }
  .veiculo-card, .panel, .status-panel, .card-acao, .painel-grafico, .form-consulta {
    border: 1px solid #999 !important; background: #fff !important; break-inside: avoid; }
  .panel-header, .veiculo-card .card-header { background: #eee !important; color: #000 !important; }
  table, th, td { border-color: #999 !important; }
  th { background: #eee !important; color: #000 !important; }
  .kpi, .stat-value { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   style-v3.css — "Sala de Operações Institucional"
   Console RENAJUD · redesign de 12/10/2026

   POR QUE UMA SEGUNDA FOLHA, E NÃO UM `style.css` REESCRITO
   O `style.css` tem 1.700 linhas e carrega ~30 correções medidas (corte de 8px a 768px, contraste
   do bloco de erro, ordem do painel lateral no celular, `nowrap` das colunas curtas, TTL do
   estático, impressão do comprovante). Reescrever a folha jogaria fora cada uma delas e as
   reintroduziria como regressão silenciosa — o modo de falha clássico de redesign.

   Aqui a decisão é a inversa: a folha nova é carregada DEPOIS e passa a ser a AUTORIDADE VISUAL
   (tokens, cor, tipografia, forma, componentes). O arquivo antigo continua no ar como base de
   layout e de comportamento responsivo. Onde a folha antiga tem um valor "escuro" preso na regra,
   este arquivo redefine — nada é herdado por acidente de tema.

   TESE: instrumento público confiável. Papel claro, barra azul-marinho, réguas de 1px, dados
   densos e alinhados, estado sempre com TEXTO antes de cor. Sem gradiente decorativo, sem vidro,
   sem pílula em todo controle, sem card dentro de card, sem título gigante.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Superfícies */
  --fundo: #14181d;
  --fundo-2: #1a2027;
  --fundo-suave: #171c22;
  --superficie: #1b2129;
  --superficie-2: #202731;
  --superficie-3: #262e39;
  --superficie-4: #2f3945;

  /* Tinta */
  --tinta: #e8edf2;
  --tinta-2: #b9c5d1;
  --tinta-3: #94a3b1;
  --tinta-inv: #10151a;

  /* Linhas */
  --linha: #2c3540;
  --linha-forte: #3f4b59;

  /* Azul institucional */
  --acento: #7db8f0;
  --acento-solido: #2b6ba4;
  --acento-fundo: #1c2a3a;
  --acento-texto: #a5d0f7;
  --navy-900: #0b1219;
  --navy-800: #111a23;
  --navy-700: #182430;

  /* Semântica — par fundo/texto validado para 4.5:1 em texto normal */
  --ok: #66d9a3;
  --ok-fundo: #123024;
  --erro: #ff9d9d;
  --erro-fundo: #3a1c1f;
  --erro-solido: #a3272c;
  --ok-solido: #14663a;
  --aviso: #f3c976;
  --aviso-fundo: #33280f;
  --info: #93cbf7;
  --info-fundo: #152b3e;

  /* Forma */
  --raio: 3px;
  --raio-caixa: 4px;
  --raio-pilula: 3px;

  --sombra: none;
  --sombra-alta: 0 1px 2px rgba(0, 0, 0, .55), 0 10px 28px rgba(0, 0, 0, .45);

  --transicao: 150ms cubic-bezier(.2, 0, .2, 1);
  --largura: 1320px;
  /* 44px nao e numero redondo: e a regua do iOS (44 pt) e o piso pratico do toque. O bloco
     do tema escuro ja tinha subido para 44 e explicado; este rebaixava para 40 na cascata. */
  --toque: 44px;

  --fonte-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-display: 'Faustina', Georgia, 'Times New Roman', serif;
  --fonte-num: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* ── 2. BASE ────────────────────────────────────────────────────────────────────────────────── */
html { background: var(--fundo); }
body.area-trabalho {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #cfe3f5; color: var(--tinta); }

h1, h2, h3, h4 { font-family: var(--fonte-ui); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acento-solido); }
hr { border: 0; border-top: 1px solid var(--linha); margin: 20px 0; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 2px; }

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--raio) 0;
  font-size: 14px;
}
.pular-para-conteudo:focus { left: 0; color: #fff; }

/* A entrada escalonada SAIU. Defeito medido: com 6 KPI + 2 gráficos + feed, o atraso acumulado
   empurrava o último bloco ~480ms depois do primeiro pintar — em página de operação isso lê como
   "a tela está carregando devagar". Movimento aqui passa a ser só o que explica MUDANÇA de estado. */
.rx { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ── 3. BARRA SUPERIOR ──────────────────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--navy-900);
  border-bottom: 3px solid var(--acento);
  backdrop-filter: none;
  box-shadow: none;
}
.topo-inner {
  max-width: var(--largura); margin: 0 auto;
  padding: 0 20px; min-height: 62px;
  display: flex; align-items: center; gap: 20px;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-plate {
  background: var(--superficie-2); border-radius: 2px; padding: 4px 8px;
  display: inline-flex; align-items: center;
}
.marca-logo { display: block; height: 26px; width: auto; }
.marca-linha {
  color: #cfe0ee; font-size: 13px; letter-spacing: .02em;
  border-left: 1px solid rgba(255, 255, 255, .22); padding-left: 12px;
  white-space: nowrap;
}
@media (max-width: 900px) { .marca-linha { display: none; } }

.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topo-servico { display: inline-flex; align-items: center; gap: 7px; color: #d7e5f1; font-size: 12.5px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-online { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.dot-offline { background: #fca5a5; box-shadow: 0 0 0 3px rgba(252, 165, 165, .18); }
/* TERCEIRO ESTADO: a sonda corre e ainda não há veredito. Âmbar, não verde nem vermelho — o
   veredito não existe, e pintar de vermelho seria afirmar uma falha que não foi medida. */
.dot-espera { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .20); animation: pulsa-espera 1.6s ease-in-out infinite; }
@keyframes pulsa-espera { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.topo-usuario { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.topo-usuario-nome { color: #fff; font-size: 13px; font-weight: 500; }
.topo-usuario-papel { color: #9db8cf; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.form-sair { display: inline-flex; margin: 0; }

/* Botões do topo (e o "compacto"): fundo translúcido sobre o azul, sem pílula. */
.topo .btn {
  background: rgba(255, 255, 255, .10); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--raio);
  box-shadow: none;
}
.topo .btn:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .34); }
.topo .btn .ico { color: #cfe0ee; }

/* Menu móvel */
.topo-menu { display: none; position: relative; }
.topo-menu > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  min-height: var(--toque); padding: 0 12px; color: #fff; font-size: 13px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--raio);
  list-style: none; background: rgba(255, 255, 255, .10);
}
.topo-menu > summary::-webkit-details-marker { display: none; }
.topo-menu-painel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-caixa);
  box-shadow: var(--sombra-alta); padding: 10px; min-width: 280px;
}
.topo-menu-painel .lateral-rotulo { color: var(--tinta-3); }
.topo-menu-painel .lateral-lista a { color: var(--tinta); }
.topo-menu-painel .lateral-lista a .ico { color: var(--tinta-3); }

/* ── 4. CORPO: LATERAL + CONTEÚDO ───────────────────────────────────────────────────────────── */
.corpo {
  max-width: var(--largura); margin: 0 auto;
  padding: 24px 20px 56px;
  display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 28px;
  align-items: start;
}

.lateral {
  position: sticky; top: 78px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-caixa);
  padding: 14px 0 0;
  overflow: hidden;
}
.lateral-rotulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-3); margin: 0; padding: 10px 16px 6px;
}
.lateral-lista { list-style: none; margin: 0 0 6px; padding: 0; }
.lateral-lista li + li { border-top: 1px solid var(--linha); }
.lateral-lista a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; min-height: 38px;
  color: var(--tinta-2); text-decoration: none; font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.lateral-lista a .ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--tinta-3); }
.lateral-lista a:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.lateral-lista a.ativo {
  background: var(--acento-fundo); color: var(--acento);
  border-left-color: var(--acento); font-weight: 600;
}
.lateral-lista a.ativo .ico { color: var(--acento); }
.lateral-texto { flex: 1 1 auto; min-width: 0; }
.lateral-contador {
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--navy-900); color: #fff; border-radius: 3px; padding: 1px 6px;
}
.lateral-lista a.ativo .lateral-contador { background: var(--acento); }

.lateral-rodape {
  margin-top: 12px; padding: 12px 16px 14px;
  border-top: 1px solid var(--linha); background: var(--superficie-2);
}
.lateral-rodape-titulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-3); margin: 0 0 6px;
}
.lateral-rodape-item { margin: 0 0 3px; font-size: 12.5px; color: var(--tinta-2); }
.lateral-rotulo-mini {
  color: var(--tinta-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  margin-right: 5px;
}

/* SEM SESSÃO NÃO EXISTE NAVEGAÇÃO. Defeito medido na captura do `/login` anônimo: a lateral
   aparecia vazia, com o rótulo "Operação" e um bloco de sessão dizendo "Usuário —". Um menu sem
   itens é moldura de nada. */
body.sem-sessao .lateral { display: none; }
body.sem-sessao .corpo { grid-template-columns: minmax(0, 1fr); }
body.sem-sessao .topo-acoes { gap: 8px; }

#conteudo { min-width: 0; }

/* Cabeçalho de página */
.pagina-cabecalho {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 2px solid var(--navy-900);
}
.pagina-cabecalho-txt { min-width: 0; flex: 1 1 340px; }
.trilha-inline { margin: 0 0 6px; font-size: 12.5px; color: var(--tinta-3); }
.trilha-inline a { color: var(--tinta-3); text-decoration: underline; }
.trilha-inline a:hover { color: var(--acento); }
.trilha-inline .sep { color: var(--linha-forte); margin: 0 6px; }
/* TRILHA COMO LISTA ORDENADA (12/10/2026): `<ol>` traz recuo e marcadores por padrão — aqui os
   marcadores saem e o separador `›` volta como conteúdo, para a leitura continuar a mesma de
   antes sem perder a semântica de lista de navegação. */
ol.trilha-inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
ol.trilha-inline li { margin: 0; display: inline-flex; align-items: center; }
ol.trilha-inline li + li::before { content: "›"; color: var(--linha-forte); margin: 0 7px; }
ol.trilha-inline li[aria-current="page"] { color: var(--tinta-2); font-weight: 500; }
.pagina-titulo {
  margin: 0; font-size: 27px; line-height: 1.15; font-weight: 600;
  color: var(--tinta); letter-spacing: -.015em;
}
.pagina-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagina-sub { color: var(--tinta-2); font-size: 13.5px; margin: 6px 0 0; max-width: 72ch; }

/* ── 5. BOTÕES ──────────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 7px 14px;
  font-family: var(--fonte-ui); font-size: 13.5px; font-weight: 500; line-height: 1.2;
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  box-shadow: none; text-decoration: none; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn:hover { background: var(--superficie-3); border-color: var(--tinta-3); color: var(--tinta); text-decoration: none; }
.btn:active { background: var(--superficie-4); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn .ico { width: 16px; height: 16px; flex: 0 0 auto; }

.btn-primario {
  background: var(--acento-solido); color: #fff; border-color: var(--acento-solido);
}
.btn-primario:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn-red, .btn-perigo {
  background: var(--erro-solido); color: #fff; border-color: var(--erro-solido);
}
.btn-red:hover, .btn-perigo:hover { background: #8c1318; border-color: #8c1318; color: #fff; }
.btn-ok { background: var(--ok-solido); color: #fff; border-color: var(--ok-solido); }
.btn-ok:hover { background: #0f4d2c; border-color: #0f4d2c; color: #fff; }
.btn-bloco { width: 100%; }
.btn-compacto { min-height: 32px; padding: 4px 10px; font-size: 12.5px; }
.btn-sutil { background: transparent; border-color: transparent; color: var(--acento); text-decoration: underline; }
.btn-sutil:hover { background: var(--acento-fundo); border-color: transparent; }

/* ── 6. PAINÉIS, CARDS E SEÇÕES ─────────────────────────────────────────────────────────────── */
.panel, .status-panel, .veiculo-card, .card-acao, .painel-grafico, .lateral-bloco,
.kpi, .login-contexto {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-caixa);
  box-shadow: none;
}
.panel-header, .veiculo-card .card-header, .panel-header-flex {
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  padding: 10px 16px;
  font-size: 13px; font-weight: 600; color: var(--tinta);
  text-transform: none; letter-spacing: 0;
  border-radius: var(--raio-caixa) var(--raio-caixa) 0 0;
}
.panel-body { padding: 16px; }
.painel-grafico .panel-body, .painel-grafico .grafico-corpo { padding: 14px 16px; }

.secao { margin-bottom: 26px; }
/* ── CABEÇALHO DE CARTÃO DE RETIRADA (12/10/2026) ─────────────────────────────────────────────
   DEFEITO MEDIDO com `probe-culpado.cjs` a 320px: os spans de metadados (`#53 · 12/10/2026
   14:34:52`, 66px) ficavam em `left=280 right=347` — 27px além da borda, e eram a ÚNICA causa da
   rolagem horizontal da página inteira. A cadeia era: `.cat-header` em linha, com o título à
   esquerda e o metadado empurrado à direita por `justify-content: space-between`; quando o título
   não encolhe mais, o último item sai do contêiner em vez de descer.

   Aqui o cabeçalho passa a QUEBRAR LINHA — em tela estreita o metadado desce para a linha de
   baixo, alinhado à esquerda, que é o lugar dele. Nada muda acima de 700px, onde os dois cabem. */
.cat-header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  justify-content: space-between;
}
.cat-header > span { min-width: 0; overflow-wrap: anywhere; }
.secao-titulo, .category {
  font-family: var(--fonte-ui); font-size: 16px; font-weight: 600; color: var(--tinta);
  margin: 0 0 3px; border-left: 3px solid var(--acento); padding-left: 10px;
}
.secao-sub { color: var(--tinta-2); font-size: 13px; margin: 0 0 12px; max-width: 78ch; }
.dica-campo { color: var(--tinta-3); font-size: 12.5px; max-width: 80ch; margin: 10px 0 14px; }
.dica-campo b { color: var(--tinta-2); }

.grade-dupla { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grade-operacao { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* ── 7. MÉTRICAS ────────────────────────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0; margin-bottom: 24px;
  border: 1px solid var(--linha); border-radius: var(--raio-caixa);
  background: var(--superficie); overflow: hidden;
}
.kpi {
  border: none; border-right: 1px solid var(--linha); border-radius: 0;
  padding: 14px 16px; gap: 2px; background: transparent;
}
.kpi:last-child { border-right: none; }
.kpi-rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-3); font-weight: 600;
}
.kpi-valor {
  font-size: 25px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi-nota { font-size: 12px; color: var(--tinta-3); }
.kpi-alerta .kpi-valor { color: var(--erro); }
.kpi-bom .kpi-valor { color: var(--ok); }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0; border: 1px solid var(--linha); border-radius: var(--raio-caixa);
  background: var(--superficie); overflow: hidden; margin-bottom: 20px;
}
.stat-item, .stat-cell {
  flex: none; padding: 12px 14px; border-right: 1px solid var(--linha); min-width: 0;
}
.stat-item:last-child { border-right: none; }
.stat-label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); font-weight: 600; margin-bottom: 3px;
}
.stat-value {
  display: block; font-size: 18px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.stat-row { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--linha); border-radius: var(--raio-caixa); overflow: hidden; }

/* ── 8. TABELAS ─────────────────────────────────────────────────────────────────────────────── */
.forum-table, .tabela-retirada, .tabela-permissoes, .tabela-dados {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-caixa); overflow: hidden; margin-bottom: 18px;
}
.forum-table th, .tabela-retirada th, .tabela-permissoes th, .tabela-dados th {
  background: var(--superficie-2); color: var(--tinta);
  text-align: left; font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 9px 12px; border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap; position: sticky; top: 62px; z-index: 2;
  backdrop-filter: none;
}
.forum-table td, .tabela-retirada td, .tabela-permissoes td, .tabela-dados td {
  padding: 9px 12px; border-bottom: 1px solid var(--linha);
  vertical-align: top; color: var(--tinta);
}
.forum-table tbody tr:nth-child(even) td { background: rgba(125, 184, 240, .045); }
.forum-table tbody tr:hover td, .tabela-retirada tbody tr:hover td { background: rgba(125, 184, 240, .10); }
.forum-table tr:last-child td, .tabela-retirada tr:last-child td { border-bottom: none; }
.forum-table td.num, .forum-table th.num, .tabela-retirada td.num {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── TABELA MAIS LARGA QUE A TELA ROLA DENTRO DE SI (12/10/2026) ──────────────────────────────
   DEFEITO MEDIDO depois de exercitar as telas de administração, que a matriz principal não tinha
   aberto: `/admin/users` marcava **233px** de rolagem horizontal e `/admin/escritas` **60px**, com
   o documento em 1673px e 1500px num viewport de 1440.

   O dono, apontado por `probe-culpado.cjs`, era a própria `<table>`: um elemento `display: table`
   dimensiona-se pela largura mínima do conteúdo das colunas, e `overflow: hidden` (que estas
   tabelas já tinham) **não encolhe** o elemento — ele apenas recorta o que passa por fora e segue
   empurrando o documento. A matriz de permissões tem 12 colunas de rótulo; nenhum desktop comum
   comporta isso.

   `overflow-x: auto` resolve — o excesso passa a ser alcançável por rolagem de propósito. O preço
   é declarado: a rolagem horizontal transforma o elemento em contêiner de rolagem nos dois eixos,
   então o `<th>` `position: sticky` deixa de grudar na rolagem vertical NESTAS duas tabelas. É uma
   troca deliberada: página que rola de lado esconde coluna, cabeçalho que não gruda apenas obriga
   a rolar para cima — o primeiro defeito é pior, e este é o mesmo tratamento que o restante do
   console já usa abaixo de 768px. */
.tabela-permissoes,
table.forum-table.tabela-larga {
  display: block; overflow-x: auto; max-width: 100%;
}
/* ── CABEÇALHO QUE FLUTUAVA SOBRE O DADO (12/10/2026) ─────────────────────────────────────────
   CONSEQUÊNCIA MEDIDA da regra acima, e que só apareceu quando ABRI `/admin/users` na tela — o
   `overflow=0` que eu havia medido não contava essa parte.

   `overflow-x: auto` transforma o elemento em contêiner de rolagem NOS DOIS eixos (o `y` computado
   deixa de ser `visible`). O `<th>` com `position: sticky; top: 62px` passa então a grudar em
   relação à própria tabela, e o resultado foi o CABEÇALHO DESENHADO POR CIMA DE UMA LINHA DE DADOS
   — na captura, "ID USUÁRIO PAPEL ATIVO…" aparecia colado embaixo do usuário `clpz`.
   Cabeçalho de tabela flutuando sobre dado é pior do que cabeçalho que não gruda.

   E o último degrau do mesmo defeito: o rótulo "ADMINISTRAR" saía CORTADO na borda ("AD"), porque
   `th { white-space: nowrap }` (que existe para coluna de ID/data não quebrar número) também
   impedia o rótulo longo de partir em duas linhas — e era o rótulo que definia a largura mínima da
   coluna. Permitindo a quebra nos cabeçalhos, a matriz volta a caber: 9 colunas de caixa de seleção
   a ~88px mais as quatro de identificação.

   ── A REGRA É SÓ PARA A MATRIZ, E ISSO É UMA CORREÇÃO (medida) ────────────────────────────────
   Na primeira versão eu estendi `white-space: normal; overflow-wrap: anywhere` TAMBÉM para
   `table.forum-table.tabela-larga`, que serve `/admin/escritas`. No navegador a página saltou de
   **7.179 px para 41.801 px** — uma regressão de 6× que eu mesmo introduzi e que a matriz de rotas
   pegou no número seguinte.

   O `probe-altura.cjs` mostrou a causa: os 85 blocos de código (`payload` e `resposta` crus)
   colapsaram para **28 px de largura**. `overflow-wrap: anywhere` autoriza o navegador a reduzir a
   largura MÍNIMA da coluna a um único caractere — e como cada bloco mantém `max-height: 320px`,
   sobraram 85 × 320 = 27.200 px de altura forçada dentro da tabela.

   Em `tabela-larga` as colunas têm largura declarada no próprio `<th>` de propósito; ali o que
   faltava era só o `position: static` para matar o cabeçalho flutuante. O `nowrap` continua certo
   para aquelas colunas (é a lição das colunas curtas que não podem quebrar ID nem data). */
.tabela-permissoes th { position: static; white-space: normal; overflow-wrap: anywhere; }
table.forum-table.tabela-larga th { position: static; }
.tabela-permissoes td, .tabela-permissoes th { padding: 8px 10px; }
tr.linha-principal > td { color: var(--tinta); font-weight: 500; }
th[aria-sort="ascending"] .ordenar-dica::after { content: " ↑"; color: var(--acento); }
th[aria-sort="descending"] .ordenar-dica::after { content: " ↓"; color: var(--acento); }
tr.linha-erro { background: var(--erro-fundo) !important; }
tr.linha-erro td { border-bottom-color: #f3cccc; }
.linha-erro .color-red, .linha-erro .color-green { color: var(--erro); }
.linha-erro a { color: var(--acento); }
.linha-familia { background: var(--superficie-2); font-weight: 600; }
.col-curta, .celula-id, .celula-estado, .col-perm { white-space: nowrap; }
.celula-id { font-family: var(--fonte-num); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.celula-orgao { color: var(--tinta-2); }
.celula-acoes { white-space: nowrap; }

/* Barra de ferramentas da tabela */
.barra-tabela {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--superficie); border: 1px solid var(--linha); border-bottom: none;
  border-radius: var(--raio-caixa) var(--raio-caixa) 0 0; padding: 12px 14px;
}
.barra-tabela + table.forum-table { border-radius: 0 0 var(--raio-caixa) var(--raio-caixa); margin-top: 0; }
.barra-tabela-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.barra-tabela-campo label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); font-weight: 600;
}
.barra-tabela-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.barra-tabela-contagem { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.tabela-vazio {
  border: 1px solid var(--linha); border-top: none;
  border-radius: 0 0 var(--raio-caixa) var(--raio-caixa);
  background: var(--superficie-2); padding: 18px; font-size: 13px; color: var(--tinta-2);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.tabela-vazio[hidden] { display: none; }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Paginação — existia como classe SEM REGRA (`paginacao`), então a navegação de arquivo saía
   como lista crua de links. Agora é uma barra com estado corrente legível. */
.paginacao {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 0; list-style: none;
}
.paginacao a, .paginacao span, .paginacao-atual {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; padding: 4px 9px; font-size: 13px;
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--tinta-2); text-decoration: none;
}
.paginacao a:hover { background: var(--superficie-3); color: var(--tinta); text-decoration: none; }
.paginacao-atual, .paginacao .atual {
  background: var(--navy-900); color: #fff; border-color: var(--tinta); font-weight: 600;
}
.paginacao .desabilitado { opacity: .5; pointer-events: none; }
.paginacao-info { font-size: 12.5px; color: var(--tinta-3); margin-left: 6px; }

/* ── 9. FORMULÁRIOS ─────────────────────────────────────────────────────────────────────────── */
.form-table {
  width: 100%; border: none; background: none; border-radius: 0; margin-bottom: 0;
  border-collapse: separate; border-spacing: 0;
}
.form-table th, .form-table td {
  border: none; background: none; padding: 0 0 14px; white-space: normal;
  display: table-cell; vertical-align: top;
}
.form-table th {
  width: 190px; padding-right: 18px; padding-top: 9px;
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500;
  color: var(--tinta-2); position: static; backdrop-filter: none;
}
.form-table td { min-width: 0; }
.form-table tr:last-child th, .form-table tr:last-child td { padding-bottom: 0; }
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
/* ── FOCO DE LINHA: BARRA, NÃO MANCHA (12/10/2026) ────────────────────────────────────────────
   DEFEITO VISTO NA CAPTURA (e só nela): `/retirar` abria com uma FAIXA CINZA de `x=543` a `x=1339`
   atravessando o cartão branco do formulário, à direita do botão. O `probe-faixa.cjs` apontou o
   pintor: o `<td>` do `.form-table`, com `rgb(238,242,245)`.

   A origem é `style.css` linha 1000 — `tr:focus-within td { background: var(--superficie-3) }`. O
   campo de placa tem `autofocus`, então a linha já nasce "em foco" e o `<td>` INTEIRO (796 px, muito
   além do campo) recebe o fundo. No tema escuro era um realce discreto; no claro virou chapa,
   competindo com o anel de foco do próprio campo (`border-color` + `box-shadow`), que já diz onde
   o cursor está — e uma faixa que não corresponde a nada lê como tela quebrada.

   O sinal de foco NÃO foi removido: virou uma barra de acento de 3px na borda esquerda da linha.
   Acessibilidade preservada (o foco continua visível e WCAG 2.4.7 atendido, agora por duas vias:
   a barra na linha e o anel no campo), e a mancha sai. */
tr:focus-within td { background: transparent; }
tr:focus-within > td:first-child,
tr:focus-within > th:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.form-acao { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.form-pilha { display: flex; flex-direction: column; gap: 6px; }
.form-consulta { padding: 0; margin-bottom: 20px; }
.form-consulta > summary {
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--tinta);
  list-style: none; display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; min-height: 44px;
}
.form-consulta > summary::-webkit-details-marker { display: none; }
.form-consulta > summary::before { content: "▸"; color: var(--tinta-3); font-size: 13px; }
.form-consulta[open] > summary::before { content: "▾"; }
.form-consulta[open] > summary { border-bottom: 1px solid var(--linha); background: var(--superficie-2); }
.form-consulta > div, .form-consulta > form, .form-consulta > fieldset { padding: 16px; }
.form-consulta .form-consulta-corpo { padding: 16px; }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio-caixa); padding: 14px; margin: 0 0 14px; }
legend { font-size: 12.5px; font-weight: 600; color: var(--tinta); padding: 0 6px; }

label { font-size: 13px; color: var(--tinta); font-weight: 500; }
.campo-ajuda { display: block; font-size: 12px; color: var(--tinta-3); margin-top: 4px; }
.campo-erro { display: block; font-size: 12px; color: var(--erro); margin-top: 4px; font-weight: 500; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 2px var(--erro-fundo); }

input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="email"], input[type="date"], input[type="tel"], select, textarea {
  font-family: var(--fonte-ui); font-size: 14px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--raio); padding: 8px 10px; min-height: 38px;
  max-width: 100%; width: 100%;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input::placeholder, textarea::placeholder { color: #97a6b4; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--tinta-3); }
input:focus, select:focus, textarea:focus {
  /* PATCH 29B (17/10/2026) — esta e a declaracao que VENCIA: tema claro, mesma
     especificidade do `:focus-visible` e mais abaixo no arquivo. O `outline: none` daqui
     cancelava o anel; o halo em `--acento-fundo` (#e8f1f9) sumia sobre o fundo branco.
     Medido antes: 1,08:1 em `input#valor-veiculo`. */
  border-color: var(--acento); outline: 2px solid var(--foco); outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(74, 127, 212, .30);
  /* DEFEITO CORRIGIDO (27/10/2026): aqui havia `background: #fff`. Num console de fundo ESCURO isso
     pintava o campo de BRANCO no instante em que o operador clicava para digitar — o defeito que ele
     relatou. O valor passa a acompanhar o tema, e a autoridade final sobre campo e a camada
     `design.css`, carregada depois deste arquivo. */
  background: var(--campo-fundo-foco, var(--superficie-2));
}
input[readonly] { background: var(--superficie-3); color: var(--tinta-2); }
select option { background: var(--superficie-2); color: var(--tinta); }
.placa-input {
  font-family: var(--fonte-num); font-size: 19px; letter-spacing: 3px;
  text-transform: uppercase; min-height: 44px; font-weight: 600;
}
.checkbox-linha, .opcoes-linha { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.checkbox-linha label, .opcoes-linha label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
/* PATCH 29B (17/10/2026) — 17px era o tamanho nativo, nao uma decisao. A WCAG 2.2 AA
   (2.5.8) pede 24x24 de alvo; medido: a tabela de permissoes tinha 17x17, o menor alvo do
   console, e e onde se marca permissao de usuario. */
input[type="checkbox"], input[type="radio"] {
  width: 24px; height: 24px; min-height: 0; accent-color: var(--acento);
  vertical-align: middle;
}

/* ── 10. AVISOS E ESTADO ────────────────────────────────────────────────────────────────────── */
.alert {
  display: block; border: 1px solid var(--linha-forte); border-left-width: 4px;
  border-radius: var(--raio); padding: 11px 14px; margin-bottom: 14px;
  font-size: 13.5px; line-height: 1.5;
  background: var(--superficie); color: var(--tinta);
}
.alert::before { display: inline-block; margin-right: 8px; font-weight: 700; letter-spacing: .04em; }
.alert-ok, .alert-sucesso { background: var(--ok-fundo); border-color: #b9dcc7; border-left-color: var(--ok); }
.alert-error, .alert-erro { background: var(--erro-fundo); border-color: #f0c4c4; border-left-color: var(--erro); }
.alert-warning { background: var(--aviso-fundo); border-color: #ecd9ab; border-left-color: var(--aviso); }
.alert-info { background: var(--info-fundo); border-color: #c2d9ec; border-left-color: var(--info); }
.alert-ok::before, .alert-sucesso::before { content: "OK"; color: var(--ok); }
.alert-error::before, .alert-erro::before { content: "ERRO"; color: var(--erro); }
.alert-warning::before { content: "ATENÇÃO"; color: var(--aviso); }
.alert-info::before { content: "INFO"; color: var(--info); }
.alert p { margin: 0 0 8px; }
.alert p:last-child { margin-bottom: 0; }

/* Selos: retangulares, com texto — cor nunca é o único sinal. Regra de 3px, sem pílula. */
.restricao-badge, .badge-active, .badge-inactive, .badge-web, .badge-ws, .badge-neutro,
.chip-forte, .chip-fraco, .estado-ok, .estado-erro, .estado-aviso, .estado-info, .status-badge {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--linha-forte); background: var(--superficie-2); color: var(--tinta-2);
  vertical-align: middle; white-space: nowrap;
}
.badge-active, .estado-ok { background: var(--ok-fundo); color: var(--ok); border-color: #b9dcc7; }
.badge-inactive, .estado-inativo { background: var(--superficie-3); color: var(--tinta-3); border-color: var(--linha); }
.badge-web, .estado-aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: #ecd9ab; }
.badge-ws, .estado-info { background: var(--info-fundo); color: var(--info); border-color: #c2d9ec; }
.badge-neutro, .chip-forte { background: var(--superficie-4); color: var(--tinta); border-color: var(--linha-forte); }
.chip-fraco { background: var(--superficie-2); color: var(--tinta-3); border-color: var(--linha); }
.estado-erro { background: var(--erro-fundo); color: var(--erro); border-color: #f0c4c4; }
.estado-inline { display: inline-flex; align-items: center; gap: 7px; }
/* ── FAIXA DE RESUMO: TEXTO É TEXTO, NÃO FILEIRA DE ITENS (12/10/2026) ────────────────────────
   DEFEITO VISTO NA CAPTURA de `/condutor/retirar-bloqueio` a 390px, e é a SEGUNDA ocorrência do
   mesmo erro neste projeto. A frase aparecia partida em quatro pedaços, cada um numa linha:

       Informe o  CPF
       . A tela lê o registro do condutor e mostra
       somente os bloqueios administrativos do DETRAN
       — cada um com motivo, data, órgão e documento gerador.

   O ponto órfão no começo da segunda linha é a pista: `.faixa-resumo` era `display: flex`, e **num
   contêiner flex CADA filho vira um item**. Os filhos aqui são `Informe o `, `<b>CPF</b>`, o resto
   da frase, `<b>somente os bloqueios…</b>` e o fecho — ou seja, a frase se parte EXATAMENTE nas
   fronteiras do negrito, e o `gap` do flex ainda injeta espaço entre os pedaços (é o espaço que
   empurrou o ponto para a linha seguinte).

   O `style.css` já documenta esta mesma lição para o `.alert`, com as palavras "texto quebrava em
   cada negrito e virava frases soltas" — o `.alert` foi consertado na rodada 06/10 e o
   `.faixa-resumo` ficou para trás. Eram 17 usos no produto, 13 deles prosa com negrito no meio.

   `display: block` devolve o fluxo: `<b>`, selos e links são inline e correm como texto; só os
   filhos de BLOCO (a imagem do comprovante e o bloco de botões) empilham — que é o certo nos casos
   em que a faixa carrega documento e ação. */
.faixa-resumo { display: block; flex-wrap: nowrap; gap: 0; align-items: baseline; margin-bottom: 12px; }
.faixa-resumo > * { margin: 0; }
.faixa-resumo > div, .faixa-resumo > img, .faixa-resumo > p { margin-top: 8px; }
.faixa-resumo > img:first-child, .faixa-resumo > div:first-child, .faixa-resumo > p:first-child { margin-top: 0; }

/* ── 11. DADOS DE DOCUMENTO (ficha, detalhes) ───────────────────────────────────────────────── */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 22px; align-items: start; }
.ficha-lateral { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 14px; }
.lateral-bloco-titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3);
  font-weight: 600; padding: 11px 14px 7px; border-bottom: 1px solid var(--linha);
  background: var(--superficie-2);
}
.lateral-acoes { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.resumo-dl { margin: 0; padding: 12px 14px 14px; }
.resumo-dl dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); font-weight: 600; margin-top: 10px;
}
.resumo-dl dt:first-child { margin-top: 0; }
.resumo-dl dd { font-size: 13.5px; margin: 2px 0 0; overflow-wrap: anywhere; color: var(--tinta); }
.lateral-indice { list-style: none; margin: 0; padding: 12px 14px 14px; }
.lateral-indice li { margin-bottom: 6px; }
.lateral-indice a { font-size: 13px; }

.detalhe-grade { display: grid; grid-template-columns: 1fr; gap: 0; font-size: 13px; }
.detalhe-bloco {
  display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 0 16px;
  margin: 0; white-space: normal; grid-column: 1 / -1; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--linha);
}
.detalhe-bloco:last-child { border-bottom: none; }
.detalhe-bloco > .detalhe-rotulo { grid-column: 1; }
.detalhe-bloco > .detalhe-rotulo ~ *:not(.detalhe-rotulo) { grid-column: 2; }
.detalhe-rotulo { color: var(--tinta-3); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.detalhe-cod { color: var(--tinta-3); font-family: var(--fonte-num); font-size: 12px; }
.detalhe-sep { display: none; }
.card-campo { display: flex; flex-direction: column; gap: 2px; }
.fipe-detalhe { font-size: 12.5px; color: var(--tinta-3); }
.fipe-valor { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Comprovantes/dados das partes */
.dados-das-partes { grid-column: 1 / -1; margin-top: 14px; border-top: 1px solid var(--linha); padding-top: 10px; }
.dados-das-partes > summary {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--tinta-2); min-height: var(--toque); list-style: none;
}
.dados-das-partes > summary::-webkit-details-marker { display: none; }
.dados-das-partes > summary::before { content: "▸"; color: var(--tinta-3); }
.dados-das-partes[open] > summary::before { content: "▾"; }

/* ── 12. COMPROVANTE E CÓDIGO ───────────────────────────────────────────────────────────────── */
.comprovante-visual {
  background: var(--superficie-2); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-left: 4px solid var(--navy-900);
  border-radius: var(--raio); padding: 22px; font-size: 13px; line-height: 1.6;
}
.comprovante-visual h2, .comprovante-visual h3 { color: var(--navy-900); }
.comprovante-visual b { color: #0b1520; }
.comprovante-visual a { color: var(--acento); }
.comprovante-visual code { background: var(--superficie-3); color: #29323c; border: 1px solid var(--linha); }
.comprovante-visual img { border: 1px solid var(--linha); background: #fff; }

code, pre {
  font-family: var(--fonte-num); font-size: 12.5px; color: var(--tinta-2);
  background: var(--superficie-3); padding: 1px 5px; border-radius: 3px;
  overflow-wrap: anywhere;
}
.bloco-codigo {
  background: var(--superficie-2); border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte);
  border-radius: var(--raio); padding: 12px; margin: 0 0 12px;
  max-height: 320px; overflow: auto; font-size: 12.5px; line-height: 1.55;
  color: #2b3846; white-space: pre-wrap; overflow-wrap: anywhere;
}
.saida-api { font-family: var(--fonte-num); font-size: 12.5px; }

.registro-miniatura {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 0 0 auto; padding: 7px; border: 1px solid var(--linha-forte);
  border-radius: var(--raio); background: var(--superficie-2); text-decoration: none;
  min-height: var(--toque);
}
.registro-miniatura:hover { border-color: var(--acento); background: var(--acento-fundo); }
.registro-miniatura img { display: block; width: auto; max-width: 138px; max-height: 80px; height: auto; border: 1px solid var(--linha); border-radius: 2px; background: #fff; }
.registro-miniatura span { font-size: 11px; color: var(--tinta-2); }

/* ── 13. GRÁFICOS E ATIVIDADE ───────────────────────────────────────────────────────────────── */
.grafico-corpo { padding: 14px 16px; }
.grafico-svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-rotulo { font-size: 10.5px; fill: var(--tinta-3); font-family: var(--fonte-ui); }
.grafico-barra { fill: var(--acento); }
.grafico-barra-alt { fill: #7ba7cd; }
.grafico-eixo { stroke: var(--linha); stroke-width: 1; }
.grafico-valor { fill: var(--tinta-2); font-weight: 600; font-size: 11px; }
.grafico-titulo-serie { font-size: 12.5px; color: var(--tinta-2); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.grafico-max, .grafico-legenda { color: var(--tinta-3); font-size: 12px; }
.grafico-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.amostra-cor { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.amostra-azul { background: var(--acento); }
.amostra-medio { background: #7ba7cd; }

.barra-linha { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 46px; gap: 10px; align-items: center; margin-bottom: 7px; }
.barra-rotulo { font-size: 12.5px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilha { height: 7px; background: var(--superficie-3); border-radius: 2px; overflow: hidden; display: block; }
.barra-preenchida { display: block; height: 100%; background: var(--acento); border-radius: 2px; min-width: 3px; }
.barra-alt { background: #7ba7cd; }
.barra-numero { font-size: 12.5px; color: var(--tinta-2); text-align: right; font-variant-numeric: tabular-nums; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 14px; border-bottom: 1px solid var(--linha); }
.feed-item:last-child { border-bottom: none; }
.feed-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--linha-forte); margin-top: 6px; flex: 0 0 auto; }
.feed-ponto-alerta { background: var(--erro); }
.feed-ponto-bom { background: var(--ok); }
.feed-txt { flex: 1 1 auto; min-width: 0; }
.feed-titulo { font-size: 13px; color: var(--tinta); }
.feed-meta { font-size: 11.5px; color: var(--tinta-3); }

/* ── 14. ATALHOS DE OPERAÇÃO ────────────────────────────────────────────────────────────────── */
.atalhos-titulo { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); margin-bottom: 9px; }
.atalhos-operacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border: 1px solid var(--linha); border-radius: var(--raio-caixa); overflow: hidden; background: var(--superficie); }
.atalho-linha {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: transparent; border: none; border-bottom: 1px solid var(--linha); border-right: 1px solid var(--linha);
  color: var(--tinta); text-decoration: none; font-size: 13.5px; min-height: 44px;
  transition: background var(--transicao);
}
.atalho-linha:hover { background: var(--superficie-2); text-decoration: none; }
.atalho-perigo { color: var(--erro); font-weight: 600; }
.atalho-perigo:hover { background: var(--erro-fundo); }
.atalho-seta { margin-left: auto; color: var(--tinta-3); }
.atalho-linha .ico { width: 17px; height: 17px; color: var(--tinta-3); flex: 0 0 auto; }

.operacao-cabecalho { margin-bottom: 10px; }
.operacao-sobretitulo { font-size: 12.5px; color: var(--tinta-3); }
.operacao-principal { min-width: 0; }
.painel-formulario { padding: 16px; }
.consulta-rapida { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-grade-compacta { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }

/* ── 15. LOGIN ──────────────────────────────────────────────────────────────────────────────── */
.login-shell {
  min-height: calc(100vh - 240px);
  display: grid; place-items: center; padding: 32px 0;
}
.login-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0;
  width: 100%; max-width: 940px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-caixa); overflow: hidden; box-shadow: var(--sombra-alta);
}
.login-contexto {
  border: none; border-radius: 0; background: var(--navy-900); color: #dce9f4;
  padding: 34px 32px; display: flex; flex-direction: column; gap: 14px;
}
.login-contexto h2 { color: #fff; font-size: 20px; margin: 0; font-family: var(--fonte-ui); }
.login-contexto p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #bdd2e4; }
.login-contexto ul { margin: 0; padding-left: 18px; font-size: 13px; color: #bdd2e4; }
.login-contexto li { margin-bottom: 5px; }
.login-contexto-icone { width: 30px; height: 30px; color: #7fb3dd; margin-bottom: 4px; }
.login-contexto h2 + p { margin-top: 4px; }
.login-contexto-rodape {
  margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12.5px; color: #9fc0da;
}
.login-card { width: 100%; padding: 34px 32px; border: none; border-radius: 0; background: var(--superficie); }
.login-card h1 { font-size: 21px; margin: 0 0 6px; color: var(--tinta); }
.login-card .form-pilha { gap: 8px; margin-bottom: 14px; }
.login-recuperacao { display: block; margin-top: 14px; font-size: 12.5px; color: var(--tinta-3); }
.login-recuperacao summary { cursor: pointer; min-height: 30px; }
.login-selo {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 5px 10px; border: 1px solid var(--linha-forte); border-radius: 3px;
  background: var(--superficie-2); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2);
}
.login-selo .ico { width: 15px; height: 15px; color: var(--tinta-3); }

/* ── 16. STATUS / DIAGNÓSTICO ───────────────────────────────────────────────────────────────── */
.status-panel { margin-bottom: 20px; }
.status-panel .panel-header { display: flex; align-items: center; gap: 10px; }
.status-panel .panel-body { display: flex; flex-direction: column; gap: 10px; }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.totp-bar { height: 6px; background: var(--superficie-3); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.totp-bar-fill { height: 100%; background: var(--ok); transform-origin: left; transition: transform 1s linear; width: 100%; }
.totp-codigo { font-family: var(--fonte-num); font-size: 24px; font-weight: 600; letter-spacing: 3px; color: var(--tinta); }

/* ── 17. RODAPÉ ─────────────────────────────────────────────────────────────────────────────── */
.site-footer, #footer {
  border-top: 3px solid var(--navy-900); background: var(--superficie);
  padding: 24px 0 0; margin-top: 40px; font-size: 12.5px; color: var(--tinta-2);
}
.site-footer .container { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.footer-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 32px; min-height: 0; align-items: start; padding-block: 0;
}
.footer-col { flex: none; }
.footer-col h2, .footer-col h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta); font-weight: 700; margin: 0 0 9px;
  padding-bottom: 6px; border-bottom: 1px solid var(--linha);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: block; }
.footer-col li { margin: 0 0 5px; }
.footer-col a { color: var(--tinta-2); font-size: 12.5px; }
.footer-col a:hover { color: var(--acento); }
.footer-col p { color: var(--tinta-3); font-size: 12.5px; max-width: 52ch; margin: 0; }

.footer-identificador {
  border-top: 1px solid var(--linha); margin-top: 22px; padding: 14px 0;
  background: var(--superficie-2);
}
.footer-identificador .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* ── A MARCA GOV.BR GANHA PLACA (12/10/2026) ──────────────────────────────────────────────────
   DEFEITO MEDIDO NA PRÓPRIA CAPTURA: o rodapé ficou com uma ÁREA BRANCA VAZIA no canto esquerdo.
   O arquivo `govbr.png` é a versão CLARA da marca — a que o tema do Portal gov.br publica para
   fundo ESCURO, como estava no tema anterior. Sobre papel, texto branco sobre fundo branco é
   invisível: a marca simplesmente não existia na tela.

   O conserto NÃO recolore a marca (a disciplina de procedência deste projeto é explícita: os
   ativos oficiais não são redesenhados nem recoloridos). A marca continua sendo o mesmo arquivo,
   na mesma proporção, sobre uma PLACA AZUL-MARINHO — o fundo para o qual ela foi desenhada. É o
   mesmo tratamento que o logo do RENAJUD já recebe no cabeçalho, em espelho. */
.rodape-marca {
  display: inline-flex; align-items: center;
  background: var(--navy-900); border-radius: 2px; padding: 5px 9px;
}
.marca-logo-gov { display: block; height: 26px; width: auto; }
.assinatura { font-size: 12px; color: var(--tinta-2); }
.footer-meta { font-size: 12px; color: var(--tinta-3); }

/* ── 18. PROGRESSO E ESPERA ─────────────────────────────────────────────────────────────────── */
.barra-progresso {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: transparent; z-index: 999; opacity: 0; pointer-events: none;
}
.barra-progresso.ativa { opacity: 1; }
.barra-progresso.ativa::after {
  content: ""; display: block; height: 100%; width: 34%;
  background: var(--acento-solido);
  animation: barra-corre 1.1s ease-in-out infinite;
}
@keyframes barra-corre {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
.contador-espera { font-variant-numeric: tabular-nums; font-weight: 600; }
.esqueleto-carregando { position: relative; }
.esqueleto-carregando::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(11, 79, 138, .05) 26px 27px);
  pointer-events: none;
}

/* ── 18b. AÇÃO DUPLA: CONFERIR (leitura) AO LADO DE AGIR (escrita) ─────────────────────────────
   A separação é o conserto do achado P0-01. Ela precisa ser VISÍVEL: um botão neutro de leitura
   de um lado, e a ação irreversível do outro, com o efeito escrito embaixo. Se os dois parecerem
   iguais, a tela não separou nada — só acrescentou um botão. */
.acao-dupla {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 0; margin-top: 16px;
  border: 1px solid var(--linha); border-radius: var(--raio-caixa);
  background: var(--superficie); overflow: hidden;
}
.acao-bloco {
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--linha); align-items: flex-start;
}
.acao-bloco:last-child { border-right: none; }
.acao-bloco .btn { width: 100%; justify-content: center; }
.acao-nota { font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; }
.acao-nota b { color: var(--erro); }
/* A coluna de risco ganha faixa vermelha à esquerda e fundo levemente tingido: a diferença de
   consequência entre os dois botões é lida antes do texto, não depois. */
.acao-bloco-risco {
  background: var(--erro-fundo);
  border-left: 4px solid var(--erro);
}
.acao-bloco-risco .acao-nota { color: #6d2020; }
@media (max-width: 768px) {
  .acao-dupla { grid-template-columns: 1fr; }
  .acao-bloco { border-right: none; border-bottom: 1px solid var(--linha); }
  .acao-bloco:last-child { border-bottom: none; border-left: 4px solid var(--erro); }
}

/* ── 19. UTILITÁRIOS ────────────────────────────────────────────────────────────────────────── */.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.font-small { font-size: 12.5px; }
.font-bold { font-weight: 600; }
.color-red { color: var(--erro); }
.color-green { color: var(--ok); }
.color-blue { color: var(--acento); }
.label { color: var(--tinta-3); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.spacer-10 { height: 16px; }
.linha-detalhe { padding-left: 18px; }
.removidas, .erros { font-size: 13px; }
.erros { color: var(--erro); }
.filter, .filtro { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.mono { font-family: var(--fonte-num); }
/* ── PLACA VEICULAR: O DESENHO TEM DE CABER (12/10/2026) ──────────────────────────────────────
   O macro `_placa.html` recebe a largura por PARÂMETRO e a aplica em `style="width:400px"` — um
   valor em LINHA, que vence qualquer folha de estilo. A 320px, numa lista de histórico, o desenho
   de 400px dentro de um contêiner de 292px empurrava a página inteira para 347px de largura
   (medido com `probe-overflow.cjs`: `span w=66 left=280 right=347`).

   Rolagem horizontal em console de operação é o defeito mais caro que existe numa tela de dados:
   esconde coluna de tabela. Aqui o componente passa a ter teto de largura — o desenho continua
   sendo o mesmo SVG com `viewBox`, então ele ESCALA em vez de cortar, e a proporção da placa
   (400:130) é preservada pelo `preserveAspectRatio` que o macro já declara. */
.placa-figura { display: inline-block; max-width: 100%; }
.placa-svg { display: block; width: 100%; height: auto; }
.vazio-estado { padding: 26px 18px; text-align: center; color: var(--tinta-2); background: var(--superficie-2); border: 1px dashed var(--linha-forte); border-radius: var(--raio-caixa); font-size: 13.5px; }
img, table, pre { max-width: 100%; }

/* ── 20. RESPONSIVO ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .corpo { grid-template-columns: 214px minmax(0, 1fr); gap: 20px; }
  .ficha { grid-template-columns: minmax(0, 1fr) 272px; gap: 18px; }
  .grade-dupla, .grade-operacao { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .login-grade { grid-template-columns: 1fr; max-width: 520px; }
  .login-contexto { order: 2; padding: 22px 24px; }
  .login-card { order: 1; padding: 26px 24px; }
  .ficha { grid-template-columns: 1fr; }
  .ficha-lateral { position: static; }
  .lateral-acoes { flex-direction: row; flex-wrap: wrap; }
  .lateral-acoes .btn, .btn-bloco { width: auto; flex: 1 1 46%; }
  .detalhe-bloco { grid-template-columns: 1fr; gap: 0; }
  .detalhe-bloco > .detalhe-rotulo { grid-column: 1; }
}
@media (max-width: 768px) {
  .topo { position: static; }
  .topo-menu { display: block; }
  .topo-inner { flex-wrap: wrap; gap: 10px; padding: 10px 14px; min-height: 0; }
  .topo-acoes { width: 100%; margin-left: 0; justify-content: space-between; }
  .corpo { grid-template-columns: 1fr; padding: 16px 14px 40px; gap: 16px; }
  .lateral { display: none; }
  .pagina-cabecalho { align-items: flex-start; }
  .pagina-titulo { font-size: 22px; }
  .pagina-acoes { width: 100%; }
  .pagina-acoes .btn { flex: 1 1 46%; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { border-bottom: 1px solid var(--linha); }
  .kpi:nth-child(2n) { border-right: none; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item { border-bottom: 1px solid var(--linha); }
  .stat-item:nth-child(2n) { border-right: none; }

  /* FORMULÁRIO: rótulo ACIMA do campo. Era tabela de duas colunas que colapsava; rótulo acima é
     o que sobrevive a 320px sem cortar a frase de ajuda. */
  .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td {
    display: block; width: 100%; max-width: 100%;
  }
  .form-table th { padding: 0 0 5px; font-size: 12.5px; font-weight: 600; }
  .form-table td { padding: 0 0 14px; }
  .form-grade { grid-template-columns: 1fr; }
  .form-acao { flex-direction: column; align-items: stretch; }
  .form-acao .btn { width: 100%; }

  /* TABELAS DE DADOS: rolagem com affordance em vez de texto cortado. `nowrap` no bloco inteiro
     some; cada célula curta mantém o nowrap para não quebrar ID/data. */
  .forum-table, .tabela-retirada, .tabela-permissoes, .tabela-dados {
    display: block; overflow-x: auto; white-space: normal; font-size: 12.5px;
  }
  .forum-table th, .tabela-retirada th, .tabela-permissoes th, .tabela-dados th { position: static; }
  .barra-tabela { flex-direction: column; align-items: stretch; }
  .barra-tabela-campo input, .barra-tabela-campo select { min-width: 0; width: 100%; }
  .barra-tabela-acoes { margin-left: 0; justify-content: space-between; flex-wrap: wrap; }
  .btn { min-height: var(--toque); }
  /* ── RODAPÉ NO CELULAR: ÍNDICE, NÃO SEGUNDO MENU (12/10/2026) ─────────────────────────────
     DEFEITO MEDIDO na captura de 390px: o rodapé ocupava ~900 dos 1.832 px da página — METADE
     da rolagem era índice. Pior: ele repetia, link por link, exatamente a navegação que o botão
     "Menu" já abre no topo. Em tela pequena, repetir o menu não é reforço, é caminho a mais para
     percorrer com o polegar.

     O que sai no celular: as duas colunas de LINKS. O que fica: a identificação institucional
     ("Sobre o console"), o estado do serviço e a faixa do gov.br — que é o que um rodapé
     institucional precisa dizer, e que não existe em nenhum outro lugar da tela. */
  .footer-col-navegacao { display: none; }
  .footer-grade { grid-template-columns: 1fr; gap: 16px; }
  .footer-col h2 { margin-bottom: 6px; }
  .footer-col p { font-size: 12.5px; }
  .site-footer, #footer { padding-top: 18px; margin-top: 28px; }
  .footer-identificador { margin-top: 16px; padding: 12px 0; }
  .footer-identificador .container { flex-direction: column; align-items: flex-start; gap: 8px; }
  .barra-progresso { top: 0; }
}
@media (max-width: 420px) {
  .kpi-grid, .stat-grid { grid-template-columns: 1fr; }
  .kpi, .stat-item { border-right: none; }
  .topo-usuario { display: none; }
  .marca-logo { height: 22px; }
  .pagina-titulo { font-size: 20px; }
  .login-card, .login-contexto { padding: 20px 16px; }
}

/* ── BARRA SUPERIOR EM TELA ESTREITA: O TRANSBORDO REAL (12/10/2026) ───────────────────────────
   MEDIDO com `probe-overflow.cjs` a 320px: o documento tinha 94px de rolagem horizontal, e o dono
   não era tabela nem formulário — era a BARRA SUPERIOR. A cadeia exata:

     `.topo-acoes` (largura total, `space-between`)
       └─ .topo-acoes { gap: 8px; flex-wrap: wrap; row-gap: 6px; }

   PATCH 31 (17/10/2026) — O COMENTARIO ACIMA NAO FECHAVA. Ele abria um comentario aqui e o
   fechamento so aparecia dentro do comentario seguinte, catorze linhas abaixo: a media query de
   768px que envolvia as regras foi engolida junto, e as regras passaram a valer em TODA largura.
   Custo medido em 1440px: `.topo-servico-txt` com `max-width: 104px` e `overflow: hidden` num
   cabecalho que usava 319px de 1440 — "RENAJUD conectado" (122px) saia como "RENAJUD conec…".

   PATCH 32 (17/10/2026) — O CONSERTO DA PATCH 31 TINHA O MESMO DEFEITO, POR OUTRO CAMINHO. Este
   comentario citava os dois delimitadores de comentario e uma abertura de bloco literalmente.
   Comentario em CSS nao aninha: o fechamento citado fechou o comentario de verdade, o resto do
   texto virou codigo, e a abertura citada abriu um bloco sem par. O navegador descartou TODO o
   CSS dali para frente — 14 de 14 regras-canario ausentes, 1153 aberturas contra 1152
   fechamentos. Por isso o menu perdeu o estilo e o contador perdeu a pilula.

   Regra que fica: ao comentar um defeito de comentario, descreva os delimitadores por NOME.
   Reproduzi-los dentro do comentario recria o defeito. E quem detecta nao e a leitura do arquivo:
   e a contagem de regras que o navegador manteve.

   O comentario fecha aqui, a media query volta ao lugar, e o truncamento vale so onde precisa. */
@media (max-width: 768px) {
  .btn-compacto { padding: 4px 8px; }
  .topo-servico { min-width: 0; flex: 0 1 auto; }
  .topo-servico-txt {
    max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .marca-plate { padding: 3px 6px; }
  .form-sair { flex: 0 0 auto; }
}
/* Abaixo de 360px o estado do serviço vira SÓ O PONTO: o texto já foi lido no topo, e aqui ele
   é o que resta entre a marca e o botão de sair. O rótulo continua na árvore acessível. */
@media (max-width: 360px) {
  .topo-servico-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

/* A IMPRESSÃO CONTINUA SENDO PAPEL: o comprovante sai claro, sem barra azul nem sombra. */
@media print {
  .topo, .lateral, .topo-menu, .site-footer, #footer, .pular-para-conteudo,
  .pagina-acoes, .barra-tabela, .btn, .barra-progresso { display: none !important; }
  body.area-trabalho { background: #fff; color: #000; font-size: 11pt; }
  .corpo { display: block; padding: 0; max-width: none; }
  #conteudo { width: 100%; }
  .panel, .status-panel, .veiculo-card, .painel-grafico, .comprovante-visual {
    border: 1px solid #666 !important; box-shadow: none !important; break-inside: avoid;
  }
  .panel-header, .veiculo-card .card-header { background: #eee !important; color: #000 !important; border-bottom: 1px solid #666 !important; }
  .kpi-grid, .stat-grid, .forum-table, .tabela-retirada { border-color: #666 !important; }
  .kpi, .stat-item { border-color: #666 !important; }
  .kpi-valor, .stat-value { color: #000 !important; }
  th { background: #eee !important; color: #000 !important; }
  .comprovante-visual { border-left-width: 4px !important; }
}

/* ALTO CONTRASTE DO SISTEMA: o tema claro não depende de transparência nem de blur para
   hierarquia, então herda bem — mas as bordas ganham espessura explícita para não sumirem. */
@media (forced-colors: active) {
  .btn, .panel, .lateral, .forum-table, .alert { border: 1px solid CanvasText; }
  .lateral-lista a.ativo { border-left: 4px solid Highlight; }
  .barra-progresso.ativa::after { background: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .barra-progresso.ativa::after { animation: none; width: 100%; opacity: .6; }
}


/* ── NAVEGACAO AGRUPADA (17/10/2026) ──────────────────────────────────────────────────
   Acrescentado junto com os 4 grupos do menu. A lateral deixa de ser 11 links soltos e
   passa a ter blocos titulados, cada um com seu dominio. Medida de leitura: o titulo do
   grupo e 11px em caixa alta com espacamento — rotulo, nao conteudo; o item e 14px. */
.nav-grupo { margin-bottom: 18px; }
.nav-grupo:last-child { margin-bottom: 0; }
.nav-grupo-titulo {
  font-family: var(--fonte-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 6px 10px;
  padding: 0;
}
.nav-lista { list-style: none; margin: 0; padding: 0; }
.nav-lista li { margin: 0; }
.nav-lista a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 4px;
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  border-left: 2px solid transparent;
}
.nav-lista a:hover { background: var(--superficie-2); color: var(--tinta); }
.nav-lista a.nav-ativo {
  background: var(--superficie-2);
  color: var(--tinta);
  font-weight: 600;
  border-left-color: var(--acento);
}
.nav-lista a.nav-ativo .ico { color: var(--acento); }
.nav-lista .ico { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; }
.nav-contador {
  margin-left: auto;
  background: var(--acento-solido);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 9px;
}
@media (max-width: 900px) {
  .nav-grupo-titulo { margin-left: 0; }
  .nav-lista a { padding: 9px 8px; font-size: 15px; }
}


/* ── TABELA DE RETIRADA: A COLUNA DE ACAO ESTAVA CORTADA (17/10/2026) ─────────────────────
   MEDIDO na captura de /minhas-retiradas a 1440px: o botao "Comprovante" transbordava a
   borda direita e o "Devolver ao veiculo" aparecia sobreposto, com a borda vermelha vazando
   para fora da tabela.

   CAUSA: a celula "Situacao de cada uma" recebe o ID da restricao como TEXTO LONGO com
   espaco (`BLOQUEIO VIA SIM 03102023`) dentro de um <a>. Sem quebra e sem largura
   controlada, essa celula esticava a tabela alem do container e esmagava a coluna de acao.

   CORRECAO em duas partes:
     1. `table-layout: fixed` + larguras declaradas: a tabela respeita o container;
     2. `overflow-wrap:anywhere` no conteudo: o ID longo quebra em vez de empurrar. */
.tabela-retirada { table-layout: fixed; }
.tabela-retirada td, .tabela-retirada th { word-break: break-word; overflow-wrap: anywhere; }
.tabela-retirada col.c-veiculo    { width: 22%; }
.tabela-retirada col.c-restricoes { width: 14%; }
.tabela-retirada col.c-situacao   { width: 40%; }
.tabela-retirada col.c-acao       { width: 24%; }
.tabela-retirada td[data-rotulo="Comprovante"],
.tabela-retirada td[data-rotulo="Ação"] { white-space: normal; }
.tabela-retirada td[data-rotulo="Comprovante"] .btn,
.tabela-retirada td[data-rotulo="Ação"] .btn { width: 100%; margin-bottom: 6px; }
/* O link do ID de restricao herda o tamanho da celula — nao pode estourar. */
.tabela-retirada td a { display: inline; overflow-wrap: anywhere; }

/* Em telas estreitas a tabela ja vira blocos (regra de 1502); aqui so evitamos o vao. */
@media (max-width: 900px) {
  .tabela-retirada { table-layout: auto; }
  .tabela-retirada td[data-rotulo="Comprovante"] .btn,
  .tabela-retirada td[data-rotulo="Ação"] .btn { width: 100%; }
}


/* ── CABECALHO DA TABELA DE RETIRADA DESLOCADO PARA BAIXO DOS DADOS (17/10/2026) ──────────
   MEDIDO com sonda de layout no chromium: o <th> de .tabela-retirada ficava em top=525
   enquanto o <tr> dele ocupava 463..499 e os <td> de dados estavam em 500 — ou seja, o
   cabecalho aparecia DEPOIS da primeira linha de dados.

   CAUSA: `position: sticky; top: 0; backdrop-filter: blur(8px)` (regra global do th) dentro
   de uma tabela com `overflow: hidden; border-radius` — combinacao que no Chromium desloca o
   elemento sticky para fora do fluxo esperado do <tr>.

   A tabela de retirada tem duas linhas por registro: nao ha rolagem interna para o cabecalho
   acompanhar. Entao aqui ele volta ao fluxo normal. */
.tabela-retirada th {
  position: static;
  top: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* E o container deixa de recortar, para nao criar contexto de rolagem: o raio passa a ser
   aplicado nas bordas das celulas. */
.tabela-retirada { overflow: visible; border-radius: var(--raio-caixa); }
.tabela-retirada thead tr:first-child th:first-child { border-top-left-radius: var(--raio-caixa); }
.tabela-retirada thead tr:first-child th:last-child  { border-top-right-radius: var(--raio-caixa); }


/* ── CABECALHO DE TABELA DESLOCADO PARA BAIXO DOS DADOS — CORRECAO GLOBAL (17/10/2026) ─────
   MEDIDO no chromium: `<th>` em top=525 dentro de um `<tr>` em 463..499.
   Causa: `position: sticky; top: 0; backdrop-filter: blur(8px)` no `th` dentro de uma
   tabela com `overflow: hidden`. O patch 13 tratou so `.tabela-retirada`; aqui a familia
   toda, porque o defeito apareceu igual em /admin e /minhas-retiradas.

   Cabecalho sticky exige um ANCESTRAL que role. No console quem rola e a pagina; a tabela
   nao tem rolagem propria, entao o sticky nunca entregou nada e so produzia o deslocamento. */
.forum-table th,
.form-table th,
.tabela-permissoes th,
.tabela-retirada th {
  position: static;
  top: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* O container tambem deixa de recortar: `overflow:hidden` era o que criava o contexto que
   quebrava o sticky, e sem ele o raio das bordas passa a vir das celulas. */
.forum-table, .form-table, .tabela-permissoes, .tabela-retirada { overflow: visible; }
.forum-table thead tr:first-child th:first-child,
.form-table thead tr:first-child th:first-child { border-top-left-radius: var(--raio-caixa); }
.forum-table thead tr:first-child th:last-child,
.form-table thead tr:first-child th:last-child { border-top-right-radius: var(--raio-caixa); }


/* ── MATRIZ DE PERMISSOES: ROLAGEM HORIZONTAL EM VEZ DE ROTULO PARTIDO (17/10/2026) ─────────
   MEDIDO em /admin/usuarios a 1440 px: "CONSULTAR" renderizava como CO/NS/ULT/AR em 4 linhas,
   porque 9 colunas de permissao dividiam ~50 px cada. Espremer rotulo nao e opcao: a matriz rola. */
.tabela-rolavel {
  overflow-x: auto;
  overflow-y: visible;
  /* a sombra avisa que ha mais conteudo a direita, sem depender de barra visivel no macOS */
  background:
    linear-gradient(to right, var(--superficie) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(to left,  var(--superficie) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat;
  background-attachment: local, local;
}
.tabela-rolavel > .forum-table { margin-bottom: 0; }
.tabela-permissoes { min-width: 1180px; }
.tabela-permissoes th.col-perm {
  width: 82px;
  min-width: 82px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  text-align: center;
  padding-inline: 6px;
}
/* o corpo pode quebrar (sao checkboxes, nao texto) */
.tabela-permissoes td.text-center { overflow-wrap: normal; }
/* a ultima coluna (Acoes) nao encolhe: Salvar/Desativar/Excluir precisam caber lado a lado */
.tabela-permissoes td:last-child, .tabela-permissoes th:last-child { min-width: 250px; white-space: nowrap; }

@media (max-width: 700px) {
  .tabela-permissoes { min-width: 1040px; }
}


/* ── MATRIZ DE PERMISSOES: COLUNAS CURTAS INTEIRAS + AVISO DE ROLAGEM (17/10/2026) ──────────
   MEDIDO depois do patch 15: "Papel" ainda quebrava em PAPE/L porque `overflow-wrap:anywhere`
   do patch 14 vale para todo `th`. Coluna curta de rotulo unico nao deve quebrar. */
.tabela-permissoes th.col-curta,
.tabela-permissoes td.col-curta { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.tabela-permissoes th { white-space: nowrap; overflow-wrap: normal; }

/* AVISO DE ROLAGEM: a classe .tem-mais e posta pelo ux.js SO quando scrollWidth > clientWidth,
   entao a sombra nunca mente. Antes dela, a coluna simplesmente sumia na borda. */
.tabela-rolavel { position: relative; }
.tabela-rolavel.tem-mais::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--superficie));
  border-radius: 0 var(--raio-caixa) var(--raio-caixa) 0;
}
.tabela-rolavel.tem-mais.rolou-fim::after { display: none; }

/* ── A BARRA DE FOCO NAO COME O ROTULO (17/10/2026) ──────────────────────────────────────────
   DEFEITO MEDIDO NA CAPTURA de /condutor (03b): uma barra azul vertical cruzava o texto
   "CPF DO CONDUTOR:", no x=368. Nao era decoracao nem borda: era o `box-shadow: inset 3px 0 0`
   de `tr:focus-within > td:first-child` — o sinal de foco da LINHA. Só que o `:first-child`
   desta tabela e o `<td class="label">`, que tem `padding: 0`, entao a barra era pintada DENTRO
   da caixa de texto, sobre a primeira letra.

   `sonda_formulario.py` mostrou que nao havia borda nem ::before/::after (border-left=0px,
   content:none) — foi `sonda_barra.py` que leu `box-shadow: rgb(11,79,138) 3px 0px 0px inset`
   no proprio TD.label. Sem essa segunda sonda eu teria "consertado" a borda errada.

   O espaco da barra passa a existir SEMPRE: assim a barra tem para onde ir e o rotulo nao
   desloca no instante do foco (deslocar seria trocar um defeito por um reflow no clique). */
.form-table tr > td:first-child,
.form-table tr > th:first-child { padding-left: 12px; }
.form-table th { width: 178px; }
.form-operacao td.label { width: 158px; }
/* O primeiro campo de cada linha fica alinhado com o rotulo + a barra, nao com a barra sozinha. */
.form-table td > input:first-child,
.form-table td > select:first-child { margin-left: 0; }

/* ── A COLUNA VAZIA DO CARTAO NO CELULAR (17/10/2026) ────────────────────────────────────────
   DEFEITO MEDIDO na captura 11e (700px de largura): cada retirada virava um cartao com uma area
   BRANCA de ~450px a direita, e todo o texto espremido em 162px a esquerda.

   Nao era padding nem margem. `sonda_mobile.py` leu as larguras computadas:

     TABLE.tabela-retirada  display=block  width=662px
     col[0].c-veiculo       width=195.516px
     tr[1]                  display=block  width=195.516px     <-- a LINHA herdou a largura da col
     td                     display=block  width=161.516px

   O breakpoint empilhava as celulas (`td { display:block }`) mas deixava o `<colgroup>` da patch 12
   valendo. Em `display:block` a `<col>` NAO perde o poder de ditar largura — e a linha inteira
   encolhia para a largura da primeira coluna.

   Aqui as `<col>` perdem a largura e tbody/tr/td voltam a ocupar 100%. `!important` e obrigatorio:
   as regras de col vivem fora do media query, com a mesma especificidade, e sem ele o navegador
   continua aplicando 22/14/40/24%. */
@media (max-width: 768px) {
  .tabela-retirada col,
  .tabela-retirada colgroup { width: auto !important; }
  .tabela-retirada colgroup { display: none; }
  .tabela-retirada tbody,
  .tabela-retirada tr,
  .tabela-retirada td,
  .tabela-retirada th { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  .tabela-retirada tr { display: block; }
  .tabela-retirada td { display: block; }
}

/* ── SELO DE DOCUMENTO (CNH) NO CABECALHO DO CARTAO (17/10/2026) ─────────────────────────────
   Contexto: `retiradas.placa` guarda a placa OU a chave interna `cnh:<11 digitos>`. A patch 20
   parou de desenhar placa falsa e passou a mostrar o numero formatado, com este selo ao lado.
   Sem regra no CSS ele saia como texto solto dentro de um `display:flex`.

   Forma: mesma familia dos outros selos do console — borda de 1px na cor da tinta, fundo de
   papel, versalete pequena com espacamento. Nada de cor nova. */
.selo-documento {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--tinta-3);
  border-radius: 2px;
  background: var(--superficie-3);
  color: var(--tinta-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* O numero da CNH e comprido (CNH 491.887.018-08). No cabecalho flex ele precisa poder
   encolher e quebrar antes de empurrar o `#id · data` para fora da tela. */
.cat-header > b { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .cat-header { flex-wrap: wrap; row-gap: 6px; }
  .cat-header > span[style*="float:right"] { float: none !important; margin-left: auto; }
}

/* ── TINTA SECUNDARIA ESCURECIDA (17/10/2026) ───────────────────────────────────────────────
   A auditoria de polimento (`_ops/auditoria_polimento.py`, 12 telas) mediu o contraste de todo
   texto que tem cor propria e achou `--tinta-3` abaixo do minimo em TODAS elas:

       rgb(107,123,141) contra branco ....... 4.33:1   (minimo 4.5)
       rgb(107,123,141) contra o papel ...... 3.85:1
       ocorrencias .......................... ~150 em 12 telas

   Eram rotulos do menu, breadcrumb, rodape, "conectado", dicas de campo, "#384 · data". Nada
   gritante a olho — e exatamente por isso passou: 4.33 reprova e 4.5 passa, e a diferenca e de
   4%. Agora #5c6b7d:

       contra branco ...... 5.21:1
       contra o papel ..... 4.73:1

   O desenho nao muda de familia: mesmo cinza-azulado, um degrau mais escuro. Bordas e icones que
   ja usavam a variavel ganham folga para o minimo nao-textual de 3:1. */

/* ── FOCO VISIVEL EM TUDO QUE RECEBE TECLADO (17/10/2026) ────────────────────────────────────
   A mesma auditoria achou 8 elementos focaveis por tela sem `outline` e sem `box-shadow` — num
   console que se opera por teclado isso e navegar as cegas. `:focus-visible` (e nao `:focus`)
   porque o anel deve aparecer na navegacao por teclado e nao no clique de mouse. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── ALVO DE TOQUE DO LINK QUE E O CONTEUDO DA CELULA (17/10/2026) ───────────────────────────
   Medido: links de ID de restricao com 15 px de altura. A WCAG 2.2 AA (2.5.8) pede 24x24 para
   alvo; a excecao de "link no meio de uma frase" nao vale para um link que E o conteudo da
   celula. `padding-block` cresce a area clicavel para 25 px e a `margin-block` negativa devolve o
   espaco, entao a linha da tabela NAO fica mais alta. */
.item-retirada a,
td > a:only-child {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
}

/* ── A DEFINICAO QUE VENCE (17/10/2026) ─────────────────────────────────────────────────────
   Este arquivo tem CINCO blocos `:root`. A patch 23 escureceu `--tinta-3` no :root da linha 73 e
   o resultado nao mudou na tela: a definicao da linha ~1762 vem DEPOIS, tem a mesma
   especificidade e vence a disputa. A conta de contraste do patch estava certa e apontava para uma
   variavel que o navegador nunca le.

   Regra para quem for mexer em cor aqui: num CSS com camadas historicas sobrescritas, a variavel
   que vale e a ULTIMA definicao. Conferir o valor lido pelo navegador (getComputedStyle), nunca o
   primeiro `:root` que aparece no arquivo. */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PATCH 25 (17/10/2026) — O WRAPPER PRECISA PODER ENCOLHER
   ───────────────────────────────────────────────────────────────────────────────────────────
   MEDIDO em evidence/sonda-transbordo.txt: a 390 px e a 700 px, a pagina de /admin e
   /admin/retiradas transbordava (+103, +544 e +344 px). Culpado: tbody de forum-table com
   overflowX visible, dentro de um container sem rolagem. A tela /admin/usuarios nao estoura
   porque envolve a tabela em div.tabela-rolavel. Este bloco so garante que o wrapper CONSIGA
   encolher quando o pai e flex ou grid — sem isso o filho largo empurra o pai e o transbordo
   volta pela porta dos fundos.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.tabela-rolavel {
  min-width: 0;          /* podem encolher dentro de flex/grid */
  max-width: 100%;
}
/* em tela estreita, nada de largura minima empurrando a pagina */
@media (max-width: 900px) {
  .tabela-rolavel { width: 100%; }
  .tabela-rolavel > .forum-table { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PATCH 26 (17/10/2026) — AVISO DE CPF NO CAMPO DE BUSCA
   ───────────────────────────────────────────────────────────────────────────────────────────
   O aviso só aparece quando o valor colado é um CPF (dígitos verificadores válidos ou máscara
   000.000.000-00). Ele não bloqueia nada: informa que CPF não identifica veículo e oferece o
   caminho certo, porque antes o operador colava CPF aqui, a consulta falhava e ele perdia tempo
   sem saber por quê.
   Paleta: papel-2 de fundo, borda de tinta-2, faixa de acento à esquerda — mesma linguagem
   institucional do resto do console, sem vermelho de erro (não é erro, é redirecionamento).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.aviso-cpf {
  margin-top: 8px;
  padding: 10px 12px 10px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento, #1f4e79);
  color: var(--tinta, #14202b);
  font-size: 13px;
  line-height: 1.5;
  border-radius: 2px;
}
.aviso-cpf[hidden] { display: none; }
.aviso-cpf b { display: block; margin-bottom: 2px; font-weight: 600; }
.aviso-cpf .btn { margin: 6px 6px 0 0; }
@media (max-width: 700px) {
  .aviso-cpf .btn { display: block; width: 100%; margin-right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PATCH 27 (17/10/2026) — GRUPOS DE CHAVES NA BUSCA DE RESTRIÇÕES
   ───────────────────────────────────────────────────────────────────────────────────────────
   Dez chaves de naturezas diferentes numa lista só não se lê: procura-se de cima a baixo a
   chave que se tem em mãos. O cabeçalho de grupo dá a hierarquia que faltava sem inventar
   abas nem acordeões — o formulário continua uma coisa só, visível de uma vez.
   O cabeçalho é `th` com `scope="colgroup"`, então o leitor de tela anuncia o grupo; e não é
   link nem botão, porque não há nada a clicar.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.tabela-chaves { border-collapse: collapse; }
.tabela-chaves .grupo-chaves th {
  padding: 12px 0 3px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3, #5c6b7d);
  border-bottom: 1px solid var(--borda, #d6dde4);
  white-space: nowrap;
}
.tabela-chaves .grupo-chaves:first-child th { padding-top: 0; }
.tabela-chaves tr:not(.grupo-chaves) td:first-child { padding-top: 4px; }
.tabela-chaves input[type="date"] { width: 230px; }
@media (max-width: 700px) {
  .tabela-chaves input,
  .tabela-chaves input[type="date"] { width: 100%; max-width: 230px; }
}