/* ==========================================================================
   COMPONENTES — botao, chip, tag, placa, prazo, estado, territorio, campo de
   formulario, tabela, menu, modal, toast, vazio, dica.
   FONTE: DS 4.0, secoes "CONTROLES", "LISTA / TABELA" e "SOBREPOSICAO".
   ========================================================================== */

/* TODA peca inline de altura fixa centraliza no eixo E no meio da linha.
   `baseline` numa caixa de altura fixa cola o conteudo no topo — o DS mediu
   8 px de desvio no badge de prazo. E sem `vertical-align:middle` a peca senta
   na linha de base do texto vizinho, o que a deixava 2 px alta na celula. */
.pz, .tag, .placa, .ck, .rd, .sw, .chip, .fchip, .kbd, .bt, .av-q, .topo__id { vertical-align: middle; }

/* ------------------------------------------------------------- botao ----
   ACAO E TINTA. O primario era --b600 (roxo). Com o orgao agora falando roxo
   (--ant), botao roxo ao lado de linha roxa lia como se a acao pertencesse ao
   orgao. Preto nao disputa matiz com territorio nenhum. */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  height: 32px; padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; color: var(--fg);
  background: var(--sup); border: 1px solid var(--lin2);
  white-space: nowrap; flex: none;
  /* um relogio so: o `transform` em 90 ms enquanto o resto corria em 140 sao
     dois movimentos onde devia haver um. */
  transition: background   calc(var(--t1) * var(--mo)) var(--suave),
              border-color calc(var(--t1) * var(--mo)) var(--suave),
              color        calc(var(--t1) * var(--mo)) var(--suave),
              box-shadow   calc(var(--t1) * var(--mo)) var(--suave),
              transform    calc(var(--t1) * var(--mo)) var(--suave);
}
@media (hover: hover) {
  .bt:hover { background: var(--sup2); border-color: var(--lin3); transition-duration: calc(var(--t2) * var(--mo)); }
  .bt--pri:hover { box-shadow: var(--sh1); }
}
/* :active PODE ser seco: e resposta a um clique, nao transicao de estado. */
.bt:active { transition-duration: 80ms; transform: translateY(1px) scale(.995); }
.bt[disabled], .bt.off { opacity: .45; pointer-events: none; }

.bt--pri {
  background: var(--acao); border-color: var(--acao); color: var(--acao-fg);
  font-weight: 550; box-shadow: var(--sh0);
}
.bt--pri:hover { background: var(--acao-h); border-color: var(--acao-h); }

.bt--fant { background: none; border-color: transparent; color: var(--fg2); }
.bt--fant:hover { background: var(--sup2); color: var(--fg); border-color: transparent; }

.bt--peq { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: var(--r-xs); }
.bt--ico { width: 32px; padding: 0; }
.bt--ico.bt--peq { width: 26px; }

/* filtro ligado: marca, nao acao — por isso continua roxo */
.bt--ativo { border-color: var(--b300); background: var(--b50); color: var(--b700); font-weight: 550; }
.bt--ativo:hover { background: var(--b100); border-color: var(--b400); }
html[data-tema="escuro"] .bt--ativo { background: var(--b100); color: var(--b800); border-color: var(--b200); }

/* contagem dentro do botao, em mono */
.bt b { font-family: var(--fm); font-size: 11px; font-weight: 500; color: var(--fg3); }
.bt--pri b { color: color-mix(in srgb, var(--acao-fg) 68%, transparent); }
/* no botao aceso a contagem acompanha — "Filtros 2" em cinza sobre fundo roxo
   leria como legenda desligada dentro de um controle ligado */
.bt--ativo b { color: var(--b600); }
html[data-tema="escuro"] .bt--ativo b { color: var(--b800); }

/* -------------------------------------------------------------- chip ---- */
.chip {
  display: inline-flex; align-items: center; gap: var(--e2);
  height: 28px; padding: 0 10px;
  border-radius: var(--pill);
  font-size: 12px; color: var(--fg2);
  background: none; border: 1px solid transparent;
  white-space: nowrap; flex: none;
  transition: background calc(var(--t1) * var(--mo)) var(--suave),
              color      calc(var(--t1) * var(--mo)) var(--suave);
}
@media (hover: hover) {
  .chip:hover { background: var(--sup2); color: var(--fg); transition-duration: calc(var(--t2) * var(--mo)); }
}
.chip b { font-family: var(--fm); font-size: 11px; font-weight: 500; color: var(--fg3); }
.chip.on { background: var(--sup); border-color: var(--lin2); color: var(--fg); font-weight: 550; box-shadow: var(--sh1); }
.chip.on b { color: var(--b600); }
html[data-tema="escuro"] .chip.on b { color: var(--b500); }

/* segmento: grupo de chips numa calha */
/* A CALHA PRECISA DE ARESTA. --sup2 sobre --bg mede 1,04:1 e sobre a propria
   faixa recuada da chapa mede 1,00 — a pilula simplesmente nao existia, e o
   unico segmento visivel era o `.on` (branco, com sombra), que lia como um
   botao solto em vez de uma escolha entre tres. O fio de 1 px devolve o
   contorno do controle em qualquer superficie em que ele pouse. */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--sup2);
       border: 1px solid var(--lin2); border-radius: var(--pill); flex: none; }
/* ⚠ `inline-flex` NAO E OPCIONAL AQUI, e a falta dele foi um defeito visivel:
   `button` e `display: block` por padrao, entao um `<svg>` de 14 px seguido de
   texto virava conteudo de bloco com o icone e o rotulo em DUAS LINHAS dentro
   de uma caixa de 24 px. O `.on` pintava a caixa inteira e o resultado lia como
   renderizacao quebrada — o fundo branco em cima, o rotulo escapando embaixo.
   O segmento so tinha consumidor sem icone ate a lente do Acervo chegar, e por
   isso o defeito nasceu com ela. */
.seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: var(--pill);
  font-family: var(--fm); font-size: 11px; color: var(--fg3);
  white-space: nowrap;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease);
}
.seg button .ico { flex: none; }
.seg button:hover { color: var(--fg); }
.seg button.on { background: var(--sup); color: var(--fg); font-weight: 600; box-shadow: var(--sh1); }

/* chip de filtro ativo, removivel */
.fchip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 25px; padding: 0 5px 0 9px; border-radius: var(--pill);
  font-size: 11.5px; font-weight: 500; flex: none;
  background: var(--b50); color: var(--b700); border: 1px solid var(--b100);
  transition: background calc(var(--t1) * var(--mo)) var(--suave);
}
html[data-tema="escuro"] .fchip { background: var(--b100); color: var(--b800); border-color: var(--b200); }
.fchip i { font-style: normal; color: color-mix(in srgb, currentColor 62%, transparent); }
.fchip button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--r-xs); color: inherit; opacity: .55; }
.fchip button:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }

