/* ==========================================================================
   ACESSO — a folha de #/entrar e de #/config.

   A REGRA DA PEÇA MORA NA FOLHA DA PEÇA, e por isso ela existe: nada daqui
   pertence a componentes.css nem a telas.css. O invólucro da casca nua
   (`.nua`, `.nua__inst`, `.nua__cx`) continua em casca.css, que é da T3 —
   aqui fica só o que vive DENTRO dele.

   ⚠ NENHUM VERMELHO NO ERRO. "Vermelho, âmbar e verde pertencem exclusivamente
   ao prazo" — inclusive no login. O erro de autenticação se distingue por
   PESO E CONTORNO (caixa recuada, ícone, texto em --fg), nunca por matiz.
   Sem essa trava, a primeira tela do produto ensinaria que vermelho é erro, e a
   pílula de prazo perderia o único canal que ela tem.

   ⚠ TODO BLOCO @media VAI PARA O FIM DO ARQUIVO. Media query não acrescenta
   especificidade: com peso igual quem ganha é quem vem depois, e este projeto
   já perdeu um alvo de toque de 44 px exatamente assim.
   ========================================================================== */

/* ==========================================================================
   1 · #/entrar
   ========================================================================== */

/* O CARTÃO. ⚠ ELE JÁ FOI TIRADO, EM 25/08/2026, E VOLTOU NO MESMO DIA — pela
   mão de quem viu a tela: *"sem um card ficou meio solto o texto e esquisito"*.
   A lápide interessa porque o argumento que o tirou parecia bom e estava errado:
   medi Linear, Vercel e o dashboard da Stripe, os três sem caixa nenhuma em
   volta do login, e concluí que a moldura era chrome. **O que aquelas três telas
   têm e esta não tem é uma superfície de fundo LISA.** Aqui o formulário pousa
   sobre `--bg`, que é violeta diluído, ao lado de um campo institucional escuro
   de 720 px — sem moldura, a coluna não tem de onde se destacar e o texto fica
   boiando entre dois planos. **Referência não se copia: se lê contra o contexto
   em que ela vive.**
   ⚠ E O DS JÁ DIZIA: *"repouso = leitura… toda superfície é cartão com borda de
   1 px"*. A lei estava certa e o argumento contra ela é que era torto.

   ⚠ `--r-xl` E NÃO `--r-lg`: os outros dois consumidores de `--r-xl` no produto
   são `.mod__cx` e `.conf__cx` (`componentes.css`) — as duas superfícies
   SINGULARES que aparecem sozinhas sobre um campo. Esta é a terceira.
   ⚠ `--e7` DE RECUO, e não `--e6`: 24 px de calha num cartão que não divide o
   espaço com nada lê como diálogo de sistema.
   ⚠ `--sh1` E NÃO `--sh2`: ele é singular na tela, mas não responde ao cursor.
   E `--brilho` junto, porque no tema escuro a sombra some e sem o brilho de
   aresta o cartão fica chapado. */
.lg {
  display: flex; flex-direction: column; gap: var(--e6);
  padding: var(--e7);
  background: var(--sup); border: 1px solid var(--lin);
  border-radius: var(--r-xl); box-shadow: var(--sh1), var(--brilho);
}

/* --------------------------------------------------------------- cabeçalho -
   ⚠ O TÍTULO É O MOMENTO, e não o nome do produto. Ele dizia "Gestão de Rotas"
   nos onze momentos, e isso custava duas coisas: o nome aparecia DUAS VEZES na
   mesma tela (o lockup do campo institucional já o carrega, nas duas larguras),
   e o cartão não dizia onde a pessoa estava — quem caiu no código de seis
   dígitos, no convite vencido ou na senha nova lia o mesmo título de sempre e
   descobria o assunto no meio da prosa. Agora o `<h1>` nomeia o ato: *Entrar*,
   *Confirme que é você*, *Crie a sua senha*, *Este convite venceu*.
   ⚠ E ele CONTINUA sendo o `<h1>` da página: esta é a única tela sem cabeçalho
   de rota, e sem ele o documento nasce sem nível 1. */
.lg__cab { display: flex; flex-direction: column; gap: var(--e2); }
/* 26 px. Sem cartao em volta, o titulo e a UNICA ancora da coluna — ele carrega
   sozinho a hierarquia que a moldura carregava junto. Medido nas referencias:
   Linear 18, Vercel 32, Stripe nenhum (usa a logo). */
.lg__marca { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
/* O SUBTÍTULO DE ESCOPO. Quem abre "Gestão de Rotas" pela primeira vez espera
   um mapa — esta linha fecha a distância entre o nome e o serviço, e por isso
   ela não é `.md`: precisa de corpo para ser lida, não de nota de rodapé. */
.lg__sub { font-size: 13.5px; color: var(--fg2); line-height: 1.55; }

/* ------------------------------------------------------ o campo do login ---
   ⚠ PEÇA PRÓPRIA, E NÃO `.cmp` — a primeira forma usava `.cmp`/`.cmp__r` de
   `componentes.css` (rótulo empilhado sobre o campo) e RENDERIZOU ERRADO, com o
   rótulo AO LADO e o campo espremido em 146 px. O motivo é o defeito que a lei
   *"ordem de fonte não decide o que a especificidade deveria decidir"* nomeia:
   `.cmp` está declarado DUAS vezes com o mesmo peso — `componentes.css:244`
   (`flex`, coluna) e `modal.css:841` (`grid`, `168px minmax(0,1fr)`, a lista de
   definições do dossiê) —, e `modal.css` carrega depois. O nome `.cmp` é do
   dossiê na prática, e a regra de `componentes.css` não ganha de ninguém.
   ⚠ E NENHUMA VARREDURA PEGA: `conferir_ds` confere classe sem regra e regra sem
   consumidor, e aqui os dois lados existem. A tela fica *quase* certa.
   ⚠ A regra da peça mora na folha da peça — e o campo do login é do login. */
.lg__cp { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
/* a linha do rótulo, com a saída de emergência à direita quando ela existe */
.lg__cp-t { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); }
/* 13 px, e nao 12: o campo abaixo dele passou a 16 px, e um rotulo de 12 sobre
   um campo de 16 le como legenda de rodape em vez de nome do campo. A Stripe
   usa 14/300 sobre campo de 16; a escala deste produto e mais fechada. */
.lg__cp-r { font-size: 13px; font-weight: 550; color: var(--fg2); }
.lg__aj { font-size: 11.5px; color: var(--fg3); line-height: 1.45; }

/* ⚠ *ESQUECI MINHA SENHA* DEIXOU DE SER BOTÃO DE LARGURA TOTAL. Ele era um
   `.lg__lk` de 100% logo abaixo do primário — dois blocos do mesmo tamanho, um
   em cima do outro, e o secundário com o mesmo peso visual do único ato que a
   tela quer. Aqui ele é o que sempre foi: a saída de quem não lembra da senha,
   ancorada NO CAMPO DA SENHA, onde a dúvida acontece.
   ⚠ O ALVO DE TOQUE CRESCE POR ÁREA no fim do arquivo — a caixa é uma linha de
   texto, e esticá-la a 44 px empurraria o rótulo para fora da própria linha. */
.lg__esq {
  height: auto; padding: 0; border: none; background: none; flex: none;
  position: relative;
  font-size: 12px; font-weight: 500; color: var(--fg3);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--lin3);
}

/* ---------------------------------------------------------- a senha à vista -
   ⚠ O BOTÃO É ABSOLUTO DENTRO DO CAMPO, e o campo ganha calha à direita para
   ele. Sem o `padding-right` o texto passa POR BAIXO do ícone — e não falha:
   uma senha longa some atrás do olho, que é justamente o caso em que alguém
   clica para conferir o que digitou. */
.lg__sn { position: relative; display: flex; }
.lg__sn .inp { padding-right: 44px; }
.lg__olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* O AVISO DE CAPS LOCK.
   ⚠ SEM VERMELHO, como todo o resto desta tela — e neste caso nem sequer é
   erro: é um fato sobre o teclado. O canal é o ícone mais o texto.
   ⚠ `display` DECLARADO OBRIGA A DESFAZER O `[hidden]`: o atributo só esconde
   porque a folha do navegador diz `display: none`, e qualquer `display` nosso
   ganha dela por especificidade. Sem a segunda linha o aviso nasce visível e
   nunca some. */
.lg__caps { display: flex; align-items: flex-start; gap: 5px; }
.lg__caps[hidden] { display: none; }
.lg__caps .ico { color: var(--fg3); flex: none; margin-top: 1px; }

.lg__f { display: flex; flex-direction: column; gap: var(--e5); }

/* ⚠ 44 px E FONTE DE 16, E O 16 NÃO É ESTÉTICA — É O ZOOM DO iOS. O Safari em
   iPhone DÁ ZOOM na página ao focar um campo com `font-size` abaixo de 16 px, e
   não desfaz: a pessoa digita o e-mail e a tela fica ampliada e deslocada pelo
   resto do login. `viewport-fit=cover` sem `maximum-scale` (que é o certo, e é o
   que `index.html` faz) não impede isso — quem impede são os 16 px. É por isso
   que a Stripe, a Vercel e o Linear usam 16 px nos campos de login e 13/14 no
   resto do produto: **medido, os três**.
   ⚠ O RESTO DO PRODUTO NÃO MUDA. `.inp` continua 12,5 px em filtro, tabela e
   dossiê — lá o campo é instrumento entre outros, e a densidade é a lei. Aqui
   ele é O instrumento da tela.
   ⚠ E 44 px É O PISO DE TOQUE JÁ NO DESKTOP, então o bloco `pointer: coarse` do
   fim do arquivo não precisa mais mexer nele. */
.lg__f .inp { height: 44px; font-size: 16px; border-radius: var(--r-md); }

/* ============================================================ O PRIMÁRIO ====
   ⚠ ELE É O VIOLETA DA MARCA, E ESTA É A ÚNICA TELA DO PRODUTO EM QUE ISSO VALE.
   *(25/08/2026, decisão do operador, na segunda rodada.)*

   ⚠ ELE JÁ FOI LIME, POR UM DIA, E O LIME CAIU PELA MÃO DE QUEM PEDIU:
   *"a cor não combinou"*. O diagnóstico é de espécie, não de tom — **lime é o
   acento de DESTINO** (`--lime`, três donos desenhados), e acento em bloco de
   46×354 px deixa de ser acento; ao lado de um campo violeta ele briga em vez de
   compor. Medido nas três referências no mesmo dia: o CTA de login da Stripe, da
   Vercel e do Linear é **a cor da marca**, nunca a cor de acento.

   ⚠ A LEI QUE CEDE É UMA SÓ, e é *"ação primária é tinta `#15141A` — neutra, não
   disputa matiz com ninguém"*. O motivo escrito nela é que `b600` violeta é
   **território ANTT** e um botão roxo ao lado de uma linha roxa leria como se a
   ação pertencesse ao órgão. ⚠ **Em `#/entrar` não existe território nenhum** —
   não há ANTT, não há CTB, não há prazo, não há status. Não há com quem disputar.

   ⚠ A EXCEÇÃO É DE TELA, NUNCA DE COMPONENTE: quem muda é `.lg__bt`, e
   `.bt--pri` continua tinta em todo o resto do produto — onde o território
   existe e a razão da lei continua inteira.

   ⚠ OS DOIS TEMAS COM UMA DECLARAÇÃO SÓ, e é o que faz esta escolha ser barata:
   `--b600` vale `#6835D6` no claro e `#8B65F0` no escuro; `--acao-fg` vale
   `#FFFFFF` no claro e `#15141A` no escuro. Os dois invertem JUNTOS, então o par
   fecha nos dois lados sem um único `html[data-tema]`. Medido: **6,84:1 no claro
   e 4,55:1 no escuro** — os dois passam AA, e o claro passa com folga sobre o
   próprio violeta da Stripe (4,58:1).

   ⚠ E NÃO PRECISA DE BORDA DE CONTORNO, ao contrário do lime: `--b600` mede
   **6,27:1 contra o fundo `--bg`**, muito acima dos 3:1 que a WCAG 1.4.11 pede
   para o limite de um controle. O lime media 1,32:1 ali e precisava de aresta
   desenhada — o que já era o sinal de que ele não era a cor certa para um bloco.

   ⚠ GATILHO DE REVERSÃO: se o violeta aparecer como ação em qualquer SEGUNDA
   superfície, a exceção deixa de ser de tela e a lei volta a valer inteira.

   ⚠ `.bt--pri.lg__bt`, COM DOIS PESOS. `.bt--pri` pinta `background`,
   `border-color` e `color` em `componentes.css`, e um peso só empataria com ele —
   deixando a decisão para a ORDEM DAS FOLHAS, que é exatamente o que a lei
   proíbe. Mesmo motivo de `.app.app--nua` e `.app.recolhida`, em `casca.css`. */
.bt--pri.lg__bt {
  width: 100%; height: 46px; justify-content: center;
  font-size: 15px; font-weight: 550; letter-spacing: -.006em;
  border-radius: var(--r-md);
  background: var(--b600); border-color: var(--b600); color: var(--acao-fg);
  box-shadow: none;
}
/* a contagem dentro do botão acompanha o texto — `.bt--pri b` a pinta com
   `--acao-fg` diluído, e é isso que ela já é aqui. */
.bt--pri.lg__bt b { color: color-mix(in srgb, var(--acao-fg) 66%, transparent); }

.lg__lk { width: 100%; height: 38px; justify-content: center; color: var(--fg2); }

/* O GIRO DE ESPERA. Duração derivada de --t4 pelo dial --mo, como toda duração
   do sistema — nenhum milissegundo digitado em componente. Ele é a única
   animação contínua do produto, e a lei a permite exatamente aqui: "animação
   contínua serve para indicador de carga, e mais nada".
   ⚠ A COR SEGUE O TEXTO DO BOTÃO — `--acao-fg`, o mesmo par que o rótulo usa —,
   e por isso ela atravessou as duas trocas de cor do primário sem uma linha de
   ajuste. Digitar a cor aqui teria deixado um giro invisível sobre o botão novo,
   sem erro e sem console: foi o que quase aconteceu na passagem pelo lime. */
.lg__sp {
  width: 15px; height: 15px; flex: none;
  border: 2px solid color-mix(in srgb, var(--acao-fg) 30%, transparent);
  border-top-color: var(--acao-fg); border-radius: 50%;
  animation: lgGira calc(var(--t4) * var(--mo) * 1.4) linear infinite;
}
@keyframes lgGira { to { transform: rotate(360deg); } }

