/* ==========================================================================
   TELAS — grades e blocos proprios de cada tela.

   NASCE QUASE VAZIO DE PROPOSITO: o telas.css do v4 morreu com o formato
   antigo de dados. Cada tela traz o seu bloco — as tasks 3 a 7 preenchem
   este arquivo, uma secao por tela. Aqui ficam so as pecas de layout que
   TODA tela compartilha.
   ========================================================================== */

body.travado { overflow: hidden; }

/* ------------------------------------------------------------- grades --- */
.gd { display: grid; gap: var(--e5); }
.gd--60-40 { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
.gd--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .gd--60-40, .gd--2, .gd--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------- cabecalho simples - */
.cab--simples { align-items: baseline; gap: 12px; }
.cab__ctx { font-size: 12px; color: var(--fg3); }

/* ========================================================== RELATÓRIOS =
   (task 7) — a cor tem área no bloco do preset selecionado; três cartões de
   peso igual fariam a tela parecer um menu de impressora.                   */

.rel__abas { display: flex; gap: var(--e2); flex-wrap: wrap; }
.rel__cab { display: flex; align-items: flex-end; gap: var(--e5); flex-wrap: wrap; }
.rel__cab .p { max-width: 62ch; }
.rel__cabt { gap: 4px; min-width: 0; }
.rel__bts { margin-left: auto; display: flex; gap: var(--e3); flex-wrap: wrap; }
/* a fileira de atalhos de período encosta na base dos dois campos de data */
.rel__atalhos { gap: 6px; align-self: flex-end; flex-wrap: wrap; }
/* A EXPORTAÇÃO NÃO É CAMINHO DE DECISÃO (D11), e a frase que diz isso é aviso
   de leitura — nunca alarme. Sem cor de prazo: vermelho, âmbar e verde
   pertencem exclusivamente ao prazo. */
.rel__aviso {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-end;
  font-size: 11.5px; color: var(--fg3); line-height: 1.45;
}
.rel__aviso > .ico { color: var(--fg3); flex: none; }

/* a prévia imita o documento: fundo branco, medidas de folha, régua fina */
.rel__folha { display: flex; flex-direction: column; gap: var(--e6); }
.rel__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e5);
             padding-bottom: var(--e5); border-bottom: 1px solid var(--lin); }
.rel__kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rel__bl { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.rel__bl .h3 { font-size: 14px; }
.rel__bl .sm { color: var(--fg3); }

/* ========================================================== EXPORTAÇÃO =
   (09/09/2026; REMONTADA na noite do mesmo dia, em TRÊS voltas — decisão do
   operador: "de visual quero cem por cento remodelado"; depois "não quero que
   fique fácil a pessoa sempre ficar extraindo todas as informações"; e por fim
   "uma pessoa que não é muito boa com tecnologia tem de abrir esta página e
   entender exatamente o que ela tem que fazer").

   O DESENHO EM UMA FRASE: DOIS PASSOS, lidos de cima para baixo, cada um numa
   chapa. **1 · O que você quer exportar?** — três cartões de rádio com uma frase
   cada, e o escolhido abre o próprio painel abaixo (a frase do resto e a barra
   do *já saiu × ainda não*; os chips de período com o calendário; a lista das
   anteriores, que é o histórico). **2 · Confira e exporte** — o cabeçalho escuro
   diz o que vai sair e tem o botão; embaixo, planilha e PDFs, a PRÉVIA dos
   autos e o *Refinar* (a gaveta, opcional).

   ⚠ NENHUMA COR NOVA. O cabeçalho do passo 2 e o campo do andamento são
   `.campo--esc` (o institucional, escuro nos dois temas), e tudo por cima deles
   usa `--inst-fg`, `--b300`/`--b400` e os translúcidos de `--inst-fg` que
   `.heroi2*` e `.selbar` já usam. O trajeto do andamento vive no campo escuro:
   a via translúcida, o percorrido e o nó em `--b400`, e `--lime` só no nó de
   DESTINO ao concluir — o dono (1) do lime. Vermelho, âmbar e verde pertencem
   exclusivamente ao prazo: **progresso não é prazo**, e "já saiu" também não.

   ⚠ TODO HOVER E TODO @media DESTA SEÇÃO MORAM NO FIM DO ARQUIVO, com os
   outros — media query não acrescenta especificidade.                       */

/* ------------------------------------------------------- o rótulo do passo
   O número no círculo, o título e a frase curta. Sobre o cabeçalho escuro o
   círculo e o `.md` invertem. */
.xpt__passo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.xpt__passo-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--inst); color: var(--inst-fg);
  font-family: var(--fm); font-size: 11.5px; font-weight: 600; flex: none;
}
.xpt__cab2 .xpt__passo-n { background: var(--inst-fg); color: var(--inst); }
.xpt__cab2 .xpt__passo .md { color: rgba(243,240,251,.66); }

/* ------------------------------------------------ passo 1: as três opções
   Cartões de rádio: o `.rd` do DS diz o estado, o título diz o caminho, a
   linha do meio diz o número (ou a escolha que falta) e a frase diz o que ele
   faz. O escolhido ganha a aresta da tinta — o mesmo sinal dos cartões de
   arquivo do passo 2, para os dois lerem como "isto está marcado". */
.xpt__ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.xpt__op {
  display: flex; align-items: flex-start; gap: var(--e3); min-width: 0;
  padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--lin2); border-radius: var(--r-md); background: var(--sup);
  transition: border-color calc(var(--t1) * var(--mo)) var(--suave),
              box-shadow   calc(var(--t1) * var(--mo)) var(--suave);
}
.xpt__op .rd { margin-top: 3px; }
.xpt__op-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xpt__op-t > b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
/* o número: proporcional, nunca tabular, pelo motivo de `.num` */
.xpt__op-n { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: proportional-nums; min-height: 23px; }
.xpt__op-n .md { font-size: 12px; font-weight: 400; letter-spacing: 0; }
.xpt__op-d { font-size: 11.5px; color: var(--fg3); line-height: 1.45; }
.xpt__op.on { border-color: var(--acao); box-shadow: var(--sh1); }

/* o painel do caminho escolhido */
.xpt__painel { display: flex; flex-direction: column; gap: var(--e3); }
.xpt__painel .p { max-width: 80ch; }
.xpt__painel .p b { font-weight: 600; }
.xpt__painel .avi { max-width: 80ch; }

/* os chips do período — o `.seg` do produto tal e qual; 8 px de recuo para os
   quatro caberem numa linha ao lado do calendário */
.xpt__cheg .seg { max-width: 100%; }
.xpt__cheg .seg button { padding: 0 8px; }
.xpt__cheg .seg button .ico { color: var(--fg3); }
/* o par de datas: dois campos do seletor do produto lado a lado, alinhados
   pela base, e a frase ao lado — o operador escolhe contra uma data que vê */
.xpt__datas { align-items: flex-end; gap: var(--e4); }
.xpt__datas .col { gap: 4px; }
.xpt__datas > .md { padding-bottom: 6px; }

/* A BARRA DO JÁ SAIU × AINDA NÃO — dois segmentos sobre uma via só. O cinza é
   o que já saiu ao menos uma vez; o lilás é o que falta. Zero de um lado: o
   segmento não se desenha (`exportacao.js:barra`), em vez de virar um toco
   afirmando que existe. */
.xpt__barra { display: flex; gap: 2px; width: 100%; max-width: 640px; height: 8px; margin-top: var(--e2); }
.xpt__barra > span { display: block; border-radius: var(--pill); min-width: 4px; }
.xpt__barra-ja { background: var(--lin3); flex: none; }
.xpt__barra-nao { background: var(--b400); flex: 1; }
.xpt__leg { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.xpt__lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--fg3); }
.xpt__lg::before { content: ""; width: 10px; height: 3px; border-radius: var(--pill); background: var(--lin3); flex: none; }
.xpt__lg--ja::before { background: var(--lin3); }
.xpt__lg--nao::before { background: var(--b400); }
.xpt__lg b { color: var(--fg); font-weight: 600; font-family: var(--fm); }
.xpt__leg-det { font-size: 11.5px; color: var(--fg3); }

/* A LISTA DAS ANTERIORES — o histórico, dentro do painel do terceiro caminho.
   Rola dentro dela (rolagem de instrumento não é de página), o cabeçalho fica
   preso no topo, e as larguras são das colunas em uso: somam 840 e cabem nos
   944 px da chapa a 1280 sem rolar para o lado — a escolha não pode morar
   atrás de uma rolagem. *O que saiu* e *Recorte* são os textos livres: o
   primeiro quebra e a linha cresce, o segundo corta com `.trunc`. */
.xpt__ant { max-height: 372px; overflow-y: auto; overscroll-behavior: contain; }
.tb--ant { min-width: var(--tbmin, 840px); }
.tb--ant td { height: auto; min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
.tb--ant td.mono { white-space: nowrap; }
.tb--ant .bt { white-space: nowrap; }
/* o link do zip veste `.bt` no campo de andamento (*Baixar o zip*, *Baixar de
   novo*), e `.bt` não sabe que pode ser um `<a>`: o sublinhado do navegador
   sai aqui. ⚠ Não há mais link no histórico — o zip é de uso único (quinta
   volta de 09/09/2026), e a linha voltou a ter só o *Abrir*. */
.xpt__bts a.bt { text-decoration: none; }
.tb--ant tbody tr[role="radio"]:focus-visible { box-shadow: inset 0 0 0 2px var(--b400); }
.xpt__ant-mais { padding: 8px 16px; font-size: 11px; color: var(--fg3); border-top: 1px solid var(--lin); background: var(--sup2); }

/* ------------------------------------------- passo 2: o cabeçalho escuro
   A primeira faixa da chapa é o campo grande de cor: o rótulo do passo, o
   número do que vai sair, a linha do caminho e dos arquivos, e o botão à
   direita, com o motivo embaixo dele quando está desabilitado. */
.chapa > .xpt__cab2 { border-radius: 0; box-shadow: none; padding: 16px 20px; display: flex; flex-direction: column; gap: var(--e3); }
.xpt__cab2-b { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.xpt__cab2-t { flex: 1 1 320px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xpt__cab2-n { font-size: 25px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: proportional-nums; }
.xpt__cab2-s { font-size: 12px; color: rgba(243,240,251,.72); line-height: 1.45; }
.xpt__cab2-d { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e2); margin-left: auto; max-width: 100%; }
.xpt__cab2 .xpt__bts { margin-top: 0; padding-top: 0; align-items: flex-end; }
.xpt__cab2 .xpt__motivo { text-align: right; }

/* OS BOTÕES SOBRE O CAMPO ESCURO: a inversão da tinta. `--acao` é preta e
   sumiria sobre `--inst`; `.selbar` já resolveu isto e a forma é a mesma. O
   rótulo QUEBRA em vez de ser cortado (medido a 375 px em 09/09/2026), e `.bt`
   é `flex: 0 0 auto`, então `white-space: normal` sozinho não encolhe nada — é
   o par com `max-width: 100%`. */
.xpt__bts { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); margin-top: auto; padding-top: var(--e3); max-width: 100%; }
.xpt__campo .bt { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 36px; padding: 7px 14px; }
.xpt__campo .bt--peq { min-height: 26px; padding: 3px 9px; font-size: 11.5px; }
.xpt__campo .bt--pri { background: var(--inst-fg); border-color: var(--inst-fg); color: var(--inst); font-size: 13.5px; font-weight: 600; }
.xpt__campo .bt:not(.bt--pri) { background: rgba(243,240,251,.08); border-color: rgba(243,240,251,.22); color: var(--inst-fg); }
.xpt__campo .bt .ico { flex: none; }
.xpt__fmt { font-size: 11.5px; color: rgba(243,240,251,.66); line-height: 1.45; }
/* O MOTIVO DO BOTÃO DESABILITADO — em texto visível, nunca em `title`:
   *"navegação some; ação explica"*, e `title` não existe no toque. */
.xpt__motivo { font-size: 11.5px; color: rgba(243,240,251,.72); line-height: 1.45; max-width: 46ch; }

/* ------------------------------------------------ passo 2: os cartões
   O cartão inteiro é o alvo (44 px de piso), a caixa `.ck` diz o estado, e o
   `.seg` do formato encosta à direita. O ligado ganha a aresta da tinta; o
   desabilitado por dado ausente fica visível e apagado, com o motivo dentro. */
.xpt__formas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.xpt__arq {
  display: flex; align-items: flex-start; gap: var(--e3); min-height: 44px; min-width: 0;
  padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--lin2); border-radius: var(--r-md); background: var(--sup);
  transition: border-color calc(var(--t1) * var(--mo)) var(--suave),
              box-shadow   calc(var(--t1) * var(--mo)) var(--suave);
}
.xpt__arq.on { border-color: var(--acao); box-shadow: var(--sh1); }
.xpt__arq--off { cursor: default; opacity: .6; }
.xpt__arq .ck { margin-top: 2px; }
.xpt__arq-t { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xpt__arq-t b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.xpt__arq-t b .ico { color: var(--fg3); }
.xpt__arq-t .md { line-height: 1.45; }
.xpt__arq-nota { display: inline-flex; align-items: flex-start; gap: 5px; }
.xpt__arq-nota .ico { flex: none; margin-top: 2px; }
.xpt__arq .seg, .xpt__arq .bt { margin-left: auto; flex: none; }

/* A LINHA DO MODELO, dentro do cartão da planilha: quem salvou e quando, o que
   ficou de fora, e o botão que abre o editor. O botão é `.bt--peq` e mora
   DENTRO do cartão-alvo — o clique nele não marca a caixa, porque
   `exportacao.js` ignora `.bt` dentro do cartão; aqui ele só perde o
   `margin-left: auto` que a regra acima dá a todo `.bt` do cartão. */
.xpt__arq-mod { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: 3px; }
.xpt__arq .xpt__arq-mod .bt { margin-left: 0; }
.xpt__arq-mod .avi { flex: 1 1 240px; }

/* ------------------------------------------- passo 2: o MODELO da planilha
   O editor é uma seção da própria chapa, embaixo dos dois cartões: o
   cabeçalho com o formato, dois painéis (disponíveis × na planilha), a prévia
   com dez autos e o pé com Salvar/Cancelar. Nenhuma cor nova: a aresta é
   `--lin2` e o fundo `--sup2`, o recuo da gaveta de filtros; os painéis
   voltam a `--sup` para lerem como duas listas e não como um bloco. */
.xpt__mod {
  display: flex; flex-direction: column; gap: var(--e4); padding: 16px;
  border: 1px solid var(--lin2); border-radius: var(--r-md); background: var(--sup2);
}
.xpt__mod:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--b400); }
.xpt__mod-cab { display: flex; align-items: flex-start; gap: var(--e4); flex-wrap: wrap; }
.xpt__mod-cab .col { flex: 1 1 320px; gap: 3px; }
.xpt__mod-cab .col .md { line-height: 1.45; max-width: 70ch; }
.xpt__mod-cab .seg { margin-left: auto; }
.xpt__mod-panes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--e4); }
.xpt__mod-pane {
  display: flex; flex-direction: column; gap: var(--e3); min-width: 0;
  padding: 12px 14px; border: 1px solid var(--lin2); border-radius: var(--r-md); background: var(--sup);
}
.xpt__mod-pane-t { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.xpt__mod-pane-t .rot { flex: none; }
/* os grupos de disponíveis: título curto em versalete, chips embaixo */
.xpt__mod-grupo { display: flex; flex-direction: column; gap: 4px; }
.xpt__mod-g { font-size: 10.5px; font-weight: 600; color: var(--fg3); text-transform: uppercase; letter-spacing: .05em; }
.xpt__mod-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.xpt__mod-chips .chip { border-color: var(--lin2); height: 26px; padding: 0 9px; font-size: 11.5px; }
/* a lista ordenada: número, rótulo, três botões de 26 px. Rola dentro dela
   com o teto da lista das anteriores — 60 linhas de 34 px passariam de 2.000. */
.xpt__mod-lista {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  max-height: 372px; overflow-y: auto; overscroll-behavior: contain;
}
.xpt__mod-li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center;
  gap: var(--e2); min-height: 34px; padding: 2px 4px; border-bottom: 1px solid var(--lin);
}
.xpt__mod-li:last-child { border-bottom: 0; }
.xpt__mod-n { font-size: 11px; color: var(--fg3); text-align: right; }
.xpt__mod-rot { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xpt__mod-acoes { display: inline-flex; gap: 3px; }
.xpt__mod-bt {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--lin2); border-radius: var(--r-xs); background: var(--sup); color: var(--fg2);
  transition: border-color calc(var(--t1) * var(--mo)) var(--suave),
              color        calc(var(--t1) * var(--mo)) var(--suave);
}
.xpt__mod-bt[disabled] { opacity: .35; cursor: default; }
.xpt__mod-vazio { padding: 12px 0; }
.xpt__mod-vazio b { font-weight: 600; color: var(--fg); }
/* a prévia: a tabela do produto, rolando dentro do envelope — nada se escolhe
   nela. O cabeçalho leva o número da coluna, que é a mesma numeração da lista. */