/* --------------------------------------------------------------- tag ---- */
.tag {
  display: inline-flex; align-items: center; gap: var(--e1);
  height: 19px; padding: 0 7px; border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--sup3); color: var(--fg2); flex: none; white-space: nowrap;
}
/* territorio em forma de tag: diz a ORIGEM do dado, nunca o risco.
   Cor de TEXTO usa a variante -t (ver base.css): a base e preenchimento. */
.tag--ant { background: var(--ant-f); color: var(--ant-t); }
.tag--ctb { background: var(--ctb-f); color: var(--ctb-t); }
.tag--marca { background: var(--b50); color: var(--b700); }
html[data-tema="escuro"] .tag--marca { background: var(--b100); color: var(--b800); }
.tag--vazada { background: none; border: 1px solid var(--lin2); color: var(--fg3); }
/* CHEGADA — o unico selo em lime, portado do DS 4.0 (`.tag--fim`), que eu nao
   tinha aplicado. Preenchimento lime com o texto institucional por cima:
   12,73:1. Vale so para "isto TERMINOU", nunca para "isto vai bem" — e por
   isso mora no endereco Encerrado e em mais lugar nenhum. Verde e do prazo
   (folga); lime e fim de trajeto. Nao trocam de lugar. */
.tag--fim { background: var(--lime); color: var(--lime-fg); font-weight: 700; }
.tag--al { background: var(--r2s); color: var(--r2t); }
.tag--er { background: var(--r1s); color: var(--r1t); }

/* O CHIP DA ETIQUETA — chip com CONTORNO, e a forma e o que o separa da pilula
   de prazo. As duas leis so convivem por isso: vermelho, ambar e verde continuam
   sendo do prazo, e uma etiqueta vermelha ao lado da pilula destruiria o unico
   canal que a urgencia tem. A pilula tem NO; este tem contorno, e ele nunca
   ocupa a coluna do relogio.

   As duas variaveis chegam INLINE, do JS (`ui.chipDeEtiqueta`): `--etq-f` e a
   cor que o cliente escolheu e `--etq-t` sai de `ui.contrasteDe`, derivada dela
   e nunca digitada. As RESERVAS nao sao zelo: etiqueta sem cor e estado real do
   model (`cor` e `""` por padrao), e sem elas o chip nasceria transparente.

   ⚠ ERA `.cfg__etq`, EM `acesso.css`, ATE 08/10/2026 — e saiu de la quando o
   card passou a desenhar o chip: peca de duas telas mora na folha comum.

   ⚠ O CONTORNO E A PROPRIA COR, UM TOM ABAIXO — nunca o texto *(09/10/2026,
   achado pelo operador: "a coloracao da etiqueta ficou esquisita, nao parece a
   mesma da selecao das configuracoes")*. Era `currentColor` a 40%: em cor
   escura o texto e branco, e o chip ganhava um HALO CLARO de 1 px em volta —
   num chip de 19 px de altura, um quinto dele, e o olho lia outra cor. Agora o
   chip e a amostra do atalho de Configuracoes (`.cfg__cor-o`), com a borda do
   mesmo matiz. `--etq-b` mora numa variavel de proposito: sem `--etq-f` (a
   etiqueta sem cor), ela fica invalida e o `var()` cai no `--lin2` — o chip
   neutro continua com o contorno do DS, sem uma classe a mais para
   `config/vocabulario.js:pintarChip` lembrar de trocar. */
/* ⚠ A LETRA E A DOS CHIPS DA PLATAFORMA, NAO A DO SELO *(09/10/2026, achado
   pelo operador: "a fonte das etiquetas parece nao ser a mesma da
   plataforma")*. A familia sempre foi a Geist; o que destoava era o `.tag`:
   10,5 px, peso 600 e `.01em` de espacamento — a voz dos SELOS de sistema
   (territorio, marcas), escrita para duas palavras do proprio produto. Num
   nome livre, *"Mariana do financeiro"*, aquilo lia como outra fonte, e branco
   sobre cor escura engrossa a letra mais um pouco. A etiqueta fala como o
   `.fchip`: 11,5 px, peso 500, sem espacamento. */
.etq {
  --etq-b: color-mix(in srgb, var(--etq-f) 78%, #000);
  background: var(--etq-f, var(--sup3));
  color: var(--etq-t, var(--fg2));
  border: 1px solid var(--etq-b, var(--lin2));
  font-size: 11.5px; font-weight: 500; letter-spacing: 0;
  max-width: 100%;
}
/* O NOME CORTA COM RETICENCIAS, e o `title` do chip o traz inteiro. O teto e em
   `ch`, nunca em px: 32 caracteres cabem os dois exemplos do operador
   (*"Mariana do financeiro"*, *"verificar indicacao do condutor"*), e o nome nao
   tem teto de tamanho no cadastro. */
.etq__n { min-width: 0; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }
/* O NOME COMO LINK — no card e na linha do Acervo, para o Acervo filtrado so
   por ela (`ui.chipDeEtiqueta` com `href`). Ele herda a cor do chip, que e a
   derivada da cor do cliente, e so ganha sublinhado ao passar o mouse: em
   repouso o chip continua lendo como chip. */
a.etq__n { color: inherit; text-decoration: none; }
/* O `×` DE TIRAR, so no card e so com `decidir` — a forma do `×` de `.fchip`. */
.etq__x {
  display: grid; place-items: center; flex: none; width: 14px; height: 14px;
  margin-right: -3px; border-radius: var(--r-xs); color: inherit; opacity: .6;
}
@media (hover: hover) {
  .etq__x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
  a.etq__n:hover { text-decoration: underline; }
}

/* ------------------------------------------------------------- placa ---- */
/* imita a placa fisica: mono, contorno, tracking largo */
.placa {
  display: inline-flex; align-items: center; height: 21px; padding: 0 7px;
  font-family: var(--fm); font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
  border: 1px solid var(--lin2); border-radius: var(--r-xs);
  background: var(--sup); color: var(--fg); flex: none; white-space: nowrap;
}
.placa--peq { height: 18px; font-size: 10.5px; padding: 0 5px; }

/* -------------------------------------------------------- territorio ----
   A LINHA DO ORGAO. Um filete de 3 px na aresta esquerda do bloco diz de onde
   o dado veio sem gastar nem uma palavra nem um badge. Nunca e risco. */
.terr { position: relative; padding-left: var(--e5); }
.terr::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
                width: 3px; border-radius: var(--pill); background: var(--lin2); }