/* O MESMO GIRO, NO BOTÃO DE CONFIGURAÇÕES — e a diferença é a COR.
   *(26/08/2026, o gesto em voo de `telas/config/comum.js`.)*

   ⚠ ELE HERDA `currentColor`, E `.lg__sp` NÃO PODIA. Aquele é do cartão de
   entrada, onde todo botão que espera é `.bt--pri` — a cor sai de `--acao-fg`,
   que é o par do primário. Os vinte gestos de Config disparam de botões de
   TODOS os feitios: `.bt--pri`, o secundário de *Cadastrar dia*, o fantasma de
   *Remover*. Com `--acao-fg` fixo, o giro sairia BRANCO sobre um botão claro em
   metade deles — invisível, sem erro e sem console, exatamente na peça que
   existe para ser vista.

   ⚠ E É `em`, NÃO PIXEL: o botão pequeno (`.bt--peq`) e o normal têm corpos
   diferentes, e um giro de 15 px fixo estoura a altura do primeiro.

   ⚠ A ANIMAÇÃO É A MESMA `lgGira`, de propósito — uma keyframe por giro seria a
   segunda definição do mesmo movimento, e elas divergiriam na primeira troca de
   duração. O `@media (prefers-reduced-motion)` logo abaixo cobre as duas. */
.cfg__sp {
  width: 1em; height: 1em; flex: none; margin-right: 1px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: lgGira calc(var(--t4) * var(--mo) * 1.4) linear infinite;
}

.lg__err {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--sup2); border: 1px solid var(--lin3);
  font-size: 12.5px; font-weight: 500; color: var(--fg); line-height: 1.45;
}
.lg__err .ico { color: var(--fg2); flex: none; margin-top: 1px; }

/* O PÉ, E ELE VIVE FORA DO CARTÃO — é irmão dele, não filho.
   ⚠ ELE JÁ FOI FILHO, com um fio de 1 px por cima para se separar da ação. As
   duas coisas caíram juntas e por um motivo só: a frase não é conteúdo do
   formulário, é uma condição da CONTA, e enfiá-la dentro da caixa obrigava uma
   régua horizontal para dizer isso — chrome desenhado para consertar um
   aninhamento errado. Fora, quem a separa é o `gap` que `.pg__in` já tem
   (`--e6`, em `casca.css`), e ela lê como o que é: nota de rodapé da página.
   ⚠ CENTRADO porque agora ele é da PÁGINA e não da caixa: alinhado à esquerda,
   um texto solto embaixo de um cartão lê como se tivesse escapado dele. */
.lg__nota {
  text-align: center; max-width: 34em; margin: 0 auto;
  font-size: 11.5px; color: var(--fg3); line-height: 1.5;
}

/* ------------------------------------------------------------- bloqueio ---
   O contador é o único número desta tela, e ele é MONO com tabular-nums: sem
   isso os dígitos mudam de largura a cada segundo e a caixa treme. */
.lg__bl {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4); border-radius: var(--r-sm);
  background: var(--sup2); border: 1px solid var(--lin2);
}
.lg__bl-t { display: flex; align-items: center; gap: var(--e3); }
.lg__bl-t b { font-size: 12.5px; line-height: 1.4; }
.lg__bl p { font-size: 12px; color: var(--fg2); line-height: 1.5; }
.lg__cd {
  margin-left: auto; font-family: var(--fm); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 500; color: var(--fg); letter-spacing: .02em;
}

/* ⚠ O BLOCO DE ANDAIME DO PROTÓTIPO MORREU EM 24/08/2026, com a T2 da frente
   de acesso — `.lg__prot-cx`, `.lg__prot`, `.lg__lkin`, `.lg__contas` e
   `.lg__conta`. Ele era a lista de CONTAS DE DEMONSTRAÇÃO do arnês, e o arnês
   foi para `OLD_PROTÓTIPO/`. **Uma tela de login real não lista contas.**

   ⚠ E a remoção não foi opcional: ao tirar `"lg"` de
   `conferir_ds.py:PENDENTES_ACESSO`, a varredura passou a cobrar consumidor de
   TODA a família — e estas cinco não teriam nenhum. É o mesmo mecanismo que
   cobrou a saída de `cfg__oculto` e `cfg__etq-av` em 21/08. */

/* -------------------------------------------------------- o código e o pé ---
   O CAMPO DO CÓDIGO É O `.inp--mono` DE `componentes.css`, e nenhuma classe
   nasce para ele: o que ele precisa — fonte mono e espaçamento de letra — a
   peça compartilhada já dá, e a altura de 36 px vem do `.lg__f .inp` acima. */
.lg__pe { font-size: 12px; color: var(--fg2); line-height: 1.5; }

/* ---------------------------------------------- a lista de organizações ---
   ⚠ NEM `.bt--pri.lg__bt` NEM `.lg__lk` SERVEM: o primário é para UMA ação por
   tela e não tem como marcar qual das 2 a 5 linhas é "a" ação, porque nenhuma
   é; o link secundário é leve demais para a ação principal deste momento.
   ⚠ A ELEVAÇÃO NÃO SE REDIGITA: `.cx`/`.cx--clic` (base.css) JÁ SÃO "repouso =
   leitura, resposta = ação" — o mesmo par que `painel.js` usa em `leit__c`.
   `.lg__org` só acrescenta o LAYOUT da linha; a peça compõe com as duas, nunca
   as substitui — um segundo relógio de hover aqui seria a mesma regra escrita
   duas vezes. */
.lg__org {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  width: 100%; height: var(--e8); padding: 0 var(--e5);
  font-size: 14px; font-weight: 550; color: var(--fg); text-align: left;
}
.lg__org .ico { color: var(--fg3); flex: none; }
.lg__org[disabled] { opacity: .45; pointer-events: none; }

/* ------------------------------- a senha da troca de organização, no avatar -
   ⚠ NENHUMA REGRA DE `.menu` (componentes.css) COBRE `<input>` OU `<form>` —
   até aqui nenhum painel de `#menus` continha campo, só botão e busca. `.inp`
   já dá o campo (componentes.css); falta só o recuo que `.menu button` dá de
   graça a toda linha (`7px 9px`), que um `<input>` cru não herda.
   ⚠ SELETOR DE ATRIBUTO, E NÃO CLASSE NOVA: o hook já existe no JS
   (`data-form="trocar-organizacao"`), e uma classe a mais seria o mesmo nó com
   dois nomes. */
.menu [data-form="trocar-organizacao"] {
  display: flex; flex-direction: column; gap: var(--e2); padding: 7px 9px;
}
.menu [data-form="trocar-organizacao"] .inp { height: 32px; }
.menu [data-form="trocar-organizacao"] button { padding: 7px 0; }

/* ==========================================================================
   2 · #/config — o bloco de leitura, as três abas
   ========================================================================== */

/* As abas moram na chapa do cabeçalho, como as lentes da Concentração: chips
   soltos sobre a arte de fundo perdem contorno, e a grade de pontos atravessa
   o rótulo. */
.cfg__abas { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

/* ---------------------------------------- o que está na sua consultoria ---
   SEM COR E SEM ALARME. É educação disponível para quem procura — um selo
   permanente ao lado do tipo vira paisagem em uma semana e não impede nada.
   O que separa "dentro" de "fora" é a FORMA do nó, não matiz. */
.cfg__cob { display: flex; flex-direction: column; gap: var(--e4); }
.cfg__cob-cab { display: flex; flex-direction: column; gap: 3px; }
.cfg__cob-cab > b { font-size: 13px; font-weight: 600; }
/* TRÊS colunas desde 09/10/2026 — consultoria, consultoria pontual, indicação. */
.cfg__cob-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); }
.cfg__cob-c { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.cfg__cob-c > b { font-size: 12.5px; font-weight: 600; }
.cfg__cob-l { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cfg__cob-l > .rot { width: 100%; }
.cfg__cob-t {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: var(--pill);
  background: var(--sup2); border: 1px solid var(--lin2);
  font-size: 11.5px; color: var(--fg);
}
.cfg__cob-t::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg2); flex: none;
}
.cfg__cob-t--fora { color: var(--fg3); }
.cfg__cob-t--fora::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lin3); }
.cfg__cob-t > i { font-style: normal; font-family: var(--fm); font-size: 10.5px; color: var(--fg3); }

/* ------------------------------------------------------------ formulário --
   D7 · SEM FUNDO E SEM BORDA — ele era CARTÃO DENTRO DE CARTÃO. *(23/08/2026.)*
   `--sup2` mais fio de 1 px dentro de um `.cx` branco: a superfície recuada não
   significava nada ali, e a lei diz que **elevação é hierarquia, não decoração**.
   Ele é a LINHA DE CONTROLES do `.cx__b`, e quem o separa do que vem depois é o
   fio que a peça de baixo já tem — `.cfg__t` nasce com `border-top`.

   ⚠ `.pso` MANTÉM a superfície recuada, e a diferença não é de gosto: ele é um
   PASSO DE DECISÃO sobreposto ao fluxo — *"o que fazer com os 20 autos"* —, não
   um formulário. Ali a elevação significa alguma coisa. */
.cfg__f {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e4); align-items: end;
  margin-bottom: var(--e5);
}
.cfg__f--larga { grid-column: 1 / -1; }
/* A ÂNCORA DA RECUSA DA PLACA — ela existe para o ouvinte de `input` poder
   apagar a mensagem sem redesenhar, e `display: contents` é o que a torna
   invisível para a grade. *(24/08/2026, medido nas duas formas.)* Como `<div>`
   comum ela vira item de grid: a mensagem encolhe para uma coluna (359 px numa
   linha de 1.102) porque o `.cfg__f--larga` do `<p>` deixa de valer, e a âncora
   VAZIA come uma trilha — `.cfg__f` foi de 148 para 160 px sem nada na tela. */
.cfg__f-msg { display: contents; }
.cfg__f-ac { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--e3); }

/* ---- o exemplo em datas, na aba *Prazos* ------------------------------
   A TABELA QUE RESPONDE *"e se cair num sábado?"* SEM O CLIENTE SIMULAR NA
   CABEÇA. *(10/09/2026, decisão do operador.)* Duas colunas: o prazo do órgão e
   o que o painel mostra, nas datas de verdade dos próximos dias.

   ⚠ SÃO DUAS TRILHAS, E NÃO AS QUATRO DE `.cfg__tl`. A linha de tabela desta
   tela é um grid de quatro trilhas fixas, e uma linha com dois filhos joga o
   conteúdo na coluna errada — reusá-la aqui custaria duas células vazias por
   linha para caber num desenho que não é o desta peça.

   ⚠ O CABEÇALHO É `.rot`, a mesma etiqueta das outras colunas da tela: sem ele
   as duas datas ficam lado a lado sem dizer qual é qual, que é exatamente a
   dúvida que a tabela existe para matar. */
/* O NINHO — o segundo interruptor mora DENTRO do primeiro, e a régua à esquerda
   é o que diz isso sem uma frase. *(10/09/2026.)* Os 38 px são medidos, não
   escolhidos: `.sw` tem 30 e a `gap` de `.cfg__gat-int` é `--e3` (8), então o
   ninho começa exatamente onde começa o RÓTULO do interruptor de cima. */
.cfg__nin {
  grid-column: 1 / -1; margin-left: 38px;
  padding-left: var(--e4); border-left: 2px solid var(--lin2);
  display: flex; flex-direction: column; gap: var(--e3);
}
/* O CAMPO NÃO ESTICA A CAIXA INTEIRA. Fora do ninho ele era item de `.cfg__f`,
   um grid de duas trilhas, e nascia com METADE da largura; aqui o pai é flex em
   coluna, e sem o teto ele atravessa o cartão para pedir um número de um dígito.
   ⚠ É `max-width` e não `width`: no telefone a caixa é mais estreita que 220 px,
   e uma largura fixa vazaria para fora dela. */
.cfg__nin > .col { max-width: 220px; }
.cfg__ex {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e2) var(--e4);
  padding: var(--e3); border-radius: var(--r-xs);
  background: var(--sup); border: 1px solid var(--lin2);
}
.cfg__ex-o { font-size: 12.5px; color: var(--fg2); }
.cfg__ex-e { font-size: 12.5px; color: var(--fg); font-weight: 600; }
/* O dia da semana ao lado da data pesa menos que ela: é ele que diz POR QUE a
   linha muda, mas quem o operador procura é o número. */
.cfg__ex-o i, .cfg__ex-e i { font-style: normal; font-weight: 400; color: var(--fg3); }

/* O GATILHO DO SUSPENSO, COM A ALTURA DO CAMPO AO LADO. *(D3, 23/08/2026.)*
   O `<select class="sel">` nu media **19 px ao lado de campos de 32** — `.sel`
   declara SÓ `appearance: none` e a seta, e a caixa vem do `.inp`, que Config
   não escrevia. Ele morreu, e no lugar entrou o suspenso do produto: `menu()`
   mais o gatilho de `sel.gatilho()`, que é a mesma peça das nove dimensões.

   ⚠ AS TRÊS PROPRIEDADES SÃO CONTEXTUAIS, E NENHUMA CLASSE NASCE. `.chip` é de
   `componentes.css` e `.chip--sel` de `telas.css`; o que muda aqui é só o que a
   CÉLULA DO FORMULÁRIO exige — mesma altura do `.inp` irmão (a lei *"controle na
   mesma linha tem a mesma altura"*), largura de campo (solto, ele ocupava 43% da
   célula e caía 13 px abaixo dos irmãos) e o raio do campo, não o da pílula. É a
   mesma forma que `.lg__f .inp { height: 36px }` já usa nesta folha. */
/* ⚠ `.cfg__gat-ef` ENTROU MEDINDO, em 24/08/2026, e e a MESMA falha da D3 pela
   segunda vez: a regra estava no arquivo e nao cobria o alvo. Medido no editor de
   gatilhos, lado a lado na mesma peca — o campo do nome em **283x32, raio 7 e
   borda `--lin2`**; o gatilho do suspenso em **99x28, raio de PILULA e borda
   `--lin`**. Dois controles do mesmo formulario com duas especies de aparencia,
   e nada falhava. */