.xpt__mod-previa { display: flex; flex-direction: column; gap: var(--e3); }
.tb--mod { min-width: var(--tbmin, 600px); }
.tb--mod td { height: 34px; }
.tb--mod th { white-space: nowrap; }
.xpt__mod-th { display: inline-flex; align-items: center; gap: 6px; }
.xpt__mod-th i { font-style: normal; font-family: var(--fm); font-size: 10.5px; color: var(--fg3); }
.xpt__mod-pe { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.xpt__mod-pe .md { line-height: 1.45; }
.xpt__mod-pe .avi { flex: 1 1 260px; }

/* ------------------------------------------------- passo 2: a prévia
   Os oito primeiros autos, na ordem do arquivo. A tabela é a do produto; as
   larguras somam 970 e rolam dentro do envelope se faltar — aqui rolar é
   aceitável, porque nada se escolhe nela. */
.xpt__previa { display: flex; flex-direction: column; gap: var(--e3); }
.xpt__previa-t { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.tb--prev { min-width: var(--tbmin, 970px); }
.tb--prev td { height: 40px; }
.xpt__previa-mais { padding: 9px 16px; font-size: 11.5px; color: var(--fg3); border-top: 1px solid var(--lin); background: var(--sup2); }
/* o vazio e o esqueleto moram na mesma caixa, sem cartão dentro de cartão */
.xpt__previa .vazio { padding: 32px 20px; }
.xpt__previa .vazio .bt + .bt { margin-left: var(--e2); }

/* ------------------------------------------------ passo 2: refinar e a faixa */
.xpt__refinar-t { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.xpt__nota { font-size: 12px; color: var(--fg3); line-height: 1.45; }
.xpt__nota > .ico { color: var(--fg3); flex: none; }
/* a faixa `.const` como última faixa da chapa: sem raio próprio e com o recuo
   da chapa, senão ficam dois recuos somados e um cartão dentro do cartão */
.xpt__p2 > .const { border-radius: 0; padding: 10px 16px; }

/* ---------------------------------------------------------- andamento ----
   O campo escuro, em coluna: o rótulo da fase, o número grande, a frase e os
   botões na mesma linha; o trajeto embaixo, na largura inteira. */
.xpt__campo--and { display: flex; flex-direction: column; gap: var(--e3); }
.xpt__and { display: flex; align-items: flex-start; gap: var(--e5); flex-wrap: wrap; }
.xpt__and-t { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xpt__and-t .rot { display: inline-flex; align-items: center; gap: var(--e3); }
.xpt__and-t .p { max-width: 62ch; }
.xpt__and-n { font-size: 25px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: proportional-nums; }
.xpt__bts--and { flex-direction: row; align-items: center; margin-top: 0; padding-top: 0; margin-left: auto; }
/* o aviso da parte que falhou é peça clara sobre o campo escuro — `.avi` já
   traz `--sup2` e `--fg2`, e o par continua legível nos dois temas */
.xpt__and-t .avi { color: var(--fg2); }

/* ------------------------------------------------------------- o trajeto -
   A gramática da marca — *nó · trajeto · destino* —, literal e não metáfora, na
   forma de `trajeto.css`. **Peças concêntricas derivam de um eixo declarado:** a
   altura é 24 px, e `top` sai de `calc()` sobre ela — nunca de um `left` chutado. */
.xpt__trj { position: relative; height: 24px; margin-top: var(--e2); }
/* a via, atrás dos nós — translúcida sobre o campo, o papel de `--lin2` na folha clara */
.xpt__via {
  position: absolute; left: 0; right: 0; top: calc(50% - .75px); height: 1.5px;
  background: rgba(243,240,251,.22); border-radius: var(--pill);
}
/* o percorrido: a MESMA via, com largura `--pct` — por BYTES, não por contagem */
.xpt__feito {
  position: absolute; left: 0; top: calc(50% - .75px); height: 1.5px;
  width: var(--pct); background: var(--b400); border-radius: var(--pill);
}
/* o nó que anda — 9 px como em `.trj__no`, `.pz s` e `.est s`: é a mesma língua.
   O halo da cor do campo o descola da via. */
.xpt__no {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--b400); top: calc(50% - 4.5px); left: calc(var(--pct) - 4.5px);
  z-index: var(--z-no); box-shadow: 0 0 0 3px var(--inst);
  transition: left calc(var(--t3) * var(--mo)) var(--suave);
}
/* o DESTINO, vazado enquanto não se chega */
.xpt__fim {
  position: absolute; right: 0; top: calc(50% - 4.5px); width: 9px; height: 9px;
  border-radius: 50%; background: var(--inst); border: 1.5px solid rgba(243,240,251,.5);
}
/* CONCLUÍDO: o destino acende em lime — o dono (1) da cor — e o nó que andava
   some: ele CHEGOU, e dois nós no mesmo ponto esconderiam justamente o lime. */
.xpt__campo--fim .xpt__fim { background: var(--lime); border-color: var(--lime); }
.xpt__campo--fim .xpt__no { display: none; }

/* ============================================ ANÁLISE E CONCENTRAÇÃO =
   (task 6) — o campo grande de cor destas telas é a faixa de território que
   separa os dois mundos. Cor precisa de área.                               */

.conc__faixa { padding: 12px var(--e6); }
.lead p { font-size: 13px; line-height: 1.55; color: var(--fg2); max-width: 78ch; }
.lead p b { color: var(--fg); font-weight: 600; }

/* ⚠ A TABELA DA ANÁLISE NÃO É `.tb--ent`, E A DIFERENÇA É MEDIDA. `.tb--ent`
   traz `min-width: 930px` — a medida de um conjunto de SETE colunas. Os
   conjuntos desta tela têm quatro e cinco, e herdando aquele valor rolavam
   centenas de pixels na horizontal, em silêncio, dentro do próprio envelope.
   Aqui a medida SAI DAS COLUNAS EM USO: `js/telas/analise.js` soma as larguras
   do conjunto que está desenhando e escreve `--tbmin` na própria tabela, que é
   a mesma técnica de `js/lista.js:236`.

   O fallback de 560 px existe para tabela sem `--tbmin` escrito, e é a soma de
   uma coluna elástica de 240 com três de ~107 — nunca a de outro conjunto. */
.tb--an { min-width: var(--tbmin, 560px); }
.tb--an td { height: var(--lh); }
.tb--an tbody tr.clic:hover b { color: var(--b600); }
html[data-tema="escuro"] .tb--an tbody tr.clic:hover b { color: var(--b500); }

/* as duas notas de rodapé de bloco da Análise — a frase que explica o número e
   a proveniência que declara o corte. `.conc__prov` é a mesma medida na
   Concentração, e entra AQUI, no mesmo seletor, em vez de repetir a declaração:
   bloco copiado com uma linha alterada diverge do original no dia em que nasce.
   Ela substitui um `style="padding:0 16px 12px"` escrito na linha do JS. */
.an__nota { margin-top: 12px; }
.an__prov, .conc__prov { padding: 0 16px 12px; }

/* ==========================================================================
   MATRIZ — o cruzamento de duas dimensoes, na Analise.

   ⚠ PREFIXO NOVO, CONFERIDO NOS DOIS SENTIDOS antes da primeira regra:
   `mtz` tinha ZERO ocorrencias em `css/` e em `js/` em 20/08/2026. A lei existe
   porque `.trj*` ja colidiu com a folha inteira do calendario e `.sel` e o
   `<select>` do DS — nos dois casos a peca renderizou com metade do estilo
   vindo de outro dono, e NADA FALHOU.

   ⚠ A CELULA E UM `<button>` DE VERDADE, e ela ocupa a celula inteira: com um
   `<td role="button">` o `Enter` nao dispara clique nenhum, e o teclado ficava
   sem o gesto. Como botao dentro de `<td>`, ele precisa de `width: 100%` para
   o alvo ser a celula e nao o texto.

   ⚠ A ROLAGEM E DA TABELA, NUNCA DA PAGINA. `.tb-rol` ja e o envelope que rola,
   e `tabelaAn` calcula o `--tbmin` a partir das colunas EM USO — 12x8 com 200 +
   8x118 da 1.144 px, que rola dentro do envelope sem levar a pagina junto. */
.mtz__ctrl { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e4); }
.mtz__sel { display: inline-flex; align-items: center; gap: var(--e2); }
.mtz__sel > .rot { flex: none; }
.mtz__sel .sel { width: auto; min-width: 132px; }

.mtz__c {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  width: 100%; padding: 4px 6px; margin: -4px -6px;
  background: none; border: 1px solid transparent; border-radius: var(--r2);
  font: inherit; color: inherit; cursor: pointer;
}
.mtz__c b { font-variant-numeric: tabular-nums; }
.mtz__v { font-size: 11px; color: var(--fg3); }
@media (hover: hover) {
  .mtz__c:hover { background: var(--sup2); border-color: var(--lin); }
  .mtz__c:hover b { color: var(--b600); }
}
html[data-tema="escuro"] .mtz__c:hover b { color: var(--b500); }

/* ⚠ MESMA MEDIDA, MESMA REGRA QUE `.tb--an`: o `min-width` SAI DAS COLUNAS EM
   USO. Este seletor trazia `930px` fixo — a medida do conjunto de SETE colunas
   do protótipo 2 —, e os conjuntos desta tela têm QUATRO e SEIS: o de Veículos
   soma 608 px e rolava 322 px na horizontal, em silêncio, dentro do próprio
   envelope. `js/telas/concentracao.js` soma as larguras do conjunto que está
   desenhando e escreve `--tbmin` na própria tabela. O fallback existe para
   tabela sem `--tbmin` escrito, e é o mesmo piso da Análise — nunca a medida de
   outro conjunto. */
.tb--ent { min-width: var(--tbmin, 560px); }
.tb--ent td { height: var(--lh); }
.tb--ent tbody tr.clic:hover b { color: var(--b600); }
html[data-tema="escuro"] .tb--ent tbody tr.clic:hover b { color: var(--b500); }
/* a calha das lentes quebra linha: em 375 px ela media 377 com QUATRO chips e
   era ela — nao a tabela, que rola dentro do .tb-rol — que empurrava a pagina.
   Com o quinto chip da lente Condutores a quebra deixa de ser margem e passa a
   ser o caso comum de quem tem a permissao. */
.seg--barra { align-self: flex-start; flex-wrap: wrap; max-width: 100%; }

/* ================================================================ HOME =
   (task 6; REMONTADA em 20/08/2026 — decisão do operador: "os dados são bons,
   mas o design e a posição são ruins"). A entrada única. A HOME EMPURRA, NÃO
   DECIDE: sem tabela, sem paginação, sem ordenação, sem filtro, sem lote.

   O QUE MUDOU FOI A ARQUITETURA DE INFORMAÇÃO, e o diagnóstico é contável.
   Medido a 1440 px antes: OITO blocos empilhados numa coluna única de 1.136 px,
   1.582 px de altura — 1,8 tela. O campo escuro do dinheiro, ÚNICO campo grande
   de cor da tela, nascia em y=1.099; a régua de prazos, que a lei chama de Zona
   1, em y=1.263. Os dois abaixo da dobra. E a largura sobrava: um medidor
   sozinho ocupando 1.134 px, e o botão da ação primária com 960 px para 260 px
   de texto.

   PASSA A SER DUAS COLUNAS, com uma frase que decide o que vai em cada uma:
     À ESQUERDA O QUE SE TRABALHA — o número que exige, a ação e a fila.
     À DIREITA O QUE SE LÊ        — o dinheiro, o relógio e o que chegou.

   ⚠ A GRADE É `.gd--60-40`, QUE JÁ EXISTE, e nenhuma nasce aqui. Ela colapsa
   sozinha abaixo de 1.080 px, e no colapso a ordem é *trabalho primeiro* — é
   ordem de FONTE, não de CSS, então nada aqui a governa e nada pode desfazê-la
   por engano.

   ⚠ E NENHUM TOKEN, NENHUMA COR E NENHUMA TIPOGRAFIA MUDARAM. O sistema visual
   atravessa; o que se redesenha é onde cada coisa mora.                       */

/* o cabeçalho ganhou o lançador na mesma linha. `.cab` já é flex com wrap: a
   busca só precisa da margem e de um teto de largura, e `.home__lanc` carrega
   SÓ ISSO — nenhuma cor, nenhuma borda. A casca continua sendo `.fer__busca`,
   porque nome novo para o mesmo desenho é o modo de falha que este projeto já
   pagou três vezes; quem separa a busca global do funil de filtro é o ÍCONE. */
.home__cab { align-items: flex-end; }
.home__lanc { display: flex; margin-left: auto; flex: 0 1 400px; min-width: 240px; }

/* ---------------------------------------------------- o herói do turno ---
   O NÚMERO QUE EXIGE E A AÇÃO QUE ELE PEDE, LADO A LADO. Era um medidor
   esticado em 1.134 px com ~900 de vazio à direita, e 130 px abaixo dele um
   botão de 960. Agora são duas metades de uma linha só.

   ⚠ O RECUO É DA CÉLULA MAIS O DA METADE, e é assim de propósito: a `.chapa`
   recua 13/16 em todo filho, e o medidor traz recuo próprio — somados davam 29
   px de um lado e a seta da porta saía do lugar. Célula em 4 px + metade em 12
   devolve os 16 do token, e o realce de hover do medidor cobre a metade inteira
   em vez de espremer o texto.                                                */
.chapa > .home__topo { padding: var(--e1); }
.home__topo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.home__topo .med { flex: 1 1 250px; padding: 12px 34px 12px 12px; }
/* o herói é o único número desta metade: ele pode crescer sem disputar com
   ninguém. 32 px é o degrau acima do `.num` (25) e abaixo do `.heroi2__v`, que
   é o dinheiro — a hierarquia entre os dois números da tela fica escrita. */
.home__topo .med .num { font-size: 32px; }

/* a ação primária é A COISA MAIS VISÍVEL DA TELA, não um botão ao lado de uma
   lista: 44 px de altura — que é também o alvo de toque. NA COLUNA, e não em
   linha: o botão em cima, a frase que diz o que ele faz embaixo. */
.home__acao {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  background: var(--sup2);
}
.home__ir { height: 44px; flex: 1; font-size: 13.5px; }
.home__acao .md { white-space: nowrap; }
/* o dia calmo não é comemorativo e não é alarme: é uma frase neutra */
.home__acao--vazia { color: var(--fg2); font-size: 12.5px; }
.home__acao--vazia > .ico { color: var(--fg3); }

.home__topo .home__acao {
  flex: 1 1 290px; flex-direction: column; align-items: stretch; gap: 7px;
  padding: 12px; background: none;
}
.home__topo .home__ir { flex: none; width: 100%; }
.home__topo .home__acao .md { white-space: normal; }
/* o dia calmo volta a ser linha: uma frase de 12,5 px empilhada sobre um ícone
   leria como bloco vazio esperando conteúdo. */
.home__topo .home__acao--vazia { flex-direction: row; align-items: center; gap: var(--e3); }

/* A PRÉVIA É LINHA DE CARTÃO TAMBÉM NO DESKTOP, e é o único lugar do produto
   onde isso vale. `.lcart` nasce `display:none` porque é a forma de tela
   estreita da lista; aqui a forma é deliberada (D13) — a Home não decide nada,
   então a prévia precisa NÃO parecer a tabela do Acervo, que é a superfície que
   decide. A regra viaja com a peça (`.home__previa .lcart`) e ganha por
   especificidade, sem depender de ordem de arquivo. */
.home__previa .lcart { display: flex; }

/* CORTE COM PORTA. "mostrando 6 de 28" em <p> seria um beco: a tela declararia
   o corte e não daria caminho para o resto. Toda contagem que abre uma lista é
   botão — a mesma lei da métrica. */
.home__mais {
  display: flex; align-items: center; gap: var(--e4); width: 100%;
  padding: 10px 16px 12px; text-align: left;
  font-size: 11px; color: var(--fg3); line-height: 1.5;
  transition: background calc(var(--t1) * var(--mo)) var(--suave);
}
.home__mais-l { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
                color: var(--b600); white-space: nowrap; }
html[data-tema="escuro"] .home__mais-l { color: var(--b500); }

/* ------------------------------------------------------ a calha da leitura ---
   A COLUNA DA DIREITA: dinheiro, relógio e o que chegou, nesta ordem. É uma
   pilha de cartões independentes e NÃO uma chapa, ao contrário da esquerda —
   ali as três peças respondem a mesma pergunta, aqui são três leituras
   diferentes e o fio único as faria parecer um instrumento de três casas.

   ⚠ O `gap` É `--e5` E NÃO `--e6`: a coluna da esquerda é uma chapa contínua, e
   com o espaçamento da página (24) a calha ficaria visivelmente mais frouxa que
   a vizinha na mesma altura de tela. 16 é o degrau que empata as duas. */
.home__calha { display: flex; flex-direction: column; gap: var(--e5); min-width: 0; }

.home__chegou { display: flex; flex-direction: column; }
.home__chegou .med { border-radius: 0; }
/* A regra `.home__chegou .prov` saiu em 17/08 com a lápide da regra de ouro: a
   frase de proveniência que morava aqui afirmava uma retenção que o código nunca
   fez, e sem ela o seletor não alcançava mais nada. O `border-radius: 0` acima
   fica: a `.med` é transparente, quem arredonda é a `.cx` em volta.            */

/* A FAIXA DA CONTRADIÇÃO — âmbar é do prazo, então ela NÃO o usa: a gravidade
   vem do peso do texto e do fato de ser a única superfície do bloco que reage
   ao cursor. Zero pendentes, zero faixa — nunca se renderiza "0 contradições".
   ⚠ LARGURA CHEIA, ABAIXO DAS DUAS COLUNAS: ela fala do acervo inteiro, e
   dentro de uma coluna pareceria valer só para aquela metade da tela. */
.home__contra {
  display: flex; align-items: flex-start; gap: var(--e3); width: 100%;
  padding: 12px 14px; text-align: left;
  border: 1px solid var(--lin2); border-left: 3px solid var(--fg2);
  border-radius: var(--r-md); background: var(--sup2);
  font-size: 12.5px; color: var(--fg2); line-height: 1.5;
  transition: background calc(var(--t1) * var(--mo)) var(--suave);
}
.home__contra b { color: var(--fg); font-weight: 600; }
.home__contra > .ico { color: var(--fg2); margin-top: 1px; flex: none; }
.home__contra .ico:last-child { margin-left: auto; opacity: .55; }

/* ---------------------------------------------------- régua de prazos ---
   (regua.js — as duas casas usam)                                          */
.vence { padding: 16px 18px 15px; display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.vence__t { display: flex; align-items: baseline; gap: 8px; margin: 9px 0 13px; }
.vence__q { font-size: 12.5px; color: var(--fg2); }
.vence__l { width: 100%; display: flex; flex-direction: column; }
.vence__i {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  height: 34px; padding: 0 6px; margin: 0 -6px; width: calc(100% + 12px);
  border-radius: var(--r-xs); text-align: left;
  transition: background var(--t1) var(--ease);
}
.vence__i:hover { background: var(--sup2); }
.vence__n { font-size: 12.5px; color: var(--fg2); }
.vence__v { font-size: 11.5px; color: var(--fg2); text-align: right; }
.vence__i:hover .vence__v { color: var(--fg); }
/* fg3, não fg4: esta linha declara o que NÃO entrou na conta acima, que é
   informação de verdade. */
.vence__p { margin-top: 12px; font-size: 11px; line-height: 1.45; color: var(--fg3); }

/* ============================================================== PAINEL =
   (task 5) — a exposição. O campo grande de cor da tela é o herói.         */

.heroi2 { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.heroi2__v {
  font-size: clamp(34px, 4.4vw, 46px); font-weight: 600; letter-spacing: -.04em;
  line-height: 1.05; font-variant-numeric: proportional-nums; margin-top: 4px;
}
.heroi2__s { font-size: 12.5px; color: rgba(243,240,251,.72); }
.heroi2__q { font-size: 11.5px; color: rgba(243,240,251,.56); }

/* o segundo número: ~60% do tamanho do herói, COM PORTA, sem destronar */
.heroi2__jogo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 14px; border-radius: var(--r-md);
  background: rgba(243,240,251,.08); color: var(--inst-fg); text-align: left;
  transition: background calc(var(--t1) * var(--mo)) var(--suave);
}
.heroi2__jogo:hover { background: rgba(243,240,251,.15); }
.heroi2__jogo b { font-size: 21px; font-weight: 600; letter-spacing: -.025em; }
.heroi2__jogo span { font-size: 11.5px; color: rgba(243,240,251,.66); }
.heroi2__jogo .ico { margin-left: auto; opacity: .6; }

/* BARRA ÚNICA EMPILHADA PELOS CINCO STATUS — cada fatia abre o Acervo naquele
   status. A LARGURA É O VALOR, sem `|| 1`: a barra decompõe o herói, que é
   dinheiro, e largura mínima fabricada é cota falsa. Quem garante que a fatia
   existe é o `min-width` abaixo — 4 px é presença, não medida. */
.heroi2__barra { display: flex; gap: 2px; width: 100%; height: 10px; margin-top: 18px; }
.heroi2__f { border-radius: var(--pill); background: var(--e-arq-esc); min-width: 4px;
             transition: background var(--t1) var(--ease), transform var(--t1) var(--ease); }
/* OS TRES GRUPOS DO DESENHO VELHO — move / acompanha / consulta — MORRERAM
   com os seis enderecos, em 13/08. Os grupos vivos sao QUATRO, e a cor de cada
   um sai da familia de estado (css/estado.css), na variante de CAMPO ESCURO:
   sobre --inst a familia do tema claro tem `--e-agir` em tinta, que mede 1.09 e
   sumiria justamente no grupo que exige acao. */
.heroi2__f--agir  { background: var(--e-agir-esc); }
.heroi2__f--acomp { background: var(--e-acomp-esc); }
.heroi2__f--fora { background: var(--e-fora-esc); }
.heroi2__f--arq   { background: var(--e-arq-esc); }
.heroi2__leg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
/* A LEGENDA NAO E BOTAO (D6) — quem abre e a fatia. Ela nomeia, e e o canal que
   separa duas fatias do MESMO grupo, que a cor sozinha nao separa. */
.heroi2__lg { display: inline-flex; align-items: center; gap: 5px;
              font-size: 10.5px; color: rgba(243,240,251,.62); }
.heroi2__lg::before { content: ""; width: 10px; height: 3px; border-radius: var(--pill);
                      background: rgba(243,240,251,.26); flex: none; }
.heroi2__lg--agir::before  { background: var(--e-agir-esc); }
.heroi2__lg--acomp::before { background: var(--e-acomp-esc); }
.heroi2__lg--fora::before { background: var(--e-fora-esc); }
.heroi2__lg--arq::before   { background: var(--e-arq-esc); }
.heroi2__lg b { color: var(--inst-fg); font-weight: 600; font-family: var(--fm); }

/* --------------------------------- a decomposição da cobrança (D15) ------
   EXPANSÃO NO LUGAR, NÃO MODAL: são quatro linhas de dinheiro, e uma
   sobreposição para quatro linhas cobra um gesto de fechar que não paga o que
   entrega. `<details>` porque o estado é do navegador, não do store — a Home e
   o Painel se re-renderizam inteiros e um estado em `S` teria de ser restaurado. */
.dec { margin-top: var(--e4); border-top: 1px solid var(--lin); padding-top: var(--e4); }
.dec__s { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
          font-size: 11.5px; color: var(--b600); list-style: none; }
.dec__s::-webkit-details-marker { display: none; }
html[data-tema="escuro"] .dec__s { color: var(--b500); }
.dec[open] .dec__s .ico { transform: rotate(180deg); }
.dec__l { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.dec__l span { display: flex; align-items: baseline; gap: var(--e3); font-size: 12px; }
.dec__l i { color: var(--fg2); font-style: normal; }
.dec__l b { margin-left: auto; font-weight: 500; }
/* a linha do total ganha fio, não negrito extra: o peso já está no valor */
.dec__t { border-top: 1px solid var(--lin); padding-top: 6px; margin-top: 3px; }
.dec__t i, .dec__t b { color: var(--fg); font-weight: 600; }
.dec .prov { margin-top: 10px; }

/* o teto das leituras se declara; o piso é silencioso de propósito */
.leit__cort { grid-column: 1 / -1; margin: 0; }

/* as leituras — 0 a 3, nunca preenchidas à força */
.leit { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e5); }
.leit__c { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 14px; text-align: left; }
.leit__t { font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.leit__p { font-size: 12.5px; line-height: 1.55; color: var(--fg2); }
.leit__ir { display: inline-flex; align-items: center; gap: 4px; margin-top: auto;
            padding-top: 8px; font-size: 11.5px; color: var(--b600); }
html[data-tema="escuro"] .leit__ir { color: var(--b500); }

/* =============================================================== ACERVO =
   os CINCO STATUS em QUATRO GRUPOS.                                        */

/* O FIO entre grupos e o que agrupa — nao ha borda no chip. Chips de tamanho
   igual mentiriam sobre a proporcao: o grupo Arquivo e 328 dos 787. */
.ends { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.ends__gr { display: inline-flex; align-items: center; gap: 2px; }
.ends__rot {
  font-family: var(--fm); font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg4); margin: 0 6px 0 2px;
  border-radius: var(--r-xs); padding: 3px 4px;
  transition: color calc(var(--t1) * var(--mo)) var(--suave);
  /* rotulo de grupo e marca grafica (3:1), unico uso de fg4 fora da lista
     fechada que se admite: ele nomeia, nao carrega dado. Virou BOTAO na T4 —
     o grupo tambem recorta, e a pergunta que ele responde mora no title. */
}
.ends__rot.on { color: var(--b600); background: var(--b50); }
html[data-tema="escuro"] .ends__rot.on { color: var(--b800); background: var(--b100); }

/* o valor do grupo ao lado dos chips, e o total do recorte no fim da faixa */
.ends__v { font-size: 10.5px; color: var(--fg3); margin: 0 2px 0 6px; }
.ends__tot { margin-left: auto; font-size: 12px; color: var(--fg2); }

/* ARQUIVO EM PESO MENOR — chip menor, texto apagado, SEM VALOR ao lado. Sao
   42% do acervo e 45% do dinheiro, e apareceriam com o mesmo peso de um chip
   com 9. NAO E COLAPSO: continua visivel e clicavel, porque total escondido
   mente igual a total silencioso. */
.chip--arq { height: 24px; padding: 0 8px; font-size: 11.5px; color: var(--fg3); }
.chip--arq b { font-size: 10.5px; }
.ends__gr--arq .ends__rot { opacity: .72; }

/* ------------------------------------------- a ZONA B do Acervo (T3) -----
   A FAIXA DOS QUATRO GRUPOS: cada um com N e R$, cada um porta e filtro.

   ⚠ POR QUE `.ends*` E NAO `.heroi2*` — o plano deixou a escolha em aberto e
   pediu a que custasse menos CSS novo. `.heroi2*` e o heroi do Painel e vive
   dentro de `.campo--esc`: TODA cor dele e `rgba(243,240,251,…)` ou a variante
   `--e-*-esc`, medida contra o campo institucional. Trazido para a superficie
   clara do Acervo nao sobraria uma declaracao de cor aproveitavel — seria a
   peca inteira reescrita, e ainda por cima roubando o heroi de outra tela.
   `.ends*` ja e a faixa DESTE Acervo, ja e clara, e ja traz o container, o
   valor (`.ends__v`) e o rebaixamento do Arquivo. O que faltava era o peso
   assimetrico, que sao as seis declaracoes abaixo.

   ⚠ O ROTULO DE CADA CELULA E A FAMILIA `.st--*`, de quatro formas por GRUPO —
   ela NAO morreu com a chegada das cinco formas por status (`.bola`, em
   `estado.css`). Sao duas familias com dois donos: aqui a pergunta E o grupo;
   na lista, a pergunta e de quem e a bola.

   OS QUATRO APARECEM SEMPRE. O peso e que muda — *Agir* e *Acompanhar* em
   tamanho de heroi, *Fora de prazo* e *Arquivo* discretos ao lado. Medido: na
   GERDAU a faixa abre com `Agir 124` contra `Fora de prazo 6.185`, e chips de
   tamanho igual ensinariam todo dia que o sistema e sobre coisa perdida. NAO E
   COLAPSO: os quatro continuam visiveis e clicaveis, porque total escondido
   mente igual a total silencioso.                                           */
/* ⚠ `align-items: stretch`, NUNCA `flex-end` — e este era o pior defeito da
   tela, medido a 1280 px em 18/08: com `flex-end`, quatro cartoes de alturas
   diferentes (99 px os herois, 77 px os discretos) alinhavam pelo RODAPE, e os
   rotulos saiam em DUAS linhas de base separadas por **21 px**. Nao lia como
   hierarquia: lia como renderizacao quebrada — *Fora de prazo* e *Arquivo*
   pareciam ter escorregado para baixo.

   O degrau de peso continua sendo o dobro de corpo no numero, que e o unico
   canal que a lei permite aqui. O que muda e o ALINHAMENTO: com `stretch` os
   quatro tem a mesma altura, os rotulos partem todos do topo, e o
   `margin-top: auto` do numero cola numero e valor no rodape. Duas linhas de
   alinhamento em vez de nenhuma, e a hierarquia intacta.                     */
/* ⚠ GRADE DE CINCO, NAO FILEIRA — e este e o defeito que o operador chamou de
   "grande espaco em branco". Medido a 1440 px: em `flex`, as quatro celulas
   tomavam a largura do proprio conteudo e paravam em **500 px de 1.136**, com
   636 px de vazio a direita. A faixa e o MAPA do acervo: ela tem de ocupar a
   largura toda, porque e a unica superficie onde se le a PROPORCAO entre os
   quatro grupos, e proporcao amontoada no canto esquerdo nao se le.

   `minmax(0, 1fr)` e nao `1fr`: item de grade tem `min-width: auto`, entao um
   rotulo longo (*Fora de prazo*) faria a coluna crescer e as quatro deixariam
   de ser iguais — a grade viraria a fileira de novo, por outro caminho.        */
/* ⚠ O NÚMERO DE COLUNAS É PARÂMETRO, e o padrão é 5. *(19/08/2026, com a caixa
   de movimentações, cuja faixa tem TRÊS células — Não lidas · Lidas · Todas.)*
   Quem usa passa `style="--zbn:3"`; o `5` do fallback deixa o Acervo byte a byte
   no comportamento de antes. É o mesmo idioma do `cols` de `lista.pinta()` —
   *"`cols` É PARÂMETRO E NÃO BANDEIRA"* —, e o oposto de nascer um `.ends--zb3`:
   modificador por contagem multiplica classe a cada tela nova, e nenhuma delas
   diverge no desenho, só no número. */
.ends--zb {
  display: grid; grid-template-columns: repeat(var(--zbn, 5), minmax(0, 1fr));
  gap: var(--e3); align-items: stretch;
}

/* ⚠ O FIO DE 1 px EM REPOUSO E A LEI, nao enfeite: *"toda superficie e cartao
   com borda de 1 px; so a acionavel reage ao cursor"*. Com `transparent` as
   quatro celulas flutuavam sobre a chapa sem contorno, e a unica que se via era
   a acesa — o que fazia as outras tres lerem como texto, nao como porta. */
.ends__b {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 13px; border-radius: var(--r-md); text-align: left;
  border: 1px solid var(--lin); background: var(--sup);
  transition: background calc(var(--t1) * var(--mo)) var(--suave),
              border-color calc(var(--t1) * var(--mo)) var(--suave);
}
/* o numero e o valor descem juntos: o rotulo fica no topo, eles no rodape */
.ends__b .ends__n { margin-top: auto; }
/* o `.ends__v` nasceu para ficar AO LADO dos chips, com recuo lateral. Aqui
   ele e a terceira linha da celula, e o recuo antigo desalinharia a coluna. */
.ends__b .ends__v { margin: 0; }

.ends__n {
  font-family: var(--fm); font-weight: 600;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
/* ⚠ AS CINCO CELULAS TEM O MESMO CORPO, e o degrau de peso MORREU aqui.
   *(Decisao do operador, 18/08/2026: "os cards estao esquisitos, eles tem fonte
   diferente um do outro, tem que seguir o padrao".)*

   O degrau — 30 px nos dois primeiros contra 15 nos outros — nasceu quando os
   grupos eram chips de largura natural numa fileira, e ali ele se lia como
   hierarquia. Numa grade de celulas IGUAIS ele passou a se ler como
   inconsistencia: cinco caixas do mesmo tamanho com o numero em dois corpos
   diferentes parecem um erro de renderizacao, nao uma escolha.

   ⚠ O QUE SE PERDE ESTA MEDIDO, e vai declarado: o argumento original era a
   GERDAU, onde a faixa abre com `Agir 124` ao lado de `Fora de prazo 6.185`, e
   o corpo maior segurava a leitura de que o sistema e sobre o que ainda da para
   fazer. Sem ele, quem carrega essa hierarquia e so a ORDEM — Agir primeiro,
   Arquivo por ultimo, o total no fim. Se a proporcao voltar a doer sob a
   GERDAU, o degrau volta a mesa. */
.ends__n { font-size: 26px; letter-spacing: -.03em; }

.ends__b.on { background: var(--sup2); border-color: var(--lin2); }

/* `.pz--m` voltou para a família da pílula em `componentes.css`. */

/* ------------------------------------------------- o selo da contradicao -
   DISCRETO NA LINHA: a explicacao inteira mora no dossie. Ele nao pode competir
   com a badge de status ao lado — e sinal, nao alarme. */
.selo-c {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  height: 18px; padding: 0 6px; border-radius: var(--r-xs);
  background: var(--r2s); color: var(--r2t);
  font-size: 10px; font-weight: 600; white-space: nowrap;
  transition: background calc(var(--t1) * var(--mo)) var(--suave);
}
.selo-c .ico { color: var(--r2t); }
.selo-c[disabled] { opacity: .55; pointer-events: none; }

/* ------------------------------------------------ a coluna "O que piora" -
   So na fila dos vencidos, e tudo DETERMINISTICO: exposicao, cobranca e os tres
   booleanos de consequencia. Nada estimado — consequencia inventada e pior que
   ausente, porque orienta decisao de dinheiro. */
.pior { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 11.5px; }
.pior + .pior { margin-top: 4px; }
.pior b { font-weight: 600; }
.pior i { font-style: normal; font-size: 10.5px; color: var(--fg3); }
.pior--er b { color: var(--r1t); }
.pior--al b { color: var(--r2t); }

/* a nota do rodape que ABRE — a das placas ignoradas. A da quarentena e nota e
   nao abre: uma lista de 65 linhas em branco nao responde pergunta nenhuma. */
.prov__ir { color: var(--b600); text-decoration: underline; text-underline-offset: 2px; }
html[data-tema="escuro"] .prov__ir { color: var(--b500); }

/* ================================================== AGENDA DO ACERVO ====
   MESTRE-DETALHE: calendário (mestre) à esquerda, lista (detalhe) à direita.
   Ver a doutrina, e as duas tentativas erradas, em js/telas/calendario.js.

   A COLUNA É 348, E O NÚMERO É DERIVADO. O alvo de toque mínimo é 44; sete
   colunas de 44 com seis vãos de 2 dão 320 de grade; mais 12+12 de recuo do
   cartão e 1+1 de borda, 346 — arredondado para 348. Com os 296 do v4 (e com
   os 320 que escrevi na primeira tentativa, medindo 40) a célula reprovava.
   A largura do mestre é consequência do alvo, não escolha.                  */
.ag2 { display: grid; grid-template-columns: 348px minmax(0, 1fr); gap: var(--e5); align-items: start; }
@media (max-width: 1080px) { .ag2 { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- o calendário -- */
.cal { position: sticky; top: 0; padding: 12px; }
@media (max-width: 1080px) { .cal { position: static; } }

.cal__c { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 10px; }
.cal__c b { font-size: 13px; font-weight: 600; }
.cal__s { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding-bottom: 4px; }
.cal__s span { text-align: center; font-size: 10px; font-weight: 600; color: var(--fg3); letter-spacing: .04em; }
.cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.cal__d {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: var(--r-sm); font-size: 12px; color: var(--fg3);
  font-variant-numeric: tabular-nums;
}
.cal__d--fora { opacity: .35; }
.cal__d--fds:not(.cal__d--tem) { color: var(--fg4); }
.cal__d--tem { color: var(--fg); font-weight: 550; cursor: pointer; }

/* o PONTO é o canal de densidade — dimensionado pela contagem do dia contra o
   dia mais cheio do mês (raiz quadrada, em calendario.js). O número fica em
   cima dele: quem não lê tamanho lê o dígito. */
.cal__p {
  position: absolute; inset: 4px; border-radius: 50%; background: var(--b100);
  transition: transform var(--t2) var(--ease), background var(--t1) var(--ease);
}
.cal__n { position: relative; z-index: 1; }
@media (hover: hover) { .cal__d--tem:hover .cal__p { background: var(--b200); } }
.cal__d--u .cal__p { background: var(--r2l); }
.cal__d--hoje { outline: 1.5px solid var(--b600); outline-offset: -1.5px; }
.cal__d--sel .cal__p { background: var(--acao); }
.cal__d--sel { color: var(--acao-fg); }

/* o total do mês: a pergunta "quanto vence em agosto" não tinha resposta em
   lugar nenhum da lente antiga */
.cal__tot { display: flex; flex-direction: column; gap: 2px; padding: 11px 2px 0; margin-top: 10px;
            border-top: 1px solid var(--lin); font-size: 12px; color: var(--fg2); }
.cal__tot b { color: var(--fg); font-weight: 600; }

.cal__r { display: flex; flex-direction: column; gap: 4px; padding-top: 9px; margin-top: 9px;
          border-top: 1px solid var(--lin); }
.cal__r span { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--fg3); }
.cal__lg { width: 9px; height: 9px; border-radius: 50%; background: var(--b200); flex: none; }
.cal__lg--u { background: var(--r2l); }

/* ------------------------------------------------------ o painel (detalhe) */
.ag2__p { overflow: hidden; }
/* o cabeçalho do painel É um rodapé de cartão invertido — mesmo par
   (--sup2 + fio) da primitiva .cx__rod, que o DS declara */
.ag2__pc {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--lin); background: var(--sup2);
}
.ag2__pc .col { gap: 1px; }
.ag2__pc b { font-size: 13.5px; font-weight: 600; }

/* ---- separador de dia dentro da tabela (lista.js, grupoDia) ----
   É a peça `.ag2__dia` do v4, agora dentro da MESMA tabela em vez de numa
   lista paralela — a linha do item continua sendo a linha de todo lugar.
   Sticky no <td>, nunca no <tr>: sticky em linha de tabela não pega em todos
   os navegadores; em célula, pega. */
.tb__gr > td {
  position: sticky; top: 0; z-index: 2;
  padding: 6px 14px; height: auto;
  background: var(--sup2); border-bottom: 1px solid var(--lin);
  font-size: 11.5px; color: var(--fg3);
}
.tb__gr > td > * { display: inline-flex; align-items: baseline; }
.tb__gr b { font-size: 11.5px; font-weight: 600; color: var(--fg2); margin-right: 8px; }
.tb__gr .md, .tb__gr .mono { margin-left: 10px; }
.tb__gr .espaco { display: inline-block; width: 100%; }
.tb__gr--u > td { background: var(--r2s); }
.tb__gr--u b, .tb__gr--u span { color: var(--r2t); }


/* ====================================== BLUEFLEET — `#/automacao` (.blf) =
   (23/09/2026, task 3 do orquestrador; REESCRITO em 25/09/2026 com a tela
   ordenada por quem age — `features/tela-da-automacao.md`, task 1 — e de novo
   no mesmo dia, como FAIXA DE FILAS — task 2.) A tela usa `.chapa`, `.cab`,
   `.cx`, `.cx--plano`, `.cx__rod`, `.pgs`, `.avi`, `.tag`, `.placa`, `.pz`,
   `.vazio`, `.sk`, `.bt`, `.inp`, `.tb`, `.tb-rol`, `.pag`, `.seg`,
   `.seg--barra`, `.chip`, os cartões da faixa do Acervo (`.ends`, `.ends--zb`,
   `.ends__b`, `.ends__n`, `.ends__v`) e o `.conf__cx` como elas são; o que nasce
   aqui é a linha do estado, o arranjo da faixa em três grupos, a caixa da fila,
   as abas, a linha do subgrupo, a linha do auto, *Dados para lançar*, o
   histórico, os resultados da busca, a prévia dos popups e a lista completa.
   As marcas da equipe (task 3, no mesmo dia) usam a `.ck` e a `.rd` da casa e a
   `.selbar` — que ganhou aqui o seu primeiro consumidor —; nascem a caixa na
   linha, a marca, o seletor de motivo e o arranjo da barra de lote.
   ⚠ O PREFIXO `.blf` FOI CONFERIDO NOS DOIS SENTIDOS antes da primeira linha
   (23/09/2026), e de novo em 25/09/2026: `blf__` não aparece em folha nem em JS
   nenhum fora desta tela.
   ⚠ NENHUMA COR DE PRAZO fora da pílula: vermelho, âmbar e verde pertencem ao
   prazo. O alerta é `avi--mc`, a cor da marca, e o lime tem três donos — não
   ganha um quarto aqui.
   ⚠ OS CARTÕES DA FAIXA SÃO OS DO ACERVO, SEM SOBRESCREVER CORPO, PESO OU COR
   (P6 — a lei de 18/08 no comentário de `.ends__n`): a hierarquia é a ORDEM.
   Daqui sai só o arranjo em grupos.
   ⚠ A FILA É LISTA, NÃO TABELA — nada ali é colunar entre filas, e a linha vira
   cartão abaixo de 768 px (a cauda, no fim do arquivo). ⚠ A LISTA COMPLETA É
   TABELA: o `min-width` sai de `--tbmin`, a soma das colunas EM USO, e ela cabe
   a 1.280 px (requisito 24) — rola dentro de `.tb-rol` só no telefone.        */

.blf { display: flex; flex-direction: column; gap: var(--e5); min-width: 0; }

/* O TOPO — o título e o contexto à esquerda, *Sincronizar agora* e *Atualizar*
   à direita; quebra em coluna quando não cabe (a cauda). */
.blf__topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
             gap: var(--e3) var(--e6); }
.blf__topo > .cab { flex: 1 1 320px; min-width: 0; }
.blf__acoes { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e2);
              flex: 0 1 auto; min-width: 0; }
.blf__bts { display: flex; gap: var(--e3); flex-wrap: wrap; }
/* *"Atualizada às HH:MM"* — a hora do servidor, ao lado de *Atualizar*: texto,
   não alvo (fica fora do bloco de `pointer: coarse`) */
.blf__lida { align-self: center; font-size: 11.5px; color: var(--fg3); line-height: 1.45;
             white-space: nowrap; }
/* o motivo do botão desabilitado é TEXTO VISÍVEL — nunca `title` */
.blf__motivo { font-size: 11.5px; color: var(--fg3); line-height: 1.45; max-width: 42ch; text-align: right; }

/* O ROBÔ ESTÁ FUNCIONANDO? — O PAINEL DO ROBÔ *(27/09/2026, pedido do operador:
   "o botão não tem destaque, os textos estão juntos e embaralhados")*, em duas
   faixas dentro de uma caixa de fio: em cima O ESTADO DA AUTOMAÇÃO, na largura
   toda, com *Pausar/Retomar a automação* à direita em tamanho de botão;
   embaixo OS FATOS, um cartão por assunto (rótulo `.rot`, valor, frase),
   separados por fio — a última sincronização com a largura dobrada, porque o
   resumo dela é o texto mais longo.
   ⚠ O QUE ESTÁ ERRADO ACENDE NO LUGAR DO ASSUNTO, na cor da marca — as mesmas
   tintas do `.avi--mc` (vermelho, âmbar e verde são do prazo) —, e o alerta
   separado morreu: a pausa e a senha saíam duas vezes, cada uma com o seu botão.
   ⚠ SUBSTITUI A LINHA CORRIDA de 25/09 (P1 da task 2), que trocara quatro pares
   rótulo/valor por espaço. Embaixo, a linha do resultado do último clique. */
.blf__estado { display: flex; flex-direction: column; gap: var(--e2); }
.blf__robo { border: 1px solid var(--lin); border-radius: var(--r-sm); background: var(--sup);
             overflow: hidden; }
.blf__rst { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
            gap: var(--e2) var(--e4); padding: 10px 14px; border-bottom: 1px solid var(--lin); }
.blf__rst > .blf__rv { flex: 1 1 24rem; }
.blf__rfatos { display: flex; flex-wrap: wrap; }
.blf__rc { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column;
           align-items: flex-start; gap: 3px; padding: 10px 14px 12px; }
.blf__rc + .blf__rc { border-left: 1px solid var(--lin); }
.blf__rc--parada { flex: 2 1 22rem; }
.blf__rc > .rot { margin-bottom: 2px; }
.blf__rv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e2);
           margin: 0; font-size: 13.5px; font-weight: 600; color: var(--fg); line-height: 1.4; }
.blf__rst .blf__rv { flex-wrap: nowrap; }
.blf__rv--leve { font-size: 13px; font-weight: 500; }
.blf__rq { font-size: 12px; font-weight: 400; color: var(--fg2); }
.blf__rs { margin: 0; font-size: 12px; color: var(--fg2); line-height: 1.45; max-width: 72ch; }
.blf__rs--av { font-weight: 550; }
.blf__rc > .blf__rb { margin-top: 6px; }
.blf__rst > .blf__rb { flex: none; }
/* O SINAL DO ESTADO — um ponto de tinta na ligada; na pausada, as duas barras
   do símbolo de pausa. Tinta, nunca verde: verde é folga de prazo. */
/* ⚠ ALINHADO À PRIMEIRA LINHA DO TEXTO, nunca ao centro: a frase da pausa quebra
   em duas ou três, e o sinal centrado flutuava no meio delas */
.blf__pt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
           background: var(--fg); align-self: flex-start; margin: 6px 2px 0 0; }