.terr--ant::before { background: var(--ant); }
.terr--ctb::before { background: var(--ctb); }

/* o rotulo do territorio. Nome `.trl` e nao `.tl` do DS: `.tl` ja e a linha do
   tempo do modal, e duas coisas com o mesmo nome e como o defeito comeca. */
.trl {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--fm); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.trl::before { content: ""; width: 14px; height: 3px; border-radius: var(--pill); background: currentColor; flex: none; }
/* o rotulo tem as duas naturezas: o traco de 14x3 e marca grafica (3:1 basta)
   e as letras sao texto (4.5:1). Como o traco herda `currentColor`, a peca
   inteira anda na variante de TEXTO — o traco so fica mais escuro, e escuro
   demais nunca reprovou contraste. */
.trl--ant { color: var(--ant-t); }
.trl--ctb { color: var(--ctb-t); }

/* ------------------------------------------------------------- prazo ----
   A UNICA coisa do sistema que usa a escala de risco — E ELA NAO PODE SER O
   CANAL UNICO: para ~8% dos homens as tres pilulas sao tres cinzas. A saida
   nao pode ser outra cor (a lei da a vermelho/ambar/verde dono unico), entao
   e o NO, com os TRES preenchimentos que ja sao a gramatica de .est:
     cheio = vence hoje / urgente · meio = na semana · vazado = folga
     cheio com traco diagonal = vencido · sem no = sem prazo publicado.
   O numero de dias e SEMPRE texto — a cor so acelera.

   `flex:none` so vale em contêiner flex. Em GRID o badge vira item e estica
   para a largura da coluna. `justify-self:start` faz a pilula abracar o
   conteudo em qualquer contêiner. */
.pz {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 22px; padding: 3px 9px 3px 8px; border-radius: 12px; line-height: 1.15;
  font-size: 11px; font-family: var(--fm); font-weight: 500;
  background: var(--sup3); color: var(--fg2);
  flex: none; justify-self: start; width: fit-content; white-space: nowrap;
}
/* o no da pilula: mesmos 9 px / 1.5 px de .est — e a mesma lingua */
.pz s { text-decoration: none; width: 9px; height: 9px; border-radius: 50%;
        border: 1.5px solid currentColor; flex: none; position: relative; }
/* os dois andares: o relogio que lidera em cima, a alternativa embaixo */
.pz .pz__t { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.pz i { font-style: normal; font-family: var(--ff); font-size: 10.5px; opacity: .72; }

.pz--v { background: var(--r1s); color: var(--r1t); }   /* vencido */
.pz--v s { background: var(--no-diag); }
.pz--u { background: var(--r2s); color: var(--r2t); }   /* <= 5 dias */
.pz--u s { background: var(--no-cheio); }
/* `.pz--m` — `vivo: true` com `dias < 0`. O que acabou foi a NOSSA folga de dia
   util; a janela do orgao continua aberta, e este item e o MAIS urgente da
   lista, nao o menos. NUNCA se desenha como vencido: `.pz--v` leva o no
   DIAGONAL (janela fechada) e nenhuma borda; aqui o no e CHEIO (demanda
   maxima) e a borda de 1 px separa os dois em tela — sao dois canais alem da
   cor, porque para ~8% dos homens as tres pilulas sao tres cinzas. */
.pz--m { background: var(--r1s); color: var(--r1t); border: 1px solid var(--r1l); }
.pz--m s { background: var(--no-cheio); }
.pz--n { background: var(--sup3); color: var(--fg2); }  /* 6 a 15 dias */
.pz--n s { background: var(--no-meio); }
.pz--f { background: var(--r3s); color: var(--r3t); }   /* folga */
.pz--f s { background: var(--no-vazado); }
/* sem prazo publicado fica FORA da escala de cor. nunca verde. sem no. */
.pz--s { background: none; border: 1px dashed var(--lin2); color: var(--fg3); }
/* prazo ESTIMADO nunca colapsa com lido: o no fica tracejado */
.pz--est s { border-style: dashed; }

/* o no que pulsa: SO quando o prazo e hoje. reacao com significado. */
.pz--hoje s::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
                     border: 1.5px solid currentColor; animation: pulso 1.9s var(--ease) infinite; }
.no-hoje { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--r1); flex: none; }
.no-hoje::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
                  border: 1.5px solid var(--r1); animation: pulso 1.9s var(--ease) infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .no-hoje::after, .pz--hoje s::after { animation: none; } }

/* ------------------------------------------------------------ estado ---- */
/* A FAMILIA DE ESTADO MORA EM css/estado.css, e nao aqui.
   Os seis enderecos morreram em 13/08, e as badges deles sairam junto. O que ficou vive na folha da peca: .est/.est--sit (a badge
   de Situacao, o papel) e .st/.st--* (a badge de Status, o que o cliente
   edita), mais os quatro tokens de forma do no. */

/* ------------------------------------------------- campo de formulario -- */
.cmp { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.cmp__r { font-size: 11.5px; font-weight: 500; color: var(--fg2); }
.inp {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  height: 32px; padding: 0 10px; background: var(--sup);
  border: 1px solid var(--lin2); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--fg);
  transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.inp::placeholder { color: var(--fg4); }
.inp:hover { border-color: var(--lin3); }
.inp:focus, .inp.foco { border-color: var(--b400); box-shadow: var(--anel); }
.inp.err { border-color: var(--r1l); background: color-mix(in srgb, var(--r1s) 40%, var(--sup)); }
/* fg3, nao fg4: campo desabilitado ainda e texto que o operador le, e o piso
   de contraste da camada de instrumento e --fg3 (4,54:1). --fg4 fica restrito
   a placeholder, eixo de grafico e .prov — e mais nada. */
.inp.off { background: var(--sup2); color: var(--fg3); pointer-events: none; }
.inp--mono { font-family: var(--fm); letter-spacing: .04em; }
.cmp__er { display: flex; align-items: flex-start; gap: 5px; font-size: 11px; color: var(--r1t); line-height: 1.4; }
.cmp__aj { font-size: 11px; color: var(--fg3); line-height: 1.4; }
.ta { height: auto; min-height: 62px; padding: 8px 10px; line-height: 1.5; resize: vertical; font-family: inherit; }
.sel {
  appearance: none; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* marcador: TINTA, pela mesma lei do botao primario */
.ck {
  width: 15px; height: 15px; border: 1.5px solid var(--lin3); border-radius: 4px;
  display: grid; place-items: center; flex: none; background: var(--sup); cursor: pointer;
  transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.ck svg { opacity: 0; width: 10px; height: 10px; stroke: var(--acao-fg); stroke-width: 3; fill: none; }
.ck.on { background: var(--acao); border-color: var(--acao); }
.ck.on svg { opacity: 1; }
.ck.meio { background: var(--acao); border-color: var(--acao); }
.ck.meio::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--acao-fg); }
.rd { width: 15px; height: 15px; border: 1.5px solid var(--lin3); border-radius: 50%; flex: none; background: var(--sup); }
.rd.on { border-color: var(--acao); border-width: 5px; }
.sw {
  width: 30px; height: 18px; border-radius: var(--pill); background: var(--lin3);
  flex: none; padding: 2px; display: flex; transition: background var(--t2) var(--ease);
}
.sw::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff;
             box-shadow: var(--sh1); transition: transform var(--t2) var(--ease); }