.cfg__f .chip--sel, .pso .chip--sel, .cfg__gat-ef .chip--sel {
  width: 100%; height: 32px; justify-content: space-between;
  border-radius: var(--r-sm); font-size: 12.5px; color: var(--fg);
  /* ⚠ `--lin2`, E NÃO O `--lin` QUE `.chip--sel` TRAZ. *(23/08/2026, achado
     pelo operador: "os selects têm uma sombra diferente dos inputs".)* Medido na
     mesma linha da aba *Placas*: o `.inp` tinha borda `--lin2`, o gatilho de data
     tinha `--lin` (mais clara) e o do suspenso tinha `--lin2` MAIS a sombra `sh1`
     do `.chip.on` — **três aparências para três controles da mesma linha**. Aqui
     eles são campos de formulário, e campo de formulário é `.inp`. */
  border-color: var(--lin2);
}
.cfg__f .chip--sel .ico, .pso .chip--sel .ico,
.cfg__gat-ef .chip--sel .ico { margin-left: var(--e2); }
/* O hover também é o do `.inp` — `.chip--sel:hover` para em `--lin2`, que aqui
   é o repouso: sem isto o campo não reagia ao cursor e o irmão ao lado reagia. */
@media (hover: hover) {
  .cfg__f .chip--sel:hover, .pso .chip--sel:hover,
  .cfg__gat-ef .chip--sel:hover { border-color: var(--lin3); }
}

/* ------------------------------------------ o passo dos três destinos -----
   Só aparece quando há itens daquela placa: sem itens não há pergunta, e um
   passo que sempre aparece vira clique obrigatório sem informação. */
.pso {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4); margin-bottom: var(--e4);
  background: var(--sup2); border: 1px solid var(--lin2); border-radius: var(--r-sm);
}
.pso__cab { display: flex; flex-direction: column; gap: var(--e2); }
.pso__cab > b { font-size: 13.5px; line-height: 1.35; }
.pso__cab > .md { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pso__o {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: var(--e3); text-align: left;
  padding: 11px 12px; border-radius: var(--r-sm);
  background: var(--sup); border: 1px solid var(--lin2);
  transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.pso__o .rd { margin-top: 2px; }
.pso__o.on { border-color: var(--acao); box-shadow: 0 0 0 1px var(--acao); }
.pso__o b { font-size: 12.5px; font-weight: 600; }
.pso__e { font-size: 11.5px; color: var(--fg2); line-height: 1.5; }
.pso__n { font-size: 11.5px; color: var(--fg3); white-space: nowrap; font-family: var(--fm); }
.pso__pad {
  font-style: normal; font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fg3); margin-left: 5px;
}
.pso__ac { display: flex; justify-content: flex-end; gap: var(--e3); }

/* ----------------------------------------------------- tabela simples -----
   D1 · UMA GRADE SÓ, POR `subgrid` — e é a queixa original do operador, na forma
   medida. *(23/08/2026.)* `.cfg__t` era `display: flex`, então **cada `.cfg__tl`
   era um grid INDEPENDENTE** e as trilhas não conversavam entre linhas: 19 linhas
   da aba *A empresa* produziam **8 arranjos de coluna distintos**, o campo de
   apelido tinha **7 larguras (729 a 772 px)** e o cabeçalho não ficava sobre
   coluna nenhuma — `28/933/69/35` contra `138/729/139/60` na primeira linha.
   Com as trilhas no CONTÊINER e `subgrid` na linha, medido: **144/725/155/78, uma
   grade só, e uma largura de input**.

   ⚠ OS DOIS `minmax()` DO FIM NÃO SÃO ENFEITE — SEM ELES A CORREÇÃO TROCA UM
   SALTO POR OUTRO MAIOR. `linhaDoCnpj` emite a célula da contagem como
   `${api.pronto() ? … : ''}`, e `max-content` de vazio é ZERO: com
   `… max-content max-content` as trilhas iam de `144/810/81/66` durante a carga
   para `144/741/151/66` depois — **o input saltava 69 px em TODA abertura da
   aba**, sem ninguém tocar em nada. Com os pisos, `144/725/155/78` nos dois
   momentos: **salto 0**. É *"reserve espaço para conteúdo assíncrono"* (CLS).
   ⚠ O PISO VAI EM `ch`, NUNCA EM `px`: `ch` deriva da métrica da própria fonte,
   e px digitado aqui é o que este projeto chama de cota falsa.

   ⚠ `column-gap`, E NÃO `gap`: com `gap` o contêiner separaria as LINHAS em
   12 px além do fio que cada uma já tem, e a tabela viraria uma lista espaçada.
   A linha herda a calha de coluna do pai, que é como `subgrid` funciona. */
.cfg__t {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr)
                         minmax(18ch, max-content) minmax(9ch, max-content);
  column-gap: var(--e4); border-top: 1px solid var(--lin);
}
.cfg__tl {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--lin);
}
/* ⚠ O PASSO MORA DENTRO DA TABELA, e com o contêiner virando grid ele passou a
   ser ITEM DE GRID — colapsaria na primeira trilha, com as duas opções e os dois
   números espremidos em 144 px. `abaEmpresa` emite
   `linhaDoCnpj(…) + (inativando === e.cnpj ? passoDeInativar(…) : '')` DENTRO do
   `<div class="cfg__t">`, e a comparação entre as duas opções — a única razão de
   elas estarem lado a lado — morreria. Nada falha; a tela só fica torta. */
.cfg__t > .pso { grid-column: 1 / -1; }
/* A LINHA CUJO EDITOR ESTÁ ABERTO. *(31/08/2026, com o editor da frota indo
   para dentro da tabela.)* Sem ela, a linha e o bloco que ela abriu ficam com
   dois fundos diferentes e nada dizendo que são o mesmo assunto — e o fio de
   `border-bottom` da linha ainda os separa, que é o oposto do que se quer. */
.cfg__tl--ab { background: var(--sup2); border-bottom-color: transparent; }
/* ⚠ NÃO SE TOCA, E NÃO SE APAGA. Ela é do *"Pedir acesso para alguém"*, que saiu
   para `antes-do-mvp.md` item 14, e está em `PENDENTES_ACESSO` de
   `manage.py conferir_ds` — que reprova NOS DOIS SENTIDOS. Ela sobrescreve o
   `subgrid` com trilhas próprias, e é assim que a task dona vai encontrá-la. */
.cfg__tl--ped { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.cfg__tn { justify-self: end; font-size: 11.5px; color: var(--fg3); white-space: nowrap; }
.cfg__tac { display: flex; align-items: center; gap: var(--e2); justify-self: end; }

/* D8 · O IDENTIFICADOR DA LINHA GANHA SUPERFÍCIE. *(23/08/2026.)* CNPJ e código
   da infração eram `<span class="mono">` cru — 31 px, o mesmo peso do resto —, e
   quem varre a lista não achava onde a linha começa: *"o CNPJ tá solto sem o
   destaque"*.

   ⚠ NÃO SE REAPROVEITA `.placa`, e a recusa é a lei dos DOIS DONOS PARA UM NOME
   — a mesma que já custou caro neste projeto no `z-index` literal, no `.trj*` e
   no `.sel`. `.placa` é a PLACA DE VEÍCULO: ela imita o objeto físico, tem
   `letter-spacing: .06em`, e está em uso a três linhas daqui, na lista de placas
   ignoradas. Usá-la para um CNPJ faria as duas divergirem no primeiro ajuste.

   ⚠ `justify-self: start` PORQUE ISTO É ITEM DE GRID. A trilha 1 é `max-content`
   — a largura do conteúdo mais largo da coluna —, e sem ele o chip de um CNPJ
   curto esticaria até a borda da trilha. `flex: none` não vale em grid: é lei.

   O `font-family` NÃO mora aqui: quem o traz é `.mono`, composta no markup. A
   família da ANTT (*"Excesso de peso"*) usa a mesma superfície e o texto normal —
   um nome de família em mono leria como código, e a ANTT não publica código. */
/* ⚠ O `gap` ENTROU COM A ABA *FROTAS* (31/08/2026), e ele é inerte nos dois
   consumidores antigos: CNPJ e código da infração passam UM filho de texto, e
   `gap` sobre um filho só não separa nada. A frota passa ícone + nome, e é ela
   que precisa dos 5 px — sem eles o `i-frota` encosta na primeira letra. */
.cfg__id {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
  height: 24px; padding: 0 8px; white-space: nowrap;
  font-size: 11.5px; font-weight: 500; color: var(--fg);
  background: var(--sup2); border: 1px solid var(--lin2); border-radius: var(--r-xs);
}

/* ============================================== usuários e papéis ========= */
.usr__l { display: flex; flex-direction: column; border-top: 1px solid var(--lin); }
.usr {
  display: grid; grid-template-columns: auto minmax(140px, 1fr) minmax(0, 2fr) auto;
  align-items: center; gap: var(--e4);
  padding: 12px 0; border-bottom: 1px solid var(--lin);
}
/* A PRÓPRIA LINHA NÃO TEM CONTROLE NENHUM, e é isso que torna o travamento
   impossível por construção. O que ela tem no lugar é o motivo escrito. */
.usr--eu { background: var(--sup2); box-shadow: inset 3px 0 0 var(--b600); padding-left: var(--e4); }
.usr--off { opacity: .66; }
.usr__vc {
  font-style: normal; font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fg3); margin-left: 6px;
}
.usr__mot { font-size: 11px; color: var(--fg3); line-height: 1.45; max-width: 210px; justify-self: end; }
.usr__p { display: flex; align-items: flex-start; gap: var(--e5); flex-wrap: wrap; }
.usr__pi { display: flex; align-items: flex-start; gap: var(--e2); font-size: 11.5px; color: var(--fg); }
.usr__pi .sw { margin-top: 1px; }
.usr__cq { font-style: normal; font-size: 10.5px; color: var(--fg3); line-height: 1.4; max-width: 168px; }
/* o interruptor da própria linha existe para LER o estado, e não responde: sem
   `pointer-events` ele pareceria clicável e não seria — o pior dos dois. */
.sw--off { opacity: .5; pointer-events: none; }
.usr__av { align-items: center; }
.usr__av .bt { margin-left: auto; flex: none; }

/* --------------------------------------------------------- pedir acesso --- */
.cfg__pa { margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--lin); }
.cfg__pa-cab { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--e4); }
.cfg__pa-cab > b { font-size: 13px; font-weight: 600; }
.cfg__pa-p { display: flex; flex-direction: column; gap: var(--e3); }
.cfg__pa-p .opt { align-items: flex-start; text-align: left; }
.cfg__pa-p .ck { margin-top: 1px; }

/* ------------------------------------------------------------- frotas ----
   A aba *Frotas* (31/08/2026). ⚠ O QUE NASCE AQUI É SÓ O QUE AS PEÇAS QUE JÁ
   EXISTEM NÃO RESOLVEM: a aba emite `.cfg__f`, `.cfg__f-ac`, `.cfg__t`,
   `.cfg__tl`, `.cfg__tn`, `.cfg__tac`, `.cfg__id`, `.col`, `.rot`, `.inp`,
   `.bt`, `.fchip`, `.mono` e `.avi`, todas de fora. Inventar família nova sem
   necessidade é fundar a classe órfã pelo avesso, e `conferir_ds` varre todos
   os `.css` procurando exatamente isso — nos DOIS sentidos.

   ⚠ ESTE BLOCO DIZIA *"TRÊS CLASSES E MAIS NENHUMA"* ATÉ O REDESENHO DE
   31/08/2026, e o número subiu porque a aba parou de espremer três formas
   diferentes dentro de `.cfg__f`: as três portas da caixa, o editor que agora
   mora dentro da tabela, e a linha do balanço. Cada uma tem contêiner próprio
   porque cada uma tem uma TRILHA diferente — que é a mesma razão pela qual
   `.cfg__frt-ch` já existia. */

/* A FAIXA DE CHIPS — as placas da caixa e as sugestões. ⚠ ELA NÃO É `.cfg__f`,
   e a diferença é a trilha: `.cfg__f` é grade de TRÊS colunas fixas, e trinta
   chips nela sairiam em três colunas esticadas de larguras iguais em vez de
   fluírem. `:empty` some para não deixar um vão de `gap` sobre nada. */