.blf__pt--pausa { width: 9px; height: 11px; border-radius: 1px; background: none; margin-top: 4px;
                  border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.blf__rst--av, .blf__rc--av { background: var(--b50); color: var(--b700); }
.blf__rst--av .blf__rv, .blf__rc--av .rot, .blf__rc--av .blf__rv, .blf__rc--av .blf__rs,
.blf__rc--av .blf__rq { color: var(--b700); }
html[data-tema="escuro"] .blf__rst--av, html[data-tema="escuro"] .blf__rc--av {
  background: var(--b100); color: var(--b800); }
html[data-tema="escuro"] .blf__rst--av .blf__rv, html[data-tema="escuro"] .blf__rc--av .rot,
html[data-tema="escuro"] .blf__rc--av .blf__rv, html[data-tema="escuro"] .blf__rc--av .blf__rs,
html[data-tema="escuro"] .blf__rc--av .blf__rq { color: var(--b800); }
/* O CARTÃO DO LOGIN (05/11/2026) — a exceção de cor de `regras/interface.md`:
   vermelho expirou, verde ativo, sempre com a frase ao lado. Não se estende a outro
   cartão desta tela. */
.blf__rc--login-ex { background: var(--r1s); }
.blf__rc--login-ex .rot, .blf__rc--login-ex .blf__rv, .blf__rc--login-ex .blf__rs { color: var(--r1t); }
.blf__rc--login-ok { background: var(--r3s); }
.blf__rc--login-ok .rot, .blf__rc--login-ok .blf__rv, .blf__rc--login-ok .blf__rs { color: var(--r3t); }
.blf__andando { font-weight: 550; color: var(--fg); }
.blf__nota { display: block; font-size: 11.5px; color: var(--fg3); line-height: 1.45; margin-top: 2px; }
.blf__res { font-size: 12.5px; color: var(--fg); line-height: 1.45; max-width: 96ch; }

/* A FAIXA DE FILAS — três grupos lado a lado, cada um com o rótulo do grupo da
   conta sobre os seus cartões; o terceiro não tem rótulo. ⚠ AS SEIS CÉLULAS
   FICAM NUMA RÉGUA SÓ PELA SUBGRADE: a grade tem duas linhas — os rótulos, os
   cartões —, e cada grupo as herda (`subgrid`). Com cada grupo em coluna própria,
   o rótulo *SEM CONTRATO VIGENTE*, que quebra em duas linhas a 1.280 px, fazia
   aqueles dois cartões 15 px mais altos que os outros quatro (medido em
   25/09/2026: 92 contra 77). */
.blf__mapa { display: flex; flex-direction: column; gap: var(--e3); }
.blf__filas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr;
              gap: var(--e2) var(--e5); }