.sw.on { background: var(--acao); }
.sw.on::after { transform: translateX(12px); }
.opt { display: flex; align-items: center; gap: var(--e3); font-size: 12.5px; color: var(--fg); cursor: pointer; }

/* ------------------------------------------------------------ entidade -- */
.ent { display: inline-flex; align-items: center; gap: var(--e3); min-width: 0; }
.av-q {
  width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--b800); color: #fff;
  flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
}
.av-q--n { background: var(--sup3); color: var(--fg2); }
html[data-tema="escuro"] .av-q { background: var(--b300); color: var(--b900); }

/* ------------------------------------------------------------ esqueleto - */
.sk {
  display: block; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--sup2) 0%, var(--sup3) 50%, var(--sup2) 100%);
  background-size: 220% 100%; animation: sk 1.4s var(--ease) infinite;
}
@keyframes sk { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; background: var(--sup2); } }

/* ------------------------------------------------------------ tabela ---- */
.tb-env { border-radius: var(--r-lg); border: 1px solid var(--lin); background: var(--sup);
          overflow: hidden; box-shadow: var(--sh1), var(--brilho); }
.tb-rol { overflow-x: auto; }

.tb { table-layout: fixed; }

/* com table-layout:fixed, se a soma das larguras declaradas passa da largura
   do contêiner a coluna flexivel colapsa para ZERO em vez de a tabela rolar.
   O min-width e o que faz o contêiner rolar e a coluna sobreviver.
   1180 e nao os 1100 do v4: a coluna "Tambem cabe" pede mais. */
/* a medida vem de --tbmin, que lista.js soma das colunas EM USO. O 1180 do
   fallback e so a rede: era o valor fixo antigo, do conjunto de sete. */
.tb--itens { min-width: var(--tbmin, 1180px); }
.tb thead th {
  position: sticky; top: 0; z-index: var(--z-fixo);
  height: 34px; padding: 0 16px;
  background: var(--sup2);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg3); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--lin);
}
.tb thead th.dir { text-align: right; }
.tb th.ord { cursor: pointer; user-select: none; }
.tb th.ord:hover { color: var(--fg2); }
.tb th.ord.on { color: var(--fg); }
.tb th .cav { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle;
              border: 3px solid transparent; }
.tb th.on.asc  .cav { border-bottom-color: currentColor; margin-bottom: 3px; }
.tb th.on.desc .cav { border-top-color: currentColor; margin-top: 3px; }

.tb tbody tr {
  border-bottom: 1px solid var(--lin);
  transition: background calc(var(--t1) * var(--mo)) var(--suave),
              box-shadow calc(var(--t1) * var(--mo)) var(--suave);
}
.tb tbody tr:last-child { border-bottom: none; }
.tb tbody tr.clic { cursor: pointer; }
@media (hover: hover) {
  /* linha NAO leva assimetria: quem varre uma lista move o cursor rapido, e
     fundo que atrasa para entrar le como travamento, nao como suavidade. */
  .tb tbody tr.clic:hover { background: var(--sup2); box-shadow: inset 2px 0 0 var(--lin3); }
}
.tb tbody tr.sel { background: var(--b50); }
.tb tbody tr.foco { background: var(--b50); box-shadow: inset 3px 0 0 var(--b600); }
html[data-tema="escuro"] .tb tbody tr.sel { background: var(--b100); }
/* a altura da linha e o token de densidade — comutavel no topo, nunca fixo */
.tb td { padding: 0 16px; height: var(--lh); vertical-align: middle;
         transition: height var(--t2) var(--ease); }
.tb td.dir { text-align: right; }
.tb td.mono { font-family: var(--fm); font-size: 12px; }

/* celula de duas linhas: o segundo andar e sempre contexto, nunca dado novo.
   A folha do DS apaga esse andar na densidade compacta. Aqui NAO: ver a nota
   de densidade em base.css — nesta tabela a regra apagava placa, empresa,
   nome da infracao, amparo e local, e a linha continuava em 48 px assim mesmo. */
.cel2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cel2 > * { min-width: 0; }
.cel2 b { font-weight: 500; font-size: 12.5px; }
.cel2 span { font-size: 11px; color: var(--fg3); }

/* -------------------------------------------------------- paginador ----- */
.pag { display: flex; align-items: center; gap: var(--e4); padding: 10px 14px; border-top: 1px solid var(--lin);
       background: var(--sup2); font-size: 12px; color: var(--fg3); }
.pag .pgs { display: flex; gap: 2px; margin-left: auto; }
.pag .pgs button { min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-xs);
                   font-size: 11.5px; font-family: var(--fm); color: var(--fg2); }
.pag .pgs button:hover { background: var(--sup3); color: var(--fg); }
.pag .pgs button.on { background: var(--acao); color: var(--acao-fg); font-weight: 600; }
.pag .ck { margin-right: 2px; }

/* -------------------------------------------------------------- menu ---- */
.menus { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-menu); }
.menu {
  position: absolute; pointer-events: auto;
  background: var(--sup); border: 1px solid var(--lin2); border-radius: var(--r-md);
  box-shadow: var(--sh3); padding: 5px; min-width: 200px;
  max-height: 62vh; overflow-y: auto; overscroll-behavior: contain;
  animation: sobe calc(var(--t2) * var(--mo)) var(--ease);
}
@keyframes sobe { from { opacity: 0; transform: translateY(-4px); } }
.menu .tt { padding: 7px 9px 5px; font-family: var(--fm);
            font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
            text-transform: uppercase; color: var(--fg3); }