.cfg__frt-ch { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cfg__frt-ch:empty { display: none; }

/* O CHIP DA PLACA QUE JÁ ESTÁ GRAVADA — a variante neutra de `.fchip`.
   *(31/08/2026.)* `.fchip` é a peça de *"item escolhido, removível"* e nasce no
   acento: aqui o acento passa a significar **o que vai entrar**, e a placa que
   já estava recua para a superfície neutra. Sem a distinção, colar uma lista de
   40 num cadastro de 38 devolve 40 chips idênticos e a frase do balanço vira a
   única forma de saber o que mudou.

   ⚠ O FUNDO É `--sup`, E NÃO `--sup2` COMO NA PRIMEIRA FORMA. Medido na tela em
   31/08: o editor pousa em `--sup2`, então um chip `--sup2` tinha **exatamente**
   o fundo do chão em que estava — `rgb(242,239,248)` dos dois lados —, e só a
   borda o desenhava. Chip sem superfície não lê como chip. `--sup` sobe no
   claro e DESCE no escuro, e nos dois casos ele é o degrau que existe: a peça é
   um objeto sobre a superfície recuada, não um recorte dela.

   ⚠ A SEGUNDA REGRA NÃO É REDUNDANTE: `html[data-tema="escuro"] .fchip` vale
   (0,2,1) e ganharia de `.fchip--fixa` sozinho, (0,1,0) — no escuro o chip
   voltaria ao acento e a distinção sumiria, sem nada falhar. */
.fchip--fixa { background: var(--sup); color: var(--fg2); border-color: var(--lin2); }
html[data-tema="escuro"] .fchip--fixa {
  background: var(--sup); color: var(--fg2); border-color: var(--lin2);
}

/* A CAIXA DE COLAR. ⚠ `min-height` E NÃO `rows` SOZINHO: o `rows` do HTML é
   sobrescrito por qualquer `height` herdado do `.inp`, e o campo nascia com uma
   linha — é a mesma correção que `.atv__tx` carrega escrita em `modal.css`. */
.cfg__frt-tx { min-height: 84px; resize: vertical; }

/* O CAMPO DE ARQUIVO — forma literal de `.atv__arq`, e as três armadilhas que
   ela documenta valem igual aqui:
     1. **caixa dentro de caixa** — o campo com borda e raio e o botão NATIVO
        dentro dele com outra borda e outro raio, dois enquadramentos para um
        controle só;
     2. **o texto é do navegador e vem na língua dele** — medido no card:
        *"Escolher Ficheiros"* / *"Nenhum ficheiro selecionado"*, em **pt-PT**,
        num produto cuja lei de vocabulário diz **arquivo**. Não existe
        propriedade de CSS que troque esse texto;
     3. **a largura herdada de campo de TEXTO** — o campo media 380 px por
        conter a frase nativa, e aqui o conteúdo é um rótulo curto de ação.

   ⚠ `inset: 0` COBRE O `padding` DO `.inp`, e é por isso que a área de clique é
   o campo todo. Sem ele sobrariam ~10 px mortos de cada lado, e alvo com buraco
   na borda é pior que alvo pequeno: ele funciona quase sempre. */
.cfg__frt-arq { position: relative; cursor: pointer;
                display: flex; align-items: center; gap: var(--e2); }
.cfg__frt-arq > .ico { flex: none; color: var(--fg3); }
.cfg__frt-arq-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg__frt-arq-in { position: absolute; inset: 0; width: 100%; height: 100%;
                   opacity: 0; cursor: pointer; }
.cfg__frt-arq:focus-within { border-color: var(--b400); box-shadow: var(--anel); }

/* AS TRÊS PORTAS, LADO A LADO. *(31/08/2026.)*
   ⚠ NÃO É `.cfg__f`, e de novo a razão é a trilha: `.cfg__f` alinha por
   `align-items: end` para que campo e botão dividam a mesma linha de base, e
   aqui cada coluna tem ALTURA PRÓPRIA — a do meio tem uma área de texto, a da
   direita tem uma frase de duas linhas. Com `end` as três nasceriam alinhadas
   pelo pé e os rótulos apareceriam em três alturas diferentes.

   ⚠ OS FIOS SEPARAM AS PORTAS, e existem porque elas são ALTERNATIVAS: sem
   nada entre elas, três colunas de formulário leem como um formulário de três
   campos que se preenchem juntos. Um fio diz *ou*. */
.cfg__frt-p {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e5); align-items: start; margin-bottom: var(--e5);
}
.cfg__frt-porta { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
/* ⚠ O FIO É `--lin2`, E NÃO O `--lin` DAS TABELAS. O editor pousa em `--sup2`, e
   `--lin` sobre `--sup2` (#EBEAF0 sobre #F2EFF8) é praticamente o mesmo cinza —
   o separador existia no CSS e não existia na tela. É o mesmo achado que
   `.seg` documenta sobre a calha: *"a pílula simplesmente não existia"*. */
.cfg__frt-porta + .cfg__frt-porta { border-left: 1px solid var(--lin2); padding-left: var(--e5); }
/* ⚠ `align-self: flex-start` E NÃO `width: max-content`: o botão é filho de um
   flex em coluna, e a coluna estica os filhos por padrão — sem ele, *Acrescentar*
   volta a sair com a largura inteira da porta, que é o defeito que este
   redesenho existe para consertar, um nível abaixo. */
.cfg__frt-porta > .bt { align-self: flex-start; }

/* O EDITOR DA FROTA ABERTA, DENTRO DA TABELA.
   ⚠ `grid-column: 1 / -1` NÃO É OPCIONAL — mesma lei de `.cfg__t > .pso`, e o
   mesmo modo de falha: `.cfg__t` é grid, então um filho sem a regra colapsa na
   primeira trilha, que é `max-content` do nome da frota. Nada falha; o editor
   inteiro sai espremido em ~140 px.

   ⚠ O FILETE À ESQUERDA LIGA O EDITOR À LINHA QUE O ABRIU. É a mesma marca de
   `.usr--eu`, pela mesma razão: um bloco recuado solto entre duas linhas de
   tabela não diz de QUAL linha ele é. Aqui o fio e a superfície recuada
   respondem isso sem uma palavra. */
.cfg__frt-ed {
  grid-column: 1 / -1;
  margin: 0 0 var(--e4); padding: var(--e5);
  background: var(--sup2); border: 1px solid var(--lin2);
  border-radius: var(--r-md); box-shadow: inset 3px 0 0 var(--b600);
}
.cfg__frt-ed-cab {
  display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap;
  margin-bottom: var(--e5);
}
.cfg__frt-ed-cab > b { font-size: 13px; font-weight: 600; }

/* A CAIXA REVISÁVEL — o rótulo com a contagem e a faixa de chips embaixo.
   ⚠ A CONTAGEM É `.rot`, a mesma peça que rotula os campos das portas logo
   acima: a caixa é o RESULTADO das três, e um `<b>` de outra família ali abriria
   um segundo nível de título dentro do editor. */
.cfg__frt-cx { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e5); }

/* A LINHA DOS TRÊS NÚMEROS — *"3 placas entram · 9 já estavam · 1 sai"*. */
.cfg__frt-bal { font-size: 12.5px; color: var(--fg2); margin-bottom: var(--e3); }
.cfg__frt-bal b { color: var(--fg); font-weight: 600; }

/* ------------------------------------------- importar planilha (`#mod`) ---
   A tela de pré-visualização da planilha. ⚠ ELA MORA NESTA FOLHA, e não em
   `modal.css`: o que ela reusa de lá é a CASCA — `.mod__cx`, `.mod__cab`,
   `.mod__b`, `.mod__gd--1`, `.mod__esq`, `.mod__rod` — e a LISTA DE OPÇÕES
   (`.mudar__l`/`.mudar__o`, o seletor de status do card). O miolo é da aba
   *Frotas*, que é de Configurações.

   ⚠ **QUINTA FORMA, 31/08/2026 — e a lápide das quatro anteriores está no
   `diario.md` daquele dia.** A quarta caiu com o arquivo REAL na tela: 64
   colunas e 3.431 linhas viraram **uma parede de ~40 pílulas** — faixa de 64
   chips de coluna, três fileiras de chips de valor e um parágrafo de prosa
   listando o que ficou de fora. *"Olha a poluição visual que ficou."*

   ⚠ **QUASE NADA AQUI É PEÇA NOVA, e isso saiu de levantamento.** A linha de
   resumo com editor embutido é `.cfg__t`/`.cfg__tl` — `subgrid` de quatro
   trilhas, `.cfg__tn` para o número, `.cfg__tac` para as ações, `.cfg__tl--ab`
   para a linha aberta —, exatamente como a aba *Frotas* já faz, e o responsivo
   dela (`.cfg__t` em duas trilhas a 768) vem de graça. A lista de opções é
   `.mudar__l`/`.mudar__o`, que **já vive dentro de `#mod`** e já ganha 44 px no
   toque. O campo de busca é `.inp`.

   ⚠ **MORRERAM AQUI, e não voltam:** `.imp__bar`, `.imp__cab-l`, `.imp__cols`
   (a faixa de 64 chips de coluna), `.imp__fil`, `.imp__lin`, `.imp__fl*` (a
   oferta de valores em fileiras) e `.imp__dest`. Antes delas já haviam morrido
   `.imp__pn`, `.imp__pnc`, `.imp__fil-c`, `.imp__vals`, `.imp__val` e
   `.imp__val--col`. **`.mod__rod--imp` saiu junto por outro motivo:** ela
   existia para dar 44 px aos botões do rodapé, e `modal.css` já dá isso a
   `#mod .bt` — era regra que reafirmava o que já valia. */

/* A TABELA DAS TRÊS DECISÕES. ⚠ ELA É UM `.cfg__t` COM NOME PRÓPRIO, e o nome
   existe só para o `margin-bottom`: a peça inteira vem de Configurações. */
.imp__rs { margin-bottom: var(--e5); }
.imp__rs-r { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.imp__rs-v { font-size: 12.5px; color: var(--fg2); }
.imp__rs-v b { color: var(--fg); font-weight: 600; }

/* O EDITOR QUE ABRE DENTRO DA LINHA. ⚠ `grid-column: 1 / -1` NÃO É OPCIONAL —
   mesma lei de `.cfg__t > .pso` e de `.cfg__frt-ed`, e o mesmo modo de falha:
   filho de grid sem a regra colapsa na PRIMEIRA trilha, que é `max-content`, e
   o editor inteiro sai espremido na largura da palavra *"Placas"*. Nada falha;
   a tela só fica torta.

   ⚠ O FILETE À ESQUERDA LIGA O EDITOR À LINHA QUE O ABRIU — é a mesma marca de
   `.cfg__frt-ed`, pela mesma razão: um bloco recuado solto entre duas linhas de
   tabela não diz de QUAL linha ele é. E o fundo continua o `--sup2` que
   `.cfg__tl--ab` já pôs na linha, para os dois lerem como um assunto só. */
.imp__ed {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4) var(--e5) var(--e5);
  background: var(--sup2); border-bottom: 1px solid var(--lin);
  box-shadow: inset 3px 0 0 var(--b600);
}
.imp__ed-t { font-size: 13px; font-weight: 600; color: var(--fg); }
/* A ajuda cola no título: são uma frase só partida em duas linhas de peso. */
.imp__ed-t + .imp__ed-h { margin-top: calc(var(--e3) * -1 + 2px); }
.imp__ed-cb { margin-top: var(--e2); align-self: flex-start; text-align: left; }
.imp__ed-f { padding-top: 0; }
.imp__ed-ac { display: flex; align-items: center; gap: var(--e2); }
.imp__ed-ac > .prov { padding-top: 0; min-width: 0; }

/* A LISTA DE OPÇÕES — a moldura; as linhas são `.mudar__o`.
   ⚠ **TETO DE ALTURA COM ROLAGEM PRÓPRIA, e isso NÃO viola a lei do rolador
   único.** `modal.css` diz que `.mod__b` é o único rolador VERTICAL do modal, e
   o que ela proíbe é um segundo rolador para o CONTEÚDO — o operador rola a
   calha, solta o mouse achando que rolou o card, e o resto continua onde
   estava. Uma lista LIMITADA é outra coisa, e o próprio modal já tem duas:
   `.mudar__p` (46vh) no seletor de status e `.imp__pv-rol` na grade. Sem teto,
   64 colunas dariam 2.240 px de lista dentro de um corpo de 627.
   ⚠ `overscroll-behavior: contain` É O QUE IMPEDE A ROLAGEM DE VAZAR para o
   `.mod__b` quando a lista chega ao fim — a mesma linha que `.mudar__p` carrega.
   ⚠ E A SUPERFÍCIE É BRANCA SOBRE O `--sup2` DO EDITOR: uma lista sem fundo
   sobre o recuo lê como texto, que é o defeito que a forma 3 já pagou uma vez. */
.imp__ls {
  max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding: var(--e1);
  background: var(--sup); border: 1px solid var(--lin2);
  border-radius: var(--r-sm);
}
/* ⚠ `.mudar__o` NÃO TRAZ ESTADO ACESO — no card quem o diz é a `.bola`
   colorida. Aqui quem diz é a marca (`.rd`/`.ck`), e o fundo é o reforço: cor
   nunca é canal único, e a marca sozinha é pequena demais para achar de relance
   numa lista de 64. */
.imp__ls .mudar__o.on { background: var(--b50); }
html[data-tema="escuro"] .imp__ls .mudar__o.on { background: var(--b100); }
.imp__ls .mudar__o.on .mudar__ot b { color: var(--b700); }
/* O `(vazio)` é um valor como os outros, e a marca dele é a INCLINAÇÃO — nunca
   um tamanho menor. Ver o comentário em `passoDosValores`. */
.imp__nulo { font-style: italic; color: var(--fg3); }
.imp__ls .mudar__o.on .imp__nulo { color: inherit; }
html[data-tema="escuro"] .imp__ls .mudar__o.on .mudar__ot b { color: var(--b800); }
@media (hover: hover) {
  .imp__ls .mudar__o:hover { background: var(--sup2); }
  .imp__ls .mudar__o.on:hover { background: var(--b50); }
}

/* O CAMPO DE BUSCA. ⚠ O ÍCONE É POSICIONADO E O CAMPO GANHA CALHA À ESQUERDA
   — o `.inp` do produto não tem afordância para ícone interno, e envolvê-lo num
   flex empurraria o texto digitado, não o marcador. */
.imp__bs { position: relative; display: block; }
.imp__bs > .ico {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--fg3); pointer-events: none;
}
.imp__bs > .inp { width: 100%; padding-left: 30px; }
/* ⚠ O `×` NATIVO DO `type=search` SAI: ele é do navegador, não do DS, e num
   campo de 32 px ele encosta na borda. Quem limpa a busca é apagar o texto. */
.imp__bs > .inp::-webkit-search-cancel-button { display: none; }

/* A LINHA DO CAMPO ESCOLHIDO, no passo 2 do filtro. ⚠ ELA É O PASSO 1
   ENCOLHIDO — o mesmo princípio das três linhas do corpo, um nível abaixo: a
   escolha já feita vira uma linha com o valor e um botão de trocar. */
.imp__cp {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3); border-radius: var(--r-xs);
  background: var(--sup); border: 1px solid var(--lin2);
}
.imp__cp > b { flex: 1 1 auto; font-size: 12.5px; font-weight: 600; }
.imp__cp > .rot { flex: none; }

/* O vazio da busca. Ele explica o que mudou e o que desfaz — estado vazio se
   explica, e este é o único da tela que o operador provoca sozinho. */
.imp__vz { padding-top: var(--e2); }

/* A LEGENDA DA AMOSTRA — a frase e o alternador das recusadas, na mesma linha.
   ⚠ ELA MORA DENTRO DA BARRA, ACIMA DA GRADE, e é legenda de tabela: embaixo
   dela ficava abaixo da dobra junto com o alternador das recusadas — que é o
   controle que acha as 3 células ruins entre 2.000. */
.imp__pv { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
            margin-bottom: var(--e2); }
.imp__pv > .prov { padding-top: 0; }