.blf__gr { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.blf__gr > .ends { grid-row: 2; }
.blf__gr-r { grid-row: 1; align-self: end; font-size: 11.5px; color: var(--fg3); }
.blf__gr-r b { color: var(--fg); font-weight: 600; }
/* ⚠ DOIS CARTÕES POR GRUPO EM QUALQUER LARGURA: especificidade 0,2,0, que vence
   os `@media` de `.ends--zb` (0,1,0: três colunas a 1.000 px, duas a 620) SEM
   depender de ordem de fonte. O número de colunas é o `--zbn` que o JS põe. */
.blf__gr .ends--zb { grid-template-columns: repeat(var(--zbn, 2), minmax(0, 1fr)); }

/* A BUSCA — uma por tela, à direita do título da fila; a lupa mora dentro do campo.
   ⚠ NÃO QUEBRA acima de 768 px: com `wrap`, a largura dela saía menor que o
   campo, a contagem e o *Limpar* juntos, e os dois desciam para baixo do campo
   (medido em 25/09/2026: 392 px para 487 de conteúdo). */
.blf__busca { display: flex; align-items: center; gap: var(--e2) var(--e3); margin-left: auto; }
.blf__busca .blf__nota { margin-top: 0; white-space: nowrap; }
/* ⚠ O CAMPO NÃO ANDA DEBAIXO DE QUEM DIGITA: a busca é alinhada à direita, e a
   contagem e o *Limpar*, que nascem na primeira letra, o empurravam 179 px para
   a esquerda (medido em 25/09/2026). Eles aparecem À ESQUERDA dele (`order`) —
   só no visual: no teclado a ordem continua campo → *Limpar*. E a largura é
   declarada, não só a base: o tamanho da busca sai da contribuição intrínseca
   do campo, e a do `input` (213 px) apertava os 300 da base. */
.blf__busca-c { position: relative; display: flex; align-items: center; flex: 0 1 300px; width: 300px;
                min-width: 0; order: 1; }
.blf__busca-c .ico { position: absolute; left: 10px; color: var(--fg3); pointer-events: none; }
.blf__busca-c .inp { width: 100%; padding-left: 30px; }

/* A FILA ESCOLHIDA — UMA caixa: no topo, o título e a frase do bloco com a busca
   na mesma linha, e embaixo as abas (ou o filtro da lista completa); depois, o
   subgrupo. `cx--plano`, não `sh1`: ela é o plano de trabalho, não um cartão que
   se destaca. ⚠ O topo alinha PELO TOPO (`flex-start`): centrado, a frase que
   quebra em duas linhas numa fila e não na outra moveria o campo na vertical. */
.blf__fila { min-width: 0; }
.blf__sk { box-shadow: var(--sh0), var(--brilho); padding: 16px; }
.blf__fila-topo { display: flex; flex-direction: column; gap: var(--e3); padding: 12px 16px;
                  border-bottom: 1px solid var(--lin); }
.blf__fila-cab { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e2) var(--e4); }
.blf__fila-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3);
               flex: 1 1 320px; min-width: 0; padding-top: 6px; }