.menu .sep { height: 1px; background: var(--lin); margin: 4px 0; }
.menu button {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: 7px 9px; border-radius: var(--r-xs); font-size: 12.5px; color: var(--fg); text-align: left;
}
.menu button:hover { background: var(--sup2); }
.menu button.on { color: var(--b600); font-weight: 550; }
html[data-tema="escuro"] .menu button.on { color: var(--b500); }
.menu button .n { margin-left: auto; font-family: var(--fm); font-size: 11px; color: var(--fg3); }
.menu button .ck-m { width: 14px; flex: none; opacity: 0; }
.menu button.on .ck-m { opacity: 1; }
.menu button.com-sub { align-items: flex-start; padding: 9px; }
.menu .sub-m { font-size: 11px; color: var(--fg3); white-space: normal; line-height: 1.35; }

/* -------------------------------------------------------------- veu ----- */
.veu {
  position: fixed; inset: 0; z-index: var(--z-veu);
  background: color-mix(in srgb, var(--inst) 46%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t2) var(--ease), visibility var(--t2);
}
.veu.on { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------- modal ---- */
.mod {
  position: fixed; z-index: var(--z-mod); inset: 0; display: grid; place-items: center;
  padding: 24px; pointer-events: none; visibility: hidden;
}
.mod.on { visibility: visible; }
.mod__cx {
  pointer-events: auto; display: flex; flex-direction: column;
  width: min(1060px, 94vw); max-height: min(880px, 90vh);
  background: var(--sup); border: 1px solid var(--lin2); border-radius: var(--r-xl);
  box-shadow: var(--sh3); overflow: hidden;
  animation: modIn calc(var(--t3) * var(--mo)) var(--entra);
}
@keyframes modIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.mod__cab { padding: 18px 20px 14px; border-bottom: 1px solid var(--lin); flex: none; }
.mod__b { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; min-height: 0; }
.mod__rod {
  flex: none; display: flex; align-items: center; gap: var(--e4);
  padding: 12px 18px; border-top: 1px solid var(--lin); background: var(--sup2);
}

/* ------------------------------------------------------------ paleta ---- */
.pal { position: fixed; inset: 0; z-index: var(--z-pal); display: grid; place-items: start center;
       padding: 12vh 20px 20px; pointer-events: none; visibility: hidden; }
.pal.on { visibility: visible; }
.pal__cx {
  pointer-events: auto; width: min(620px, 94vw);
  background: var(--sup); border: 1px solid var(--lin2); border-radius: var(--r-lg);
  box-shadow: var(--sh3); overflow: hidden; animation: modIn calc(var(--t2) * var(--mo)) var(--ease);
}
.pal__in { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 50px;
           border-bottom: 1px solid var(--lin); }
.pal__in input { flex: 1; font-size: 15px; }
.pal__in input::placeholder { color: var(--fg4); }
.pal__l { max-height: 50vh; overflow-y: auto; padding: 6px; }
.pal__l .tt { padding: 8px 10px 4px; font-family: var(--fm);
              font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
              text-transform: uppercase; color: var(--fg3); }
.pal__l button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
                 border-radius: var(--r-sm); text-align: left; }
.pal__l button.on { background: var(--sup2); }
.pal__l .r { font-size: 13px; color: var(--fg); }
.pal__l .s { font-size: 11.5px; color: var(--fg3); margin-left: auto; flex: none; font-family: var(--fm); }

/* ------------------------------------------------------------- toast ---- */
.toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
          z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--e3); align-items: center; }
.toast {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px 11px 15px; border-radius: var(--pill);
  background: var(--inst); color: var(--inst-fg); font-size: 12.5px;
  box-shadow: var(--sh3); animation: toastIn calc(var(--t3) * var(--mo)) var(--entra);
  max-width: min(560px, 92vw);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }
.toast.sai { opacity: 0; transform: translateY(8px); transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); }
.toast button { color: var(--b300); font-weight: 600; font-size: 12.5px; padding: 2px 6px; border-radius: var(--r-xs); }
.toast button:hover { color: #fff; background: rgba(255,255,255,.12); }
.toast .selo { font-size: 11px; opacity: .55; }

/* o unico lime do produto fora da marca: "confirmacao de chegada".
   Vive sobre o roxo institucional do toast, nunca sobre superficie clara. */
.toast .ok { color: var(--lime); flex: none; }

/* -------------------------------------------------------------- dica ---- */
.dica {
  position: fixed; z-index: var(--z-dica); pointer-events: none;
  max-width: 300px; padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--inst); color: var(--inst-fg); font-size: 11.5px; line-height: 1.4;
  box-shadow: var(--sh2); opacity: 0; transition: opacity var(--t1) var(--ease);
}
.dica.on { opacity: 1; }
.dica b { display: block; font-weight: 600; margin-bottom: 2px; }

/* ------------------------------------------------------------- vazio ---- */
.vazio { display: grid; place-items: center; gap: var(--e1); padding: 56px 20px; text-align: center; }
.vazio .ico { width: 22px; height: 22px; color: var(--fg4); margin-bottom: var(--e2); }
.vazio b { font-size: 14px; font-weight: 600; }
.vazio p { font-size: 12.5px; color: var(--fg3); max-width: 380px; }

/* ------------------------------------------------------------- aviso ---- */
.avi {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 13px; border-radius: var(--r-md);
  background: var(--sup2); font-size: 12px; color: var(--fg2); line-height: 1.45;
}
.avi > .ico { color: var(--fg3); margin-top: 1px; }
.avi b { font-weight: 600; color: inherit; }
.avi--al { background: var(--r2s); color: var(--r2t); }
/* traco fino usa a variante escura da mesma matiz: --r2 e preenchimento */
.avi--al > .ico { color: var(--r2t); }
.avi--er { background: var(--r1s); color: var(--r1t); }
.avi--er > .ico { color: var(--r1); }
.avi--mc { background: var(--b50); color: var(--b700); }
.avi--mc > .ico { color: var(--b600); }
html[data-tema="escuro"] .avi--mc { background: var(--b100); color: var(--b800); }

/* --------------------------------------------------------- barra hor ----
   barra horizontal em HTML puro, de proposito: sem canvas, sem dependencia,
   funciona sem internet e nao alimenta ResizeObserver nenhum.
   A cor e a do TERRITORIO: quem le a barra le de que orgao ela fala. */
.bh { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline; }
.bh__r { font-size: 12.5px; color: var(--fg); min-width: 0; }
.bh__v { font-family: var(--fm); font-size: 12px; color: var(--fg2); }
/* display:block nos dois — sao <span>, e altura/largura em elemento inline
   simplesmente nao se aplicam: a barra existia no DOM e media 0x0. */