/* A PRÉVIA. ⚠ QUEM ROLA É `.imp__pv-rol`, NUNCA A PÁGINA: `.mod__b` é o único
   rolador vertical do modal — é lei escrita em `modal.css` —, e uma tabela de 18
   colunas sem caixa de rolagem própria estouraria a largura do `.mod__cx`, que é
   `overflow: hidden`. As colunas da direita ficariam decepadas em silêncio.

   ⚠ **O TETO DE 300 px LIGOU UM `sticky` QUE JÁ ESTAVA ESCRITO E ERA INERTE.**
   `.imp__gr thead th` tem `position: sticky; top: 0` desde que a tela nasceu, e
   nunca grudou em nada: não havia rolador vertical em volta dele. Medido antes:
   com 12 linhas a tabela era **404 px** — 60% do corpo de um modal de 820 px —,
   e o bloco do destino, que é o único gesto capaz de esvaziar a frota, ficava
   inteiro abaixo da dobra.

   ⚠ **286 px É CABEÇALHO + 8 LINHAS INTEIRAS + A NONA CORTADA AO MEIO, e o
   corte é a afordância.** Medido no ar: a linha mede **30 px** e o cabeçalho
   também. O primeiro valor escrito aqui foram 300 px — e 300 é exatamente
   `30 + 9 × 30`, ou seja, **a caixa terminava numa borda limpa e dizia
   "acabou"**, com a nona linha inteira e nada indicando a décima. Afordância
   que não gasta cor nem sombra é a mais barata que existe, mas ela só existe se
   o número for escolhido para CORTAR — e o número redondo é justamente o que
   não corta.

   ⚠ **O `32vh` É O SEGUNDO TETO, E ELE NÃO É SIMETRIA COM O MODAL: É MEDIÇÃO.**
   O modal já escala com a janela (`min(880px, 90vh)`), e a tabela é a única
   parte do corpo que pode encolher sem perder função — ela tem rolador próprio.
   Medido em 1440×768 (altura real de laptop, com a barra do navegador
   descontada): com o teto fixo em 286 o bloco do destino ficava **inteiramente**
   fora da área visível; com `32vh` a tabela cai para 242 e o destino aparece
   pela metade, com o rótulo e os dois títulos legíveis.
   ⚠ **ZERO ROLAGEM A 768 px NÃO É ALCANÇÁVEL, E O NÚMERO ESTÁ AQUI PARA QUEM
   TENTAR DE NOVO:** o corpo mede 510 px e o que não é tabela mede 372 — sobram
   **138 px, ou quatro linhas**. Uma prévia de quatro linhas não prova coluna
   nenhuma. A 900 px o caminho feliz cabe inteiro (conteúdo 654, corpo 627, e a
   sobra de 18 px é calha, não conteúdo).

   ⚠ **E FOI O TETO QUE PAGOU A AMOSTRA MAIOR:** `LINHAS_NA_PREVIA` subiu de 12
   para 20 no mesmo dia, porque a amostra deixou de empurrar qualquer coisa
   tela abaixo — ela só enche o rolador. */
.imp__pv-rol {
  overflow: auto; max-height: min(320px, 34vh); scrollbar-width: thin;
  background: var(--sup);
  border: 1px solid var(--lin2); border-radius: var(--r-sm);
}
.imp__gr { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 11.5px; }
.imp__gr th, .imp__gr td {
  padding: 6px 10px; text-align: left; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--lin);
}
.imp__gr thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sup2); color: var(--fg2); font-weight: 600;
  border-bottom: 1px solid var(--lin2);
}
.imp__gr tbody tr:last-child td { border-bottom: none; }
/* A COLUNA DAS PLACAS ACESA — é o eco visual da escolha do passo 1. */
.imp__gr th.on, .imp__gr td.on { background: var(--b50); color: var(--b700); font-family: var(--fm); }
html[data-tema="escuro"] .imp__gr th.on,
html[data-tema="escuro"] .imp__gr td.on { background: var(--b100); color: var(--b800); }
/* ⚠ A LINHA DE FORA DO FILTRO RECUA, E NÃO SOME. Sumir faria a prévia parecer
   uma planilha menor do que é, e o operador não veria O QUE ficou de fora — que
   é a única forma de conferir se o filtro está certo.

   ⚠ E O RECUO É POR TOKEN, NUNCA POR `opacity`. *(31/08/2026, medido.)* A
   primeira forma era `opacity: .38`, e ela **derruba o contraste do texto para
   ~3:1** sobre o branco — abaixo do piso de 4,5:1, num texto que existe
   justamente para ser LIDO (é conferindo o que ficou de fora que se descobre o
   filtro errado). `--fg3` é o cinza que o DS mede em 4,54:1 sobre a superfície
   recuada, e ele diz a mesma coisa sem apagar ninguém.

   ⚠ OS SELETORES SÃO MAIS ESPECÍFICOS QUE OS DA COLUNA ACESA DE PROPÓSITO: sem
   `tbody tr`, a célula da coluna das placas continuaria roxa numa linha
   excluída — acesa e fora ao mesmo tempo, que é a tela dizendo as duas coisas. */
.imp__gr tbody tr.imp__gr-fora td { color: var(--fg3); background: var(--sup2); }
html[data-tema="escuro"] .imp__gr tbody tr.imp__gr-fora td {
  color: var(--fg3); background: var(--sup2);
}
/* ⚠ A CÉLULA QUE NÃO É PLACA SE MARCA NA COLUNA ESCOLHIDA. Sem isso, uma coluna
   com 3 linhas de lixo entre 400 boas só aparece como um número no rodapé, e o
   operador não tem como achar as três. */
.imp__gr td.imp__gr-ruim { color: var(--r1t); background: var(--r1s); text-decoration: line-through; }
.imp__gr-n { color: var(--fg3); font-family: var(--fm); text-align: right; width: 1%; }

/* O BALANÇO DO RODAPÉ — os quatro números, à esquerda dos dois botões. */
.imp__bal { font-size: 12px; color: var(--fg2); min-width: 0; }
.imp__bal b { color: var(--fg); font-weight: 600; }

/* A CÉLULA DO *CRIAR FROTA*. ⚠ ELA EXISTE PARA O BOTÃO NÃO ESTICAR, e não para
   posicioná-lo: filho direto de `.cfg__f` ele é item de grid e ocupa a trilha
   inteira; dentro de um flex ele volta a ter a largura do rótulo. Um `<div>` nu
   não serviria — ele também é item de grid, e o botão dentro dele herdaria o
   `display: block` e a largura de bloco. */
.cfg__frt-cr { display: flex; }

/* ----------------------------------------------- condutores (`#/condutores`) --
   (02/10/2026, o módulo de condutores.) A tela é de topo e não aba de
   `#/config`, mas é a mesma família de gesto — e por isso ela emite `cfg__*` e
   `.pso`. Só duas peças nascem aqui.

   O EDITOR NA LINHA: nome e CPF lado a lado DENTRO da segunda trilha do subgrid.
   ⚠ NÃO É `.cfg__f`: a nota de `config/frotas.js` diz por quê — uma grade de
   três colunas dentro de uma trilha espreme o campo num terço dela. Aqui são
   dois campos e a recusa do CPF atravessando os dois (`.cfg__f--larga`). */
.cfg__cnd-ed {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e2) var(--e3); align-items: end; min-width: 0;
}
/* *"Mostrar inativos"* é ITEM DE GRID de `.cfg__f`, e sem isto ele esticaria até
   a borda da trilha — o anel de foco pegaria a coluna inteira para uma frase de
   duas palavras. A altura é a do `.inp` ao lado (32 px, o degrau do DS), para a
   frase ficar na mesma linha de base do campo de busca. */
.cfg__cnd-ina { justify-self: start; min-height: 32px; }

/* O SINCRONISMO NA CÉLULA DA SITUAÇÃO *(05/10/2026, condutores etapa 2)* — o
   sinal e a frase do servidor (`js/sincronismo.js`) ABAIXO de *Ativo/Inativo*,
   e nas listas da aba *Sincronismo* a frase de cada linha.
   ⚠ `max-width` É O QUE SEGURA A COLUNA: a terceira trilha de `.cfg__t` é
   `minmax(18ch, max-content)`, e sem teto a frase mais longa alargaria a
   coluna de TODAS as linhas. `white-space: normal` desfaz o `nowrap` da
   célula, que é de *Ativo*, uma palavra. ⚠ `display: flex` PÕE A FRASE NA
   LINHA DE BAIXO — inline, ela grudaria em *Ativo*. */
.cfg__tn .snc__l, .cfg__tn .md {
  display: flex; white-space: normal; max-width: 34ch; text-align: left; margin-top: 2px;
}

/* A ABA *Sincronismo* — o cartão da sincronização, a linha dos números e o
   *Mostrar os N* das listas. Os números são TEXTO DA TELA (rótulos, como
   cabeçalho de coluna); as frases de condutor, de multa e da passada são do
   servidor. */
.cfg__snc-pas { display: flex; flex-direction: column; gap: var(--e3); }
.cfg__snc-pas > p { max-width: 72ch; }
/* o `margin-bottom` do `.pso` é de quando ele vem antes de outra peça; aqui o
   vão é o `gap` da coluna */
.cfg__snc-pas > .pso { margin-bottom: 0; }
/* a fileira das ações — *Sincronizar agora*, *Atualizar* e *"Lida às"*, a lei
   *"A TELA DIZ QUANDO FOI LIDA"* de `#/automacao`, ao lado de *Atualizar* */
.cfg__snc-ac { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
/* ⚠ AS TRÊS COLUNAS SÃO FIXAS EM `ch`, e não `auto`: cada linha é um grid
   próprio, e com `auto` o número de *"No BlueFleet"* e o de *"Aqui"* cairiam
   em colunas diferentes — a leitura vertical, que é a razão de serem linhas,
   se perderia. 24 ch cabem *"Indicações no BlueFleet"*. */
.cfg__snc-num {
  display: grid; grid-template-columns: 24ch 8ch minmax(0, 1fr);
  column-gap: var(--e3); align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--lin); font-size: 12.5px;
}
.cfg__snc-num:first-child { border-top: 1px solid var(--lin); }
.cfg__snc-num > b { font-family: var(--fm); font-variant-numeric: tabular-nums;
                     text-align: right; }
.cfg__snc-num > :last-child { display: flex; flex-wrap: wrap; gap: 2px var(--e4);
                              color: var(--fg2); font-size: 12px; }
.cfg__snc-mais { margin-top: var(--e3); }

/* ------------------------------------------------------------ etiquetas --- */
.cfg__etq-av { display: flex; align-items: center; gap: 5px; margin-top: var(--e4); }
.cfg__etq-av .ico { color: var(--fg3); flex: none; }
/* O chip da etiqueta mora em `componentes.css` (`.etq`) desde 08/10/2026 — o
   card também o desenha. ⚠ NA COLUNA *COMO APARECE* ELE NÃO ESTICA *(09/10/2026)*:
   item de grid, o chip virava uma faixa da largura da trilha, e a prévia que
   diz "como ela aparece" mostrava uma peça que não aparece em lugar nenhum —
   no card e no Acervo o chip mede o nome. */
.cfg__tl > .etq { justify-self: start; }