.blf__fila-f { font-size: 12.5px; color: var(--fg2); line-height: 1.45; min-width: 0; }
.blf__esc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
/* o número da aba, mais claro que o título dela */
.blf__abas b { font-weight: 500; color: var(--fg3); }
.blf__abas .on b { color: var(--fg2); }
/* os ocultos de *Fora da conta* dizem a frase deles — só se contam */
.blf__oculto { padding: 10px 16px 0; margin: 0; }
.blf__fila .vazio { padding: 40px 20px; }

/* A LINHA DO SUBGRUPO — a frase à esquerda, os vivos à direita; embaixo, o que é
   comum e o motivo único */
.blf__sub-l { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
              gap: var(--e1) var(--e5); padding: 12px 16px 0; }
.blf__sub-f { font-size: 12.5px; color: var(--fg2); line-height: 1.45; max-width: 96ch; flex: 1 1 360px; min-width: 0; }
.blf__vivos { font-size: 12px; color: var(--fg); flex: none; }
.blf__comum { padding: 4px 16px 0; font-size: 12px; color: var(--fg3); line-height: 1.45; max-width: 96ch; }
.blf__lista { margin-top: 12px; border-top: 1px solid var(--lin); }
/* O PAGINADOR DA FILA — o `.pag` da casa, em cima e embaixo da lista
   (`listaPaginada`). O de cima ocupa o lugar do recuo da lista: a faixa dele já
   é o fio que a abre. */