.bh__t { display: block; grid-column: 1 / -1; height: 6px; border-radius: var(--pill);
         background: var(--sup3); overflow: hidden; }
.bh__f { display: block; height: 100%; border-radius: var(--pill); background: var(--ant);
         transition: width var(--t3) var(--ease); }
.bh--s2 .bh__f, .bh--ctb .bh__f { background: var(--ctb); }
.bh-lista { display: flex; flex-direction: column; gap: 13px; }
.bh-lista > button { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline;
                     text-align: left; border-radius: var(--r-xs); }
.bh-lista > button:hover .bh__r { color: var(--b600); }
html[data-tema="escuro"] .bh-lista > button:hover .bh__r { color: var(--b500); }

/* --------------------------------------------------------- campo de cor -
   A ALAVANCA DE VIDA (lei 2: cor precisa de area). Um bloco inteiro tingido
   vale mais do que vinte badges coloridos. */
.campo { position: relative; border-radius: var(--r-lg); padding: var(--e6); overflow: hidden; box-shadow: var(--sh1); }
.campo--esc { background: var(--inst); color: var(--inst-fg); box-shadow: var(--sh2); }
.campo--esc .rot { color: var(--b300); }
.campo--esc .p { color: rgba(243,240,251,.66); }
.campo--esc .p b { color: var(--inst-fg); }
.campo--esc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--inst-mesh) 1px, transparent 1px);
  background-size: var(--e5) var(--e5); opacity: .16;
}
.campo--esc > * { position: relative; }
.campo--ant  { background: var(--ant-f); }
.campo--ctb  { background: var(--ctb-f); }
.campo--tint { background: var(--sup2); }

/* ============================================================== chapa ====
   O PLANO DE TOPO DA TELA (ui.js, chapa()). Ver o bloco de doutrina la.

   Tres decisoes que precisam ficar aqui:

   1. --sh0, nunca --sh1. A chapa e PISO, nao peca singular. Se ela subir para
      sh1 empata com a tabela e a tela perde o degrau de elevacao que diz o que
      e instrumento.
   2. O fio interno nasce de `gap:1px` sobre fundo --lin, nao de border em cada
      faixa: com border, faixa vazia (chipsAtivos sem chip) deixaria fio duplo.
      Faixa vazia com gap simplesmente nao ocupa espaco.
   3. overflow:hidden e obrigatorio — sem ele a .faixa quadra os cantos de
      baixo da chapa. O `--anel` do :focus-visible da busca tem 3 px e o
      padding interno e 16, entao nada de foco e cortado. */
.chapa {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--sup); border: 1px solid var(--lin);
  border-radius: var(--r-lg); box-shadow: var(--sh0), var(--brilho);
  overflow: hidden;
}
.chapa > * { padding: 13px var(--e5); min-width: 0; }
.chapa > * + * { border-top: 1px solid var(--lin); }
/* a faixa de medidores encosta no fio: o recuo e de cada celula, nao da faixa */
.chapa > .faixa { padding: 0; }
/* SO a barra de ferramentas recua um degrau. Os chips de endereco continuam em
   --sup porque sao a escolha PRIMARIA do Acervo (a fase — quem age agora); o
   que recua e filtro, ordenacao e lente, que sao ajuste. */
.chapa > .fer, .chapa > .fer__chips { background: var(--sup2); }
@media (max-width: 560px) { .chapa > * { padding: 11px var(--e4); } }

/* ---- BARRA DE TERRITORIO (regras.md, "Titulo de tela mora em cartao") -----
   PORTADA DO DS 4.0, que ja trazia a peca pronta e eu nao tinha aplicado:
   `.cx--terr` / `.cx--ant` / `.cx--ctb`, com o comentario da folha —
   "cor com area, dono unico, custo zero".

   Eu havia escrito `border-left: 5px` na chapa. Errado por duas razoes: a
   borda entra no raio do cartao e a barra sai CURVA nas duas pontas em vez de
   reta, e a peca ficava presa a chapa em vez de valer para qualquer `.cx`.
   O `::before` com `overflow:hidden` da a barra reta, cortada pelo raio, e
   funciona em cartao, chapa ou campo. A largura e 5 px porque regras.md diz
   cinco; o DS desenha quatro, e a regra do projeto ganha da folha.

   SO ENTRA ONDE A TELA TEM UM TERRITORIO SO: Analise fala do transito,
   Concentracao fala do regulatorio. Nas outras quatro o recorte mistura as
   duas origens, e barra de orgao em tela mista quebraria a lei 1 — uma cor,
   um dono. `.cx--terr` sozinho da a barra NEUTRA, para quem quer o degrau de
   hierarquia sem afirmar origem. */
.cx--terr { position: relative; overflow: hidden; }
.cx--terr::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--lin2);
}
.cx--ant::before { background: var(--ant); }
.cx--ctb::before { background: var(--ctb); }

/* ------------------------------------------------------------- faixa ----
   A FILEIRA DE MEDIDORES. Existia em hoje.js desde a T5 e NUNCA teve regra
   nenhuma no CSS: renderizava `display:block`, e os quatro <button> caiam em
   coluna com largura de conteudo (medido: 339, 109, 116 e 187 px, um embaixo
   do outro). Era o "cards bugados sem fundo, em column" do relatorio.

   Medidores de MESMO POSTO nao sao cartoes separados: sao um instrumento de N
   casas. Por isso fio entre celulas, nao gap com sombra.

   `auto-fit` E NAO CONTAGEM FIXA. A faixa do Hoje tem TRES casas desde que
   "Nesta semana" saiu (repetia a regua, linha por linha), e uma tela que ganhar
   uma quarta nao pode exigir edicao de CSS para caber. Com minmax(240px) a
   grade acomoda 3 ou 4 na largura cheia e quebra sozinha — quatro colunas em
   1136 px dao 283, tres dao 378 — sem media query para manter em sincronia com
   o JS. */
.faixa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--lin);
}
.faixa > * { background: var(--sup); }
.faixa .med { padding: 13px var(--e5) 15px; border-radius: 0; height: 100%; }

/* ----------------------------------------------------- cabecalho de .cx --
   Morava no telas.css do v4; subiu para ca porque cxCab() e primitiva de
   ui.js e o telas.css novo nasce vazio. */