/* A ESCOLHA DA COR — os atalhos mais o seletor completo, na mesma fileira. */
.cfg__cor { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

/* O ATALHO. Alvo de 24 px com o anel de selecao POR FORA, porque um anel por
   dentro comeria a propria cor que o botao existe para mostrar. */
.cfg__cor-o {
  width: 24px; height: 24px; flex: none; padding: 0;
  border: 1px solid var(--lin2); border-radius: var(--r-xs);
  background: var(--etq-f); cursor: pointer;
}
.cfg__cor-o.on { box-shadow: 0 0 0 2px var(--sup), 0 0 0 3px var(--acao); }
.cfg__cor-o:focus-visible { outline: 2px solid var(--b400); outline-offset: 2px; }

/* O SELETOR COMPLETO. `.inp` da 32 px de altura e 8 px de recuo, e o recuo
   espremeria a amostra do controle nativo ate ela sumir — por isso o padding
   cai para 2 e a largura vira fixa. Sem `appearance: none`: o controle nativo e
   quem sabe abrir o seletor de cor do sistema, e refaze-lo seria peca nova. */
.cfg__cor-in { width: 44px; padding: 2px; flex: none; cursor: pointer; }

/* -------------------------------------------------------- o calendário ----
   D4 · O SELETOR DE DATA REUSA `.cal` DA LENTE DO ACERVO, e o que muda aqui é só
   o que o CONTEXTO exige. *(23/08/2026.)*

   ⚠ `position: static` DESFAZ O `sticky`. Na lente, `.cal` acompanha a rolagem
   da lista ao lado — é metade do mestre-detalhe. Dentro de um formulário, um
   painel grudado no topo da janela seria a peça fazendo o que a tela dela não
   pede: ela desceria com o campo e ficaria pendurada sozinha.

   ⚠ ELE ABRE NO FLUXO, NÃO NUMA CAMADA. É o idioma que esta tela já tem — `.pso`,
   o passo dos destinos, faz exatamente isso —, e ele dispensa posicionamento,
   clique-fora e um `z-index` novo. A superfície recuada aqui é a MESMA exceção
   que a D7 escreve para `.pso`: painel aberto por gesto explícito é sobreposição
   ao fluxo, e ali a elevação significa alguma coisa.

   ⚠ A LARGURA SAI DO ALVO DE TOQUE, e não de um número escolhido: sete colunas
   de 40 px com seis vãos de 2 dão 292 de grade, mais 12+12 de recuo e 1+1 de
   borda — 318, arredondado para 320. É a mesma derivação que `.ag2` carrega. */
.cfg__cal { position: static; padding: 2px; }

/* ⚠ A CÉLULA SE REDECLARA INTEIRA, E NÃO PROPRIEDADE A PROPRIEDADE — e a primeira
   forma, que desfazia DUAS, estava errada. *(Corrigido em 23/08/2026, com o
   operador vendo a tela: "os números parecem ser fora da fonte do DS, e não estão
   centralizados".)*

   `componentes.css` dá a todo botão dentro de `.menu` **sete** propriedades —
   `display: flex`, `align-items`, `gap`, `width: 100%`, `padding: 7px 9px`,
   `border-radius: var(--r-xs)`, `font-size: 12.5px`, `color: var(--fg)` e
   `text-align: left` —, desenho certo para uma LINHA de opção e errado para uma
   célula de calendário. Eu havia desfeito `width` e `padding`; as outras passaram,
   e medido na tela: `display` virou `flex` (matando o `place-items: center` do
   grid), o número colou na ESQUERDA (0 px de um lado, 33 do outro), a fonte foi a
   **12,5 px onde o DS manda 12**, e a cor virou `--fg` em todo dia, atropelando a
   escala do `.cal__d`.

   ⚠ CONTAR PROPRIEDADE É FRÁGIL POR CONSTRUÇÃO: quem acrescentar uma linha a
   `.menu button` amanhã quebra esta grade **sem tocar neste arquivo e sem nada
   falhar**. Redeclarar a célula inteira é o que fecha a porta. A especificidade
   basta — `.cfg__cal .cal__d` é 0,2,0 contra 0,1,1. */
.cfg__cal .cal__d {
  display: grid; place-items: center; gap: 0;
  width: auto; padding: 0; aspect-ratio: 1;
  border-radius: 50%; text-align: center;
  font-size: 12px; color: var(--fg);
}
/* O fim de semana se distingue por PESO DE COR e continua escolhível — aqui todo
   dia é uma resposta possível, ao contrário da lente do Acervo, onde `--fds` só
   apaga o dia SEM prazo. `--fg2`, e não `--fg4`: o DS restringe `--fg4` a
   placeholder, eixo de gráfico e `.prov`. */
.cfg__cal .cal__d--fds { color: var(--fg2); }

/* ⚠ O DIA ESCOLHIDO GANHA FUNDO PRÓPRIO, e sem isto ele era INVISÍVEL. A regra do
   DS é `.cal__d--sel .cal__p { background: var(--acao) }` — ela pinta o PONTO DE
   DENSIDADE, que é da lente do Acervo e se dimensiona pela contagem de autos do
   dia. Aqui não há contagem, então `.cal__p` **não se emite** — emiti-lo sem
   escala pintaria um círculo azul em todos os 31 dias —, e o `--sel` ficava sem
   nada: medido, o dia escolhido tinha fundo transparente e a MESMA cor dos
   outros. O `color: var(--acao-fg)` que o DS lhe dá (branco) só não o apagou
   porque `.menu button` estava vencendo — consertar a especificidade sozinha
   deixaria branco sobre branco. */
.cfg__cal .cal__d--sel {
  background: var(--acao); color: var(--acao-fg); font-weight: 600;
}
.cfg__cal .bt { width: auto; padding: 0 9px; }
.cfg__cal-ac {
  display: flex; padding-top: 8px; margin-top: 8px;
  border-top: 1px solid var(--lin);
}

/* ============================================== a vista do rastro ========= */
.rst__cab {
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e5); padding-bottom: var(--e2); border-bottom: 1px solid var(--lin);
}
.rst__cab > b { font-size: 12.5px; font-weight: 600; }
.rst__ret { font-size: 11px; color: var(--fg3); }
.rst { display: flex; flex-direction: column; }
.rst__l {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--e4);
  padding: 8px 0; border-bottom: 1px solid var(--lin);
  font-size: 12px;
}
.rst__q { font-size: 11px; color: var(--fg3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rst__o { color: var(--fg); line-height: 1.45; }
.rst__a {
  font-family: var(--fm); font-size: 11px; color: var(--b600);
  text-decoration: underline; text-underline-offset: 2px;
}
.rst__p { font-size: 11px; color: var(--fg3); white-space: nowrap; }

html[data-tema="escuro"] .rst__a { color: var(--b500); }

/* ------------------------------------------------ a aba de GATILHOS -------
   O cliente dizendo o que cada notificacao do SENATRAN AFIRMA sobre o auto.

   REDESENHADA DUAS VEZES EM 24/08/2026. A primeira contra "ficou com um UI e UX
   ruim, confuso, sem hierarquia visual"; a segunda — esta — contra "e confusa,
   nao e claro como usar, e e desorganizada", que veio DEPOIS da primeira. O
   diagnostico inteiro, com os numeros, esta no cabecalho de
   `js/telas/config/gatilhos.js`.

   A PRIMEIRA rodada pediu da folha TRES DEGRAUS DE PESO — secao, afirmacao,
   linha — e a folha os deu. Nao bastou: o problema era de MODELO, e a folha
   estava desenhando bem uma estrutura errada.

   O QUE ESTA RODADA PEDE E OUTRA COISA, e ela e mecanica:

     1  UMA GRADE SO PARA A LISTA INTEIRA.  Medido no DOM antes: `.cfg__gat-rl`
        era um grid INDEPENDENTE por linha, e 24 linhas visiveis davam TRES
        arranjos de coluna, a coluna do numero QUATRO larguras (62, 69, 76 e
        81 px) e o botao *Editar* DOIS x. E o mesmo defeito que `.cfg__t` nasceu
        para consertar na aba *A empresa* — trilhas no CONTEINER, linha em
        `subgrid` —, e ele estava intacto aqui.

     2  DOIS DEGRAUS, e nao tres.  A afirmacao deixou de ser cabecalho de grupo e
        virou COLUNA da linha, entao `.cfg__gat-g*` inteiro MORREU: `-gs`, `-gr`,
        `-gc`, `-gn` e `-ge` sairam desta folha. Restam a ZONA (14px / 600, fio
        em cima) e a LINHA (12,5px / 500).

     3  HIERARQUIA POR CONTEUDO, e nao por posicao.  `.cfg__gat-rf--frio` poe em
        `--fg3` a linha que nao mexe no andamento do auto e deixa em `--fg` a que
        mexe. E o que permite a lista ser UMA e ainda ler com relevo.

   Nenhum token novo nasce aqui: espacamento, linha, superficie e cor de texto
   saem dos que `base.css` ja declara. Medida desenhada e medida derivada de
   token; nada digitado a mao. */

/* ---- o cartao de orientacao, antes da primeira regra ---- */
.cfg__gat-abre {
  margin: 0 0 var(--e4); max-width: 78ch;
  font-size: 13px; color: var(--fg); line-height: 1.6;
}
/* A AUSENCIA DECLARADA (G13) em uma linha — `.prov` nao serve porque ela leva
   icone ao lado, e `.prov` e bloco de texto solto. */
.cfg__gat-ok {
  display: flex; align-items: flex-start; gap: var(--e2);
  margin: var(--e4) 0 0; font-size: 11.5px; color: var(--fg3); line-height: 1.5;
}
.cfg__gat-ok .ico { flex: none; margin-top: 2px; color: var(--fg3); }

/* ---- o bloco do topo — os tipos que chegaram sem regra ---- */
.cfg__gat-sem { display: flex; flex-direction: column; gap: var(--e3); }
.cfg__gat-sl {
  display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start;
  padding: var(--e4); border-radius: var(--r-sm);
  background: var(--sup2); border: 1px solid var(--lin2);
}
/* A LINHA COM O EDITOR ABERTO SE MARCA, e a marca e a MESMA da linha de regra —
   e o mesmo fio de 3 px que o painel abaixo dela carrega. Sao tres pecas dizendo
   "isto e uma coisa so": a linha, o fio e o painel. */
.cfg__gat-sl.on { box-shadow: inset 3px 0 0 var(--acao); }
.cfg__gat-st { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.cfg__gat-st > b { font-size: 12.5px; font-weight: 600; }
/* A MENSAGEM DE EXEMPLO E O QUE FAZ O TIPO SER RECONHECIVEL. Sem ela a linha diz
   "tipo 77 · 12 autos", e ninguem decide sobre um numero. */
.cfg__gat-ex {
  margin: 0; color: var(--fg2); line-height: 1.5;
  padding-left: var(--e3); border-left: 2px solid var(--lin2);
}

/* ---- a entrada: a frase com os numeros ----
   ELA E A PRIMEIRA COISA DO CARTAO, e responde de uma vez as tres perguntas com
   que se chega aqui. Nenhum numero dela e escrito a mao — todos saem do payload,
   e por isso nao podem envelhecer. */
.cfg__gat-resumo { margin: 0 0 var(--e4); max-width: 82ch; }

/* ---- a barra do recorte ---- */
.cfg__gat-bar {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  margin-bottom: var(--e5);
}

/* ---- DEGRAU 1: as DUAS zonas, por PRESENCA NO ACERVO ---- */
.cfg__gat-secs { display: flex; flex-direction: column; }
/* O FIO VAI EM CIMA E NAO EMBAIXO, e a primeira zona nao o tem: fio embaixo da
   ultima seria um traco solto acima do rodape do cartao, sem nada para separar. */
.cfg__gat-sec {
  padding-top: var(--e6); margin-top: var(--e6); border-top: 1px solid var(--lin2);
}
.cfg__gat-sec:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
/* A ZONA QUIETA E FRIA POR DESENHO: sao 26 das 34 na G2L, e nenhuma delas tocou
   o acervo — cabecalho de igual peso ao da zona que governa a fila de trabalho
   disputaria atencao com ela. `--fg2` no titulo, e nao `--fg3`: a lei do DS
   reserva `--fg3`/`--fg4` a placeholder, eixo de grafico e `.prov`, e este e um
   titulo com botao ao lado. */
.cfg__gat-sec--frio .cfg__gat-sct { color: var(--fg2); font-weight: 500; }
.cfg__gat-sc {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e4);
}
.cfg__gat-sc > .col { gap: 3px; }
.cfg__gat-sc .bt { flex: none; }
.cfg__gat-sct {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.3;
}
/* O CONTADOR DA SECAO E PILULA, e nao texto colado: e ele que da a leitura de
   "quanto de cada coisa" antes de abrir qualquer uma — 15 · 9 · 10 na G2L. */
.cfg__gat-scn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 19px; padding: 0 6px; border-radius: var(--pill);
  background: var(--sup3); color: var(--fg2);
  font-family: var(--fm); font-size: 11px; font-weight: 500;
}

.cfg__gat-gv { margin: var(--e3) 0 0; font-size: 11.5px; color: var(--fg3); }

/* ---- DEGRAU 2: a linha da regra, numa GRADE SO ----
   AS TRILHAS SAO DO CONTEINER E A LINHA E `subgrid` — e a mesma correcao da D1
   em `.cfg__t`, pelo mesmo defeito medido: com um grid independente por linha, as
   colunas nao conversam entre linhas e a comparacao vertical, que e a unica razao
   de uma lista existir, nao acontece.

   ⚠ AS QUATRO CELULAS SE EMITEM SEMPRE, e o CABECALHO e uma linha da MESMA grade
   — `.rot` em cada celula, como `cabecalhoDaLista` de `empresa.js` ja faz.

   ⚠ A CALHA E `column-gap`, NUNCA `gap`: com `gap` o conteiner separaria as
   LINHAS alem do fio que cada uma ja tem, e a tabela viraria uma lista espacada.

   ⚠ O RECUO DA LISTA MAIS O RECUO NEGATIVO DA LINHA SE CANCELAM, e nao sao
   enfeite: eles abrem os 8 px em que o fio de acento de 3 px da linha ABERTA
   cabe. Sem eles o `inset 3px` cairia sobre os tres primeiros pixels do nome —
   e mudar o `padding` so da linha `.on` faria as colunas DELA andarem, que e
   exatamente o defeito que esta rodada veio consertar. Como o par vale para
   TODAS as linhas, inclusive o cabecalho, o deslocamento e identico e o
   alinhamento entre elas se preserva. */
.cfg__gat-lst {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr)
                         minmax(14ch, max-content) minmax(7ch, max-content);
  column-gap: var(--e4); padding-inline: var(--e3);
}
.cfg__gat-rl {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: center;
  margin-inline: calc(var(--e3) * -1); padding: 10px var(--e3);
  border-bottom: 1px solid var(--lin);
}
/* O CABECALHO NAO E LINHA DE DADO: sem fio de baixo proprio, sem altura de linha
   e sem hover. Ele so nomeia as colunas. */
.cfg__gat-rl--cab { padding-top: 0; padding-bottom: var(--e2); }
.cfg__gat-rl:last-child { border-bottom: 0; }
/* A LINHA COM O EDITOR ABERTO — mesma marca da do bloco *sem regra*, e o fio de
   3 px mora dentro do recuo que o par acima abriu. */
.cfg__gat-rl.on {
  background: var(--sup2); box-shadow: inset 3px 0 0 var(--acao);
  border-bottom-color: transparent;
}
@media (hover: hover) {
  .cfg__gat-rl:not(.cfg__gat-rl--cab):hover { background: var(--sup2); }
}
/* O EDITOR E IRMAO DAS LINHAS DENTRO DA GRADE, entao ele TEM de atravessar as
   quatro trilhas — sem isto ele colapsaria na primeira, com o formulario inteiro
   espremido. E a mesma regra que `.cfg__t > .pso` ja carrega, pelo mesmo motivo. */