.blf__pag--topo { margin-top: 12px; }
.blf__pag--topo + .blf__lista { margin-top: 0; }

/* A LINHA DO AUTO — SEIS CÉLULAS NUMA GRADE, EMITIDAS SEMPRE (a lei de 20/08:
   a coluna é do contêiner): a caixa de seleção (task 3 — vazia onde não há
   lote), a identidade, as etiquetas, a pílula, o que distingue e as ações. As
   quatro primeiras têm largura DECLARADA (a caixa e a identidade com teto, as
   etiquetas e a pílula fixas) — cada linha é uma grade própria, e só largura
   declarada alinha a leitura vertical entre elas. A
   altura parte de `--lh` e cresce quando o que distingue quebra (a lei das duas
   densidades: nada de 36). */
.blf__auto { padding: 0 16px; }
.blf__auto + .blf__auto { border-top: 1px solid var(--lin); }
.blf__cab { display: grid;
            grid-template-columns: 20px minmax(0, 17rem) 7.5rem 118px minmax(0, 1fr) auto;
            grid-template-areas: "sel id tags pz diz acoes"; align-items: center; column-gap: var(--e3);
            min-height: var(--lh); padding-block: 6px; min-width: 0; }
.blf__sel { grid-area: sel; display: flex; align-items: center; }
.blf__id { grid-area: id; display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.blf__id > b { font-family: var(--fm); font-size: 12px; font-weight: 500; flex: none; }
.blf__id > .blf__ait { flex: none; }
.blf__emp { font-size: 12px; color: var(--fg2); min-width: 0; }
.blf__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.blf__pz { grid-area: pz; display: flex; align-items: center; min-width: 0; }
.blf__diz { grid-area: diz; display: flex; flex-wrap: wrap; gap: 2px var(--e3); min-width: 0;
            font-size: 12px; color: var(--fg2); line-height: 1.4; }
.blf__lbts { grid-area: acoes; display: flex; align-items: center; justify-content: flex-end; gap: var(--e2); }
/* O QUE DISTINGUE DESCE PARA A SEGUNDA LINHA onde há DUAS ações à vista (R7)
   *(25/09/2026, decisão do operador no dirigir da task 3)*: as duas, mais *Dados
   para lançar* e o `⋯`, levam a célula das ações a 376–402 px, e a 1.280 a
   frase ficava com 0 px — o texto passava por cima dos botões. Ela vai para
   debaixo da identidade, das etiquetas e da pílula; a linha sem nada a
   distinguir não cresce (sem `row-gap`, e a célula vazia some). Abaixo de 768 px
   vale o arranjo da cauda, que vem depois na fonte. */
.blf__cab--2l { grid-template-areas: "sel id tags pz . acoes" ". diz diz diz diz ."; row-gap: 0; }
.blf__cab--2l .blf__diz:empty { display: none; }
.blf__dados-bt .ico { margin-left: 2px; }
.blf__mais { font-size: 15px; line-height: 1; letter-spacing: .04em; }
/* O MOTIVO DO BOTÃO DESABILITADO É TEXTO, na linha — ou UMA vez, na linha do
   subgrupo, quando todos os autos dele têm o mesmo (R20) */
.blf__porque { font-size: 11.5px; color: var(--fg3); line-height: 1.45; padding: 0 0 10px; max-width: 72ch; }
.blf__porque--sub { padding: 4px 16px 0; }

/* AS MARCAS DA EQUIPE (task 3) — a marca na linha é o que a distingue, um degrau
   acima da frase; o seletor de motivo abre NA LINHA, embaixo da grade, como
   *Dados para lançar*; *"Selecionar os N"* mora na linha do subgrupo, à direita;
   a barra de lote é a `.selbar` da casa, recuada da borda da caixa. ⚠ NENHUMA
   COR DE PRAZO: a marca é texto, não alerta. */
.blf__marca { color: var(--fg); }
.blf__motivos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
                padding: 0 0 12px; }
.blf__motivos > .blf__nota { margin: 0 var(--e1) 0 0; }
.blf__seltodos { flex: none; }
.blf__lote { margin: 12px 16px 16px; }
/* a escolha do motivo no popup do lote — a `.rd` da casa e o rótulo, uma linha */
.blf__pop-m { display: flex; align-items: center; gap: var(--e3); min-height: 32px; padding: 0;
              background: none; border: 0; color: var(--fg); font: inherit; text-align: left;
              cursor: pointer; }

/* OS RESULTADOS DA BUSCA — um grupo por fila › subgrupo, cada um com o `h3` e o
   número, sobre um fio */
.blf__achado { padding-top: 14px; }
.blf__achado + .blf__achado { margin-top: 4px; border-top: 1px solid var(--lin); }
.blf__achado > .h3 { display: flex; align-items: baseline; gap: var(--e2); padding: 0 16px; }
.blf__achado > .h3 b { font-size: 12px; font-weight: 500; color: var(--fg2); }

/* DADOS PARA LANÇAR À MÃO — recua um degrau (`--sup2`), como o histórico: é
   detalhe do auto; cada par é rótulo, valor e *Copiar* */
.blf__dados { margin: 0 0 12px; padding: 10px 12px; display: flex; flex-direction: column;
              gap: var(--e2); background: var(--sup2); border-radius: var(--r-md); }
.blf__dados > .bt { align-self: flex-start; }
.blf__dados > .blf__nota { margin: 0; }
.blf__dados-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 8px var(--e5); margin: 0; }
.blf__dado { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e2);
             align-items: center; min-width: 0; }
.blf__dado dt { grid-column: 1; font-size: 11px; color: var(--fg3); }
.blf__dado dd { grid-column: 1; margin: 0; font-size: 12.5px; color: var(--fg); overflow-wrap: anywhere; }
.blf__dado .bt { grid-column: 2; grid-row: 1 / span 2; }

/* O HISTÓRICO — recua um degrau (`--sup2`), como a coleta da caixa: é detalhe
   do auto, não conteúdo novo. */
.blf__hist {
  list-style: none; margin: 0 0 12px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--sup2); border-radius: var(--r-md);
}
.blf__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e3); font-size: 12px; min-width: 0; }
.blf__t-q { font-size: 11.5px; color: var(--fg3); flex: none; }
.blf__t-f { color: var(--fg); min-width: 0; }
.blf__t-m { color: var(--fg2); min-width: 0; }
.blf__t-c { font-size: 11px; color: var(--fg3); }
.blf__t-p { margin-left: auto; color: var(--fg3); }

/* OS POPUPS (25/09/2026) — o `.conf__cx` de `componentes.css` pintado em `#mod`
   (`sobreposicao.js`); daqui sai só o que ele não tinha: a prévia do *Lançar
   agora* em lista, o formulário da senha e o giro do *validando* (o `.cfg__sp`,
   que desce 3 px para alinhar à primeira linha do parágrafo). */
.blf__pop .conf__c p + p, .blf__pop .conf__c p + dl, .blf__pop .conf__c dl + p { margin-top: 8px; }
.blf__pop-sp { margin-top: 3px; }
.blf__prev { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--e4);
             margin: 0; font-size: 12.5px; }
.blf__prev > div { display: contents; }
.blf__prev dt { color: var(--fg3); }
.blf__prev dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.blf__pop-f { display: flex; flex-direction: column; gap: var(--e3); }
.blf__pop-f .inp { width: 100%; }
/* O AGENDAMENTO — REFEITO em 28/09/2026, na gramática de `#/config`: o
   cabeçalho, o rótulo em caixa alta sobre cada campo, o aviso da casa e as ações
   embaixo, com mais ar entre os blocos que o formulário da senha. O horário é o
   `.inp` do DS com a largura de um horário, não a da linha (o `.blf__pop-f .inp`
   de cima o esticaria), e o botão do segundo mora AO LADO dele — discreto de
   propósito. Os dias são botões alternáveis numa linha: marcado é TINTA
   (`--acao`, a cor da caixa de marcar do DS), nunca violeta, que é território
   ANTT. A linha do erro (`.cmp__er`, do DS) só existe à vista quando há erro —
   `display` declarado obriga a desfazer o `[hidden]`. O alvo de 44 px no toque
   vem do bloco de `pointer: coarse`, no fim da folha. */
.blf__agenda .blf__pop-f { gap: var(--e5); }
.blf__agenda-cab { display: flex; flex-direction: column; gap: var(--e1); }
/* ⚠ O BLOCO NÃO É `.cmp`: o nome tem DOIS donos — o campo de formulário de
   `componentes.css` e a grade rótulo/valor do card em `modal.css`, que carrega
   depois e vence (medido: o rótulo caía numa coluna de 168 px ao lado do campo). */
.blf__agenda-campo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.blf__agenda-campo .cmp__er[hidden] { display: none; }
.blf__agenda-linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e3); }
.blf__agenda-linha .inp { width: 7.5rem; }
.blf__agenda-rot { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--e3); min-height: 26px; }
.blf__agenda-d { display: flex; flex-wrap: wrap; gap: var(--e2); }
.blf__dia {
  min-width: 52px; height: 32px; padding: 0 12px;
  border: 1px solid var(--lin2); border-radius: var(--r-sm); background: var(--sup);
  color: var(--fg2); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
  transition: background-color calc(var(--t1) * var(--mo)) var(--suave),
              border-color calc(var(--t1) * var(--mo)) var(--suave),
              color calc(var(--t1) * var(--mo)) var(--suave);
}
.blf__dia[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: var(--acao-fg); }
.blf__dia:focus-visible { outline: none; box-shadow: var(--anel); }
@media (hover: hover) {
  .blf__dia:hover { border-color: var(--lin3); color: var(--fg); }
  .blf__dia[aria-pressed="true"]:hover { color: var(--acao-fg); }
}
.blf__agenda-manual { margin-right: auto; }
.blf__pop-erro { margin: 0; font-weight: 550; color: var(--fg); }
/* O CAMPO DO CÓDIGO: seis números, com a largura deles. A linha do erro é a do DS, e
   só existe à vista quando há erro. */
.blf__pop-f .blf__codigo { width: 12ch; letter-spacing: .12em; }
.blf__pop-f .cmp__er[hidden], .blf__pop-erro[hidden] { display: none; }

/* A LISTA COMPLETA — o filtro e *Baixar a lista* moram na linha das abas; a
   tabela embaixo */
.blf__filtro { flex-wrap: wrap; max-width: 100%; }
.blf__baixar { display: inline-flex; align-items: center; gap: var(--e3); }
.tb--sinc { min-width: var(--tbmin, 870px); }
/* O CABEÇALHO QUEBRA LINHA AQUI (requisito 24) — o `nowrap` da casa, em
   maiúsculas espaçadas, fazia *Data da infração*, *Prazo de defesa* e *Última
   verificação* passarem da coluna: os dois primeiros invadiam a vizinha e o
   último estourava a tabela a 1.280 px (medido no /conferir de 25/09/2026:
   `scrollWidth` 1003 contra 974). Os rótulos são os do arquivo, e por isso não
   encurtam; o `height: 34px` da casa continua sendo o piso. */
.tb--sinc thead th { white-space: normal; line-height: 1.3; padding-block: 6px; }
/* o AIT é o botão da linha — o alvo do teclado e do foco devolvido pelo card —,
   com cara de texto: na tabela a linha inteira já é a superfície de clique do
   mouse, e na fila ele é a porta do card (R14) */
.blf__ait { font-family: var(--fm); font-size: 12px; font-weight: 500; color: var(--fg);
            text-align: left; padding: 0; background: none; border: 0; }
/* a situação e o motivo quebram linha: a frase do servidor não cabe em 48 px */
.tb td.blf__longo { height: auto; white-space: normal; line-height: 1.4; padding-block: 8px; }


/* ============================================ ALVO DE TOQUE — INSTRUMENTO =
   ESTE BLOCO É O ÚLTIMO DO ARQUIVO, E É DE PROPÓSITO. `@media` não acrescenta
   especificidade: escrito no topo, o `height: 34px` de `.vence__i` — declarado
   200 linhas abaixo, com o mesmo peso — ganhava por ordem de fonte e a régua
   continuava em 34 px no toque. Medido. Se alguém mover isto para cima, a
   metade das regras deste bloco morre em silêncio.

   A casca já resolveu o mesmo problema na barra superior (casca.css,
   `pointer: coarse`): amplia a ÁREA com um pseudo-elemento de 44x44 em vez de
   engordar o desenho, porque o defeito é de alcance e a correção tem que ser
   de alcance. As peças de instrumento tinham ficado de fora, e são as menores
   da interface:

     .vence__i      34 px de altura (régua de prazos)
     .home__mais    o rodapé com porta da prévia

   São LINHAS: crescer não deforma nada. (`.aguard__i` saiu da lista em 15/08:
   ela era do Hoje, e o Hoje foi absorvido pela Home.)

   O nó do trajeto de 30 dias — que era o pior alvo do sistema, 8 a 28 px —
   saiu da lista junto com a lente que o desenhava. O CALENDÁRIO não entra
   aqui e é de propósito: a coluna dele é 348 px justamente para a célula dar
   44 exatos por construção. Alvo que nasce certo dispensa exceção, e exceção
   de toque é a primeira coisa que apodrece.                                 */