.cx__cab {
  display: flex; align-items: center; gap: var(--e4);
  padding: 13px 16px 11px; border-bottom: 1px solid var(--lin);
}
.cx__cab-d { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.cx__cab-d .md { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cx__cab-d .md .ico { opacity: .6; }
.cx__b { padding: var(--e5); }
.cx__b--liso { padding: 0; }
/* RODAPE DE CARTAO — portado do DS 4.0 (`.cx__rod`), que eu nao tinha
   aplicado. O produto ja repetia este par (--sup2 + fio de 1 px) a mao em
   tres lugares: `.home__acao`, `.pag` e `.ag2__pc`. Peca com
   nome unico e o que impede o quinto de nascer com 12 px de recuo em vez de
   10, e e ela que o proximo bloco deve usar. */
.cx__rod {
  display: flex; align-items: center; gap: var(--e3);
  padding: 10px 16px; border-top: 1px solid var(--lin); background: var(--sup2);
}

/* ------------------------------------------------------- linha de dado --- */
.cp { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px; padding: 6px 0; align-items: baseline; }
.cp__r { font-size: 11.5px; color: var(--fg3); }
.cp__v { font-size: 12.5px; color: var(--fg); min-width: 0; }
@media (max-width: 560px) { .cp { grid-template-columns: minmax(0, 1fr); gap: 1px; } }

/* ------------------------------------------------------------ medidor ----
   Toda metrica e uma porta: numero que nao abre a lista que o gerou nao entra
   no painel. Por isso o medidor e sempre um <button>. */
.med {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 16px; text-align: left; border-radius: var(--r-md); min-width: 0;
  transition: background calc(var(--t1) * var(--mo)) var(--suave);
}
@media (hover: hover) {
  .med:hover { background: var(--sup2); transition-duration: calc(var(--t2) * var(--mo)); }
  .med:hover .rot { color: var(--fg2); }
}
/* a seta da porta: canto superior direito, alinhada ao rotulo. Reserva de
   espaco a direita para o numero nunca passar por baixo dela. */
.med--porta { padding-right: 34px; }
.med__ir {
  position: absolute; top: 14px; right: 13px; color: var(--fg4);
  transition: color calc(var(--t1) * var(--mo)) var(--suave),
              transform calc(var(--t1) * var(--mo)) var(--suave);
}
@media (hover: hover) {
  .med:hover .med__ir { color: var(--b600); transform: translateX(2px); }
}
html[data-tema="escuro"] .med:hover .med__ir { color: var(--b500); }
.med .num { margin-top: 2px; }
.med__sub { font-size: 12px; color: var(--fg2); }
.med__nota { font-size: 11px; color: var(--fg3); }
.med--forte .num { color: var(--r1t); }
.med--forte .med__sub { color: var(--r1t); }

/* --------------------------------------------------------- selecao ------
   Barra de lote: um CAMPO INSTITUCIONAL, escura nos dois temas. Os botoes
   dentro dela seguem a INVERSAO da tinta, nao --acao (que sumiria).
   ⚠ ELA GRUDA A 12 px DO FIM DA TELA, NAO A 72 *(30/09/2026, pedido do
   operador: "o card de X selecionados esta muito em cima ocupando a tela")*:
   o `sticky` gruda no fim da caixa de conteudo do `.pg`, acima do respiro de
   baixo dele, e o `bottom` negativo devolve esse respiro (`--pg-pb`, casca.css).
   Fora do `.pg` a variavel nao existe, e o 0 do fallback deixa a regra antiga. */
.selbar {
  position: sticky; bottom: calc(var(--e4) - var(--pg-pb, var(--e4))); z-index: var(--z-sel);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-top: -8px;
  border-radius: var(--r-md); background: var(--inst); color: var(--inst-fg);
  box-shadow: var(--sh3); font-size: 12.5px;
}
.selbar .mono { opacity: .75; }
.selbar .bt { background: rgba(243,240,251,.1); border-color: rgba(243,240,251,.2); color: var(--inst-fg); }
.selbar .bt:hover { background: rgba(243,240,251,.18); border-color: rgba(243,240,251,.3); }
.selbar .bt--pri { background: var(--inst-fg); border-color: var(--inst-fg); color: var(--inst); font-weight: 550; }
.selbar .bt--pri:hover { background: #fff; border-color: #fff; }

/* linha decidida nesta sessao: some da fila mas fica marcada ate o proximo
   redesenho, para o operador ver o que acabou de fazer */
.tb tbody tr.decidido { opacity: .5; }

/* --------------------------------------------------------- esqueleto -----
   A primitiva (ui.js: esqueleto()). Regras: larguras FIXAS, nunca aleatorias
   — esqueleto que sorteia largura tremula entre renders; e ele ocupa
   exatamente o espaco que o conteudo vai ocupar, senao a pagina salta quando
   o dado chega. A classe .sk (acima, com o shimmer) e a pele; estas sao as
   formas. */
.skf { display: flex; flex-direction: column; gap: 10px; }
.skf--tabela .sk { height: calc(var(--lh) - 16px); border-radius: var(--r-sm); }
.skf--cartoes .sk { height: 68px; border-radius: var(--r-md); }
.skf--metricas { flex-direction: row; gap: var(--e5); flex-wrap: wrap; }
.skf--metricas .sk { height: 84px; flex: 1 1 180px; border-radius: var(--r-md); }
/* grafico: area de 190px com 12 colunas de alturas fixas, alinhadas na base */
.skf--grafico { flex-direction: row; align-items: flex-end; gap: var(--e3); height: 190px; }
.skf--grafico .sk { flex: 1 1 0; border-radius: var(--r-xs) var(--r-xs) 0 0; }
.skf--texto .sk { height: 13px; }
.skf--texto .sk:last-child { width: 60%; }

/* ============================================ campo de busca do menu =====
   Liga acima de ~20 CNPJs: com 76 filiais a lista rolante deixa de responder
   "qual e a minha". A lista ganha calha propria para o campo nao rolar junto. */
.menu__busca {
  display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 9px;
  margin: -5px -5px 4px; border-bottom: 1px solid var(--lin);
}
/* O FOCO DO CAMPO É O FIO DE BAIXO — uma linha só, a que já separa o campo da
   lista *(30/09/2026)*. Até aqui quem o marcava era o anel genérico de
   `:focus-visible`, um retângulo por dentro do menu, que já tem borda. */
.menu__busca:focus-within { border-bottom-color: var(--b400); }
.menu__busca .ico { color: var(--fg3); flex: none; }
.menu__busca input { flex: 1; min-width: 0; font-size: 12.5px; }
.menu__busca input::placeholder { color: var(--fg3); }
.menu__l { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }

/* a frase que explica dentro do menu. NAO e `.menu .tt`: aquele e eyebrow e
   vem em caixa alta, e caixa alta em corpo faz o leitor de tela soletrar. */
.menu__nota { padding: 2px 9px 7px; font-size: 11.5px; color: var(--fg3); line-height: 1.45; }

/* ====================================== o segundo degrau da fricção ======
   POPUP DE CONFIRMACAO — a acao que SAI DO PAINEL confirma antes e cancela
   depois, nunca desfaz. O primeiro degrau e o toast com desfazer (acima); o
   terceiro e a confirmacao por grupo, que e este mesmo popup com `grupos`.

   NENHUMA COR DE GRAVIDADE AQUI: vermelho, ambar e verde pertencem
   exclusivamente ao prazo. A gravidade vem de FRICCAO (o campo que pede a
   palavra da acao acima de ~50 itens) e do valor exposto no rotulo do botao. */
.conf {
  position: fixed; inset: 0; z-index: var(--z-conf); display: grid; place-items: center;
  padding: 24px; pointer-events: none; visibility: hidden;
}
.conf.on { visibility: visible; }
.conf__cx {
  pointer-events: auto; display: flex; flex-direction: column; gap: var(--e4);
  width: min(480px, 94vw); max-height: 90vh; overflow-y: auto; padding: 20px;
  background: var(--sup); border: 1px solid var(--lin2); border-radius: var(--r-xl);
  box-shadow: var(--sh3); animation: modIn calc(var(--t2) * var(--mo)) var(--entra);
}
.conf__t { font-size: 16px; font-weight: 600; letter-spacing: -.014em; line-height: 1.3; }
.conf__c { font-size: 13px; color: var(--fg2); line-height: 1.55; }
.conf__gr { display: flex; flex-direction: column; gap: var(--e2); }
/* CADA GRUPO SE CONFIRMA SEPARADO, com quantos itens e quanto dinheiro a
   vista: autorizar pagamento sem ver o total do grupo e o erro que mais
   custa, e acao em lote nunca mistura defender, pagar e indicar num clique
   so. */
.conf__g {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--sup2); border: 1px solid var(--lin);
}
.conf__g b { font-size: 13px; font-weight: 550; }
.conf__g .mono { font-size: 12px; color: var(--fg2); }
.conf__g button { margin-left: auto; }
.conf__dig { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--fg2); }
.conf__dig b { color: var(--fg); font-family: var(--fm); }
.conf__dig input {
  height: 34px; padding: 0 10px; border: 1px solid var(--lin2); border-radius: var(--r-sm);
  background: var(--bg); font-size: 13px; font-family: var(--fm);
}
.conf__ac { display: flex; align-items: center; justify-content: flex-end; gap: var(--e3); }

/* ============================================== faixa de erro persistente =
   FALHA NAO EMPILHA COMO TOAST: numa rajada em rede ruim o quarto toast de
   erro apaga o primeiro e ninguem sabera quais das 12 decisoes nao gravaram.
   Esta faixa nao expira e nao e dispensavel enquanto houver pendencia.

   Sem vermelho, pela mesma lei do popup. O que a destaca e a barra de 3 px na
   borda esquerda — forma, nao matiz. */
.faixa-err {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--sup2); border: 1px solid var(--lin2); border-left: 3px solid var(--fg2);
  font-size: 12.5px; color: var(--fg2); line-height: 1.5;
}
.faixa-err .ico { color: var(--fg2); flex: none; margin-top: 2px; }
.faixa-err b { color: var(--fg); font-weight: 600; }