.cfg__gat-lst > .cfg__gat-ed {
  grid-column: 1 / -1; margin-inline: calc(var(--e3) * -1);
}
.cfg__gat-rn { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfg__gat-rn > b { font-size: 12.5px; font-weight: 500; }
.cfg__gat-rn > b > i { color: var(--fg3); font-weight: 400; }
/* A CHAVE DE DOIS NIVEIS, EM PALAVRAS. O `Tipo N` ganha superficie (`.cfg__id`,
   a mesma do CNPJ e do codigo da infracao) e o resto e frase — antes a linha
   dizia `10 · "pagamento registrado"` e o cliente lia dois numeros. */
.cfg__gat-rk { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cfg__gat-rk .cfg__id { height: 20px; padding: 0 6px; font-size: 11px; }
/* O QUE ELA FAZ COM O AUTO — a coluna que substituiu o cabecalho de grupo.
   ⚠ ELA E O CANAL DE HIERARQUIA DA LISTA: a linha que mexe no andamento vem em
   `--fg`, a que nao mexe em `--fg3`. As tres secoes por consequencia davam a
   mesma leitura por POSICAO, e custavam tres niveis de cabecalho para isso. */
.cfg__gat-rf {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  min-width: 0; font-size: 12px; color: var(--fg); line-height: 1.4;
}
.cfg__gat-rf--frio { color: var(--fg3); }
.cfg__gat-rm { display: flex; align-items: center; gap: var(--e2); }
/* O DISPARO DEIXOU DE SER O CINZA MAIS CLARO DA LINHA. Das 34 regras da G2L so 8
   nomeiam movimentacao, e esse era o dado mais apagado da tela. O numero vai em
   `--fg`; a unidade fica em `--fg3`, que e onde ela pertence.
   ⚠ A CELULA DO CABECALHO USA A MESMA CLASSE — e a mesma coluna —, e por isso o
   tamanho vem depois, escopado: `.rot` mora em `base.css` e perderia para uma
   regra de folha posterior, e o cabecalho ficaria 1 px maior que os outros tres
   desta tela. */
.cfg__gat-rd { justify-self: end; white-space: nowrap; }
.cfg__gat-rl .cfg__gat-rd { font-size: 11.5px; color: var(--fg3); line-height: 1.3; }
.cfg__gat-rl--cab .cfg__gat-rd { font-size: 10.5px; }
.cfg__gat-rd > b { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.cfg__gat-rd > i { font-style: normal; }

/* ---- o editor, EMBAIXO DA LINHA CLICADA ----
   ⚠ SUPERFICIE RECUADA COM FIO DE ACENTO, e ela e a MESMA excecao que a D7
   escreve para `.pso`: painel aberto por gesto explicito e sobreposicao ao
   fluxo, e ali a elevacao significa alguma coisa. O que ela nao pode ser e
   cartao-dentro-de-cartao decorativo — por isso o fio de 3 px, que amarra o
   painel a linha que o abriu. */
.cfg__gat-ed {
  display: flex; flex-direction: column; gap: var(--e5);
  padding: var(--e5); margin-bottom: var(--e4);
  background: var(--sup2); border: 1px solid var(--lin2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: inset 3px 0 0 var(--acao);
}
.cfg__gat-edc { display: flex; flex-direction: column; gap: 3px; }
.cfg__gat-edc > b { font-size: 13.5px; font-weight: 600; }
/* DUAS COLUNAS, e a primeira e a DECISAO. `.cfg__f` nao serve: ele e grade de
   TRES trilhas com `margin-bottom` proprio, desenhada para a linha de controles
   do `.cx__b` — aqui os dois campos levam frase de ajuda longa embaixo, e a
   terceira trilha ficaria vazia em todo desenho. */
.cfg__gat-ef {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5); align-items: start;
}
.cfg__gat-ef > .col { gap: var(--e2); }
/* O CAMPO 2 QUANDO A FASE E `encerrado` — texto, e nao suspenso. *(24/08/2026,
   rodada 3 dos gatilhos.)* No fim do rito a fase e o status tem o MESMO nome, e o
   controle teria uma opcao so; um suspenso de uma opcao convida a um clique que
   nao muda nada. ⚠ Ele mantem a ALTURA e o alinhamento dos irmaos de propósito —
   sem isso a coluna do editor pula quando a fase muda para `encerrado`, e o campo
   3 nasce fora de linha. */
.cfg__gat-fixo {
  display: flex; align-items: center; min-height: 30px;
  padding: 0 var(--e3); border-radius: var(--r-xs);
  background: var(--sup2); border: 1px dashed var(--lin2);
  font-size: 12.5px; color: var(--fg2);
}

/* A FRASE DO EFEITO DO DESTINO ESCOLHIDO — ela muda com a escolha e e o que
   impede o cliente de escolher pelo que a palavra PARECE significar. Peso de
   corpo, e nao de `.prov`: ela e o conteudo da decisao, nao a nota de rodape
   dela. */
.cfg__gat-efe {
  padding: var(--e3); border-radius: var(--r-xs);
  background: var(--sup); border: 1px solid var(--lin2);
  font-size: 12px; color: var(--fg); line-height: 1.5;
}
.cfg__gat-ints {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5);
}
.cfg__gat-int { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); }
.cfg__gat-int .sw { margin-top: 1px; }
.cfg__gat-int > .col { gap: 0; }
.cfg__gat-int b { font-size: 12.5px; font-weight: 600; }

/* ---- a previa — o numero ANTES de gravar, e ele e a unica defesa ---- */
.cfg__gat-pv {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4); border-radius: var(--r-sm);
  background: var(--sup); border: 1px solid var(--lin2);
}
/* O ESTADO FRIO — "nada mudou nesta regra ainda". Ele ocupa o MESMO espaco do
   quente, e e de proposito: o painel nao pode saltar de tamanho no instante em
   que o cliente mexe no primeiro campo. */
.cfg__gat-pv--frio { background: none; border-style: dashed; }
.cfg__gat-pv > b { font-size: 12.5px; }
.cfg__gat-ul {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: var(--e2);
  font-size: 12px; color: var(--fg2); line-height: 1.5;
}
/* O QUE MUDOU, COM OS DOIS VALORES — a mesma forma do selo de contradicao. O
   `<s>` do valor antigo herda a cor recuada; a seta e o unico icone da peca. */
.cfg__gat-dif {
  display: flex; flex-direction: column; gap: var(--e2);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--lin);
}
.cfg__gat-dif > b { font-size: 12px; font-weight: 600; }
.cfg__gat-dif s { color: var(--fg3); text-decoration-thickness: 1px; }
.cfg__gat-dif .ico { color: var(--fg3); vertical-align: -1px; }

/* ---- o rodape do editor: as DUAS aplicacoes viraram os DOIS botoes ----
   O passo `.pso` SAIU daqui em 24/08/2026. Ele e o idioma do passo de
   CONFIRMACAO que abre por gesto — inativar CNPJ, ignorar placa, fundir
   etiqueta —, e aqui estava grudado no fim de um editor permanentemente aberto:
   um grupo de radio de ~180 px que pedia uma escolha antes de qualquer botao
   servir, e que em 26 das 34 regras dizia "nenhum auto muda hoje" nas DUAS
   opcoes. As duas aplicacoes continuam sendo duas; elas viraram os dois botoes.

   ⚠ `.pso` CONTINUA VIVO NESTA FOLHA e nesta tela — tres irmaos o usam, e a
   forma volta AQUI so no passo de apagar, que e gesto explicito de verdade. */
.cfg__gat-ac { display: flex; flex-direction: column; gap: var(--e3); }
.cfg__gat-bts {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--e3); flex-wrap: wrap;
}
/* O DESTRUTIVO VAI PARA A OUTRA PONTA — vizinho do *Gravar*, ele seria clicado
   por proximidade. `margin-right: auto` e o que abre o vao sem uma celula vazia. */
.cfg__gat-ap { margin-right: auto; }
/* A RECUSA DO BOTAO INERTE. Mesmo tamanho e mesma cor da explicacao ao lado: ela
   e instrucao, nao alarme — o alarme e o botao apagado. */
.cfg__gat-nao { font-size: 11.5px; color: var(--fg2); line-height: 1.5; }

/* A ANCORA DO MOTIVO DO BOTAO INERTE. Ela existe para o ouvinte de `input` poder
   apagar a recusa sem redesenhar — o botao arma na tecla e o `input` nao
   repinta. `display: contents` e o que a torna invisivel para o flex do
   `.cfg__gat-ac`: como `<div>` comum, a ancora VAZIA comeria uma calha de 8 px
   sem nada na tela. E a mesma lei, e a mesma medida, de `.cfg__f-msg`. */
.cfg__gat-msg { display: contents; }

/* ==========================================================================
   RESPONSIVO — todo bloco @media fica no fim do arquivo.
   ========================================================================== */

@media (max-width: 1180px) {
  .usr { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--e3); }
  .usr__p { grid-column: 1 / -1; }
  .usr__mot { grid-column: 1 / -1; justify-self: start; max-width: none; }
  .usr--eu .bt, .usr > .bt { justify-self: end; }
}