@media (pointer: coarse) {
  .vence__i { height: 44px; }
  .home__mais { min-height: 44px; }
}

/* ================================================ ACERVO — o responsivo ==
   DEPOIS do bloco de toque, e nao antes: os dois nao disputam propriedade
   nenhuma, e o `pointer: coarse` continua sendo o ultimo a falar sobre altura.
   A regra e a mesma de sempre — @media no fim do arquivo, porque media query
   nao acrescenta especificidade. */
@media (max-width: 1279px) {
  /* abaixo de 1280 o selo vira so o icone: o rotulo disputava largura com a
     badge de status na mesma celula, e a explicacao inteira ja mora no title e
     no dossie. */
  .selo-c span { display: none; }
  .selo-c { padding: 0 4px; }
}

/* ==================================================== HOME — o hover =====
   NO FIM DO ARQUIVO, com os outros `@media`: media query nao acrescenta
   especificidade, entao um `hover:hover` no topo perde para qualquer regra de
   mesma especificidade escrita depois — foi assim que um alvo de toque ficou em
   34 px com a correcao presente no arquivo.

   E TODO hover mora aqui dentro: sem o guarda, o dedo em tela deixa o cartao
   preso no estado levantado depois do toque.

   LINHA DE LISTA NAO LEVA ASSIMETRIA — quem varre move o cursor rapido, e fundo
   que atrasa le como travamento. Por isso um relogio so, sem 240/140. */
@media (hover: hover) {
  .home__mais:hover { background: var(--sup2); }
  .home__contra:hover { background: var(--sup3); }
  .home__acao a:hover { color: var(--b600); }
}

/* ==================================================== HOME — a impressão ==
   A `.faixa` (fileira de medidores) IMPRIME, e é de propósito: é conteúdo, e o
   `base.css` a deixa passar de caso pensado. O que sai são os CONTROLES que a
   Home acrescentou depois daquele bloco — o botão da ação primária e o rodapé
   com porta da prévia. Botão em papel é ruído: ninguém clica numa folha.

   A faixa da contradição FICA: ela é informação ("N itens mudaram depois de
   você ter agido neles"), não controle, e é justamente o que alguém levaria
   impresso para uma reunião. */
@media print {
  .home__acao, .home__mais { display: none !important; }
}

/* ================================================= HOME — o responsivo ====
   NO FIM DO ARQUIVO, com os outros `@media`, pela mesma razão de sempre: media
   query não acrescenta especificidade, então escrita no topo ela perde para
   qualquer regra de mesmo peso declarada depois — foi assim que um alvo de
   toque ficou em 34 px com a correção presente no arquivo.

   A GRADE NÃO PRECISA DE NADA: `.gd--60-40` já colapsa em 1.080 px, e as duas
   metades do herói já quebram sozinhas pelo `flex-wrap` com base de 250/290 px.
   O que precisa de regra é o LANÇADOR: com `flex: 0 1 400px` e `margin-left:
   auto` ele desceria para a segunda linha do cabeçalho ainda estreito, colado
   na direita, com o vazio inteiro à esquerda. Abaixo de 720 ele toma a linha. */
@media (max-width: 720px) {
  .home__lanc { flex: 1 1 100%; margin-left: 0; }
}

/* ================================================= ACERVO — a lista (T3) ==
   A CELULA DE DUAS LINHAS ENGOLIA A PLACA. `.cel2 span` (0,1,1) declara
   `font-size: 11px` e `color: var(--fg3)` para o segundo andar inteiro, e
   `.placa` / `.placa--peq` sao (0,1,0): o badge perdia o tamanho e a cor dele
   e virava texto apagado, com a moldura em volta de nada. Uma linha devolve a
   peca, e ela mora aqui porque quem a quebra e a regra do `.cel2` — do
   instrumento —, nao a folha da placa.                                      */
.cel2 .placa { font-size: 10.5px; color: var(--fg); }

/* `.trunc` NUM <span> INLINE NAO CORTA NADA, e o defeito nao da erro nenhum:
   `overflow:hidden` so opera em caixa de bloco. Dentro do `.cel2` o span vira
   item de flex e a peca funciona sozinha — foi por isso que ela passou; solto
   no `<td>` ele continua inline, e o texto vaza POR CIMA da coluna vizinha em
   vez de ganhar reticencias. Medido a 1280 px: `aguardando penalidade` (135 px)
   invadindo a coluna de valor numa coluna de 132.                           */
.tb td > .trunc { display: block; }

/* A BARRA DO LOTE DO ACERVO (08/10/2026, task 2 de `features/etiquetas.md`) — a
   `.selbar` da casa, com UMA diferenca: ela QUEBRA LINHA. Com a etiqueta
   escolhida, a frase do botao primario carrega o nome e os dois numeros
   (*"Por «Mariana do financeiro» em 447 autos — 3 ja tem"*), e somada a
   *Marcar todos os N do filtro* ela passa da largura do envelope a 1280 px.
   ⚠ O SELETOR NAO ABRE MAIS DENTRO DELA *(09/10/2026)*: e o dialogo central de
   `card/etiquetas.js`, e a linha propria que ele pedia aqui (`flex-basis: 100%`)
   saiu junto. */
.acv__lote { flex-wrap: wrap; }

/* A COLUNA `Quando · onde` (T5) — O QUE TRUNCA E O QUE NUNCA TRUNCA.
   `local` (andar 1) e `municipio/uf` (andar 2) truncam por desenho, com o texto
   cheio no `title`: medido em 18/08 na G2L, `local` chega a 552 px e o p95 e
   396 — reservar isso comeria a coluna do auto inteira. A DATA E A HORA nao
   truncam nunca: sao o "quando" da coluna, tem largura conhecida (119 px em
   mono 11) e e sobre elas que o `larg` de 229 foi medido.

   Sem `flex: none` o item encolhe junto com o irmao truncavel e a data QUEBRA
   em duas linhas dentro de uma celula que ja tem dois andares — a linha cresce
   e a densidade de 48 px morre em silencio, sem nada falhar.                 */
.cel-qd { flex: none; white-space: nowrap; }

/* ================================================= ACERVO — a ZONA C (T5) ==
   A SECAO UNICA DE FILTROS, em tres estados — repouso · aplicado · aberto —, e
   ela custa MUITO POUCO CSS porque quase tudo ja existe: `.fer` (a fileira),
   `.fer__chips`, `.fer__busca` com o funil e o estado aceso, `.chip`/`.chip.on`,
   `.fchip` (o chip removivel, que estava no MVP SEM CONSUMIDOR) e `.vazio`. O
   que falta e o painel, abaixo.

   ⚠ ELA EMPURRA, NAO SOBREPOE, e a escolha e por MECANISMO, nao por gosto:
     1. empurrando, o painel e mais um filho da mesma `.chapa`, e a chapa ja da
        o fio de 1 px e o recuo de graca. CSS novo: duas regras.
     2. sobrepondo, ele precisaria de um nivel de `z-index` novo — e a lei de
        15/08 manda que ele nasca como TOKEN na paleta de `z`, nunca digitado,
        porque literal so perde quando nasce a peca que se sobrepoe a ele.
     3. e o argumento que decide: os SETE `select` do painel abrem suspensos em
        `#menus`, que ja e uma sobreposicao. Suspenso dentro de sobreposicao poe
        o "clique fora" de um a fechar o outro — e `menu.js` carrega no
        cabecalho a cicatriz desse exato bug. Empurrando, nao ha o que colidir.

   ⚠ CHIP DESABILITADO NAO SOME, e e a lei: opcao com contagem 0 aparece, com o
   zero a vista. `.chip` nao trazia o estado — `.bt[disabled]` existe, `.chip`
   nao —, entao ele nasce aqui, com o mesmo par (opacidade + sem ponteiro) que
   o DS ja usa no botao.                                                      */
.chip[disabled] { opacity: .45; pointer-events: none; }
.menu button[disabled] { opacity: .45; }

/* O PAINEL ABERTO — as sete dimensoes em TRES GRUPOS ROTULADOS.

   O rotulo tem largura FIXA, e e ela que faz os tres grupos lerem como duas
   colunas em vez de tres fileiras soltas: sem ela `O PRAZO`, `O AUTO` e
   `O ANDAMENTO` comecam em tres recuos diferentes e os gatilhos nunca se
   alinham. Os 96 px sao o maior dos tres rotulos (`O ANDAMENTO`, 88 px em mono
   10.5 com `letter-spacing: .07em`) mais a folga.

   O fundo `--sup2` repete o que a chapa ja da a `.fer` e a `.fer__chips`: as
   tres bandas de CONTROLE recuam um degrau juntas, e so os chips de grupo da
   Zona B ficam em `--sup`, porque sao a escolha PRIMARIA da tela.            */
/* ⚠ DUAS FILEIRAS POR DESENHO DESDE 13/10/2026 (task 3 de
   `features/escritorio.md`, R40 — `filtro.FILEIRAS_DO_PAINEL`): o `.fpan` e
   uma COLUNA de `.fpan__fil`, e cada fileira e uma linha de grupos separados
   por `.divisor`. Antes era uma linha so com `space-between` que QUEBRAVA onde
   nao cabia — a 1280 px ela ja quebrava com dez gatilhos, e o corte caia entre
   *Auto* e *Andamento* por acaso de largura. A medicao, antes e depois, esta em
   `js/filtros-ui.js`.
   ⚠ `flex-start`, NAO `space-between`: com duas fileiras de larguras diferentes,
   espalhar uma e nao a outra desalinharia os rotulos das duas. */
.fpan { display: flex; flex-direction: column; align-items: stretch;
        gap: var(--e4); background: var(--sup2); }