/* ================================== o sinal do SINCRONISMO de condutores ==
   (05/10/2026, condutores etapa 2.) O estado de um condutor, ou da indicação
   na multa, no sistema do cliente — `js/sincronismo.js` é o dono do mapa.
   ⚠ FORMA E FRASE, NUNCA VERMELHO OU VERDE: as duas cores são do prazo
   (`regras/interface.md`), e no card o sinal da multa fica logo abaixo das
   pílulas. Cheio de tinta · vazado cinza · losango contornado · traço cinza.
   ⚠ O CINZA É `--fg3` PORQUE ELE PASSA OS 3:1 DE OBJETO GRÁFICO (WCAG 1.4.11)
   NAS QUATRO SUPERFÍCIES, nos dois temas — é o mesmo token que já passa 4,5:1
   como texto miúdo sobre a superfície recuada (`base.css`).
   ⚠ `box-sizing: border-box` NOS QUATRO: a borda de 1,5 px fica DENTRO dos
   8 px, e o vazado e o losango medem o mesmo que o cheio. O `margin-top`
   centra o sinal na PRIMEIRA linha da frase (12 px × 1,45 ≈ 17 px), e não no
   bloco inteiro — a frase longa quebra, e o sinal fica com a linha de cima. */
.snc__l {
  display: inline-flex; align-items: flex-start; gap: 6px;
  font-size: 12px; color: var(--fg2); line-height: 1.45;
}
.snc {
  flex: none; box-sizing: border-box; width: 8px; height: 8px; margin-top: 4.5px;
}
.snc--cheio { border-radius: 50%; background: var(--fg); }
.snc--vazado { border-radius: 50%; border: 1.5px solid var(--fg3); background: transparent; }
/* o losango é o quadrado girado — 7 px de lado dão ~10 px de diagonal, e ele
   ocupa a mesma altura visual dos círculos */
.snc--losango {
  width: 7px; height: 7px; margin: 5px 0.5px 0;
  border: 1.5px solid var(--fg); background: transparent; transform: rotate(45deg);
}
.snc--traco { height: 2px; margin-top: 7.5px; border-radius: 1px; background: var(--fg3); }

@media (max-width: 560px) {
  .conf { padding: 0; place-items: end center; }
  .conf__cx { width: 100vw; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .conf__g button { margin-left: 0; width: 100%; }
}

/* ============================================= ALVO DE TOQUE DO MENU ======
   (25/09/2026, o /conferir da task 1 da tela da automação: os itens do `⋯` de
   `#/automacao` mediram 32 px a 375 px com `pointer: coarse` real.) A LINHA
   CRESCE, NÃO O HALO: numa lista vertical o pseudo-elemento de 44 px de
   `casca.css` sobreporia as vizinhas em 12 px, e o toque na borda cairia na de
   baixo. ⚠ O SELETOR É DE FILHO, DE PROPÓSITO: a grade do calendário de
   `data-sel.js` também é `button` dentro de `.menu`, aninhada em `.cal__g`, e
   `.menu button` a esticaria para fora do quadrado de `aspect-ratio: 1`. Fica
   no fim porque `@media` não acrescenta especificidade — escrito no topo, perde
   por ordem de fonte para qualquer regra de mesmo peso. */
@media (pointer: coarse) {
  .menu > button, .menu__l > button { min-height: 44px; }
}