@media (max-width: 900px) {
  .cfg__cob-g { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .cfg__f { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ⚠ AS PORTAS EMPILHAM, E O FIO VIRA DE LADO JUNTO. Deixar o `border-left` na
     coluna empilhada desenharia um filete vertical na margem esquerda de cada
     porta, apontando para nada — o separador tem de acompanhar o eixo em que as
     peças se sucedem. */
  .cfg__frt-p { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .cfg__frt-porta + .cfg__frt-porta {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--lin); padding-top: var(--e4);
  }
}

@media (max-width: 768px) {
  /* ⚠ A CALHA DAS ABAS QUEBRA, e não rola. Medido em 375 px, em 16/08: os três
     chips somam 409 px dentro de um plano de 349, e `.chapa` é `overflow:
     hidden` — a terceira aba ficava INALCANÇÁVEL, recortada em silêncio. A
     régua de estouro passou verde nas 32 combinações porque a exclusão que a T9
     escreveu ("ignore o que já está recortado por um ancestral que cabe na
     tela") também engole o que está recortado E é controle. A exclusão vale
     para arte decorativa; não vale para nada que se clique. */
  /* ⚠ `max-width: 100%` NÃO É REDUNDANTE COM O `wrap`. `.seg` é `inline-flex` e
     se dimensiona pelo conteúdo: sem a trava de largura ele continua com os
     409 px de max-content e o `wrap` nunca tem por que quebrar. Medido: com o
     `wrap` sozinho o terceiro chip seguia recortado, byte por byte igual. */
  .cfg__abas .seg { flex-wrap: wrap; max-width: 100%; }
  .cfg__f { grid-template-columns: minmax(0, 1fr); }
  /* ⚠ A REGRA RESPONSIVA MUDOU DE DONO COM A D1, e deixada na linha ela ficaria
     INERTE: com `subgrid`, quem carrega as trilhas é o CONTÊINER — redefini-las
     em `.cfg__tl` não toca o pai, e o telefone continuaria com as quatro colunas
     espremidas em 375 px. Nada falharia: a folha teria a correção escrita e a
     tela não a teria. `row-gap` continua na LINHA, que é quem empilha. */
  .cfg__t { grid-template-columns: max-content minmax(0, 1fr); }
  .cfg__tl { row-gap: var(--e2); }
  .cfg__tl--ped { grid-template-columns: minmax(0, 1fr); }
  .cfg__tn, .cfg__tac { grid-column: 1 / -1; justify-self: start; }
  /* O editor do condutor empilha como `.cfg__f` empilha: dois campos de CPF e
     nome lado a lado não cabem na segunda trilha a 375 px. */
  .cfg__cnd-ed { grid-template-columns: minmax(0, 1fr); }
  /* A linha dos números da aba *Sincronismo*: rótulo e número numa linha, as
     parcelas embaixo — três colunas a 375 px deixariam ~90 px para elas. */
  .cfg__snc-num { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--e1); }
  .cfg__snc-num > :last-child { grid-column: 1 / -1; }
  .pso__o { grid-template-columns: auto minmax(0, 1fr); }
  .pso__n { grid-column: 2; }
  /* ⚠ A LISTA DE GATILHOS EMPILHA PELO CONTEINER, e nao pela linha — mesma lei
     da D1 logo acima: com `subgrid`, quem carrega as trilhas e o pai, e redefini-
     las em `.cfg__gat-rl` deixaria a correcao escrita na folha e ausente da tela.
     Quatro colunas em 375 px nao existem. */
  .cfg__gat-lst { grid-template-columns: minmax(0, 1fr); }
  .cfg__gat-rl { row-gap: var(--e2); }
  /* ⚠ O CABECALHO DE COLUNA SAI QUANDO NAO HA COLUNAS. Empilhada, cada celula
     fica embaixo da anterior e um cabecalho de quatro rotulos nomearia posicoes
     que deixaram de existir — o oposto de orientar. O que cada celula significa
     continua legivel nela mesma: "Tipo 4" tem superficie, o numero traz a
     unidade escrita, e a coluna do meio e uma frase. */
  .cfg__gat-rl--cab { display: none; }
  .cfg__gat-rd { justify-self: start; }
  .cfg__gat-ef, .cfg__gat-ints { grid-template-columns: minmax(0, 1fr); }
  .rst__l { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .rst__p { justify-self: start; }
  /* --e6, e nao --e5: o cartao usa --e7 no desktop, e cair para 16 px no
     telefone tira dele justamente a calha que o faz parecer superficie em vez de
     formulario colado na borda. Quem afasta a COLUNA da borda da tela e
     `.nua__cx`, em `casca.css` — sao dois recuos com donos diferentes. */
  .lg { padding: var(--e6); }

  /* ------------------------------------------- importar planilha (`#mod`) --
     ⚠ O RESPONSIVO DAS TRÊS LINHAS VEM DE GRAÇA: `.cfg__t` já colapsa para
     duas trilhas aqui, e `.cfg__tn`/`.cfg__tac` já atravessam a linha inteira.
     O que sobra é a calha do editor, que a 375 px come 32 px de largura útil. */
  .imp__ed { padding: var(--e3) var(--e4) var(--e4); }
  .imp__ls { max-height: 268px; }
}

/* O ALVO DE TOQUE. O piso é 44 px, e ele se amplia pela ÁREA — a caixa continua
   com o desenho que tem. Fica no fim porque `pointer: coarse` no topo perde
   para qualquer altura declarada depois, e este projeto já mediu isso. */
@media (pointer: coarse) {
  /* `.lg__bt` SAIU DESTA LINHA, e a saida e deliberada: o primario passou a
     medir 46 px por conta propria, e `.bt--pri.lg__bt` tem DOIS pesos —
     um `.lg__bt` de um peso aqui dentro perderia para ele e a linha ficaria
     INERTE, com a correcao presente no arquivo e sem alcance. Como 46 > 44,
     nao ha o que corrigir; o que nao pode e a linha fingir que corrige. */
  /* ⚠ `.lg__f .inp` SAIU DESTA LINHA JUNTO COM `.lg__bt`: o campo passou a medir
     44 px JA NO DESKTOP (pelo zoom do iOS, ver o bloco do campo), e o primario
     46. Uma linha que reafirma 44 sobre quem ja mede 44 nao corrige nada e
     esconde quem falta — a lista tem de nomear so o que de fato sobe aqui. */
  .lg__lk { height: 44px; }
  /* ⚠ A SAIDA DE SENHA CRESCE POR AREA, e nao pela caixa — mesma tecnica do
     olho, do interruptor de gatilhos e de `.topo__busca`. Ela mora NA LINHA
     DO ROTULO, alinhada pela base com ele: 44 px de altura ali empurrariam o
     rotulo para fora da propria linha. */
  .lg__esq::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: calc(100% + var(--e5)); height: 44px; transform: translate(-50%, -50%);
  }
  /* ⚠ O OLHO DA SENHA CRESCE PELA ÁREA, e não pela caixa — mesma técnica do
     interruptor de gatilhos e de `.topo__busca`. Ele mora DENTRO do campo, que
     mede 44 px aqui: um botão de 44 px encostaria nas duas bordas do campo e
     leria como um segundo campo colado. A caixa fica com os 26 px de
     `.bt--ico.bt--peq` e o alcance vai a 44.
     ⚠ CONSEQUÊNCIA DECLARADA, a mesma das outras duas: `getBoundingClientRect()`
     continua 26×26, e quem medir só o retângulo conta este como reprovado. */
  .lg__olho::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* ⚠ `.cfg__f-ac` e `.pso__ac` ENTRARAM MEDINDO, em 16/08: o botão primário de
     "Pedir acesso ao escritório" e os dois do passo dos três destinos ficaram
     em 32 px porque a lista anterior só nomeava as ações de LINHA. É a mesma
     forma do alvo de 34 px que este projeto já mediu — a regra estava presente
     no arquivo e não cobria o alvo. */
  /* ⚠ E ESTA É A TERCEIRA VEZ. *(B3, 23/08/2026, auditado contra a base de UX —
     piso 44×44, severidade HIGH.)* Medido na aba *Vocabulário*: **42 de 65
     controles** ficavam abaixo de 44 px, e a lista acima cobria SEIS seletores —
     nenhum deles alcançava os atalhos de cor (24×24), as pílulas da cobertura
     (25 de altura, **e elas são PORTA**), os campos de texto (32) nem o seletor
     de cor nativo (44×32). O `<select>` de 19 px, que era o quinto, morreu por
     eliminação na D3 — não confundir as duas coisas. */
  .cfg__tac .bt, .cfg__tl .bt, .usr .bt,
  .cfg__f-ac .bt, .pso__ac .bt, .cfg__abas .chip { height: 44px; }
  /* ⚠ E ESTA E A QUARTA VEZ, agora na aba de GATILHOS — medido em 24/08/2026 no
     preset movel, com `matchMedia('(pointer: coarse)')` confirmado: `.bt--peq`
     das linhas de regra a **52x26**, o `.seg` do recorte a **86x26**, o campo do
     nome a **283x32**, o gatilho do suspenso a **99x28** e os dois interruptores
     a **30x18** — 31 controles abaixo do piso de 44, contra 12 na aba
     *Vocabulario* ao lado. A aba nasceu DEPOIS deste bloco, e o bloco nomeia
     superficie por superficie: regra presente no arquivo que nao cobre o alvo,
     pela quarta vez neste projeto. */
  /* ⚠ `.cfg__gat-bts` ENTROU NO SEGUNDO REDESENHO, e ela e a mesma familia de
     defeito: o passo `.pso` saiu do editor e levou junto a cobertura que
     `.pso__ac .bt` dava aos botoes de gravar. Sem esta linha os tres botoes do
     rodape — e os tres do passo de apagar — voltariam aos 32 px, com a regra de
     44 presente no arquivo e sem alcance, pela QUINTA vez neste projeto. */
  .cfg__gat-rl .bt, .cfg__gat-sl .bt, .cfg__gat-sc .bt,
  .cfg__gat-bts .bt, .cfg__gat-bar .seg button { height: 44px; }
  .cfg__gat-ef .inp, .cfg__gat-ef .chip--sel { height: 44px; }
  /* ⚠ E ESTA É A SEXTA VEZ, agora na aba *Frotas* — e ela entrou COM o redesenho
     de 31/08/2026, não depois dele, justamente porque este bloco já nomeia cinco
     ocorrências da mesma falha: regra presente no arquivo que não cobre o alvo.
     Os campos das três portas JÁ estão cobertos, e por acidente feliz — o editor
     mudou-se para dentro da tabela, então `.cfg__t .inp`, três linhas abaixo,
     passou a alcançá-los. Os BOTÕES não: `.cfg__tl .bt` cobre a LINHA, e o
     editor é irmão dela, não filho. Sem esta linha, *Acrescentar*, *Acrescentar
     a lista*, *Criar frota* e o *Dispensar* da recusa ficariam em 32 px.
     ⚠ Os dois do rodapé do editor não estão aqui porque já estão cobertos por
     `.cfg__f-ac .bt`, acima — repeti-los faria a lista fingir que corrige. */
  .cfg__frt-porta .bt, .cfg__frt-cr .bt, .cfg__frt-ed .avi .bt { height: 44px; }
  /* O CHIP DA PLACA CRESCE PELA CAIXA, E O ALVO PARA EM 28 px — declarado, não
     esquecido. A técnica da ÁREA de 44 px, que o olho da senha e o interruptor
     usam, não serve aqui: os chips ficam a 6 px um do outro e em várias linhas,
     então áreas de 44 px se SOBREPORIAM e o toque tiraria a placa vizinha da
     frota. Alvo errado é pior que alvo pequeno. O que dá para fazer sem isso é
     subir o chip de 25 para 36 px e o `×` de 16 para 28 — acima dos 16 px que a
     peça traz e dos 26 px do botão que havia aqui antes do redesenho. */
  .cfg__frt-ch .fchip { height: 36px; padding: 0 6px 0 12px; gap: 7px; }
  .cfg__frt-ch .fchip button { width: 28px; height: 28px; }
  /* ⚠ E ESTA É A SÉTIMA VEZ — a tela de IMPORTAR PLANILHA, medida em
     31/08/2026. Ela nasceu na MESMA rodada que acrescentou `.cfg__frt-porta
     .bt` quatro linhas acima, e este bloco **não nomeava um único seletor
     `.imp__`**: os chips de coluna em 28 px, as linhas de valor em 28, o
     marcador de cabeçalho em ~18 e os dois botões do rodapé em 32. Seis
     ocorrências da mesma família já estão escritas acima, e esta é a primeira
     em que a régua e o alvo nasceram no MESMO commit — que é exatamente o que
     torna a falha fácil de repetir: quem escreve a tela olha para a folha
     dela, não para o fim desta.
     ⚠ `.mod__rod--imp` É ESCOPO, NÃO PEÇA: sem ela a linha alcançaria o rodapé
     do CARD, que é de outra tela e de outra rodada — e mexer no card por
     tabela cruzada é o oposto de corrigir com endereço. */
  /* ⚠ **NADA DESTA TELA PRECISA DE LINHA AQUI**, e a que havia era regra
     reafirmando o que já valia: `modal.css` dá 44 px a `#mod .bt`, `#mod .inp`
     e `.mudar__o`, e os botões desta tela são todos `.bt` dentro de `#mod`.
     *(A primeira versão escrevia `.imp__cp .bt, .imp__pv .bt` — exatamente o
     defeito que o comentário três linhas acima diz estar evitando.)* */
  /* O MARCADOR DE CABEÇALHO CRESCE PELA ÁREA, e não pela caixa: `.ck` é o nó
     que desenha o quadrado marcado, e 44 px nele viraria um retângulo. Mesma
     técnica do olho da senha e do interruptor de gatilhos, e a mesma
     consequência declarada — `getBoundingClientRect()` continua 18×18. */
  .imp__ed .opt .ck { position: relative; }
  .imp__ed .opt .ck::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* O INTERRUPTOR NAO CRESCE PELA CAIXA: 44 px de altura faria a pilula de 18 px
     virar uma barra, e o `::after` que desenha o botao e posicionado por ela. Ele
     cresce pela AREA, que e a mesma tecnica de `.cfg__cal .cal__d--tem` no fim
     deste bloco. ⚠ O `::before` e `position: absolute`, entao NAO vira item de
     flex dentro do proprio `.sw` — que e `display: flex`.
     ⚠ CONSEQUENCIA DECLARADA, herdada da mesma tecnica: `getBoundingClientRect()`
     continua 30x18, e quem medir so o retangulo conta os dois como reprovados. */
  .cfg__gat-int .sw { position: relative; }
  .cfg__gat-int .sw::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* O CAMPO CRESCE PELA CAIXA — nele isso não custa desenho nenhum, e é o que
     `.lg__f .inp` já faz na tela de entrar, logo acima nesta mesma folha. */
  .cfg__f .inp, .cfg__t .inp, .pso .inp,
  .cfg__f .chip--sel, .pso .chip--sel, .cfg__cor-in { height: 44px; }
  /* A PÍLULA DA COBERTURA cresce pelo piso e mantém o desenho: ela já é
     `inline-flex` centrada, então o nó e o texto seguem no meio. */
  .cfg__cob-t { min-height: 44px; }
  /* *Mostrar inativos* em `#/condutores` (02/10/2026): 32 px no mouse, para
     ficar na linha do campo de busca; no dedo, o piso — medido a 375 px com
     `pointer: coarse`, ele era o único alvo da tela abaixo de 44. */
  .cfg__cnd-ina { min-height: 44px; }
  /* A aba *Sincronismo* (05/10/2026): a fileira das ações e o *Mostrar os N*
     moram fora de `.cfg__f-ac`, `.pso__ac` e `.cfg__tl`, e a lista acima não os
     alcançaria — pela sexta vez, a regra presente no arquivo sem cobrir o alvo. */
  .cfg__snc-ac .bt, .cfg__snc-mais { height: 44px; }
  /* ⚠ O ATALHO DE COR É O ÚNICO QUE NÃO PODE CRESCER, e por isso ele é o único
     que se amplia pela ÁREA. Um quadrado de 44 px destruiria a fileira da paleta
     — seis amostras de cor viram seis botões —, e a amostra É o controle: ela
     existe para mostrar a cor, e não para caber num dedo. `::before` centralizado
     de 44×44 é a forma que este bloco já usa em `.usr__pi .sw::before`.
     ⚠ CONSEQUÊNCIA DECLARADA: `getBoundingClientRect()` do botão continua 24×24
     — pseudo-elemento não entra no retângulo do elemento. Quem medir o alvo por
     `getBoundingClientRect` sozinho vai contar estes seis como reprovados; o alvo
     real é a união com o `::before`, e é assim que ele se confere. */
  .cfg__cor-o { position: relative; }
  .cfg__cor-o::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .usr__pi .sw, .cfg__pa-p .ck { position: relative; }
  .usr__pi .sw::before, .cfg__pa-p .ck::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* ⚠ E ESTA É A QUARTA VEZ — a regra estava presente no arquivo e não cobria o
     alvo, de novo. *(24/08/2026.)* O seletor de data nasceu na D4 abrindo na
     camada `#menus`, e TODA régua de alvo deste projeto varre
     `#conteudo button, a, input`: ela nunca visita o painel. Medido a 375 px com
     `pointer: coarse` REAL (preset móvel, `matchMedia` confirmado), pela área
     efetiva `rect ∪ ::before`: **33 de 33 controles do painel abaixo de 44×44** —
     as 31 células de dia a 41×41 e as duas setas de mês a 34×26 — enquanto
     `#conteudo` dava **0 de 214**. A tela passava verde sobre uma superfície que
     a régua não enxerga.
     ⚠ AMPLIA PELA ÁREA, e é obrigatório aqui: sete colunas de 44 px não cabem nos
     316 px do painel, e esticar a caixa quebraria a grade do mês. É a mesma
     técnica de `.cfg__cor-o` acima — e ela herda a mesma consequência declarada:
     `getBoundingClientRect()` continua 41×41, e quem medir só o retângulo vai
     contar estes 31 como reprovados.
     ⚠ CONSEQUÊNCIA MEDIDA E ACEITA: com 41 px de célula e 44 de alvo, dias
     vizinhos se sobrepõem em ~1,5 px de cada lado. O dedo no meio da célula
     sempre acerta; o encostado na borda pode cair no vizinho — que é o preço da
     ampliação por pseudo-elemento, e é preferível a um alvo de 41 px.
     ⚠ `--tem` E NÃO `.cal__d`: os dias do mês vizinho são `<span>` inerte, e dar
     alvo de toque a quem não responde a toque é prometer clique que não existe. */
  .cfg__cal .cal__d--tem, .cfg__cal .cal__c .bt, .cfg__cal-ac .bt { position: relative; }
  .cfg__cal .cal__d--tem::before, .cfg__cal .cal__c .bt::before,
  .cfg__cal-ac .bt::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* TODO HOVER MORA AQUI. Sem o guarda, o dedo em tela deixa o cartão preso
   levantado depois do toque. Entrada mais lenta que a saída, e dois canais no
   máximo — um gesto, um relógio. */
@media (max-width: 900px) {
  /* A LINHA DA REGRA VIRA DUAS FAIXAS abaixo de 900 px: com quatro trilhas numa
     largura de telefone, o nome da regra fica com ~40 px e o rotulo trunca em
     duas letras. O nome ocupa a linha inteira e o resto se alinha embaixo. */
  .cfg__gat-rl { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--e2); }
  .cfg__gat-rn { grid-column: 1 / -1; }
  .cfg__gat-rd { grid-column: 1; justify-self: start; }
  /* AS DUAS GRADES DO EDITOR VIRAM UMA COLUNA, e as duas pelo mesmo motivo: com
     `1fr 1fr` numa largura de telefone, o campo do nome fica com ~150 px e a
     frase de ajuda do interruptor quebra em quatro linhas de tres palavras. */
  .cfg__gat-ef, .cfg__gat-ints { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  /* O CABECALHO DA SECAO EMPILHA O BOTAO, e sem isto o *Ver as regras* espreme o
     titulo — `space-between` com dois filhos numa largura de 375 px. */
  .cfg__gat-sc { flex-direction: column; align-items: flex-start; }
}

/* ⚠ O GIRO PARA, MAS O BOTÃO CONTINUA DIZENDO QUE ESTÁ OCUPADO — quem pediu
   menos movimento não pediu menos informação. O rótulo ("Entrando…") e o
   `aria-busy` do botão não dependem desta animação, e é por isso que ela pode
   sumir inteira: conteúdo nunca depende de animação para existir. */
@media (prefers-reduced-motion: reduce) {
  .lg__sp, .cfg__sp { animation: none; }
}

@media (hover: hover) {
  .pso__o:hover { border-color: var(--lin3); }
  .lg__lk:hover { color: var(--fg); }
  /* ⚠ DOIS PESOS AQUI TAMBEM (`.bt--pri.lg__bt:hover`): `.bt--pri:hover` de
     `componentes.css` pinta `--acao-h`, e um peso so empataria com ele —
     deixando a decisao para a ordem das folhas, que e o que a lei proibe.
     ⚠ O HOVER SOBE UM DEGRAU DA PROPRIA RAMPA — `--b700` —, e nao uma mistura
     digitada. E o degrau anda para o lado CERTO nos dois temas de graca, porque
     a rampa inverte: no claro ele escurece (#5429AE, e o contraste com o texto
     SOBE de 6,84 para 9,11) e no escuro ele clareia (#A78BFA, 4,55 para 6,73).
     Uma mistura fixa iria para o mesmo lado nos dois e apagaria o botao num
     deles. */
  .bt--pri.lg__bt:hover { background: var(--b700); border-color: var(--b700); box-shadow: var(--sh1); }
  .lg__esq:hover { color: var(--fg); text-decoration-color: currentColor; }
  /* o olho é `.bt--fant`: ele já escurece no hover pela regra de componentes.
     O que falta é o cursor dizer que ali há um controle dentro de um campo. */
  .lg__olho:hover { color: var(--fg); }
}