.fpan__fil { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.fpan__g { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
/* o rotulo perde a coluna de largura fixa: lado a lado ele volta a ser rotulo
   INLINE do seu punhado de gatilhos, e a largura fixa so abriria buraco */
.fpan__g > .rot { flex: none; margin-right: 2px; }

/* ------------------------------------------------ o período personalizado ----
   A SEGUNDA LINHA DO PAINEL, e ela SO NASCE ATRAS DO GESTO. Medido em
   20/08/2026 a 1280 px: o par de `<input type="date">` mede **291 px**, e com
   ele na fileira dos gatilhos o `.fpan` vai de 55 px para 95 — duas linhas na
   largura de trabalho. `flex-basis: 100%` e o que garante que, quando ele
   aparecer, comece SEMPRE numa linha propria em vez de espremer os gatilhos.

   ⚠ O CONTROLE E O UNICO DO PAINEL SEM NUMERO AO LADO, e e assumido: faixa
   continua nao tem opcoes enumeraveis, entao nao ha previa possivel. Os quatro
   baldes, que sao a mesma dimensao, carregam a contagem.

   ⚠ ELE VEIO DE `caixa.css`, ONDE SE CHAMAVA `.cai__per` — mudou de nome e de
   casa em 20/08/2026 porque deixou de ser da caixa. Nao e copia: a peca se
   mudou, e `movimentacoes.js` passou a emitir este nome. */
.fpan__lin { flex-basis: 100%; display: flex; align-items: center; }
.fpan__per {
  display: inline-flex; align-items: center; gap: var(--e2);
  height: 28px; padding: 0 10px;
  border-radius: var(--pill); background: var(--sup);
  border: 1px solid var(--lin);
}
.fpan__per input {
  font-family: var(--fm); font-size: 11.5px; color: var(--fg);
  background: none; border: none; min-width: 0; width: 108px;
}
.fpan__per:focus-within { border-color: var(--b400); box-shadow: var(--anel); }

/* CONTROLE EM REPOUSO. `.chip` nasce `background: none` com
   `border: 1px solid transparent` — desenho certo para um chip de recorte
   solto, e errado para um CONTROLE: os sete seletores em fileira viravam texto
   solto com uma seta de 12 px, e o `Filtros` sozinho na ponta direita de uma
   linha de 1.100 px lia como rotulo. A superficie e o fio devolvem a
   afordancia sem tocar no estado `.on`, que continua sendo quem diz "aceso".
   Usam-no os sete gatilhos de `sel.gatilho()` e o botao que abre o painel. */
.chip--sel { background: var(--sup); border-color: var(--lin); }
@media (hover: hover) { .chip--sel:hover { border-color: var(--lin2); } }
.chip--sel .ico { color: var(--fg3); }

/* O bloco do zero por intersecao. `.vazio` ja centraliza e ja limita o
   paragrafo em 380 px; aqui so o espaco entre a frase e o botao que a resolve.
   SEM ILUSTRACAO E SEM DESENHO — "onde falta imagem, o lugar fica vazio e
   explicado". */
.vazio .bt { margin-top: var(--e3); }

/* ================================================= ACERVO — o hover (T3) ==
   NO FIM DO ARQUIVO, com os outros `@media`, e pelo motivo de sempre: media
   query nao acrescenta especificidade, entao um `hover:hover` escrito junto da
   peca perderia para qualquer regra de mesmo peso declarada depois.

   ⚠ AS DUAS REAGEM, E COM PESOS DIFERENTES. A celula de grupo troca o RECORTE
   da tela; a linha da lista ABRE O CARD do auto, desde 18/08/2026, e por isso
   ela passou a levar `.clic` — `cursor:pointer` mais o realce que
   `componentes.css` ja desenhava para a classe. A afordancia entrou JUNTO com o
   card, nunca antes: linha que reage ao cursor sem abrir nada le como quebrada,
   e foi para nao entregar isso que ela ficou inerte por quatro tasks.        */
@media (hover: hover) {
  .ends__b:hover { background: var(--sup2); }
}

/* ================================== ACERVO — A ESCADA DE LARGURA (T5) =====
   TRES DEGRAUS, e cada um tem uma pergunta que deixa de caber:

     1000  a grade de CINCO vira tres. A conta e literal:
           `util = W - 236 (lateral) - 48 (recuo da pagina) - 32 (recuo da chapa)
           - 32 (quatro vaos)`, e a celula e util/5. O conteudo mais largo da
           celula e o selo `Fora de prazo`, que mede **108 px** com o no e os
           recuos, mais os 26 px de recuo do proprio cartao: o piso e **134**.
           A 1.120 px a celula da 154 e cabe; a 1.000 da **130** e o selo comeca
           a truncar — e selo de grupo truncado e o mapa do acervo mentindo o
           nome do proprio balde.
     620   de tres para dois. A 375 px (sem lateral) dois cartoes dao 139, ainda
           acima do piso de 134.
     820   o painel de filtros para de tentar a linha unica: os tres grupos
           empilham, cada um com o seu rotulo, e a leitura vira vertical.
     560   o numero heroi desce de 30 para 22 px. A 375 px dois numeros de 30
           lado a lado nao deixam largura para o R$ na mesma celula.

   ⚠ TUDO ISTO NO FIM DO ARQUIVO, com os outros `@media`, e pelo motivo de
   sempre: media query nao acrescenta especificidade. Escrito junto da peca,
   qualquer regra de mesmo peso declarada depois ganharia por ordem de fonte —
   foi assim que um alvo de toque ficou em 34 px com a correcao no arquivo.    */
@media (max-width: 1000px) {
  .ends--zb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* `.ends__rot` e `.ends__tot` sao da faixa de chips ANTIGA, nao desta grade;
     ficam aqui porque o degrau de largura e o mesmo. */
  .ends__rot { display: none; }
  .ends__tot { margin-left: 0; }
}

@media (max-width: 620px) {
  .ends--zb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  /* EMPILHADO: cada fileira vira uma coluna de grupos, e a quebra continua
     DENTRO de cada grupo — as duas fileiras de 13/10/2026 so mudam a ORDEM em
     que os grupos descem (Prazo, Andamento, Auto). */
  .fpan { gap: var(--e3); }
  .fpan__fil { flex-direction: column; align-items: stretch; gap: var(--e3); }
  .fpan__g { flex-wrap: wrap; }
  /* o divisor e VERTICAL: empilhado ele viraria um risco de 1 px no meio do
     nada. Some, e quem separa passa a ser o proprio rotulo de cada grupo. */
  .fpan__fil > .divisor { display: none; }
}


@media (max-width: 560px) {
  .ends__n { font-size: 21px; }
  .ends__b { padding: 8px 10px; }
  /* a busca ocupa a linha inteira e o par de acao desce para a seguinte */
  .fer__busca { flex: 1 1 100%; }
}

/* ================================ ACERVO — O ALVO DE TOQUE DOS FILTROS =====
   MEDIDO a 375 px: os oito controles da barra — os sete `sel.gatilho()` e o
   `Filtros` — sao `.chip`, e `.chip` tem **28 px** de altura. O minimo de
   alcance e 44, e num telefone estes sao os controles que o operador usa em pe,
   com uma mao.

   ⚠ A CORRECAO AMPLIA A AREA, NAO O DESENHO — e o padrao que a casca ja usa
   duas vezes (`casca.css`, `.topo .bt--ico::after` e `.topo__busca::after`).
   Engordar o `.chip` para 44 px deformaria a peca em toda tela que a use e
   quebraria a fileira; um pseudo-elemento centrado de 44 px de altura resolve o
   alcance sem mover um pixel do que se ve.

   ⚠ E VAI DEPOIS DA ESCADA DE LARGURA, no fim absoluto do arquivo: media query
   nao acrescenta especificidade, e este bloco tem de ser o ultimo a falar sobre
   os controles da barra.                                                      */
@media (pointer: coarse) {
  .fpan [data-sel], [data-filtros] { position: relative; }
  .fpan [data-sel]::after, [data-filtros]::after {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 100%; height: 44px; transform: translateY(-50%);
  }
  /* a celula da faixa ja passa de 44 com folga; o `.fchip` do chip removivel
     tem 25 px e leva o mesmo tratamento */
  .fchip button { position: relative; }
  .fchip button::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* A SEGUNDA LINHA DO PAINEL DE FILTROS no telefone: o par de datas quebra em
   duas linhas em vez de espremer os dois campos de 108 px numa faixa de 28. */
@media (max-width: 768px) {
  .fpan__per { flex-wrap: wrap; height: auto; padding: 6px 10px; }
}

/* A MATRIZ no telefone: os dois seletores empilham, senao cada um fica com
   menos de 100 px e o nome da dimensao trunca — e dimensao truncada num seletor
   de eixo e o operador escolhendo no escuro. */
@media (max-width: 720px) {
  .mtz__ctrl { flex-direction: column; align-items: stretch; }
  .mtz__sel { justify-content: space-between; }
}

/* ================================================ EXPORTAÇÃO — a cauda =====
   NO FIM DO ARQUIVO, com os outros `@media`, pelo motivo de sempre: media
   query não acrescenta especificidade, e um `hover:hover` ou um `pointer:
   coarse` escrito junto da peça perde para qualquer regra de mesmo peso
   declarada depois — foi assim que um alvo de toque ficou em 34 px com a
   correção presente no arquivo.                                             */

/* os hovers — entrada mais lenta que a saída, dois canais no máximo, e nenhum
   sobre o dedo em tela */
@media (hover: hover) {
  .xpt__op:not(.on):hover { border-color: var(--lin3); box-shadow: var(--sh1); transition-duration: calc(var(--t2) * var(--mo)); }
  .xpt__campo .bt--pri:hover { background: #fff; border-color: #fff; box-shadow: var(--sh1); }
  .xpt__campo .bt:not(.bt--pri):hover { background: rgba(243,240,251,.16); border-color: rgba(243,240,251,.34); color: var(--inst-fg); }
  .xpt__arq:not(.xpt__arq--off):hover { border-color: var(--lin3); transition-duration: calc(var(--t2) * var(--mo)); }
  .xpt__arq.on:hover { border-color: var(--acao); }
  .xpt__mod-bt:not([disabled]):hover { border-color: var(--lin3); color: var(--fg); background: var(--sup2); transition-duration: calc(var(--t2) * var(--mo)); }
}

/* as três opções empilham antes de cada cartão ficar estreito demais para a
   frase de explicação; o cabeçalho do passo 2 põe o botão embaixo do número */
@media (max-width: 900px) {
  .xpt__ops { grid-template-columns: minmax(0, 1fr); }
  /* os dois painéis do editor do modelo empilham: disponíveis em cima, a
     planilha embaixo, que é a ordem de leitura do gesto */
  .xpt__mod-panes { grid-template-columns: minmax(0, 1fr); }
  .xpt__cab2-d { align-items: stretch; margin-left: 0; width: 100%; }
  .xpt__cab2 .xpt__bts { align-items: stretch; }
  .xpt__cab2 .xpt__motivo { text-align: left; }
}

/* os dois cartões de arquivo empilham; o `.seg` do formato continua à direita */
@media (max-width: 720px) {
  .xpt__formas { grid-template-columns: minmax(0, 1fr); }
  .xpt__bts--and { margin-left: 0; }
}

/* NO TOQUE A ÁREA VAI A 44 px, O DESENHO FICA IGUAL — a forma de
   `.topo__busca::after` (`casca.css`), a mesma que a barra de filtros usa nos
   seus chips. Os chips do período são `.seg button` de 26 px; os botões do
   campo e das listas crescem de verdade, porque são linhas de texto; os cartões
   já passam de 44 por construção. */
@media (pointer: coarse) {
  .xpt__cheg .chip { position: relative; }
  .xpt__cheg .chip::after {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 100%; height: 44px; transform: translateY(-50%);
  }
  .xpt__arq { position: relative; }
  .xpt__arq::after { content: ""; position: absolute; inset: 0; min-height: 44px; }
  .xpt__campo .bt { min-height: 44px; }
  .xpt__arq .seg button { position: relative; }
  .xpt__arq .seg button::after {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 100%; height: 44px; transform: translateY(-50%);
  }
  .tb--ant .bt { min-height: 44px; }
  /* o editor do modelo: os chips crescem por área, como os do período; os
     três botões de 26 px da lista crescem por `::after`, porque a linha de 34
     não cabe três de 44 lado a lado sem virar duas linhas */
  .xpt__mod-chips .chip { position: relative; }
  .xpt__mod-chips .chip::after {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 100%; height: 44px; transform: translateY(-50%);
  }
  .xpt__mod-bt { position: relative; }
  .xpt__mod-bt::after { content: ""; position: absolute; inset: -9px; }
  .xpt__mod-pe .bt, .xpt__mod-pane-t .bt, .xpt__arq-mod .bt { min-height: 44px; }
}

/* o campo escuro imprime como o da Home: os botões e os seletores são controle
   e saem; o número, a prévia e a lista são informação e ficam */
@media print {
  .xpt__bts, .xpt__cheg, .xpt__datas, .xpt__ops, .tb--ant .bt, .xpt__refinar-t,
  .xpt__mod, .xpt__arq-mod .bt { display: none !important; }
}

/* ================================================= BLUEFLEET — a cauda =====
   No fim do arquivo, com os outros `@media`, pelo motivo de sempre: media query
   não acrescenta especificidade.                                             */

/* ABAIXO DE 1.000 px OS TRÊS GRUPOS DA FAIXA EMPILHAM — cada um com os seus dois
   cartões (a regra de dois por grupo, acima, não depende deste degrau); a
   subgrade sai, e cada grupo volta a ser rótulo sobre cartões. */
@media (max-width: 1000px) {
  .blf__filas { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--e4); }
  .blf__gr { display: flex; flex-direction: column; gap: var(--e2); grid-row: auto; }
}

/* ABAIXO DE 768 px (requisito 24): o topo empilha, a busca desce para baixo das
   abas, as abas ROLAM DENTRO DELAS (o estouro se mede dentro do instrumento), e
   A LINHA VIRA CARTÃO — a identidade em cima; a pílula e o que distingue
   embaixo; a ação principal e o `⋯` na terceira linha, e *Dados para lançar*
   vai para o `⋯`. */
@media (max-width: 768px) {
  .blf__topo { flex-direction: column; }
  /* na coluna, a base de 320 px do cabeçalho virava ALTURA — ~320 px vazios
     debaixo do título, medidos a 375 px (task 2) */
  .blf__topo > .cab { flex: 0 0 auto; }
  /* o painel do robô empilha: o botão da automação desce para baixo da frase,
     e os fatos ficam um por linha, com o fio em cima */
  .blf__rc { flex-basis: 100%; }
  .blf__rc + .blf__rc { border-left: 0; border-top: 1px solid var(--lin); }
  .blf__acoes { align-items: flex-start; }
  .blf__motivo { text-align: left; }
  .blf__busca { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; }
  /* no telefone o campo ocupa a linha inteira, e a contagem desce para baixo
     dele — em cima, ela o empurraria para baixo na primeira letra */
  .blf__busca-c { flex-basis: 100%; width: auto; order: 0; }
  .blf__abas { flex-wrap: nowrap; overflow-x: auto; }
  .blf__abas button { flex: none; }
  .blf__cab { grid-template-columns: 20px auto minmax(0, 1fr) auto;
              grid-template-areas: "sel id id tags" "sel pz diz diz" "sel acoes acoes acoes";
              row-gap: var(--e2); padding-block: 10px; }
  .blf__sel { align-self: start; padding-top: 2px; }
  .blf__id { flex-wrap: wrap; }
  .blf__lbts { justify-content: flex-start; flex-wrap: wrap; }
  .blf__dados-bt { display: none; }
  /* UMA AÇÃO À VISTA (R7): a segunda vai ao `⋯`, que pergunta a largura na hora */
  .blf__ac2 { display: none; }
  .blf__t-p { margin-left: 0; }
  /* ⚠ A BARRA DE LOTE FICA NO TELEFONE AQUI (requisito 24 da tela da automação):
     `casca.css` a esconde abaixo de 768 px (*"decisão em lote é gesto de mesa"*),
     e o dispensar em lote é o que cobre a frota do outro sistema. Vence por
     ESPECIFICIDADE (0,2,0 contra 0,1,0), nunca por ordem de fonte — e só no `.blf`. */
  .blf .selbar { display: flex; flex-wrap: wrap; }
}

/* ⚠ NO TELEFONE O POPUP FICA CARTÃO, com calha de 16 px: a regra de
   `componentes.css` o faz folha de baixo (`100vw`, cantos só em cima) porque
   conta com o `.conf`, que o encosta no fim da tela — e `#mod` o centra. */
@media (max-width: 560px) {
  .blf__pop { width: calc(100vw - 32px); border-radius: var(--r-xl); }
}

@media (hover: hover) {
  .blf__ait:hover { text-decoration: underline; }
}

/* NO TOQUE O ALVO VAI A 44 px — os botões pequenos da linha, do painel do robô
   e da busca (os dois últimos moram fora de `.blf`, na chapa); os dos
   popups; as abas; e, na lista completa, os chips do filtro e os de *Baixar a
   lista* (XLSX, CSV — medidos em 26 px a 375 px em 25/09/2026, quando a seção
   que os cobria morreu), o AIT e os do paginador */
@media (pointer: coarse) {
  .blf .bt--peq, .blf__topo .bt, .blf__estado .bt, .blf__busca .bt,
  .blf__busca .inp, .blf__pop .bt, .blf__pop .inp { min-height: 44px; }
  .blf__mais { min-width: 44px; }
  .blf__abas button, .blf__filtro button, .blf__baixar button, .blf__ait,
  .blf .pgs button, .blf__pop-m, .blf__dia { min-height: 44px; }
  .blf__filtro button, .blf__baixar button, .blf .pgs button { min-width: 44px; }
  /* a caixa de seleção fica com 15 px à vista, e o ALVO vai a 45 — o
     pseudoelemento é do `::before`, porque o `::after` da `.ck` é o do `.meio` */
  .blf__sel .ck { position: relative; }
  .blf__sel .ck::before { content: ""; position: absolute; inset: -15px; }
}