/* ComexFlow — paleta oficial RPF (12/07/2026), em DOIS temas:
   #D90B1C vermelho forte · #1C2140 marinho · #4B89BF azul
   #D95252 vermelho suave · #F2F2F2 off-white
   Tema padrao = escuro; claro via html[data-tema="claro"] (botao de tema).

   ESCALA TIPOGRAFICA (parte 181; piso de 13px na parte 754): os tamanhos
   moram nos tokens --fs-* do :root abaixo — use o token, nao o numero.
   13 e o MINIMO para dado, legenda, rotulo e selo; 12 so para cabecalho
   de tabela e rotulo de secao em CAIXA ALTA. Nada de 11px nem de
   fracionados (10.5/11.5/12.5/13.5) em CSS novo ou inline nos templates.

   GRADE DE ESPACAMENTO (parte 182): margin/padding em valores PARES
   (2/4/6/8/10/12/14/16/18/20/22/24/30...). Micro-ajustes 3/5px toleradas
   onde ja existem (chips/inputs compactos); nao criar impares novos.

   ============================================================
   PARTE 369 — POLIMENTO DE ACABAMENTO (14/08/2026)
   Nada de tela nova: so acabamento, e SEM tocar em nenhum template
   de conteudo. O que mudou, e por que:

   1. ICONES: os 25 emoji do menu viraram SVG de linha desenhados aqui
      dentro (secao "jogo de icones"). Emoji e desenhado pelo sistema
      operacional — mudava de forma, tamanho e alinhamento em cada
      maquina, e o de Usuarios era uma sequencia de familia que se
      PARTIA em 4 bonecos no Windows. Agora o desenho e nosso, herda a
      cor do texto (currentColor) e acompanha tema, hover e item ativo.
   2. BOTOES: eram 7 estilos soltos com alturas e raios diferentes.
      Agora todos bebem das mesmas medidas (--bt-*). O degrade azul
      saiu: cor chapada le melhor em botao pequeno e nao "datava" a tela.
   3. FOCO DE TECLADO: nao existia NENHUM. Havia so `outline: none` nos
      campos — ou seja, acessibilidade removida sem troca. Agora todo
      controle tem anel de foco visivel (:focus-visible), que aparece
      para quem navega por Tab e NAO aparece no clique de mouse.
   4. NUMEROS: `tabular-nums` nas tabelas e nos totais. Num sistema de
      comercio exterior a coluna de valor/DI/DUIMP "tremia" porque o 1
      e mais estreito que o 8; agora todo digito ocupa a mesma largura.
   5. CONTRASTE: --texto-apagado estava em 3,5:1 (minimo legivel: 4,5:1)
      e era usada justamente nos rotulos de 11-12px. Corrigida nos dois
      temas; o mesmo para o rotulo de secao do menu.
   6. MOVIMENTO: as transicoes agora respeitam quem pediu menos
      movimento no sistema (prefers-reduced-motion).
   ============================================================

   ⚠ ATENCAO AO ESCREVER REGRA NOVA (card 1875703554426013224, 30/09/2026)

   O PADRAO DA APLICACAO virou o tema CLARO (base.html). O PADRAO ESCRITO
   NESTE ARQUIVO continua sendo o ESCURO: o `:root` abaixo tem as cores do
   escuro e `html[data-tema="claro"]` as sobrescreve.

   Os dois nao batem de proposito — inverter os dois blocos e trabalho da
   etapa 3 desta operacao. Ate la vale a regra:

     regra de cor escrita SEM par `html[data-tema="claro"]` e regra do tema
     ESCURO que VAZA para o claro, que agora e o que a maioria ve.

   Use `var(--token)` e nao pense em tema. Cor fixa so sobre fundo que nao
   muda (a barra lateral e marinho nos dois temas) — e ai a cor tambem nao
   muda, nunca `var()`.
   ============================================================ */

:root {
  /* parte 754 — a escala tipografica (h1/h2/h3/body seguem escritos por extenso
     nas suas regras: a testar_546 le o numero). */
  --fs-cabecalho: 12px;  /* th e rotulo de secao em caixa alta */
  --fs-min: 13px;        /* piso: dado, legenda, rotulo, selo */
  --fs-corpo: 14px;
  --fs-destaque: 15px;   /* destaque, input, h3 */
  --fs-h2: 17px;
  --fs-logo-sm: 20px;
  --fs-h1: 24px;
  --fs-numero: 28px;
  --fs-numero-g: 34px;
  --fundo: #1C2140;
  --campo: #141830;
  --texto: #F2F2F2;
  --texto-suave: #9fb0d8;
  --texto-apagado: #8b9bc4;      /* 369: era #67789f — 3,5:1, abaixo do minimo */
  --destaque: #cfe0ff;
  --azul: #4B89BF;
  --azul-2: #6CA3D1;
  --link: #7FB0DC;
  --painel-bg: rgba(75,137,191,.10);
  --painel-borda: rgba(75,137,191,.26);
  --hover-azul: rgba(75,137,191,.12);
  --marca-azul: rgba(75,137,191,.18);
  --borda: rgba(120,150,200,.3);
  --borda-suave: rgba(120,150,200,.14);
  --ok-bg: rgba(34,197,94,.16);  --ok-fg: #b9f0cd;  --ok-borda: rgba(34,197,94,.4);
  --tmp-bg: rgba(234,179,8,.16); --tmp-fg: #ffe9a8; --tmp-borda: rgba(234,179,8,.45);
  --off-bg: rgba(148,163,184,.14); --off-fg: #9fb0d8; --off-borda: rgba(148,163,184,.35);
  --novo-bg: rgba(217,11,28,.20);  --novo-fg: #ffb9c0; --novo-borda: rgba(217,11,28,.55);
  --novo-obs: #cba0a0;
  --erro-bg: rgba(217,82,82,.15); --erro-fg: #ffc9c9; --erro-borda: rgba(217,82,82,.4);
  --senha-aviso: #cbb26a;
  --falta-bg: #c54b4b; --falta-fg: #fff;  /* badge de falta/alerta.
     card 1875703554426013224: era #D95252 e dava 3,98:1 com texto branco —
     abaixo do minimo 4,5, em 35 selos de /duimp, /invoices e /navios. E o
     selo que avisa que FALTA alguma coisa: o que menos pode custar esforco
     para ler. */
  --perigo-bg: #D90B1C; --perigo-fg: #fff; /* acao critica (botao/borda de producao) */

  /* --- 369: medidas unicas de botao/campo ---
     Um lugar so para altura, raio e respiro. Antes cada botao tinha as
     suas: 8/18, 10/18, 12/12, 5/12 — por isso nada alinhava lado a lado. */
  --bt-raio: 9px;            /* botao e campo padrao */
  --bt-raio-mini: 8px;       /* botao pequeno de tabela */
  --bt-pad: 9px 18px;        /* padrao — da 38px de altura com fonte 14 */
  --bt-pad-mini: 5px 12px;
  --bt-peso: 600;
  /* azul de BOTAO: mais fechado que --azul (#4B89BF) porque texto branco
     sobre o azul claro dava 3,8:1 — ilegivel pela regra de contraste.
     O --azul continua igual para bordas, links e realces. */
  --bt-azul: #3A78A8;
  --bt-azul-hover: #4489BE;
  --bt-azul-ativo: #2F648C;
  --bt-verde: #197A47;       /* confirmar / concluir */
  --bt-verde-hover: #1E9155;
  --bt-verde-ativo: #14633A;
  --foco: #9CC4E8;           /* anel de foco de teclado */
  --sombra-bt: 0 1px 2px rgba(0,0,0,.28);
  /* --- ETAPAS DO PROCESSO (card 1875703554426013224, etapa 4)
     As 7 etapas eram pintadas a mao numa tela so, com paleta pastel de
     planilha no tema claro e cores soltas no escuro. Viraram token, com
     o matiz de cada etapa preservado e o CONTRASTE calculado: todas as
     14 combinacoes passam 4,5:1 sobre a pagina E sobre o cartao, nos
     dois temas. --- */
  /* parte 756: quatro sentidos. Antes da chegada nao ha o que fazer — embarque e
     transito saem do roxo/azul para o cinza do encerrado; desembaraco e carregamento
     aguardam — saem do laranja/vermelho para o ambar da presenca. Os nomes ficam. */
  --et-embarque-bg: rgba(148,163,184,0.18); --et-embarque-fg: #9caabd;
  --et-transito-bg: rgba(148,163,184,0.18); --et-transito-fg: #9caabd;
  --et-presenca-bg: rgba(234,179,8,0.18); --et-presenca-fg: #eab308;
  --et-desembaraco-bg: rgba(234,179,8,0.18); --et-desembaraco-fg: #eab308;
  --et-carregamento-bg: rgba(234,179,8,0.18); --et-carregamento-fg: #eab308;
  --et-fechamento-bg: rgba(34,197,94,0.18); --et-fechamento-fg: #22c55e;
  --et-encerrado-bg: rgba(148,163,184,0.18); --et-encerrado-fg: #9caabd;  /* parte 754: era #97a6ba — 4.37 sob o realce de linha */
  --bt-neutro: #4a5578; --bt-neutro-hover: #57648a;
}
html[data-tema="claro"] {
  --fundo: #F2F2F2;
  --campo: #ffffff;
  --texto: #1C2140;
  --texto-suave: #4a5578;
  --texto-apagado: #5b6685;      /* 369: era #7c86a8 — 3,2:1 no fundo claro */
  --destaque: #24447c;
  --link: #2e6da4;
  --painel-bg: #ffffff;
  --painel-borda: rgba(28,33,64,.15);
  --hover-azul: rgba(75,137,191,.14);
  --marca-azul: rgba(75,137,191,.22);
  --borda: rgba(28,33,64,.25);
  --borda-suave: rgba(28,33,64,.12);
  --ok-bg: rgba(22,163,74,.12);  --ok-fg: #137036;  /* parte 754: era #147438 — 4.37 sob o realce de linha */  --ok-borda: rgba(22,163,74,.35);
  --tmp-bg: rgba(202,138,4,.12); --tmp-fg: #8d5507;  /* parte 754: era #915807 — 4.42 sob o realce de linha */ --tmp-borda: rgba(202,138,4,.4);
  --off-bg: rgba(100,116,139,.12); --off-fg: #475569; --off-borda: rgba(100,116,139,.35);
  --novo-bg: rgba(217,11,28,.10);  --novo-fg: #b70918;  /* parte 754: era #c50a19 — 4,49 no cartao azul (--marca-azul) */ --novo-borda: rgba(217,11,28,.45);
  --novo-obs: #a05252;
  --erro-bg: rgba(217,82,82,.12); --erro-fg: #b91c1c; --erro-borda: rgba(217,82,82,.5);
  --senha-aviso: #7a6019;  /* parte 754: era #866a1e — 4,46 no cartao azul */
  --falta-bg: #C81E2A; --falta-fg: #fff;   /* no claro, um pouco mais fechado */
  --perigo-bg: #B00918; --perigo-fg: #fff;

  --bt-azul: #2F6894;
  --bt-azul-hover: #37789F;
  --bt-azul-ativo: #255373;
  --bt-verde: #167041;
  --bt-verde-hover: #1A8550;
  --bt-verde-ativo: #115934;
  --foco: #1D5C93;
  --sombra-bt: 0 1px 2px rgba(28,33,64,.16);
  /* card 1875703554426013224 (etapa 3): tres cores de TEXTO deste tema
     reprovavam o minimo de 4,5:1 — --ok-fg 4,48 · --tmp-fg 4,40 ·
     --senha-aviso 4,37 — medidas contra o fundo da pagina (#F2F2F2) e o do
     cartao (#fff). Passaram despercebidas porque o claro NAO era o padrao:
     era o tema que quase ninguem abria. Agora e o padrao, e cada uma delas
     e a origem de dezenas de rotulos pelo sistema.
     A correcao e minima de proposito (1-2% mais escuro) — cruza o minimo
     sem mudar a impressao de cor. */
  /* etapas do processo — o par claro das de cima */
  /* parte 756: embarque e transito = cinza do encerrado; desembaraco e carregamento = ambar da presenca */
  --et-embarque-bg: rgba(148,163,184,0.12); --et-embarque-fg: #5a6471;
  --et-transito-bg: rgba(148,163,184,0.12); --et-transito-fg: #5a6471;
  --et-presenca-bg: rgba(234,179,8,0.12); --et-presenca-fg: #7e6004;
  --et-desembaraco-bg: rgba(234,179,8,0.12); --et-desembaraco-fg: #7e6004;
  --et-carregamento-bg: rgba(234,179,8,0.12); --et-carregamento-fg: #7e6004;
  --et-fechamento-bg: rgba(34,197,94,0.12); --et-fechamento-fg: #137236;
  /* parte 754: os textos de etapa do claro um tom mais escuros — com o realce de linha
     (#E6ECF4) sob o selo, seis deles caiam para 4,37-4,45. Agora >= 4,6 em toda superficie. */
  --et-encerrado-bg: rgba(148,163,184,0.12); --et-encerrado-fg: #5a6471;
  /* ⚠ CORRECAO DA CORRECAO (card 1875703554426013224, etapa 4)
     Eu ja tinha ajustado --ok-fg e --tmp-fg medindo-os contra o FUNDO DA
     PAGINA. Era o lugar errado: estas cores vivem dentro de um chip
     semitransparente (--ok-bg e companhia), e e sobre ESSE fundo composto
     que elas precisam passar. Medindo onde elas de fato aparecem — chip
     sobre pagina, sobre cartao e sobre a linha listrada da tabela — tres
     ainda reprovavam: --ok-fg 4,11 · --tmp-fg 4,15 · --novo-fg 3,95.
     A prova que pegou foi a medicao no navegador: o selo "Registrada —
     canal CINZA" em /processos caiu de 5,78 para 4,43 quando os selos
     passaram a usar token. Token nao se confere contra a pagina — se
     confere no lugar onde ele e usado. */
  --bt-neutro: #525c7a; --bt-neutro-hover: #454e69;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--fundo); color: var(--texto);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  /* A ESCALA COMECA AQUI (card 1875703554426013224).
     O `body` declarava familia e entrelinha e NAO declarava tamanho — entao
     tudo que nao recebia tamanho explicito caia nos 16px do navegador, que
     NAO esta na escala oficial do topo deste arquivo. Medido nas 30 telas do
     palco: 172 elementos de texto corrido (<strong>, <p>, <label>, <em>,
     <summary>) saiam em 16px ao lado de tabelas em 13/14 — o degrau que a
     escala existe para impedir. Campos de formulario nao entram nessa conta:
     todos ja tinham tamanho proprio. */
  font-size: 14px;
  /* 369: o desenho da fonte do sistema fica mais limpo com estes dois
     ajustes — sem trocar de fonte e sem baixar nada. */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- TITULO POR PAPEL, NAO POR CAIXA (card 1875703554426013224) ----
   Antes, um titulo so tinha tamanho DENTRO de um container: `.painel h1`,
   `.bloco h2`, `.ficha-form h2`. Fora deles valia o padrao do navegador — e
   o mesmo <h2> saia em 15, 17 ou 24px conforme onde caiu, colidindo com o
   <h1> em 3 telas. O <h3> nao tinha NENHUMA regra no arquivo e caia em
   18,72px (8 ocorrencias, todas na ficha da DUIMP).
   Estas tres linhas dao o piso por PAPEL. As regras por container continuam
   valendo onde existem — sao mais especificas e ganham de proposito. */
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: 15px; font-weight: 600; }
/* parte 754: o <small> do navegador sai em ~11,7px (smaller); aqui ele e legenda. */
small { font-size: var(--fs-min); }

/* ---- PISO DA PECA DE ACAO (card 1875703554426013224, etapa 2) ----
   Medido no palco, nas 30 telas: 22 aparencias distintas de botao, 13
   alturas (de 13 a 43px) e 4 raios de canto. E 77 <button> do projeto nao
   tem classe nenhuma — so ganham cara de botao se cairem DENTRO de
   `.filtros`, `.cat-campos` ou `.login-card`. Fora dali saem CRUS, no
   cinza do sistema operacional: medido em /duimp/498 ("Sincronizar com a
   invoice", 19px de altura) e em /atributos ("Validacao").

   Este bloco usa `:where()`, que tem peso ZERO de especificidade. Ele NAO
   disputa com regra nenhuma — `.filtros button`, `button.mini`, `.th-bt`,
   `.chip-x` e `.botao-link` continuam ganhando exatamente como antes. Ele
   so preenche o que ninguem definiu, que e justamente o buraco.

   Por isso o piso e seguro: nao ha como ele "vencer" algo por engano. */
:where(button, input[type="submit"], input[type="button"]) {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--bt-peso);
  padding: var(--bt-pad);
  border: 1px solid var(--borda);
  border-radius: var(--bt-raio);
  background: var(--hover-azul);
  color: var(--texto);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
:where(button, input[type="submit"], input[type="button"]):hover {
  background: var(--marca-azul);
  border-color: var(--azul);
}

a { color: inherit; }
a.link { color: var(--link); }
.suave { color: var(--texto-suave); }
.t-ok { color: var(--ok-fg); } .t-warn { color: var(--tmp-fg); } .t-bad { color: var(--novo-fg); }

/* ---- 369: ANEL DE FOCO ----
   Regra unica para tudo que recebe Tab. `:focus-visible` so acende para
   teclado — quem clica com o mouse nao ve anel nenhum, entao a tela nao
   fica "piscando" no uso normal. Vale mais que qualquer efeito bonito:
   sem isto, quem navega por teclado nao sabe onde esta. */
:where(a, button, input, select, textarea, label.nav-botao, summary):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 6px;
}
/* dentro do menu marinho o anel precisa da cor clara nos dois temas */
.sidebar a:focus-visible { outline-color: #9CC4E8; }

/* ---- 369: JOGO DE ICONES ----
   O SVG entra como MASCARA: o navegador pinta o retangulo com
   `currentColor` e usa o desenho para recortar. Resultado: um unico
   arquivo, sem internet, e o icone muda de cor junto com o texto
   (hover do menu, item ativo, tema claro/escuro) sem nenhuma copia. */
.ico { display: inline-block; flex-shrink: 0;
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / 100% 100% no-repeat;
          mask: var(--ic) center / 100% 100% no-repeat; }
.ico.sm { width: 15px; height: 15px; }
.ico.lg { width: 22px; height: 22px; }

/* --- desenhos do jogo de icones (gerados por gerar_icones.py; para
   alterar um icone, edite o script e rode-o de novo) --- */
.ic-painel { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%203v16.5A1.5%201.5%200%200%200%204.5%2021H21%27%2F%3E%3Cpath%20d%3D%27M8%2016.5V11%27%2F%3E%3Cpath%20d%3D%27M13%2016.5V6.5%27%2F%3E%3Cpath%20d%3D%27M18%2016.5v-3%27%2F%3E%3C%2Fsvg%3E"); }
.ic-processos { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%203.5h6a1%201%200%200%201%201%201V6H8V4.5a1%201%200%200%201%201-1z%27%2F%3E%3Cpath%20d%3D%27M16%205h2.5A1.5%201.5%200%200%201%2020%206.5v13A1.5%201.5%200%200%201%2018.5%2021h-13A1.5%201.5%200%200%201%204%2019.5v-13A1.5%201.5%200%200%201%205.5%205H8%27%2F%3E%3Cpath%20d%3D%27M8.5%2013.5%2011%2016l4.5-4.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-invoices { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203H7a1.5%201.5%200%200%200-1.5%201.5v15A1.5%201.5%200%200%200%207%2021h10a1.5%201.5%200%200%200%201.5-1.5V7.5z%27%2F%3E%3Cpath%20d%3D%27M14%203v4.5h4.5%27%2F%3E%3Cpath%20d%3D%27M9%2012.5h6%27%2F%3E%3Cpath%20d%3D%27M9%2016.5h4%27%2F%3E%3C%2Fsvg%3E"); }
.ic-ce { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%274.5%27%20r%3D%272%27%2F%3E%3Cpath%20d%3D%27M12%206.5V21%27%2F%3E%3Cpath%20d%3D%27M8%209.5h8%27%2F%3E%3Cpath%20d%3D%27M4%2013.5v1a8%208%200%200%200%2016%200v-1%27%2F%3E%3C%2Fsvg%3E"); }
.ic-navios { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2018.4c1.6%200%201.6%201.6%203.2%201.6s1.6-1.6%203.2-1.6%201.6%201.6%203.2%201.6%201.6-1.6%203.2-1.6%201.6%201.6%203.2%201.6%27%2F%3E%3Cpath%20d%3D%27M4.6%2015.5%205.9%2010.4a1%201%200%200%201%20.97-.75h10.26a1%201%200%200%201%20.97.75l1.3%205.1%27%2F%3E%3Cpath%20d%3D%27M12%209.5V4%27%2F%3E%3Cpath%20d%3D%27M8.5%206.5h7%27%2F%3E%3C%2Fsvg%3E"); }
.ic-caminhao { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%2017V6.5A1.5%201.5%200%200%200%2012.5%205h-8A1.5%201.5%200%200%200%203%206.5V16a1%201%200%200%200%201%201h1%27%2F%3E%3Cpath%20d%3D%27M15%2017H9%27%2F%3E%3Cpath%20d%3D%27M19%2017h1a1%201%200%200%200%201-1v-3.2a1%201%200%200%200-.2-.6L18.3%209a1%201%200%200%200-.8-.4H14%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%2717%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2717%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E"); }
.ic-duimp { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13.5%203H7A1.5%201.5%200%200%200%205.5%204.5v15A1.5%201.5%200%200%200%207%2021h2.5%27%2F%3E%3Cpath%20d%3D%27M18.5%209.5V8l-5-5v5h5z%27%2F%3E%3Cpath%20d%3D%27M8.7%2011h5%27%2F%3E%3Cpath%20d%3D%27M8.7%2014.5h2.5%27%2F%3E%3Ccircle%20cx%3D%2716.4%27%20cy%3D%2715.6%27%20r%3D%273.3%27%2F%3E%3Cpath%20d%3D%27m14.3%2018.2-.8%203%202.9-1.5%202.9%201.5-.8-3%27%2F%3E%3C%2Fsvg%3E"); }
.ic-lpco { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%278.6%27%20cy%3D%2710.8%27%20r%3D%272.1%27%2F%3E%3Cpath%20d%3D%27M5.2%2016.2c.6-1.5%201.9-2.3%203.4-2.3s2.8.8%203.4%202.3%27%2F%3E%3Cpath%20d%3D%27M15%2010h3.5%27%2F%3E%3Cpath%20d%3D%27M15%2013.5h2.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-nfse { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%203.5h14v17l-2.33-1.5-2.34%201.5-2.33-1.5L9.67%2020.5%207.33%2019%205%2020.5z%27%2F%3E%3Cpath%20d%3D%27M9%208.5h6%27%2F%3E%3Cpath%20d%3D%27M9%2012.5h6%27%2F%3E%3C%2Fsvg%3E"); }
.ic-faturamento { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%203.5h14v17l-2.33-1.5-2.34%201.5-2.33-1.5L9.67%2020.5%207.33%2019%205%2020.5z%27%2F%3E%3Cpath%20d%3D%27M12%206.5v10.2%27%2F%3E%3Cpath%20d%3D%27M14.3%208.7c-.45-.75-1.3-1.2-2.3-1.2-1.25%200-2.25.75-2.25%201.8%200%202.5%204.6%201.3%204.6%203.8%200%201.05-1.05%201.8-2.35%201.8-1%200-1.9-.45-2.35-1.2%27%2F%3E%3C%2Fsvg%3E"); }
.ic-busca { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27M15.4%2015.4%2021%2021%27%2F%3E%3C%2Fsvg%3E"); }
.ic-alvo { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274.5%27%2F%3E%3Cpath%20d%3D%27M12%2011.9h.01%27%2F%3E%3C%2Fsvg%3E"); }
.ic-produtos { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m21%208-9-5-9%205%209%205%209-5z%27%2F%3E%3Cpath%20d%3D%27M3%208v8l9%205%209-5V8%27%2F%3E%3Cpath%20d%3D%27M12%2013v8%27%2F%3E%3C%2Fsvg%3E"); }
.ic-raio { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13.6%202.5%204.5%2013.9h6.3l-1.2%207.6%209-11.4h-6.3z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-pedidos { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.5%203.5h2.1a1%201%200%200%201%20.98.8l.32%202.2%27%2F%3E%3Cpath%20d%3D%27M5.9%206.5H21l-1.9%208.6H8.5z%27%2F%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2719.3%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2719.3%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-atributos { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11.6%203.5H19a1.5%201.5%200%200%201%201.5%201.5v7.4a1.5%201.5%200%200%201-.44%201.06l-6.6%206.6a1.5%201.5%200%200%201-2.12%200l-7.4-7.4a1.5%201.5%200%200%201%200-2.12l6.6-6.6a1.5%201.5%200%200%201%201.06-.44z%27%2F%3E%3Ccircle%20cx%3D%2715.9%27%20cy%3D%278.1%27%20r%3D%271.15%27%2F%3E%3C%2Fsvg%3E"); }
.ic-empresas { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021V5.5A1.5%201.5%200%200%201%205.5%204h7A1.5%201.5%200%200%201%2014%205.5V21%27%2F%3E%3Cpath%20d%3D%27M14%2010h4.5A1.5%201.5%200%200%201%2020%2011.5V21%27%2F%3E%3Cpath%20d%3D%27M2.5%2021h19%27%2F%3E%3Cpath%20d%3D%27M7.5%208h3%27%2F%3E%3Cpath%20d%3D%27M7.5%2012h3%27%2F%3E%3Cpath%20d%3D%27M7.5%2016h3%27%2F%3E%3Cpath%20d%3D%27M17%2014.5h.8%27%2F%3E%3Cpath%20d%3D%27M17%2017.5h.8%27%2F%3E%3C%2Fsvg%3E"); }
.ic-globo { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M12%203a13.5%2013.5%200%200%201%200%2018%2013.5%2013.5%200%200%201%200-18z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-config { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h9%27%2F%3E%3Cpath%20d%3D%27M17.5%207H20%27%2F%3E%3Cpath%20d%3D%27M4%2017h2.5%27%2F%3E%3Cpath%20d%3D%27M11%2017h9%27%2F%3E%3Ccircle%20cx%3D%2715.2%27%20cy%3D%277%27%20r%3D%272.2%27%2F%3E%3Ccircle%20cx%3D%278.8%27%20cy%3D%2717%27%20r%3D%272.2%27%2F%3E%3C%2Fsvg%3E"); }
.ic-usuarios { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15.5%2020.5v-1.7a4%204%200%200%200-4-4h-5a4%204%200%200%200-4%204v1.7%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277.5%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M21.5%2020.5v-1.7a4%204%200%200%200-3-3.87%27%2F%3E%3Cpath%20d%3D%27M16.5%204.2a4%204%200%200%201%200%207.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-ajuda { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M9.4%209.3a2.7%202.7%200%200%201%205.25.9c0%201.8-2.65%202.7-2.65%202.7%27%2F%3E%3Cpath%20d%3D%27M12%2016.9h.01%27%2F%3E%3C%2Fsvg%3E"); }
.ic-lua { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.5%2014.6A8.5%208.5%200%200%201%209.4%203.5a8.5%208.5%200%201%200%2011.1%2011.1z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-sol { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274.2%27%2F%3E%3Cpath%20d%3D%27M12%202.6v2.2%27%2F%3E%3Cpath%20d%3D%27M12%2019.2v2.2%27%2F%3E%3Cpath%20d%3D%27M4.36%204.36%205.92%205.92%27%2F%3E%3Cpath%20d%3D%27M18.08%2018.08l1.56%201.56%27%2F%3E%3Cpath%20d%3D%27M2.6%2012h2.2%27%2F%3E%3Cpath%20d%3D%27M19.2%2012h2.2%27%2F%3E%3Cpath%20d%3D%27M4.36%2019.64%205.92%2018.08%27%2F%3E%3Cpath%20d%3D%27M18.08%205.92l1.56-1.56%27%2F%3E%3C%2Fsvg%3E"); }
.ic-chave { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%277.6%27%20cy%3D%2714.4%27%20r%3D%273.9%27%2F%3E%3Cpath%20d%3D%27M10.36%2011.64%2020%202%27%2F%3E%3Cpath%20d%3D%27m16.8%205.2%202.6%202.6%27%2F%3E%3Cpath%20d%3D%27M14.1%207.9l2.3%202.3%27%2F%3E%3C%2Fsvg%3E"); }
.ic-sair { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.5%2021H5.5A1.5%201.5%200%200%201%204%2019.5v-15A1.5%201.5%200%200%201%205.5%203h4%27%2F%3E%3Cpath%20d%3D%27m15.5%2016.5%205-4.5-5-4.5%27%2F%3E%3Cpath%20d%3D%27M20%2012H9%27%2F%3E%3C%2Fsvg%3E"); }
.ic-recolher { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m14.5%206-6%206%206%206%27%2F%3E%3C%2Fsvg%3E"); }
.ic-expandir { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9.5%206%206%206-6%206%27%2F%3E%3C%2Fsvg%3E"); }
.ic-hamburguer { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16%27%2F%3E%3Cpath%20d%3D%27M4%2012h16%27%2F%3E%3Cpath%20d%3D%27M4%2017h16%27%2F%3E%3C%2Fsvg%3E"); }

.logo { font-size: 34px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--azul), var(--link)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo.sm { font-size: 20px; letter-spacing: -.01em; }
/* parte 474 — o titulo da BARRA azul-marinho no tema claro (Denner, 15/09):
   "a barra azul-marinho nao fica com titulo legivel por conta da cor do texto
   em relacao ao fundo azul marinho".

   A causa e de token, nao de gosto: a `.logo` acima pinta o gradiente com
   `var(--link)`, e `--link` VIRA com o tema (#7FB0DC no escuro, #2e6da4 no
   claro, porque la ele assume fundo claro). So que a sidebar e SEMPRE marinho
   #1C2140, nos dois temas — entao no tema claro o fim do gradiente cai em
   azul-escuro sobre marinho.

   Medido pela regua de acessibilidade (minimo 3,0 para texto grande):
     tema escuro: 4,20 -> 6,82   passa
     tema claro : 4,20 -> 2,86   REPROVA no fim do gradiente
     agora      : 5,81 -> 6,82   passa nos DOIS temas, com folga

   A correcao e a mesma doutrina que o resto da sidebar ja segue (`.sb-nav a`,
   `.sb-secao`): sobre fundo que nao muda, a cor tambem nao muda. Cor fixa, e
   nao `var()`, e o que torna isso verdade. A `.logo` da topbar continua
   bebendo dos tokens — la o fundo acompanha o tema, e esta certo.

   ⚠️ 16/09 — o Denner pediu **branco**, e o azul claro saiu. O degrade era o
   que restava da ideia original de marca na barra; ele leu bem no marinho
   (5,81), mas continuava sendo "azul sobre azul", que e o incomodo que ele
   descreveu desde o comeco. Branco da casa (#F2F2F2 — o mesmo que a `.sidebar`
   ja usa em `color`, e o mesmo do `.sb-nav a:hover`): razao **13,99**.

   Aqui o `background-clip: text` precisa ser DESFEITO, nao so repintado: a
   `.logo` acima pinta o texto com um fundo recortado e `color: transparent`.
   Trocar so a cor do fundo mantem o texto transparente. */
.sidebar .logo { background: none; -webkit-background-clip: border-box;
  background-clip: border-box; color: #F2F2F2; }
/* logo oficial (imagem): chip branco SEMPRE, nos dois temas (pedido do
   Rafael, 14/08 — parte 369). O simbolo tem azul-marinho no desenho e se
   perdia sobre fundos escuros; sobre branco ele le inteiro. No tema claro
   o chip fica branco sobre o cartao branco: invisivel, que e o efeito
   certo — a logo simplesmente esta no branco. */
.logo-chip { display: inline-block; background: #fff; border-radius: 14px;
  padding: 14px 18px; margin-bottom: 4px; }
.logo-img { display: block; width: 100%; max-width: 280px; height: auto; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* parte 369: o simbolo do menu tambem ganha a placa branca. As medidas
   compensam o box-sizing global (border-box): 40 de altura - 2x5 de
   respiro = desenho com 30px, um fio menor que antes — e preciso: a placa
   alarga o conjunto, e com 42 o "ComexFlow" estourava a borda do menu por
   2px (medido na prova: texto terminava em 230 com borda em 228). */
.logo-simbolo { height: 40px; width: auto; display: block;
  background: #fff; border-radius: 10px; padding: 5px 7px; }
.sub { color: var(--texto-suave); font-size: 14px; margin: 4px 0 20px; }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--painel-bg);
  border: 1px solid var(--painel-borda); border-radius: 20px; padding: 34px 30px; text-align: center; }
.login-card label { display: block; text-align: left; color: var(--texto-suave); font-size: 13px; margin: 14px 0 0; }
.login-card input { width: 100%; margin-top: 5px; padding: 12px 12px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--campo); color: var(--texto); font-size: 15px; }
.login-card input:focus { outline: none; border-color: var(--azul); }
.login-card input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.login-card button { width: 100%; margin-top: 22px; padding: 12px; border: 0; border-radius: 10px;
  background: var(--bt-azul); color: #fff; font-size: 15px; font-weight: var(--bt-peso);
  font-family: inherit; cursor: pointer; box-shadow: var(--sombra-bt);
  transition: background-color .12s ease; }
.login-card button:hover { background: var(--bt-azul-hover); }
.login-card button:active { background: var(--bt-azul-ativo); }
.erro { background: var(--erro-bg); border: 1px solid var(--erro-borda); color: var(--erro-fg);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 4px; }
.foot { color: var(--texto-apagado); font-size: var(--fs-min); margin-top: 18px; }
.foot a { color: var(--texto-suave); }

/* ---- topbar (slim; menu agora mora na sidebar) ---- */
.topbar { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--borda-suave); position: sticky; top: 0;
  background: var(--fundo); z-index: 5; }
.topbar.slim { padding: 8px 24px; }
.tb-left { display: flex; align-items: center; gap: 22px; }
.tb-right { display: flex; align-items: center; gap: 10px; }

/* ---- layout com sidebar (reforma do menu, fase 1) ----
   A sidebar fica SEMPRE marinho RPF (#1C2140), nos dois temas —
   ancora da marca; o conteudo continua alternando claro/escuro. */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 228px; flex-shrink: 0; background: #1C2140; color: #F2F2F2;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid rgba(242,242,242,.08); }
html[data-tema="claro"] .sidebar { border-right-color: rgba(28,33,64,.2); }
.sb-marca { display: flex; align-items: center; gap: 8px; padding: 16px 14px 12px 16px;
  text-decoration: none; border-bottom: 1px solid rgba(242,242,242,.12); }
.sb-secao { font-size: var(--fs-cabecalho); letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600;                 /* 369: caixa alta pede um peso a mais */
  color: #8f99c2;                   /* 369: era #7f89b3 — 4,3:1 em texto de 11px */
  padding: 18px 18px 6px; }
.sb-nav { padding-bottom: 24px; }
.sb-nav a { display: flex; align-items: center; gap: 10px; color: #c3cbe8;
  text-decoration: none; font-size: 14px; padding: 8px 18px 8px 16px;
  border-left: 3px solid transparent;
  transition: background-color .12s ease, color .12s ease; }
.sb-nav a:hover { background: rgba(242,242,242,.07); color: #fff; }
.sb-nav a.on { border-left-color: #D90B1C; background: rgba(242,242,242,.10); color: #fff;
  font-weight: 600; }
/* o icone acompanha o estado do link: apagado em repouso, cheio no ativo */
.sb-nav .ico { opacity: .72; transition: opacity .12s ease; }
.sb-nav a:hover .ico, .sb-nav a.on .ico { opacity: 1; }
.sb-ico { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.sb-emoji { width: 22px; flex-shrink: 0; text-align: center; font-size: 15px; line-height: 1; }
.maincol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.antes { font-size: var(--fs-min); color: var(--texto-apagado); font-weight: 400;
  border: 1px solid var(--borda-suave); border-radius: 999px; padding: 2px 10px;
  vertical-align: middle; margin-left: 8px; white-space: nowrap; }
.nav-abrir, .nav-botao, .nav-veu, .so-mobile { display: none; }

/* ---- parte 321: menu lateral RECOLHIVEL (pedido do Rafael — mais espaco
   para as tabelas largas). Estado em html[data-menu="recolhido"], gravado
   no localStorage e aplicado antes da pintura (base.html). No celular o
   menu ja e gaveta: o botao some e estas regras nao valem. ---- */
/* ---- parte 322: a barra de rolagem do menu fica INVISIVEL e so aparece
   quando o mouse esta sobre o menu (pedido do Rafael — a barra clara colada
   na borda poluia a tela em todas as paginas).
   ⚠️ O ESPACO dela continua RESERVADO (largura fixa de 8px): so o "polegar"
   muda de cor. Se a barra aparecesse do nada, a area util encolheria 8px no
   hover e o texto do menu re-quebraria de linha ("Operadores Estrangeiros")
   — tremeria a cada passada do mouse. */
.sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box; }
.sidebar:hover { scrollbar-color: rgba(242,242,242,.30) transparent; }
.sidebar:hover::-webkit-scrollbar-thumb { background: rgba(242,242,242,.30);
  background-clip: content-box; }
.sidebar:hover::-webkit-scrollbar-thumb:hover { background: rgba(242,242,242,.50);
  background-clip: content-box; }

/* parte 323: a mesma ideia na barra HORIZONTAL da tabela de processos.
   Aqui o espaco reservado e a ALTURA — se a barra sumisse de vez, o quadro
   da tabela encolheria e tudo abaixo dele subiria a cada passada do mouse.
   ⚠️ Esta barra tambem AVISA que ha mais coluna para o lado; por isso ela
   acende com o mouse em QUALQUER ponto do quadro (`.pan-rolagem:hover`), e
   nao so em cima dela. Cor por variavel: o quadro muda com o tema. */
.pan-rolagem { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.pan-rolagem::-webkit-scrollbar { height: 10px; }
.pan-rolagem::-webkit-scrollbar-track { background: transparent; }
.pan-rolagem::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box; }
.pan-rolagem:hover { scrollbar-color: var(--borda) transparent; }
.pan-rolagem:hover::-webkit-scrollbar-thumb { background: var(--borda);
  background-clip: content-box; }
.pan-rolagem:hover::-webkit-scrollbar-thumb:hover { background: var(--texto-apagado);
  background-clip: content-box; }

/* parte 597: a LOGO e o botao de recolher/abrir (pedido do Avolio, 08/10 —
   o "<" do topo, fora da barra, lia como "voltar"). O .sb-marca virou
   <button>: zera o que o navegador poe em botao e devolve o visual do link
   que ele era. Ao passar o mouse a logo ENCOLHE com o menu aberto e ESTICA
   com ele recolhido — a dica do que o clique faz. So no computador: no
   celular o menu e gaveta, e a logo segue levando ao Painel. */
.sb-marca { width: 100%; background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(242,242,242,.12); font-family: inherit;
  text-align: left; cursor: pointer; color: inherit; }
.sb-marca:focus-visible { outline: 2px solid #F2F2F2; outline-offset: -4px; }
.sidebar { transition: width .18s ease; }
@keyframes cf-logo-encolhe { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.72); } }
@keyframes cf-logo-estica  { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.16); } }
@media (min-width: 901px) {
  .sb-marca .logo-simbolo { transform-origin: left center; }
  .sb-marca:hover .logo-simbolo, .sb-marca:focus-visible .logo-simbolo {
    animation: cf-logo-encolhe .9s ease-in-out infinite; }
  html[data-menu="recolhido"] .sb-marca .logo-simbolo { transform-origin: center; }
  html[data-menu="recolhido"] .sb-marca:hover .logo-simbolo,
  html[data-menu="recolhido"] .sb-marca:focus-visible .logo-simbolo {
    animation-name: cf-logo-estica; }
}
/* quem pediu ao sistema menos movimento ve a logo parada no meio do gesto */
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .sb-marca:hover .logo-simbolo, .sb-marca:focus-visible .logo-simbolo {
    animation: none; transform: scaleX(.85); }
  html[data-menu="recolhido"] .sb-marca:hover .logo-simbolo,
  html[data-menu="recolhido"] .sb-marca:focus-visible .logo-simbolo {
    animation: none; transform: scaleX(1.1); }
}
@media (min-width: 901px) {
  html[data-menu="recolhido"] .sidebar { width: 58px; }
  html[data-menu="recolhido"] .sb-marca { justify-content: center; gap: 0;
    padding: 16px 0 12px; }
  html[data-menu="recolhido"] .sb-marca .logo { display: none; }
  /* o simbolo vazava da faixa de 58 (pego no teste ao vivo: ficava
     cortado na esquerda) — encolhe junto com o menu. parte 369: com a
     placa branca, a conta fecha em ~48px de largura total (desenho de
     22px de altura x proporcao 1,85 + 2x4 de respiro), dentro dos 58. */
  /* parte 597: a faixa de 58 tem 49 uteis (8 da barra de rolagem
     reservada + 1 de borda), e a logo com 30 de altura media os 49 inteiros
     — ja encostava na esquerda (x = -1 medido no palco). Agora ela e o botao
     e ESTICA 16% no hover: com 24 de altura sao ~40 de largura, ~46 no meio
     do gesto, dentro dos 49. */
  html[data-menu="recolhido"] .logo-simbolo { height: 24px; padding: 3px;
    border-radius: 7px; }
  /* o rotulo do link e um no de TEXTO (nao um elemento): font-size:0 no <a>
     e o jeito confiavel de escondê-lo. Com o icone em SVG o desenho NAO
     encolhe junto (ele tem largura propria), diferente do emoji antigo —
     por isso nao precisa mais devolver tamanho nenhum a ele. */
  html[data-menu="recolhido"] .sb-nav a { justify-content: center; gap: 0;
    font-size: 0; padding: 10px 0; border-left-width: 0;
    border-right: 3px solid transparent; }
  html[data-menu="recolhido"] .sb-nav a.on { border-right-color: #D90B1C; }
  html[data-menu="recolhido"] .sb-emoji { font-size: 16px; width: auto; }
  /* "Operacao/Catalogo/Cadastros" viram um traco separador */
  html[data-menu="recolhido"] .sb-secao { font-size: 0; padding: 0;
    margin: 12px 10px; border-top: 1px solid rgba(242,242,242,.16); }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -240px; transition: left .2s ease; z-index: 20; }
  .nav-abrir:checked ~ .sidebar { left: 0; }
  .nav-abrir:checked ~ .nav-veu { display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 15; }
  .nav-botao { display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--texto-suave); border: 1px solid var(--borda);
    border-radius: 8px; padding: 6px; line-height: 0; }
  .so-mobile { display: flex; }
  .topbar.slim { padding: 8px 12px; }
  .tb-left { gap: 10px; }
  .tb-right { gap: 6px; }
  .tb-right .who { display: none; }
  .sair { padding: 5px 10px; }
  .sair .rot { display: none; }   /* no celular fica so o icone */
}
.who { color: var(--texto-suave); font-size: 13px; }
.who em { color: var(--texto-apagado); font-style: normal; border: 1px solid var(--borda);
  border-radius: 999px; padding: 1px 8px; font-size: var(--fs-min); margin-left: 4px;
  text-transform: capitalize; }
/* .sair e a "pilula" da barra do topo — serve para link e para botao.
   369: virou inline-flex para caber icone + rotulo alinhados. */
.sair { display: inline-flex; align-items: center; gap: 6px;
  color: var(--destaque); text-decoration: none; font-size: 13px;
  border: 1px solid var(--borda); border-radius: 999px; padding: 5px 14px;
  background: none; cursor: pointer; font-family: inherit; line-height: 1.4;
  transition: background-color .12s ease, border-color .12s ease; }
.sair:hover { background: var(--hover-azul); border-color: var(--azul); }
.sair.so-ico { padding: 6px; border-radius: 50%; }
/* parte 764 (card 11): o MENU DO PERFIL — <details class="menu-perfil"> no topo
   (templates/interno.html; Esc e clique fora em static/menu-perfil.js). O gatilho
   e o nome da pessoa + o perfil; no celular o .who some (@media 900px, acima) e
   fica o icone. O topo e sticky com z-index 5 e cria contexto de empilhamento:
   o corpo absoluto, com z-index 30 dentro dele, fica por cima do conteudo da
   pagina (a tabela sticky e 2). Ancorado a direita e com max-width, ele cabe
   em 375px. Cores so por token; o escuro tem as dele na secao da parte 600. */
.menu-perfil { position: relative; }
.menu-perfil > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; border: 1px solid var(--borda); border-radius: 6px; padding: 4px 10px;
  color: var(--texto); font-size: 13px; line-height: 1.4;
  transition: background-color .12s ease, border-color .12s ease; }
.menu-perfil > summary::-webkit-details-marker { display: none; }
.menu-perfil > summary::after { content: "▾"; color: var(--texto-suave); }
.menu-perfil > summary:hover, .menu-perfil[open] > summary { background: var(--hover-azul);
  border-color: var(--azul); }
.menu-perfil > summary:focus-visible { outline: 2px solid var(--foco, var(--azul)); outline-offset: 2px; }
.menu-perfil-corpo { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; min-width: 200px; max-width: calc(100vw - 24px);
  padding: 6px; background: var(--campo); border: 1px solid var(--borda); border-radius: 9px;
  box-shadow: var(--sombra-bt); }
.menu-perfil-corpo a { display: flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 6px 10px; border-radius: 6px; color: var(--texto); text-decoration: none;
  font-size: 13px; white-space: nowrap; }
.menu-perfil-corpo a:hover, .menu-perfil-corpo a:focus-visible { background: var(--linha-hover, var(--hover-azul)); }
.menu-perfil-corpo a:focus-visible { outline: 2px solid var(--foco, var(--azul)); outline-offset: -2px; }
@media (pointer: coarse), (any-pointer: coarse) {
  .menu-perfil > summary, .menu-perfil-corpo a { min-height: 44px; }
}

/* ---- painel ---- */
/* parte 259: largura TOTAL no desktop (pedido do Rafael, 03/08) — o
   max-width de 960px espremia as telas largas (Panorama/tabelas);
   adaptacao mobile fica para uma fase propria. */
.painel { max-width: none; margin: 0; padding: 26px 28px 60px; }
.painel h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.hint { color: var(--texto-suave); font-size: 14px; margin: 4px 0 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.card { background: var(--painel-bg); border: 1px solid var(--painel-borda);
  border-radius: 16px; padding: 18px 20px; text-align: center; text-decoration: none; color: inherit;
  transition: border-color .12s ease, background-color .12s ease; }
.card.link:hover { border-color: var(--azul); background: var(--hover-azul); }
.card.wide { grid-column: 1 / -1; background: var(--marca-azul); }
/* 369: numero grande com digito de largura fixa — sem isto, "11" e "88"
   tinham larguras diferentes e os cartoes lado a lado desalinhavam */
.card .num { font-size: 28px; font-weight: 700; color: var(--destaque);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.card .lbl { color: var(--texto-suave); font-size: 13px; margin-top: 3px; }
.bloco { margin-top: 30px; }
/* parte 758 (rodada 2): quem chega por ancora (`/apoio#saude`, o link do contador
   do menu; os chips do indice de Configuracoes) caia com o titulo do bloco SOB a
   topbar, que e sticky: medida 47px a 1366 e 49px a 375. 60px = a barra + folga. */
.bloco[id] { scroll-margin-top: 60px; }
.bloco h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; letter-spacing: -.005em; }

/* ---- painel logistico (Lote 4) ---- */
.painel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.painel-grid .bloco { margin-top: 30px; min-width: 0; }
/* parte 758: no Painel, chegadas e LPCO empilham na coluna da esquerda e a
   atencao ocupa a direita nas duas linhas. `auto 1fr`: a 1a linha mede so as
   chegadas (o item que atravessa linha flexivel e medido depois), entao o
   LPCO encosta nelas em vez de esperar a atencao acabar. */
.painel-alertas { grid-template-rows: auto 1fr; }
.painel-alertas > .painel-chegadas { grid-column: 1; grid-row: 1; }
.painel-alertas > .painel-lpco { grid-column: 1; grid-row: 2; }
.painel-alertas > .painel-atencao { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 760px) {
  .painel-grid { grid-template-columns: 1fr; }
  /* empilha na ordem do HTML: chegadas, atencao, LPCO */
  .painel-alertas { grid-template-rows: none; }
  .painel-alertas > .painel-chegadas, .painel-alertas > .painel-lpco,
  .painel-alertas > .painel-atencao { grid-column: auto; grid-row: auto; }
}
.barras { display: flex; flex-direction: column; gap: 9px; }
.barra-linha { display: grid; grid-template-columns: 150px 1fr 34px; align-items: center;
  gap: 10px; text-decoration: none; color: inherit; }
.barra-rot { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-trilho { background: var(--borda-suave); border-radius: 6px; height: 20px; overflow: hidden; }
.barra-fill { display: block; height: 100%; border-radius: 6px; min-width: 3px;
  opacity: .85; transition: opacity .12s; }
.barra-linha:hover .barra-fill { opacity: 1; }
.barra-num { font-weight: 700; color: var(--destaque); font-size: 14px;
  font-variant-numeric: tabular-nums; }
.canal-rosca { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rosca { width: 150px; height: 150px; flex-shrink: 0; }
.rosca-seg { transition: stroke-width .12s; }
.rosca-c1 { fill: var(--texto); font-size: 7px; font-weight: 700; text-anchor: middle; }
.rosca-c2 { fill: var(--texto-apagado); font-size: 3.6px; text-anchor: middle; }
.canal-legenda { display: flex; flex-direction: column; gap: 6px; }
.canal-item { display: flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--texto-suave); font-size: 14px; }
.canal-item:hover { color: var(--destaque); }
.canal-item strong { color: var(--texto); margin-left: 3px; font-variant-numeric: tabular-nums; }
.alerta-bloco { margin-bottom: 16px; }
.alerta-tit { display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--texto-suave); margin-bottom: 6px; }
.alerta-item { display: block; padding: 8px 12px; border: 1px solid var(--borda-suave);
  border-radius: 9px; margin-bottom: 5px; text-decoration: none; color: inherit; font-size: 14px;
  transition: border-color .12s ease, background-color .12s ease; }
.alerta-item:hover { border-color: var(--azul); background: var(--hover-azul); }
.alerta-item strong { color: var(--destaque); }
/* parte 505: o item de AVISO e o unico da secao que carrega acao, entao e <div>
   e nao <a> — form dentro de link nao e HTML valido. Herda a moldura de
   .alerta-item; aqui so entra o que o item de acao precisa a mais. */
.aviso-item { cursor: default; }
.aviso-item:hover { border-color: var(--borda-suave); background: transparent; }
/* parte 758 (rodada 2): o rotulo longo de grupo ("... — e mais 9 do mesmo
   tipo") empurrava o selo "N novos" sozinho para a linha de baixo. O selo foi
   para DENTRO do `.aviso-titulo` (templates/_avisos.html), no fluxo do texto, e
   segue a ultima palavra; o titulo quebra dentro dele, sem corte. O menu fica do
   lado (`nowrap`), e so em tela estreita desce para a linha dele — ao lado, o
   titulo ficava com 6 linhas a 375px. */
.aviso-topo { display: flex; align-items: baseline; gap: 4px; flex-wrap: nowrap; }
.aviso-titulo { font-weight: 500; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.aviso-topo > .acoes-menu { flex: none; }
/* `inline`, e nao o `inline-block` do .badge: antes de um bloco atomico o Chrome
   abre ponto de quebra mesmo com o WORD JOINER do template (medido a 375px); em
   linha, o WORD JOINER segura o selo na ultima palavra, e o `nowrap` do .badge
   impede que ele mesmo se parta */
.aviso-titulo > .aviso-selo { display: inline; }
@media (max-width: 760px) { .aviso-topo { flex-wrap: wrap; } }
.aviso-link { color: inherit; text-decoration: none; }
.aviso-link:hover { color: var(--destaque); text-decoration: underline; }
.aviso-selo { margin-left: 4px; font-size: var(--fs-min); padding: 1px 8px; }
.aviso-meta { font-size: var(--fs-min); margin-top: 3px; line-height: 1.5; }
/* parte 758 (card 1897423701410842268): as tres acoes viraram um MENU por aviso
   e por grupo (`templates/_avisos.html`) — 3-4 botoes em cada um dos 30 itens
   eram o que fazia a lista parecer maior do que era. <details>, sem JS.
   O gatilho some no repouso e volta no :hover e no :focus-within — por
   OPACIDADE, e nao display/visibility, para continuar na ordem do Tab: e o
   foco do teclado que dispara o :focus-within. Em tela de toque nao ha hover,
   entao ali ele fica SEMPRE a vista. `>` nos seletores: passar o mouse num
   grupo nao acende o menu de cada item de dentro. */
.acoes-menu { position: relative; margin-left: auto; opacity: 0;
  transition: opacity .12s ease; }
.aviso-item:hover > .aviso-topo > .acoes-menu,
.aviso-item:focus-within > .aviso-topo > .acoes-menu,
.acoes-menu[open] { opacity: 1; }
@media (pointer: coarse), (any-pointer: coarse) {
  .acoes-menu { opacity: 1; }
  .acoes-menu > summary { min-height: 44px; }
}
.acoes-menu > summary { list-style: none; cursor: pointer; font-size: var(--fs-min);
  font-weight: 500; padding: 3px 10px; border: 1px solid var(--borda);
  border-radius: var(--bt-raio-mini); color: var(--texto-suave);
  display: inline-flex; align-items: center; }
.acoes-menu > summary::-webkit-details-marker { display: none; }
.acoes-menu > summary::after { content: "▾"; margin-left: 5px; }
.acoes-menu > summary:hover, .acoes-menu[open] > summary { border-color: var(--azul);
  background: var(--hover-azul); color: var(--texto); }
.acoes-menu-corpo { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-width: 220px; padding: 8px; background: var(--fundo);
  border: 1px solid var(--painel-borda); border-radius: 9px; box-shadow: var(--sombra-bt); }
.acoes-menu-corpo form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.acoes-menu-corpo button { width: 100%; text-align: left; font-size: var(--fs-min); }
/* o grupo: a linha-resumo e a lista inteira num <details>; os itens de dentro
   sao o mesmo item do Painel, so recuados */
.aviso-grupo-lista { margin-top: 6px; }
.avisos-fora { margin: 8px 0 0; color: var(--texto-suave); font-size: var(--fs-min); }
.aviso-grupo-lista > summary { cursor: pointer; font-size: var(--fs-min);
  color: var(--link); width: fit-content; }
.aviso-grupo-itens { margin-top: 6px; padding-left: 10px;
  border-left: 2px solid var(--borda-suave); }
.aviso-grupo-itens .aviso-item { margin-bottom: 5px; }
/* parte 762 (leitura dos prints, rodada 5): o resto de um grupo da lista única de atenção
   (os itens além dos 6 à vista) fica alinhado aos de cima, sem o recuo da lista de avisos,
   e o rótulo diz o que o clique faz: "Ver os outros N" fechado, "Recolher" aberto */
.atn-resto > .aviso-grupo-itens { padding-left: 0; border-left: 0; }
.atn-resto > summary .atn-aberto, .atn-resto[open] > summary .atn-fechado { display: none; }
.atn-resto[open] > summary .atn-aberto { display: inline; }
/* o contador do item Configuracoes no menu (parte 758): a pilula de ATENCAO —
   "ha alerta de rotina". Rodada 2: no claro, `html[data-tema] .badge` zerava a
   borda e o "3" ficava solto. As cores sao as da familia atencao do tema ESCURO
   (--tmp-bg/fg/borda de :root), escritas por extenso e nao por token: a sidebar e
   SEMPRE escura (#1C2140 no claro, --s-sidebar no escuro), e o token claro
   (--tmp-fg #8d5507) vira com o tema sobre um fundo que nao vira — 2,3:1 ali.
   #ffe9a8 sobre a sidebar: >= 11:1 nos dois temas. O seletor `.sb-nav .badge.x`
   (0,3,0) vence `html[data-tema] .badge` (0,2,1) e o do escuro. */
.menu-contador { margin-left: auto; padding: 0 8px; }
.sb-nav .badge.menu-contador { background: rgba(234,179,8,.16); color: #ffe9a8;
  border: 1px solid rgba(234,179,8,.45); border-radius: 999px; }

/* ---- badges / dots ---- */
.badge { display: inline-block; font-size: var(--fs-min); padding: 2px 10px; border-radius: 999px;
  white-space: nowrap; font-weight: 500; line-height: 1.5; }
.badge.grande { font-size: 13px; padding: 4px 12px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.chip { display: inline-block; background: var(--hover-azul); border: 1px solid var(--painel-borda);
  border-radius: 8px; padding: 2px 8px; font-size: 13px; margin-right: 6px; }

/* ---- tabelas ---- */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda-suave); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
/* 369: `tabular-nums` na tabela inteira. So mexe em DIGITO — texto fica
   igual. E o ajuste que mais rende num sistema aduaneiro: valor, data,
   NCM, numero de DI e de DUIMP passam a alinhar na vertical em vez de
   dancar de linha em linha. */
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda-suave);
  font-size: 14px; font-variant-numeric: tabular-nums; }
th { color: var(--texto-suave); font-weight: 600; font-size: var(--fs-min); white-space: nowrap;
  letter-spacing: .02em; }
tbody tr:last-child td { border-bottom: 0; }
table.lista tbody tr { cursor: pointer; }
table.lista tbody tr:hover { background: var(--hover-azul); }
td.ref { font-weight: 600; color: var(--destaque); white-space: nowrap; }
td.r, th.r, td.r { text-align: right; }
.lista th:nth-child(7), .lista th:nth-child(8), .lista td.r { text-align: right; }
.vazio { text-align: center; color: var(--texto-apagado); padding: 22px; }

/* ---- filtros ---- */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center; }
.filtros select, .filtros input { padding: 9px 12px; border-radius: var(--bt-raio); background: var(--campo);
  color: var(--texto); border: 1px solid var(--borda); font-size: 14px; font-family: inherit;
  transition: border-color .12s ease; }
.filtros select:hover, .filtros input:hover { border-color: var(--azul); }
.filtros input { min-width: 220px; }
.filtros button { padding: var(--bt-pad); border: 0; border-radius: var(--bt-raio); cursor: pointer;
  background: var(--bt-azul); color: #fff; font-weight: var(--bt-peso); font-size: 14px;
  font-family: inherit; box-shadow: var(--sombra-bt); transition: background-color .12s ease; }
.filtros button:hover { background: var(--bt-azul-hover); }
.filtros button:active { background: var(--bt-azul-ativo); }
.filtros .limpar { color: var(--texto-suave); text-decoration: none; font-size: 13px; }
.filtros .limpar:hover { color: var(--texto); text-decoration: underline; }

/* ---- detalhe ---- */
.voltar { color: var(--texto-suave); text-decoration: none; font-size: 13px; }
.voltar:hover { color: var(--destaque); }
.det-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 20px; }
.det-head h1 { font-size: 24px; }
/* 369: as linhas divisorias saiam do FUNDO do quadro aparecendo pelas
   frestas de 1px. Funcionava enquanto a ultima fila estava cheia — quando
   sobrava espaco (ex.: 7 campos numa fila de 5), esse espaco vazio ficava
   com a cor da divisoria e virava um retangulo cinza no meio da tela.
   Agora o fundo do quadro e o fundo normal e cada campo desenha a propria
   linha com box-shadow, que preenche so a fresta ao redor dele. */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
  background: var(--fundo); border: 1px solid var(--borda-suave); border-radius: 12px; overflow: hidden; }
.campos.datas { margin-top: 14px; }
.campos > div { background: var(--fundo); padding: 12px 14px; font-size: 14px;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px var(--borda-suave); }
.campos span { display: block; color: var(--texto-apagado); font-size: var(--fs-min); margin-bottom: 2px;
  font-variant-numeric: normal; }
.lpco-linha { margin-top: 16px; font-size: 14px; color: var(--texto-suave); }

/* ---- usuarios / troca de senha ---- */
.sucesso { background: var(--ok-bg); border: 1px solid var(--ok-borda); color: var(--ok-fg);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 4px 0 12px; }
.painel .erro { margin: 4px 0 12px; }
.senha-box { background: var(--tmp-bg); border: 1px solid var(--tmp-borda);
  border-radius: 12px; padding: 14px 16px; font-size: 14px; margin-bottom: 14px; }
.senha-box code { display: inline-block; background: var(--campo); border: 1px solid var(--borda);
  border-radius: 8px; padding: 4px 12px; font-size: 17px; letter-spacing: 1px; color: var(--tmp-fg); margin-left: 8px; }
.senha-aviso { color: var(--senha-aviso); font-size: 13px; margin-top: 6px; }
.badge.b-ok { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-borda); }
.badge.b-tmp { background: var(--tmp-bg); color: var(--tmp-fg); border: 1px solid var(--tmp-borda); }
.badge.b-off { background: var(--off-bg); color: var(--off-fg); border: 1px solid var(--off-borda); }
tr.inativo td { color: var(--texto-apagado); }
/* parte 584 (resgate da validacao visual de 21/09): a celula de acoes ganha
   controles conforme quem olha, e com `white-space: nowrap` a linha inteira
   nascia mais larga que a tela — o ultimo botao existia no HTML e so aparecia
   rolando a tabela na horizontal. Botao que ninguem alcanca e botao nenhum.
   Flex com wrap quebra ENTRE os botoes; o nowrap continua valendo DENTRO de
   cada um, que era o que ele protegia.
   O flex mora numa CAIXA dentro da celula, nunca no <td>: `display: flex` no
   proprio td o tira do modelo de tabela, a celula deixa de esticar ate a
   altura da linha e a borda dela sai desalinhada das vizinhas (medido no print
   da Diretoria, 06/10: as linhas sem acao ficavam com a borda no meio). */
td.acoes .acoes-caixa { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
td.acoes form { display: inline-block; margin-right: 0; white-space: nowrap; }
/* botao pequeno de tabela — mesma familia do botao grande, so menor */
/* card 1875703554426013224 (etapa 2): a regra era `button.mini` — presa ao
   ELEMENTO. O projeto usa `<a class="mini">` em 8 telas (filtros de Free
   time, acoes de tabela, chips de apoio) e esses saiam CRUS: medido em
   /free-time, "Em aberto" e "Todos (com devolvidos)" com fundo transparente
   e 21px de altura, ao lado de irmaos de 32px. Acrescentar `a.mini` mantem
   o peso do seletor (0-1-1) — nada perde posicao, o <a> so passa a receber
   o que o <button> ja recebia. */
button.mini, a.mini { padding: var(--bt-pad-mini); font-size: 13px; border: 1px solid var(--borda);
  border-radius: var(--bt-raio-mini); background: var(--hover-azul); color: var(--destaque);
  cursor: pointer; font-family: inherit; font-weight: 500; line-height: 1.5;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: background-color .12s ease, border-color .12s ease; }
button.mini:hover, a.mini:hover { background: var(--marca-azul); border-color: var(--azul); }
button.mini:active, a.mini:active { background: var(--marca-azul); filter: brightness(.94); }
/* o filtro ligado (`.on`) nao tinha marca nenhuma em <a class="mini on"> —
   quem olhava /free-time nao via qual dos dois estava valendo. */
a.mini.on, button.mini.on { background: var(--marca-azul); border-color: var(--azul);
  color: var(--texto); font-weight: 600; }
/* parte 756: o botao destrutivo tem aparencia propria — contorno e texto no vermelho de
   perigo, fundo vazado. O selo de atraso (`b-erro`) e tingido e sem contorno: nao se confundem. */
button.mini.perigo, a.mini.perigo { border-color: var(--perigo-bg); background: transparent; color: var(--perigo-bg); }
button.mini.perigo:hover, a.mini.perigo:hover { background: var(--erro-bg); border-color: var(--perigo-bg); filter: brightness(1.1); }

/* ---- `.compacto`: o botao de DENTRO da linha de tabela ----
   (card 1875703554426013224, etapa 2)

   Este tamanho ja existia — inventado separadamente em cada tela, a mao:
   `font-size:11px; padding:1px 6px` no Faturamento, `font-size:12px;
   padding:5px 12px` no Processo e na Validacao de NCM, e
   `table.pan td.col-acao .bt-dup { font-size:12px }` dentro do bloco de
   estilo do Catalogo. Tres tamanhos para a mesma necessidade, e nenhum com
   nome — por isso a proxima tela inventava o quarto.

   Um nome so, e o `.mini` volta a ser o botao de BARRA (32px). Assim a
   linha de tabela nao empurra a barra de acoes para baixo, que era o
   motivo real de cada tela ter encolhido o seu por conta propria.

   O alvo de toque segue a excecao que o Catalogo ja tinha acertado — e
   com o breakpoint DELE, que e melhor que o meu: `any-pointer: coarse`
   pega o dedo em qualquer largura, enquanto `max-width` deixaria de fora
   o celular deitado. A regra local do Catalogo sai; esta fica no lugar. */
button.mini.compacto, a.mini.compacto,
.botao-link.compacto {
  font-size: var(--fs-min); padding: 3px 10px; border-radius: var(--bt-raio-mini); font-weight: 500; }
@media (any-pointer: coarse) {
  button.mini.compacto, a.mini.compacto,
  .botao-link.compacto { min-height: 44px; padding: 0 12px;
    justify-content: center; }
}

/* ---- os dois papeis que faltavam nome (card 1875703554426013224) ----
   `.ok`   — confirmar/concluir. O verde ja existia como token `--bt-verde`,
             mas a tela do Kit de exoneracao pintava `background:#1a7f37` a
             mao: cor fixa que, medida, reprova o minimo de contraste no tema
             escuro (3,08 contra 4,5) — e que nao acompanha tema nenhum.
   `.desativado` — acao indisponivel. O Processo desenhava isso com um
             <span> e `opacity:.4; cursor:not-allowed` inline; sem nome, a
             proxima tela inventaria outro jeito. */
.botao-link.ok, button.ok { background: var(--bt-verde); color: #fff; border-color: transparent; }
.botao-link.ok:hover, button.ok:hover { background: var(--bt-verde-hover); border-color: transparent; }
.botao-link.ok:active, button.ok:active { background: var(--bt-verde-ativo); }
.botao-link.desativado, .mini.desativado {
  opacity: .45; cursor: not-allowed; pointer-events: none; }

/* `.neutro` — acao secundaria, de mesmo peso visual que a principal mas sem
   disputar com ela. Tres telas faziam isso com
   `style="background:var(--texto-suave)"` — pintando o FUNDO com uma cor de
   TEXTO. O resultado media 2,17:1 com o rotulo branco por cima, metade do
   minimo. Agora e papel, com a cor pensada para carregar texto. */
.botao-link.neutro, button.neutro { background: var(--bt-neutro);
  color: #fff; border-color: transparent; }
.botao-link.neutro:hover, button.neutro:hover { background: var(--bt-neutro-hover); }

/* `.icone` — botao QUADRADO, so desenho, sem rotulo. O mapa de Navios tinha
   tres (+ / - / voltar ao mundo) desenhados a mao com `font-size:15px;
   line-height:1; padding:6px 10px`. Quadrado nao e "botao com padding
   diferente": e um papel proprio, e sem nome a proxima tela reinventa. */
button.mini.icone, a.mini.icone {
  font-size: 15px; line-height: 1; padding: 0;
  width: 32px; height: 32px; justify-content: center; }
button.mini[disabled], button[disabled], .filtros button[disabled] {
  opacity: .5; cursor: not-allowed; filter: none; }
.btn-link { display: block; margin-top: 18px; padding: 12px; border-radius: 10px; text-decoration: none;
  background: var(--bt-azul); color: #fff; font-size: 15px; font-weight: var(--bt-peso);
  text-align: center; box-shadow: var(--sombra-bt); transition: background-color .12s ease; }
.btn-link:hover { background: var(--bt-azul-hover); }
.btn-link:active { background: var(--bt-azul-ativo); }

/* ---- validar produtos ---- */
.caixa-refs { width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--campo);
  color: var(--texto); border: 1px solid var(--borda); font-size: 14px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; resize: vertical; }
.caixa-refs:focus { outline: none; border-color: var(--azul); }
.caixa-refs:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.badge.b-novo { background: var(--novo-bg); color: var(--novo-fg); border: 1px solid var(--novo-borda);
  font-weight: 600; }
/* vermelhos semanticos, theme-aware (parte 179) — substituem cores fixas inline */
.badge.b-falta { background: var(--falta-bg); color: var(--falta-fg); }
/* 369: a classe vem DOBRADA de proposito (.btn-perigo.btn-perigo).
   Motivo real, pego na prova de tela: `.filtros button` tem peso 0-1-1 e
   `.btn-perigo` tinha 0-1-0 — entao um botao vermelho DENTRO da barra de
   filtros saia AZUL, com cara de acao comum. Num sistema onde esse botao
   cancela processo, isso e erro grave, nao detalhe visual. Repetir a
   classe sobe o peso para 0-2-0 e a cor de perigo passa a vencer em
   qualquer contexto, sem precisar de !important. */
.btn-perigo.btn-perigo { background: var(--perigo-bg); color: var(--perigo-fg);
  border-color: transparent; }
.btn-perigo.btn-perigo:hover { background: var(--perigo-bg); filter: brightness(1.08); }
.btn-perigo.btn-perigo:active { filter: brightness(.92); }
.senha-box.perigo { border-color: var(--perigo-bg); }
.ambiente-prod { background: var(--perigo-bg); color: var(--perigo-fg); border-radius: 6px; }
.t-perigo { color: var(--perigo-bg); }
.badge.b-erro { background: var(--erro-bg); color: var(--erro-fg); border: 1px solid var(--erro-borda); }
.badge.b-perigo { background: var(--perigo-bg); color: var(--perigo-fg); }
tr.linha-nova td { background: rgba(217,11,28,.05); }
td.obs-novo { color: var(--novo-obs); font-size: 13px; }

/* ---- invoices / catalogacao ---- */
.botao-link { display: inline-flex; align-items: center; gap: 7px; padding: var(--bt-pad);
  border-radius: var(--bt-raio); text-decoration: none; background: var(--bt-azul); color: #fff;
  font-weight: var(--bt-peso); font-size: 14px; line-height: 1.5; box-shadow: var(--sombra-bt);
  transition: background-color .12s ease; }
.botao-link:hover { background: var(--bt-azul-hover); }
.botao-link:active { background: var(--bt-azul-ativo); }
.form-invoice { max-width: 460px; }
.form-invoice label { display: block; color: var(--texto-suave); font-size: 13px; margin: 14px 0 0; }
.form-invoice input, .form-invoice select { width: 100%; margin-top: 5px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--borda); background: var(--campo);
  color: var(--texto); font-size: 14px; font-family: inherit; }
.form-invoice input[type=file] { padding: 8px; }
.cat-card { background: var(--painel-bg); border: 1px solid var(--painel-borda);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; }
.cat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cat-head .ref { font-weight: 700; color: var(--destaque); font-size: 15px; }
.cat-quando { margin-left: auto; color: var(--texto-apagado); font-size: var(--fs-min); }
.cat-campos { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.cat-campos label { color: var(--texto-suave); font-size: 13px; flex: 1 1 160px; }
.cat-campos label:first-child { flex: 3 1 320px; }
.cat-campos input { width: 100%; margin-top: 4px; padding: 9px 12px; border-radius: var(--bt-raio);
  border: 1px solid var(--borda); background: var(--campo); color: var(--texto); font-size: 14px;
  font-family: inherit; }
.cat-campos button { padding: var(--bt-pad); border: 0; border-radius: var(--bt-raio); cursor: pointer;
  background: var(--bt-verde); color: #fff; font-weight: var(--bt-peso); font-size: 14px;
  font-family: inherit; box-shadow: var(--sombra-bt); transition: background-color .12s ease; }
.cat-campos button:hover { background: var(--bt-verde-hover); }
.cat-campos button:active { background: var(--bt-verde-ativo); }
.cat-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.cat-link:hover { border-color: var(--azul); }
.cat-resumo { color: var(--texto-suave); font-size: 14px; }
.cat-resumo .abrir { color: var(--link); margin-left: 8px; white-space: nowrap; }

/* ---- ficha do produto ---- */
.ficha-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .ficha-grid { grid-template-columns: 1fr; } }

/* ---- ficha da importadora: partes que abrem e recolhem ----
   card "simplificar a tela do importador" (08/10/2026). Cada parte e um
   <details class="secao-ficha">: titulo + resumo curto sempre a vista, o
   formulario so no clique. O h2 de dentro do <summary> traz margem inline de
   quando as partes eram empilhadas — o !important zera so ela. */
.secoes-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -8px 0 14px; font-size: 13px; }
.secoes-barra .suave { margin-right: auto; }
.ficha-secoes { display: flex; flex-direction: column; gap: 10px; max-width: 1100px; }
.secao-ficha { border: 1px solid var(--painel-borda); border-radius: 10px; background: var(--painel-bg); }
.secao-ficha > summary { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  position: relative; padding: 12px 16px 12px 36px; cursor: pointer; list-style: none; border-radius: 10px; }
.secao-ficha > summary::-webkit-details-marker { display: none; }
/* a seta fica PRESA a esquerda (absoluta): como item do flex, ela ia sozinha
   para uma linha no celular quando o titulo quebrava */
.secao-ficha > summary::before { content: "▸"; color: var(--texto-suave); font-size: 13px;
  position: absolute; left: 16px; top: 14px; line-height: 20px; transition: transform .15s; }
.secao-ficha[open] > summary::before { transform: rotate(90deg); }
.secao-ficha > summary:hover { background: var(--hover-azul); }
.secao-ficha > summary h2 { margin: 0 !important; font-size: 15px; font-weight: 600; color: var(--texto);
  text-transform: none; letter-spacing: 0; }
.secao-resumo { color: var(--texto-suave); font-size: 13px; }
.secao-ficha[open] > summary { border-bottom: 1px solid var(--painel-borda); border-radius: 10px 10px 0 0; }
/* parte 765 (card 12): a parte aberta por ancora (#certificado, #locais-consumo)
   para abaixo da barra fixa do topo, como .bloco[id] */
.secao-ficha[id] { scroll-margin-top: 60px; }
.secao-corpo { padding: 14px 16px 16px; }
.secao-corpo > .hint:last-child, .secao-corpo > :last-child { margin-bottom: 0; }
.secao-cnpj > summary { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; cursor: pointer;
  position: relative; padding: 2px 0 2px 20px; list-style: none; }
.secao-cnpj > summary::-webkit-details-marker { display: none; }
.secao-cnpj > summary::before { content: "▸"; color: var(--texto-suave); font-size: 13px;
  position: absolute; left: 2px; top: 3px; line-height: 20px; transition: transform .15s; }
.secao-cnpj[open] > summary::before { transform: rotate(90deg); }
.secao-cnpj[open] > summary { margin-bottom: 4px; }
.painel-origem h2, .ficha-form h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px;
  color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.ficha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.ficha-campos label, .ficha-form > label { color: var(--texto-suave); font-size: 13px; }
.ficha-campos label.larga { grid-column: 1 / -1; }
.ficha-campos input, .ficha-campos select, .ficha-form > label input {
  width: 100%; margin-top: 4px; padding: 9px 12px; border-radius: var(--bt-raio);
  border: 1px solid var(--borda); background: var(--campo); color: var(--texto); font-size: 14px;
  font-family: inherit; }
.ficha-campos input:focus, .ficha-form textarea:focus { outline: none; border-color: var(--azul); }
/* parte 492.1 (card 1864883586117666164): campo com <datalist> mostra a SETA
   SEMPRE. O Chrome so desenha o indicador quando o campo esta sob o mouse ou
   com foco — e o pedido do operador foi literalmente *"seleciona a importadora
   apertando uma seta pra baixo"*. Affordance que so aparece quando ja se sabe
   que ela existe nao e affordance; em toque, onde nao ha hover, ela nunca
   apareceria. `color-scheme: dark` e o que pinta o indicador claro sobre o
   campo escuro: sem isso ele sai preto no escuro, e some. */
.ficha-campos input[list] { color-scheme: dark; }
:root[data-tema="claro"] .ficha-campos input[list] { color-scheme: light; }
.ficha-campos input[list]::-webkit-calendar-picker-indicator {
  opacity: 1; cursor: pointer; }
/* parte 492.2: campo que guarda o valor em CAIXA ALTA. O `text-transform` sobe
   tambem o PLACEHOLDER — "vazio = usa T47" virava "VAZIO = USA T47", que grita
   uma instrucao. O texto de ajuda volta ao normal. */
.caixa-alta { text-transform: uppercase; }
.caixa-alta::placeholder { text-transform: none; }
.ficha-campos input:focus-visible, .ficha-form textarea:focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px; }
.btn-pronto { background: var(--bt-verde) !important; }
.btn-pronto:hover { background: var(--bt-verde-hover) !important; }
.btn-pronto:active { background: var(--bt-verde-ativo) !important; }

/* ---- fila de validacao de NCM ---- */
.val-linha { display: flex; gap: 14px; align-items: flex-start; }
.val-foto { width: 92px; height: 92px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--borda-suave); background: #fff; flex: none; }
.val-sem-foto { display: grid; place-items: center; color: var(--texto-apagado);
  font-size: var(--fs-min); }
.val-corpo { flex: 1; min-width: 0; }
.val-acoes { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.val-devolver { display: flex; gap: 6px; align-items: center; }
.val-devolver input[type=text] { padding: 6px 10px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--borda); background: var(--campo); color: var(--texto); min-width: 220px;
  font-family: inherit; }

/* ---- apoio (listas + alertas) ---- */
.apoio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.chip.chk { cursor: pointer; user-select: none; padding: 5px 12px; }
.chip.chk input { accent-color: var(--azul); margin-right: 5px; vertical-align: -1px; }
.chip.chk:has(input:checked) { background: var(--marca-azul); border-color: var(--azul); }
.chip.chk:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
/* parte 628: o filtro de origem da Catalogacao — chip que e link, e o escolhido */
a.chip { color: inherit; text-decoration: none; padding: 4px 10px; }
a.chip:hover { border-color: var(--azul); }
a.chip:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.chip.chip-ativo { background: var(--marca-azul); border-color: var(--azul); font-weight: 600; }
textarea.obs { width: 100%; padding: 10px 12px; border-radius: 9px; resize: vertical;
  background: var(--campo); color: var(--texto); border: 1px solid var(--borda);
  font-size: 14px; font-family: inherit; }
textarea.obs:focus { outline: none; border-color: var(--azul); }
textarea.obs:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
/* card 1875703554426013224: `line-height` e `font-weight` explicitos porque o
   piso `:where(button)` passou a preencher os dois — e aqui o compacto e
   proposital: e o "x" de remover dentro de um chip, nao um botao de barra. */
.chip-x { border: 0; background: none; color: var(--texto-apagado); cursor: pointer;
  font-size: 13px; padding: 0 2px; font-family: inherit;
  line-height: 1; font-weight: 400; }
.chip-x:hover { color: var(--erro-fg); }
.op-edit { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.op-edit input, .op-edit select { padding: 5px 8px; border-radius: 7px; font-size: var(--fs-min);
  border: 1px solid var(--borda); background: var(--campo); color: var(--texto); font-family: inherit; }

/* ---- fotos do produto ---- */
.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.foto-card { background: #fff; border: 1px solid var(--painel-borda); border-radius: 10px;
  padding: 6px; }
.foto-card img { width: 100%; height: 110px; object-fit: contain; display: block;
  border-radius: 6px; background: #fff; }
.foto-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.foto-meta form { display: inline; }
.foto-origem { color: var(--texto-apagado); font-size: var(--fs-min); }

/* ---- parte 361: CSS do MOTOR DE TABELA (static/tabela.js) — global.
   As telas que já traziam estas regras inline (processos/duimps/catalogo)
   continuam funcionando igual (regras idênticas); telas novas ganham o
   visual de graça. ---- */
.pan-filtros { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom:10px }
.pan-filtros input[type=text], .pan-filtros select { border-radius:999px;
  padding:7px 14px; border:1px solid var(--borda); background:var(--campo);
  color:var(--texto); font-size:13px }
.pan-filtros input[type=text] { min-width:260px }
.pan-contador { font-size:var(--fs-min); color:var(--texto-suave); margin-left:auto }
html[data-tema="claro"] .pan-filtros input[type=text],
html[data-tema="claro"] .pan-filtros select { background:#fff;
  border-color:#c9d6e8; border-radius:8px }
.th-in { display:flex; align-items:center; gap:3px; cursor:grab;
  user-select:none; -webkit-user-select:none }
.th-in:active { cursor:grabbing }
.th-rot { flex:0 1 auto; padding-right:2px }
/* parte 761: a marca ▲/▼/filtro encosta no rótulo; o ⋮ vai para a ponta */
.th-in > .th-menu { margin-left:auto }
/* card 1875703554426013224: `font-weight:400` explicito — o piso
   `:where(button)` passou a preencher o peso, e o cabecalho de coluna quer
   o desenho leve (ele ja se destaca por opacidade e cor). */
.th-bt { border:0; background:none; color:inherit; cursor:pointer; opacity:.35;
  font-size:var(--fs-min); line-height:1; padding:1px 2px; border-radius:3px;
  font-family:inherit; font-weight:400 }
.th-bt:hover { opacity:1; background:rgba(255,255,255,.14) }
.th-bt.on { opacity:1; color:#9ec5f8 }
html[data-tema="claro"] .th-bt.on { color:#ffd980 }
/* parte 761 (card 07): UM botão ⋮ por coluna no lugar de ▲▼ / ▾🔍 / 👁
   (static/tabela.js). Área de clique de 24px de altura; foco visível; aceso
   (`.on`) quando a coluna tem ordem ou filtro. Onde há mouse ele some no
   repouso e volta no hover/foco do <th> — por OPACIDADE, para seguir na
   ordem do Tab; em tela de toque (sem hover) fica sempre à vista. Aceso ou
   com o menu aberto, nunca some: o estado não pode desaparecer. */
.th-menu { font-size:var(--fs-min); line-height:1; min-width:20px; min-height:24px;
  padding:4px 3px; opacity:.6; display:inline-flex; align-items:center;
  justify-content:center; flex:none; transition:opacity .12s ease }
.th-menu:focus-visible { opacity:1; outline:2px solid var(--azul); outline-offset:1px }
.th-menu[aria-expanded="true"] { opacity:1; background:rgba(255,255,255,.14) }
/* a cor de aceso do .th-bt no claro (#ffd980) era do cabeçalho escuro antigo;
   sobre o cinza claro do <th> de hoje ela some — no claro, o azul do botão */
html[data-tema="claro"] .th-menu.on { color:var(--bt-azul) }
html[data-tema="claro"] .th-menu:hover,
html[data-tema="claro"] .th-menu[aria-expanded="true"] { background:var(--hover-azul) }
@media (hover: hover) {
  .th-menu { opacity:0 }
  th:hover .th-menu, th:focus-within .th-menu, .th-menu.on,
  .th-menu[aria-expanded="true"] { opacity:1 }
}
/* a marca de estado ao lado do rótulo: ▲/▼ da ordem e o selo "filtro" */
.th-est { flex:none; display:inline-flex; align-items:center; gap:4px;
  color:#9ec5f8; font-weight:400 }
.th-est:empty { display:none }
.th-fil { font-size:var(--fs-min); line-height:1.2; padding:0 5px;
  border:1px solid currentColor; border-radius:999px; font-weight:600 }
html[data-tema="claro"] .th-est { color:var(--bt-azul) }
.col-menu { position:fixed; z-index:80; background:var(--campo);
  border:1px solid var(--borda); border-radius:10px; padding:5px;
  box-shadow:0 10px 28px rgba(0,0,0,.45); display:flex; flex-direction:column;
  min-width:210px }
/* `.col-menu .col-menu-it` (0,2,0): o piso `html[data-tema] :where(button)`
   (0,1,1) pintaria o item em negrito 600 */
.col-menu .col-menu-it { display:flex; align-items:center; width:100%; min-height:32px;
  padding:6px 10px; border:0; border-radius:6px; background:none;
  color:var(--texto); font:inherit; font-size:13px; font-weight:400;
  text-align:left; cursor:pointer }
.col-menu .col-menu-it:hover, .col-menu .col-menu-it:focus { background:var(--hover-azul); outline:none }
.col-menu .col-menu-it:focus-visible { outline:2px solid var(--azul); outline-offset:-2px }
.col-menu .col-menu-it.atual::after { content:"✓"; margin-left:auto; padding-left:12px;
  color:var(--azul) }
html[data-tema="claro"] .col-menu { background:#fff; border-color:#c9d6e8;
  box-shadow:0 10px 28px rgba(25,32,79,.18) }
html[data-tema="claro"] .col-menu .col-menu-it:hover,
html[data-tema="claro"] .col-menu .col-menu-it:focus { background:#eef5fd }
/* no escuro o --hover-azul é .05 de branco — some sobre o fundo do menu */
html[data-tema="escuro"] .col-menu .col-menu-it:hover,
html[data-tema="escuro"] .col-menu .col-menu-it:focus { background:#262626 }
th.arrastando { opacity:.4 }
th.alvo-esq { box-shadow: inset 3px 0 0 var(--azul) }
th.alvo-dir { box-shadow: inset -3px 0 0 var(--azul) }
.col-pop { position:fixed; z-index:80; background:var(--campo);
  border:1px solid var(--borda); border-radius:10px; padding:9px;
  box-shadow:0 10px 28px rgba(0,0,0,.45); display:flex; gap:6px;
  align-items:center; flex-wrap:wrap; max-width:300px }
.col-pop select, .col-pop input[type=text] { background:var(--campo);
  color:var(--texto); border:1px solid var(--borda); border-radius:7px;
  padding:5px 8px; font-size:13px; max-width:220px }
.col-pop .mini { white-space:nowrap }
html[data-tema="claro"] .col-pop { background:#fff; border-color:#c9d6e8;
  box-shadow:0 10px 28px rgba(25,32,79,.18) }
html[data-tema="claro"] .col-pop select,
html[data-tema="claro"] .col-pop input[type=text] { background:#fff;
  border-color:#c9d6e8 }
.col-painel { position:fixed; z-index:80; background:var(--campo);
  border:1px solid var(--borda); border-radius:10px; padding:10px 12px;
  box-shadow:0 10px 28px rgba(0,0,0,.45); max-height:60vh; overflow:auto;
  min-width:230px }
.col-painel h4 { font-size:var(--fs-cabecalho); text-transform:uppercase; letter-spacing:.12em;
  color:var(--texto-suave); margin:0 0 8px }
.col-painel label { display:flex; align-items:center; gap:7px; font-size:13px;
  padding:3px 2px; cursor:pointer; border-radius:5px }
.col-painel label:hover { background:rgba(255,255,255,.06) }
html[data-tema="claro"] .col-painel { background:#fff; border-color:#c9d6e8;
  box-shadow:0 10px 28px rgba(25,32,79,.18) }
html[data-tema="claro"] .col-painel label:hover { background:#eef5fd }
.barra-tabela { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-bottom:8px }
.barra-tabela .aviso-layout { font-size:var(--fs-min); color:var(--texto-suave) }
/* parte 761 (T6): os textos longos das grades do motor QUEBRAM linha em vez
   de alargar a coluna — com as colunas padrão enxutas, a grade cabe em
   1366px. O seletor por id vence `td.ref { white-space:nowrap }` e as regras
   `table.pan td` dos <style> locais; nenhum template o contradiz. */
#tabela td[data-col="navio"], #tabela td[data-col="exportador"], #tabela td[data-col="containers"], #tabela td[data-col="recinto"], #tabela td[data-col="ref"], #tabela td[data-col="sit"] { white-space:normal; max-width:170px }
/* parte 761: a barra em dois grupos — o que muda a EXIBIÇÃO (colunas,
   layout, filtros) e o que mexe em DADO (lote, ações no Portal). O grupo de
   dados fica à parte (borda à esquerda + rótulo) e os botões dele têm borda
   tracejada: "isto não é arrumar a tela". */
.barra-grupo { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.barra-grupo form { display:inline }
/* o grupo de dados é uma CAIXA (borda inteira): se a barra quebra linha
   (DUIMP com as 4 ações do Portal), ele desce inteiro e continua lendo como
   grupo — a borda só à esquerda ficava solta na margem */
.barra-dados { border:1px solid var(--borda); border-radius:10px; margin-left:6px;
  padding:3px 6px 3px 10px }
/* forms do lote com o botão escondido (ligados só no modo lote) e contadores
   vazios não ocupam o vão do gap */
.barra-grupo form:has(> button[style*="none"]), .barra-grupo #lote-conta:empty { display:none }
.barra-rotulo { font-size:var(--fs-min); color:var(--texto-suave) }
.barra-tabela > .dica { margin-left:auto }
html[data-tema] .barra-dados button.mini.acao-dados { border-style:dashed;
  border-color:var(--azul) }
html[data-tema="claro"] .barra-dados button.mini.acao-dados { border-color:var(--bt-azul) }

/* ---- 369: MOVIMENTO REDUZIDO ----
   Quem liga "reduzir movimento" no sistema (Mac, Windows, celular) em
   geral faz isso por enjoo ou sensibilidade visual. Aqui as animacoes
   sao pequenas, entao o certo e simplesmente desligar — nao existe
   versao "suave" util delas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 369: botao de tema ----
   Mostra o icone do tema para o qual a tela VAI mudar (no escuro aparece o
   sol; no claro, a lua). Os dois desenhos ficam no HTML e o CSS esconde um:
   assim a troca e instantanea, sem esperar script nenhum. */
.tema-lua { display: none; }
html[data-tema="claro"] .tema-sol { display: none; }
html[data-tema="claro"] .tema-lua { display: inline-block; }

/* ---- A GRADE DE TABELA, completada (card 1875703554426013224, etapa 2) ----
   Esta secao ja existia aqui, PARCIAL. As mesmas regras viviam tambem, byte
   a byte iguais, nos blocos <style> de Processos, DUIMPs e Catalogo — quatro
   copias da mesma coisa, e a da folha nem era a completa. Quem ajustava a
   coluna numa tela nao ajustava nas outras tres.

   As 18 regras abaixo sao as que faltavam aqui e estavam nas tres telas. As
   copias locais sairam. Mudanca deliberada na mudanca: `12.5px` virou `13px`
   — era o tamanho mais usado do sistema e o cabecalho deste arquivo o proibe
   por escrito ("nada de fracionados"). */
#lote-conta { font-size:var(--fs-min); color:var(--texto-suave) }
.mini.bt-lote-on { border-color:var(--azul); color:#9ec5f8 }
html[data-tema="claro"] .mini.bt-lote-on { color:#19204F; border-color:#447EC1 }
html[data-tema="claro"] .pan-rolagem { background:#fff; border-radius:10px; border-color:#dbe5f1 }
html[data-tema="claro"] table.pan th { background:#19204F; color:#fff }
html[data-tema="claro"] table.pan tr.sel-lote td { background:#eef5fd !important }
html[data-tema="claro"] table.pan tr:nth-child(even) td { background:#f8fafd }
table.pan { border-collapse:collapse; width:max-content; min-width:100% }
table.pan td { padding:7px 10px; font-size:13px; white-space:nowrap; vertical-align:top; border-bottom:1px solid var(--borda-suave) }
table.pan td.col-sel input, table.pan th.col-sel input { cursor:pointer; width:15px; height:15px }
table.pan th { position:sticky; top:0; background:#171a2b; color:#9aa3bd; letter-spacing:.02em; font-size:var(--fs-min); text-align:left; padding:6px 8px; white-space:nowrap; z-index:2 }
table.pan th.alvo-dir { box-shadow: inset -3px 0 0 var(--azul) }
table.pan th.alvo-esq { box-shadow: inset 3px 0 0 var(--azul) }
table.pan th.arrastando { opacity:.4 }
table.pan th.col-sel, table.pan td.col-sel { display:none; width:26px; text-align:center; padding-left:10px; padding-right:4px }
table.pan tr.sel-lote td { background:rgba(158,197,248,.14) !important }
table.pan tr:nth-child(even) td { background:rgba(255,255,255,.02) }
table.pan.modo-lote th.col-sel, table.pan.modo-lote td.col-sel { display:table-cell }

/* ============================================================
   OS SELOS DE SITUACAO — UMA linguagem so
   (card 1875703554426013224, etapa 4)

   Diretriz do operador em 30/09/2026, no card: *"nao se apegue a design
   herdado, o polimento e uma revisao completa de conceito grafico para
   deixar o sistema com um visual unico"*.

   O que havia: DUAS familias de selo para o mesmo significado.
     `.badge.b-*` — 284 usos, bebe dos tokens, pilula com borda;
     `.tag-*`     —  14 usos, paleta pastel de planilha, canto 12px, sem
                     borda, cores soltas escritas a mao.
   Um "ok" verde tinha dois verdes diferentes conforme a tela em que voce
   estivesse. Era, literalmente, a falta de unidade que o card relata.

   Agora `.tag` E um `.badge`: mesma forma, mesma metrica, mesma paleta. O
   NOME das classes fica — `main.py` as emite (`tag-ok`, `tag-tmp`,
   `tag-bad`) e a prova `testar_400.py` depende delas. Mudar aparencia sem
   mudar contrato: o Python nao sabe que algo mudou.

   As 7 etapas do processo viraram token (`--et-*`), com o matiz de cada uma
   preservado e o contraste calculado — passam 4,5:1 sobre pagina e cartao,
   nos dois temas. Antes eram pastel de planilha no claro e cor solta no
   escuro, numa tela so.
   ============================================================ */
.tag { display: inline-block; font-size: var(--fs-min); padding: 2px 10px;
  border-radius: 999px; white-space: nowrap; font-weight: 500; line-height: 1.5; }
.tag.grande { font-size: 13px; padding: 4px 12px; }

/* os quatro semanticos passam a ser EXATAMENTE o que o `.badge` ja era */
.tag-ok  { background: var(--ok-bg);   color: var(--ok-fg);   border: 1px solid var(--ok-borda); }
.tag-tmp { background: var(--tmp-bg);  color: var(--tmp-fg);  border: 1px solid var(--tmp-borda); }
.tag-bad { background: var(--erro-bg); color: var(--erro-fg); border: 1px solid var(--erro-borda); }
.tag-off { background: var(--off-bg);  color: var(--off-fg);  border: 1px solid var(--off-borda); }

/* as 7 etapas, agora por token e com borda do proprio matiz */
.tag-st-embarque     { background: var(--et-embarque-bg);     color: var(--et-embarque-fg);     border: 1px solid var(--et-embarque-fg); }
.tag-st-transito     { background: var(--et-transito-bg);     color: var(--et-transito-fg);     border: 1px solid var(--et-transito-fg); }
.tag-st-presenca     { background: var(--et-presenca-bg);     color: var(--et-presenca-fg);     border: 1px solid var(--et-presenca-fg); }
.tag-st-desembaraco  { background: var(--et-desembaraco-bg);  color: var(--et-desembaraco-fg);  border: 1px solid var(--et-desembaraco-fg); }
.tag-st-carregamento { background: var(--et-carregamento-bg); color: var(--et-carregamento-fg); border: 1px solid var(--et-carregamento-fg); }
.tag-st-fechamento   { background: var(--et-fechamento-bg);   color: var(--et-fechamento-fg);   border: 1px solid var(--et-fechamento-fg); }
.tag-st-encerrado    { background: var(--et-encerrado-bg);    color: var(--et-encerrado-fg);    border: 1px solid var(--et-encerrado-fg); }

/* parte 762 (card 10 · "Fases e atenção"): a COR DA FASE da Logística mora aqui,
   numa regra só, para toda tela que mostra fase (funil da Logística, cartões de
   Processos e da Análise, a ficha, o Painel, a gaveta). `logistica.classe_fase`
   emite `f-<chave>`; a classe só define as duas variáveis — quem desenha usa
   `var(--c)` (traço, número, barra) ou `.tag.tag-fase` (o selo). Os tokens são
   os `--et-*` de sempre, com o contraste já medido nos dois temas. Era o
   `<style>` de logistica.html (`.lg-fase.f-*`, partes 637/756). */
.f-na_origem      { --c: var(--et-embarque-fg);    --c-bg: var(--et-embarque-bg); }
.f-navegando      { --c: var(--et-transito-fg);    --c-bg: var(--et-transito-bg); }
.f-no_porto       { --c: var(--et-presenca-fg);    --c-bg: var(--et-presenca-bg); }
.f-em_liberacao   { --c: var(--et-desembaraco-fg); --c-bg: var(--et-desembaraco-bg); }
.f-pronto_retirar { --c: var(--et-fechamento-fg);  --c-bg: var(--et-fechamento-bg); }
.f-em_entrega     { --c: var(--et-encerrado-fg);   --c-bg: var(--et-encerrado-bg); }  /* parte 756: azul nao tem sentido — cinza */
.f-devolver_vazio { --c: var(--et-encerrado-fg);   --c-bg: var(--et-encerrado-bg); }
.f-concluido      { --c: var(--et-encerrado-fg);   --c-bg: var(--et-encerrado-bg); }
.tag.tag-fase { background: var(--c-bg, var(--et-encerrado-bg)); color: var(--c, var(--et-encerrado-fg));
  border: 1px solid var(--c, var(--et-encerrado-fg)); }

/* `.tag-aviso`: existia como `style="background:#f59e0b22;color:#b45309"`
   escrito na linha da tabela de Processos — e reprovava o contraste (2,48
   no tema escuro). Virou peca com nome, pelo token de atencao. */
.tag-aviso { background: var(--tmp-bg); color: var(--tmp-fg); border: 1px solid var(--tmp-borda); }

/* =====================================================================
   PARTE 717 — SITUACAO SISCOMEX COM NOME CURTO E COR (card "Mudança layout
   campo situação siscomex", Denner, 28/10/2026)

   Um selo por GRUPO de situacao do Portal (situacao_siscomex.py), na ordem
   em que a DUIMP anda. Valem em `.tag` (Processos) e `.badge` (DUIMPs).
   So tokens ja existentes — os mesmos das 7 etapas e dos semanticos, cujo
   contraste ja foi medido nos dois temas. No escuro, a regra da parte 605
   (`html[data-tema="escuro"] .tag`) neutraliza fundo e borda e o matiz
   fica so no texto, como nos outros selos.
   Parte 756: quatro sentidos — retificacao, aguardando canal e conferencia
   aguardam (ambar); Entregue e o verde da etapa Entregue (era cinza aqui).
   ===================================================================== */
.sx-elab     { background: var(--off-bg);            color: var(--off-fg);            border: 1px solid var(--off-borda); }
.sx-retif    { background: var(--tmp-bg);            color: var(--tmp-fg);            border: 1px solid var(--tmp-borda); }
.sx-canal    { background: var(--tmp-bg);            color: var(--tmp-fg);            border: 1px solid var(--tmp-borda); }
.sx-conf     { background: var(--tmp-bg);            color: var(--tmp-fg);            border: 1px solid var(--tmp-borda); }
.sx-pend     { background: var(--tmp-bg);            color: var(--tmp-fg);            border: 1px solid var(--tmp-borda); }
.sx-desemb   { background: var(--ok-bg);             color: var(--ok-fg);             border: 1px solid var(--ok-borda); }
.sx-entregue { background: var(--ok-bg);             color: var(--ok-fg);             border: 1px solid var(--ok-borda); }
.sx-cancel   { background: var(--erro-bg);           color: var(--erro-fg);           border: 1px solid var(--erro-borda); }
.sx-novo     { background: var(--novo-bg);           color: var(--novo-fg);           border: 1px solid var(--novo-borda); }

/* =====================================================================
   PARTE 756 — UMA COR, UM SIGNIFICADO (card "02 · Uma cor, um significado")
   Quatro sentidos: verde concluido, ambar aguardando, vermelho bloqueio ou
   atraso, cinza neutro. O canal da DUIMP e a excecao declarada — fica com a
   cor dele, e o contorno no proprio matiz o separa de um selo de estado.
   A especificidade (0-3-1) vence a borda transparente do modelo B e a borda
   neutra do escuro (`html[data-tema] .badge` / `html[data-tema="escuro"] .badge`).
   Fica ANTES da 600: vale nos dois temas.
   ===================================================================== */
html[data-tema] .badge.canal, html[data-tema] .tag.canal { border: 1px solid currentColor; }
/* o icone dentro do selo (no lugar do emoji) acompanha a linha do texto */
.tag .ico, .badge .ico { vertical-align: -0.2em; }


/* =====================================================================
   PARTE 754 — A DICA ⓘ (card "01 · Fonte mínima, contraste e a dica ⓘ")
   Sobe a `.dica` que era local da invoice (parte 739) para a folha comum.
   O comportamento (mouse, teclado, toque, Esc) mora em /static/dica.js.
   Fica ANTES da 600 de proposito: o que vem depois da 600 so pinta o escuro.
   ===================================================================== */
button.dica {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; min-height: 0; padding: 0; margin-left: 4px; vertical-align: middle;
  border-radius: 50%; border: 1px solid var(--borda); background: transparent;
  color: var(--texto-apagado); font: italic 700 var(--fs-min)/1 Georgia, 'Times New Roman', serif;
  cursor: help; box-shadow: none;
}
/* alvo de toque maior que o desenho: o circulo segue com 18px */
button.dica::after { content: ""; position: absolute; inset: -10px; }
button.dica:hover, button.dica[aria-expanded="true"] { color: var(--texto); border-color: var(--texto-apagado); }
.dica-balao {
  position: absolute; z-index: 1000; max-width: 320px; padding: 8px 12px; border-radius: 6px;
  background: var(--texto); color: var(--campo); font-size: var(--fs-min); font-weight: 400;
  font-style: normal; line-height: 1.45; text-align: left; white-space: normal;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.dica-balao[hidden] { display: none; }
/* parte 764 (card "11 · Nomes, siglas e o menu do perfil"): a SIGLA usa o
   mesmo balao (`abbr.sigla[data-dica]`, glossario em app/siglas.py). O texto
   fica com a cor de onde esta — so o sublinhado pontilhado diz "tem
   explicacao". Por token: vira com o tema sozinho, sem regra no bloco do
   escuro. O anel de foco e o mesmo da 369 (o :where de la nao cobre abbr). */
abbr.sigla {
  text-decoration: underline dotted var(--texto-apagado);
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  text-decoration-skip-ink: auto; cursor: help;
}
abbr.sigla:hover, abbr.sigla[aria-describedby] { text-decoration-color: currentColor; }
abbr.sigla:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
/* alvo de toque: a sigla tem a altura da linha (18px num cabecalho de tabela);
   a area de toque cresce para cima (8px) e para baixo (5px: o balao abre 6px
   abaixo, dica.js, e nao pode cair dentro dela), como o ::after da dica, sem
   mudar o desenho nem empurrar o vizinho */
abbr.sigla { position: relative; }
abbr.sigla::after { content: ""; position: absolute; left: -2px; right: -2px; top: -8px; bottom: -5px; }

/* =====================================================================
   PARTE 757 — A FICHA DO PROCESSO EM BLOCOS (card "04 · Ficha do processo
   em blocos, com a ajuda em dica")
   A grade solta virou Partes · Transporte · Carga · Fiscal · Datas. O titulo
   do bloco e rotulo de SECAO: corpo, 700, caixa normal, cor de texto — sem
   cor de estado. Tudo escopado: a `.campos` global (invoice, espelho,
   produto, free time) nao muda. Duas classes no seletor de proposito: ganha
   do `html[data-tema] h2` (peso) e do `html[data-tema="escuro"] h2` (cor e
   espacamento), entao vale igual nos dois temas, sem par do escuro.
   Fica ANTES da 600: o que vem depois da 600 so pinta o escuro.
   ===================================================================== */
.ficha-blocos { display: flex; flex-direction: column; gap: 18px; }
.ficha-blocos .ficha-bloco > h2 { font-size: var(--fs-corpo); font-weight: 700; color: var(--texto);
  letter-spacing: normal; text-transform: none; margin: 0 0 8px; }
/* a grade das datas ja vem logo abaixo do proprio titulo */
.ficha-blocos .ficha-bloco .campos.datas { margin-top: 0; }
/* o selo fica do tamanho do texto: em bloco (`.campos span`), a dica ao lado dele caia
   sozinha na linha de baixo (Situacao do Conhecimento) */
.ficha-blocos .campos .badge { display: inline-block; }
/* Dados da operacao: ultima celula do Fiscal, em largura toda, com as 4 linhas lado a lado */
.ficha-blocos .campos > [data-dop] { grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 14px; }
.ficha-blocos .campos > [data-dop] > span, .ficha-blocos .campos > [data-dop] > details { grid-column: 1 / -1; }
/* card 05 (parte 760): UM Salvar por bloco, no pe do bloco; o aviso dele vai no titulo
   (salvo / nada mudou / nada foi salvo), na regua de fonte e nas familias de cor de estado
   (ok, off, erro) — os tokens ja tem o par claro/escuro */
.ficha-blocos .fb-pe { display: flex; justify-content: flex-end; margin-top: 8px; }
.ficha-blocos .fb-aviso { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px;
  font-size: var(--fs-min); font-weight: 400; vertical-align: middle; border: 1px solid transparent; }
.ficha-blocos .fb-aviso.fb-salvo { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-borda); }
.ficha-blocos .fb-aviso.fb-igual { background: var(--off-bg); color: var(--off-fg); border-color: var(--off-borda); }
.ficha-blocos .fb-aviso.fb-erro { background: var(--erro-bg); color: var(--erro-fg); border-color: var(--erro-borda); }
/* o Salvar volta a `#fb-<bloco>` (o h2): sem folga, o titulo e o aviso dele caiam SOB a
   topbar sticky (47px a 1366, 49px a 375) — a mesma folga da `.bloco[id]` (parte 758) */
.ficha-blocos .ficha-bloco > h2[id] { scroll-margin-top: 60px; }
/* Fiscal: os campos moram no <details> "trocar so para este processo"; fechado, nao ha
   o que salvar, e o Salvar sozinho so responderia "Nada mudou" */
.ficha-blocos .ficha-bloco:has([data-dop] details:not([open])) .fb-pe { display: none; }

/* =====================================================================
   PARTE 600 — MODELO B "AREJADO" (card EMBELEZAMENTO, 08/10/2026)

   O Avolio achou o sistema feio e pediu uma mudanca ESTETICA, alem da
   padronizacao que o card de polimento visual ja tinha feito, SEM mudar
   a paleta. Foram desenhados tres modelos sobre as telas reais; ele
   escolheu o B (referencia: Tabler / CoreUI):

   - fonte Nunito Sans, servida pelo proprio app (static/fonts, licenca
     OFL ao lado) — nada de Google Fonts: tela que depende da internet de
     terceiros muda de letra quando a rede oscila;
   - conteudo sobre fundo cinza-azulado, cada bloco num cartao branco com
     sombra leve; indicadores com faixa colorida no topo;
   - menu marinho mantido (ancora da marca), item ativo em azul cheio;
   - cabecalho de tabela cinza em caixa alta; selos "suaves" de canto 4px.

   Paleta: so as cinco cores oficiais e tons delas. O azul do item ativo e
   #3A78A8 (o --bt-azul do escuro) e nao o #4B89BF: branco sobre o azul
   claro da 3,73:1, abaixo do minimo 4,5 — o mesmo motivo da parte 369.

   ESPECIFICIDADE: toda regra estrutural leva `html[data-tema]` na frente.
   O base.html SEMPRE poe data-tema no <html> antes da pintura; o prefixo
   iguala o peso das regras de tema que ja existem (`html[data-tema="claro"]
   table.pan th`, por exemplo) e, vindo depois na folha, ganha delas.
   As regras de ESPACO do menu valem so com ele aberto
   (`:not([data-menu="recolhido"])`): com o mesmo peso das da parte 321,
   elas desmanchariam a faixa de 58px do menu recolhido.
   ===================================================================== */
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  font-stretch: 100%;
  src: url(/static/fonts/nunito-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  font-stretch: 100%;
  src: url(/static/fonts/nunito-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html[data-tema="claro"] {
  --fundo: #EEF1F6;
  --campo: #FFFFFF;
  --texto: #1C2140;
  --texto-suave: #4f5675;
  --texto-apagado: #5b6383;
  --painel-bg: #FFFFFF;
  --painel-borda: #DFE4EE;
  --borda: #CFD6E4;
  --borda-suave: #E7EBF2;
  --hover-azul: #F2F6FB;
  --marca-azul: #E8F0F8;
  --bt-azul: #2F6894; --bt-azul-hover: #3A78A8; --bt-azul-ativo: #255373;
  --sombra-bt: 0 1px 2px rgba(28,33,64,.14);
  --b-card-sombra: 0 1px 2px rgba(28,33,64,.05), 0 2px 8px rgba(28,33,64,.04);
  --b-th-bg: #F6F8FB;
  /* parte 754: zebra e realce de linha tambem no claro (o modelo B so os tinha
     no escuro). Zebra 1,07x o branco; realce 1,19x o branco e 1,11x a zebra. */
  --linha-zebra: #F5F7FA;
  --linha-hover: #E6ECF4;
}
html[data-tema="escuro"] {
  --fundo: #141831;
  --campo: #1C2140;
  --painel-bg: #1C2140;
  --painel-borda: #2A3158;
  --borda: #333B66;
  --borda-suave: #262D52;
  --hover-azul: #232A50;
  --b-card-sombra: 0 2px 10px rgba(0,0,0,.25);
  --b-th-bg: #20264A;
  --linha-zebra: transparent;
  --linha-hover: var(--hover-azul);
}
body { font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0; }
html[data-tema] h1 { letter-spacing: -.015em; }

/* ---- menu marinho, item ativo em azul cheio ---- */
html[data-tema] .sidebar { background: #1C2140; border-right: 0; box-shadow: 2px 0 12px rgba(28,33,64,.10); }
html[data-tema] .sidebar .logo { font-weight: 800; letter-spacing: -.02em; }
html[data-tema] .sb-secao { color: #8f99c2; letter-spacing: .12em; font-weight: 700; }
html[data-tema] .sb-nav a { border-left: 0; font-weight: 500; color: #c3cbe8; }
html[data-tema] .sb-nav a:hover { background: rgba(242,242,242,.06); color: #fff; }
html[data-tema] .sb-nav a.on { background: #3A78A8; color: #fff; font-weight: 600; box-shadow: 0 2px 6px rgba(28,33,64,.35); }
html[data-tema] .sb-nav a.on .ico { opacity: 1; }
html[data-tema]:not([data-menu="recolhido"]) .sb-marca { padding: 18px 16px 14px; border-bottom-color: rgba(242,242,242,.08); }
html[data-tema]:not([data-menu="recolhido"]) .sb-secao { padding: 18px 20px 6px; }
html[data-tema]:not([data-menu="recolhido"]) .sb-nav { padding: 4px 10px 24px; }
html[data-tema]:not([data-menu="recolhido"]) .sb-nav a { border-radius: 6px; margin: 2px 0; padding: 9px 12px; }

/* ---- topo branco com sombra ---- */
html[data-tema] .topbar { background: var(--painel-bg); border-bottom: 1px solid var(--painel-borda); box-shadow: 0 1px 3px rgba(28,33,64,.05); }
html[data-tema] .who { font-weight: 600; color: var(--texto); }
html[data-tema] .who em { border-radius: 4px; background: var(--marca-azul); border-color: transparent; color: var(--bt-azul); font-weight: 600; }
html[data-tema="escuro"] .who em { color: var(--link); }
html[data-tema] .sair { border-radius: 6px; font-weight: 600; }

/* ---- conteudo ---- */
html[data-tema] .painel h1, html[data-tema] h1 { font-weight: 800; }
html[data-tema] h2, html[data-tema] .bloco h2 { font-weight: 700; }

/* cartoes brancos com sombra; indicador com faixa no topo */
html[data-tema] .card { background: var(--painel-bg); border: 1px solid var(--painel-borda); border-radius: 8px; box-shadow: var(--b-card-sombra); }
html[data-tema] .card .num { color: var(--texto); font-weight: 800; }
html[data-tema] .pan-cartao { background: var(--painel-bg); border: 1px solid var(--painel-borda); border-top: 3px solid #4B89BF; border-radius: 8px; box-shadow: var(--b-card-sombra); padding: 16px 18px; }
/* parte 762: os cartoes de Processos sao as sete fases da Logistica — a faixa do topo e a
   cor da fase (`.f-<chave>` define `--c`), a mesma do funil. Era um mapa por nome de
   esteira aqui ("Terminal"/"Entregue" verde, "No Porto" ambar, parte 756); cartao de outra
   tela (sem `.f-*`) segue com o azul de marca. */
html[data-tema] .pan-cartao[class*=" f-"] { border-top-color: var(--c); }
/* parte 762 (leitura dos prints, D5): o NÚMERO do cartão também leva a cor da fase, como na
   Análise — a mesma fase com a mesma cor nas duas telas. Vem depois da regra geral do `b`. */
html[data-tema] .pan-cartao b { color: var(--texto); font-size: 28px; font-weight: 800; }
html[data-tema] .pan-cartao[class*=" f-"] b { color: var(--c); }
/* parte 762 (D3): a referência do item da lista de atenção não parte no hífen ("ATL-↵0112/26") */
.ref-inteira { white-space: nowrap; }
html[data-tema] .pan-cartao span { color: var(--texto-apagado); font-weight: 700; letter-spacing: .08em; font-size: var(--fs-min); }
html[data-tema] .pan-cartao.ativo { border: 1px solid #4B89BF; border-top-width: 3px; background: var(--marca-azul); }

/* botoes: azul RPF, cantos de 6px */
html[data-tema] :where(button, input[type="submit"], input[type="button"]) { border-radius: 6px; font-weight: 600; }
html[data-tema] .filtros button, html[data-tema] .btn-link { border-radius: 6px; font-weight: 600; }
html[data-tema] button.mini, html[data-tema] a.mini { border-radius: 6px; background: var(--painel-bg); border: 1px solid var(--borda); font-weight: 600; box-shadow: 0 1px 1px rgba(28,33,64,.05); }
html[data-tema] button.mini:hover, html[data-tema] a.mini:hover { border-color: #4B89BF; color: var(--bt-azul); background: var(--marca-azul); }
html[data-tema="escuro"] button.mini:hover, html[data-tema="escuro"] a.mini:hover { color: var(--texto); }
/* parte 759: o gatilho <summary class="mini"> do menu Exportar de Produtos, igual ao
   `a.mini` acima (o claro mora nesta secao: depois da 605 so se pinta o escuro) */
html[data-tema] summary.mini { border-radius: 6px; background: var(--painel-bg); border: 1px solid var(--borda); font-weight: 600; box-shadow: 0 1px 1px rgba(28,33,64,.05); }
html[data-tema] summary.mini:hover { border-color: #4B89BF; color: var(--bt-azul); background: var(--marca-azul); }
/* acao destrutiva nunca perde o vermelho (o "Excluir DUIMP" e mini) */
html[data-tema] .btn-perigo.btn-perigo, html[data-tema] button.mini.btn-perigo { background: var(--perigo-bg); color: var(--perigo-fg); border-color: transparent; }
html[data-tema] button.mini.perigo, html[data-tema] a.mini.perigo { background: transparent; border-color: var(--perigo-bg); color: var(--perigo-bg); }
html[data-tema] input, html[data-tema] select, html[data-tema] textarea { border-radius: 6px; }

/* tabelas dentro de cartao, cabecalho cinza em caixa alta */
html[data-tema] .tabela-wrap { background: var(--painel-bg); border: 1px solid var(--painel-borda); border-radius: 8px; box-shadow: var(--b-card-sombra); }
/* parte 754, Q1.1 revista (comanda, 30/10 15:15): cabecalho de tabela em caixa NORMAL a 13px com
   espacamento leve, nos dois temas; o peso 700 e o fundo cinza o separam do dado */
html[data-tema] th { background: var(--b-th-bg); color: var(--texto-apagado); font-size: var(--fs-min); font-weight: 700; text-transform: none; letter-spacing: .02em; }
html[data-tema] th, html[data-tema] td { padding: 12px 16px; }
html[data-tema] td.ref, html[data-tema] table.pan td.ref a { color: var(--bt-azul); }
html[data-tema="escuro"] td.ref, html[data-tema="escuro"] table.pan td.ref a { color: var(--link); }
html[data-tema] table.pan { background: var(--painel-bg); }
html[data-tema] table.pan th { background: var(--b-th-bg); color: var(--texto-apagado); font-size: var(--fs-min); font-weight: 700; letter-spacing: .02em; border-bottom: 1px solid var(--borda); }
html[data-tema] tbody tr:nth-child(even) td, html[data-tema] table.pan tr:nth-child(even) td { background: var(--linha-zebra); }
html[data-tema] tbody tr:hover td, html[data-tema] table.pan tbody tr:hover td { background: var(--linha-hover); }

/* selos "suaves": cantos de 4px, sem borda */
html[data-tema] .badge, html[data-tema] .tag { border-radius: 4px; border-color: transparent; font-weight: 600; padding: 3px 8px; }

/* itens de lista que eram so uma linha fina sobre a pagina (Painel: "Precisam
   de atencao"): no fundo cinza-azulado a linha some — viram cartao branco */
html[data-tema] .alerta-item { background: var(--painel-bg); border-color: var(--painel-borda); border-radius: 8px; box-shadow: var(--b-card-sombra); }
html[data-tema] .alerta-item:hover { border-color: #4B89BF; background: var(--marca-azul); }
html[data-tema] .aviso-item:hover { border-color: var(--painel-borda); background: var(--painel-bg); }

/* =====================================================================
   PARTE 605 — TEMA ESCURO MONOCROMATICO (card EMBELEZAMENTO, 08/10/2026)

   Pedido do Avolio: "mudanca drastica APENAS NO MODO ESCURO, usando como
   principal referencia o modelo escuro do shadcn/ui blocks ... pode deixar
   o site monocromatico". Proposta aprovada no card ("esta aprovado, pode
   alterar o tema escuro do ComexFlow").

   SO O ESCURO: toda regra desta secao comeca com html[data-tema="escuro"]
   (a testar_605 confere regra por regra). O claro continua o modelo B da
   parte 600, intocado.

   Tokens do shadcn (tema "neutral", dark): fundo #0a0a0a, cartao com borda
   branca a 10%, texto #fafafa, texto apagado #a1a1a1, primario #e5e5e5 com
   texto #171717, destaque #262626, raio 10px. Menu tambem preto: o marinho
   e o azul saem do escuro.

   COR SO ONDE AVISA: selos de canal/situacao/pendencia e a acao destrutiva.
   O texto deles ficou mais firme (--erro-fg #ff8a8a, --ok-fg #86efac,
   --tmp-fg #fcd34d): o pastel do escuro anterior (#ffc9c9) lia como BRANCO
   sobre fundo neutro, e o "canal VERMELHO" sumia — pego na foto do palco.
   O rotulo de secao do menu e #8a8a8a, nao o #737373 do shadcn: 4,18:1 sobre
   o preto, abaixo do minimo 4,5.

   Peso: html[data-tema="escuro"] X tem o mesmo peso das regras
   html[data-tema] X da parte 600 e vem depois — ganha pela ordem.
   ===================================================================== */
html[data-tema="escuro"] {
  /* parte 754: no escuro o cabecalho de tabela NAO e caixa alta (decisao da 605), entao
     pela regra da comanda (Q1.1) ele sobe ao piso: 12px so vale para caixa alta. */
  --fs-cabecalho: var(--fs-min);
  --fundo: #0a0a0a;
  --campo: #0a0a0a;
  --texto: #fafafa;
  --texto-suave: #a1a1a1;
  --texto-apagado: #a1a1a1;
  --destaque: #fafafa;
  --link: #fafafa;
  --azul: #a1a1a1;
  --azul-2: #d4d4d4;
  --painel-bg: #0a0a0a;
  --painel-borda: rgba(255,255,255,.10);
  --borda: rgba(255,255,255,.15);
  --borda-suave: rgba(255,255,255,.08);
  --hover-azul: rgba(255,255,255,.05);
  --marca-azul: #262626;
  --bt-azul: #e5e5e5; --bt-azul-hover: #fafafa; --bt-azul-ativo: #d4d4d4;
  --bt-neutro: #262626; --bt-neutro-hover: #303030;
  --foco: #737373;
  --sombra-bt: none;
  --b-card-sombra: none;
  --b-th-bg: transparent;
  --s-sidebar: #0a0a0a;
  --s-sidebar-item: #a1a1a1;
  --s-ativo-bg: #262626;
  /* o texto dos selos e o que AVISA: no fundo neutro, o tom pastel do escuro
     anterior (#ffc9c9, #b9f0cd) lia como branco — o "canal VERMELHO" sumia */
  --erro-fg: #ff8a8a; --novo-fg: #ff8a8a; --ok-fg: #86efac; --tmp-fg: #fcd34d; --off-fg: #a1a1a1;
}
html[data-tema="escuro"] body { background: var(--fundo); }

/* ---- menu: preto, item ativo cinza, sem azul nem vermelho ---- */
html[data-tema="escuro"] .sidebar { background: var(--s-sidebar); border-right: 1px solid rgba(255,255,255,.08); box-shadow: none; }
html[data-tema="escuro"] .sb-marca { border-bottom-color: rgba(255,255,255,.08); }
html[data-tema="escuro"] .sidebar .logo { color: #fafafa; font-weight: 700; letter-spacing: -.02em; }
html[data-tema="escuro"] .logo-simbolo { box-shadow: 0 0 0 1px rgba(255,255,255,.10); }
html[data-tema="escuro"] .sb-secao { color: #8a8a8a; letter-spacing: .02em; text-transform: none; font-weight: 500; }
html[data-tema="escuro"] .sb-nav a { color: var(--s-sidebar-item); font-weight: 500; }
html[data-tema="escuro"] .sb-nav a:hover { background: rgba(255,255,255,.05); color: #fafafa; }
html[data-tema="escuro"] .sb-nav a.on { background: var(--s-ativo-bg); color: #fafafa; box-shadow: none; border-right-color: transparent; }
html[data-tema="escuro"] .sb-nav .ico { opacity: .8; }

/* ---- topo: transparente com linha fina ---- */
html[data-tema="escuro"] .topbar { background: rgba(10,10,10,.85); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: none; }
html[data-tema="escuro"] .who em { background: transparent; border: 1px solid rgba(255,255,255,.15); color: #a1a1a1; }
html[data-tema="escuro"] .sair { border-color: rgba(255,255,255,.15); color: #fafafa; background: transparent; }
html[data-tema="escuro"] .sair:hover { background: #262626; border-color: rgba(255,255,255,.15); }
/* parte 764: o menu do perfil no escuro — o --hover-azul daqui (.05 de branco) e o
   --linha-hover que o herda somem sobre o fundo; o realce vem do --marca-azul */
html[data-tema="escuro"] .menu-perfil > summary:hover,
html[data-tema="escuro"] .menu-perfil[open] > summary,
html[data-tema="escuro"] .menu-perfil-corpo a:hover,
html[data-tema="escuro"] .menu-perfil-corpo a:focus-visible { background: var(--marca-azul); }
html[data-tema="escuro"] .menu-perfil-corpo { box-shadow: 0 10px 28px rgba(0,0,0,.45); }

/* ---- titulos ---- */
html[data-tema="escuro"] h1, html[data-tema="escuro"] .painel h1 { color: #fafafa; font-weight: 700; letter-spacing: -.025em; }
html[data-tema="escuro"] h2, html[data-tema="escuro"] .bloco h2 { color: #fafafa; font-weight: 600; letter-spacing: -.015em; }
html[data-tema="escuro"] a { color: #fafafa; }

/* ---- cartoes: borda fina, sem sombra, cantos de 10px ---- */
html[data-tema="escuro"] .card, html[data-tema="escuro"] .alerta-item, html[data-tema="escuro"] .tabela-wrap {
  background: #0a0a0a; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; box-shadow: none; }
html[data-tema="escuro"] .alerta-item:hover, html[data-tema="escuro"] .card.link:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
html[data-tema="escuro"] .card .num { color: #fafafa; }
html[data-tema="escuro"] .pan-cartao { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.10); border-radius: 10px; box-shadow: none; }
html[data-tema="escuro"] .pan-cartao b { color: #fafafa; font-weight: 700; letter-spacing: -.02em; }
html[data-tema="escuro"] .pan-cartao span { color: #a1a1a1; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
html[data-tema="escuro"] .pan-cartao.ativo { border: 1px solid #fafafa; background: rgba(255,255,255,.05); }

/* ---- botoes: primario claro com texto escuro; secundario contornado ---- */
html[data-tema="escuro"] :where(button, input[type="submit"], input[type="button"]) { border-radius: 8px; }
html[data-tema="escuro"] .filtros button, html[data-tema="escuro"] .btn-link, html[data-tema="escuro"] .botao-link,
html[data-tema="escuro"] .login-card button { background: #e5e5e5; color: #171717; border: 0; border-radius: 8px; box-shadow: none; font-weight: 600; }
html[data-tema="escuro"] .filtros button:hover, html[data-tema="escuro"] .btn-link:hover, html[data-tema="escuro"] .botao-link:hover { background: #fafafa; color: #0a0a0a; }
html[data-tema="escuro"] button.mini, html[data-tema="escuro"] a.mini { background: transparent; color: #fafafa; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; box-shadow: none; }
html[data-tema="escuro"] button.mini:hover, html[data-tema="escuro"] a.mini:hover { background: #262626; border-color: rgba(255,255,255,.15); color: #fafafa; }
html[data-tema="escuro"] .btn-perigo.btn-perigo, html[data-tema="escuro"] button.mini.btn-perigo { background: #82181a; color: #fafafa; border: 1px solid #a3161c; }
html[data-tema="escuro"] button.mini.perigo, html[data-tema="escuro"] a.mini.perigo { background: transparent; color: #ff8a8a; border: 1px solid #ff8a8a; }
html[data-tema="escuro"] .btn-pronto { background: #e5e5e5 !important; color: #171717 !important; }

/* ---- campos ---- */
html[data-tema="escuro"] input, html[data-tema="escuro"] select, html[data-tema="escuro"] textarea {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.15); color: #fafafa; border-radius: 8px; }
html[data-tema="escuro"] input::placeholder, html[data-tema="escuro"] textarea::placeholder { color: #8a8a8a; }

/* ---- tabelas: cabecalho discreto, linhas finas ---- */
html[data-tema="escuro"] th, html[data-tema="escuro"] table.pan th { background: #0a0a0a; color: #a1a1a1; font-size: var(--fs-min); font-weight: 500;
  text-transform: none; letter-spacing: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
html[data-tema="escuro"] td, html[data-tema="escuro"] table.pan td { border-bottom-color: rgba(255,255,255,.08); }
html[data-tema="escuro"] table.pan { background: #0a0a0a; }
html[data-tema="escuro"] table.pan tbody tr:hover td, html[data-tema="escuro"] table.lista tbody tr:hover { background: rgba(255,255,255,.04); }
html[data-tema="escuro"] td.ref, html[data-tema="escuro"] table.pan td.ref a { color: #fafafa; font-weight: 600; }

/* ---- selos: fundo neutro; o MATIZ fica so no texto (e o que avisa) ---- */
html[data-tema="escuro"] .badge, html[data-tema="escuro"] .tag { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; font-weight: 500; }
html[data-tema="escuro"] .badge.b-falta, html[data-tema="escuro"] .badge.b-perigo { background: rgba(255,100,103,.10); color: #ff8a8a; border-color: rgba(255,100,103,.30); }
html[data-tema="escuro"] .tag-off, html[data-tema="escuro"] .badge.b-off, html[data-tema="escuro"] .tag-st-encerrado { color: #a1a1a1; }
html[data-tema="escuro"] .erro { background: rgba(255,100,103,.08); border-color: rgba(255,100,103,.30); color: #ffb4b4; }

/* =====================================================================
   PARTE 606 — ESCURO: QUADROS EM DEGRADE CINZA + LINHAS ALTERNADAS
   (card EMBELEZAMENTO, 08/10/2026)

   Ajuste da parte 605 pedido pelo Avolio com dois prints: "os quadros
   ficaram completamente pretos atras ... uma delimitacao com um degrade em
   cinza ... ficaria melhor a leitura dos quadros como um todo" e "linhas com
   diferenciacao de cor para melhor identificacao". Autorizado no card
   ("ok pode publicar esses ajustes").

   Como no exemplo do shadcn, o quadro e mais CLARO que a pagina (#0a0a0a):
   degrade #1f1f1f -> #171717, borda branca a 10%, cantos de 12px. O pe do
   degrade era #151515 na proposta: 1,08x a pagina, quase igual ao preto — a
   testar_606 reprovou, e ele subiu para o tom do --painel-bg. O token
   --painel-bg sai do preto (#171717), e todo bloco que o usa ganha fundo
   proprio. Linhas pares da tabela com branco a 5%.

   SO O ESCURO, como a 605: toda regra comeca com html[data-tema="escuro"]
   (testar_606 e testar_600 conferem). O claro (modelo B) nao muda.
   ===================================================================== */
html[data-tema="escuro"] {
  --painel-bg: #171717;          /* todo bloco que usa o token sai do preto da pagina */
  --q-degrade: linear-gradient(180deg, #1f1f1f 0%, #171717 100%);
  --q-borda: rgba(255,255,255,.10);
  --q-zebra: rgba(255,255,255,.05);
  --q-th: #1c1c1c;
}

/* quadros: indicadores, cartoes, listas de aviso, fichas de campos, molduras de tabela */
html[data-tema="escuro"] .card, html[data-tema="escuro"] .pan-cartao, html[data-tema="escuro"] .alerta-item,
html[data-tema="escuro"] .tabela-wrap, html[data-tema="escuro"] .campos, html[data-tema="escuro"] .pan-rolagem {
  background: var(--q-degrade); border: 1px solid var(--q-borda); border-radius: 12px; }
html[data-tema="escuro"] .pan-cartao[data-filtro] { border-top: 1px solid var(--q-borda); }
html[data-tema="escuro"] .card.link:hover, html[data-tema="escuro"] .alerta-item:hover, html[data-tema="escuro"] .pan-cartao:hover {
  background: linear-gradient(180deg, #242424 0%, #191919 100%); border-color: rgba(255,255,255,.18); }
html[data-tema="escuro"] .pan-cartao.ativo { background: linear-gradient(180deg, #262626 0%, #1a1a1a 100%); border: 1px solid #fafafa; }
/* a ficha de campos (invoice, processo, espelho): cada celula no tom do quadro */
html[data-tema="escuro"] .campos { gap: 0; }
html[data-tema="escuro"] .campos > div { background: transparent; box-shadow: inset -1px -1px 0 rgba(255,255,255,.07); }

/* tabelas: corpo no tom do quadro, cabecalho um tom acima, linhas alternadas */
html[data-tema="escuro"] table.pan, html[data-tema="escuro"] .tabela-wrap table { background: transparent; }
html[data-tema="escuro"] th, html[data-tema="escuro"] table.pan th { background: var(--q-th); }
html[data-tema="escuro"] tbody tr:nth-child(even) td, html[data-tema="escuro"] table.pan tr:nth-child(even) td { background: var(--q-zebra); }
html[data-tema="escuro"] tbody tr:hover td, html[data-tema="escuro"] table.pan tbody tr:hover td { background: rgba(255,255,255,.07); }

/* =====================================================================
   PARTE 608 — ESCURO: A LISTA ABERTA DO <select> VOLTA A MOSTRAR O TEXTO
   (card "No tema escuro, as listas de selecao mostram o texto", 08/10/2026)

   Pedido do Denner: "No tema escuro todas as caixas de pesquisa e selecao,
   por exemplo selecao de clientes na tela de processos ou na checagem
   rapida, ficaram em branco e o conteudo so aparece quando passamos o mouse
   em cima da opcao."

   Causa (medida no palco, cor computada): a parte 605 deu a todo campo do
   escuro um fundo TRANSLUCIDO (branco a 4%) e texto #fafafa. O <option>
   herda o texto claro, mas a lista aberta e desenhada pelo NAVEGADOR, fora
   da pagina: sem cor de fundo propria nem `color-scheme`, ele pinta a lista
   em branco — texto quase branco sobre branco. So a opcao sob o mouse
   aparecia, porque ganha o realce do sistema.

   Correcao em duas camadas, porque cada navegador/sistema le uma delas:
   * `color-scheme: dark` no escuro — o navegador desenha os controles
     nativos (lista do select, sugestoes de datalist, calendario, barra de
     rolagem) no modo escuro dele;
   * <option>/<optgroup> com fundo OPACO e texto claro — o Chrome e o Edge
     no Windows pintam a lista com essas cores.

   O campo FECHADO nao muda (continua o da 605). SO O ESCURO: toda regra
   comeca com html[data-tema="escuro"] (testar_608 confere); o claro nao muda.
   ===================================================================== */
html[data-tema="escuro"] { color-scheme: dark; }
html[data-tema="escuro"] option, html[data-tema="escuro"] optgroup { background-color: #171717; color: #fafafa; }
html[data-tema="escuro"] option:disabled { color: #8a8a8a; }

/* parte 622: a linha que abre com DUPLO clique (static/linha-abre.js) nao
   mostra a maozinha — maozinha promete clique simples, e o clique simples
   agora seleciona texto. No toque (celular) um toque continua abrindo, entao
   la a maozinha volta. Fica no FIM do arquivo de proposito: empata em
   especificidade com `.cat-link` e precisa vir depois para vencer. */
table.lista tbody tr[data-abrir], [data-abrir] { cursor: default; }
html.toque [data-abrir] { cursor: pointer; }

/* parte 635: Tipo de mercadoria — texto livre de ate 120 caracteres numa
   coluna de lista. Corta com reticencias para nao alargar a grade; o texto
   inteiro fica no `title` da celula (ao passar o mouse). */
td.tipo-merc { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* parte 713: campos dentro das tabelas de cadastro (Unidades, Dados da casa e taxas) —
   sem isto saiam no estilo cru do navegador, pequenos e com borda preta */
.cadastro-tabela input, .cadastro-tabela select { width: 100%; min-width: 64px; padding: 7px 10px;
  border-radius: var(--bt-raio); border: 1px solid var(--borda); background: var(--campo);
  color: var(--texto); font-size: 13px; font-family: inherit; }
.cadastro-tabela input:focus, .cadastro-tabela select:focus { outline: none; border-color: var(--azul); }
.cadastro-tabela td { vertical-align: middle; }
.cadastro-tabela .col-larga { min-width: 220px; }

/* parte 759 (leitura dos prints): o "i" da dica saia QUADRADO. A regra de botao do
   modelo B (`html[data-tema] :where(button…) { border-radius: 6px }`, e 8px no escuro)
   empata com `button.dica` e vence por vir depois. A dica e circulo nos dois temas. */
html[data-tema] button.dica { border-radius: 50%; }

/* parte 759 (card 06 da operacao "Critica de frontend"): o CABECALHO COMUM das
   telas de lista (templates/_cabecalho.html). Titulo a esquerda, acoes no canto
   superior direito, a primaria por ultimo. Substitui os tres cabecalhos locais
   (.pan-cabecalho de Processos e DUIMPs, .pt-topo de Produtos, .lg-topo de
   Logistica), que sairam dos <style> das telas. No celular as acoes descem
   para a linha de baixo e continuam encostadas a direita (margin-left:auto),
   quebrando entre si em vez de empurrar a tela de lado. So tokens de fonte;
   nenhuma cor nova. */
.cab-pagina { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; max-width: 100%; }
.cab-titulo { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cab-titulo h1 { margin: 0; }
.cab-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px 10px;
  flex-wrap: wrap; margin-left: auto; max-width: 100%; }
.cab-acoes > * { max-width: 100%; }
.cab-acoes p { margin: 0; font-size: var(--fs-min); color: var(--texto-suave); }
/* o icone unico do "Exportar Excel" (macro icone_excel) */
.ico-excel { vertical-align: -3px; margin-right: 5px; flex: none; }
/* parte 759: o menu "Exportar Excel" de Produtos e um <details>, e o gatilho
   e um <summary> — que nao casa `button.mini, a.mini`. Sem isto ele so tinha
   a cara de botao emprestando `.botao-link`, o solido da acao primaria. As
   declaracoes sao as do `.mini` (mesmos tokens e valores, nos dois temas;
   o par do modelo B mora na secao 600, ao lado do `a.mini`); o seletor do
   `.mini` nao foi estendido porque a testar_546 o le exato. */
summary.mini { padding: var(--bt-pad-mini); font-size: var(--fs-min); border: 1px solid var(--borda);
  border-radius: var(--bt-raio-mini); background: var(--hover-azul); color: var(--destaque);
  cursor: pointer; font-weight: 500; line-height: 1.5; display: inline-flex; align-items: center; gap: 6px; }
summary.mini:hover { background: var(--marca-azul); border-color: var(--azul); }
html[data-tema="escuro"] summary.mini { background: transparent; color: #fafafa; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; box-shadow: none; }
html[data-tema="escuro"] summary.mini:hover { background: #262626; border-color: rgba(255,255,255,.15); color: #fafafa; }

/* ================================================================== 775 — TREINAMENTO
   A area de treinamento da equipe (/treinamento). Tudo aqui sai dos tokens da
   casa, nos dois temas; a UNICA cor propria e o `--tr-ambar`, que precisa ser
   o MESMO amarelo desenhado dentro dos prints (os numeros ①②③ gravados na
   imagem) — token da casa nenhum bate com ele, e dois amarelos diferentes na
   mesma tela leriam como duas coisas diferentes. */
:root { --tr-ambar: #f59e0b; }

/* --- o indice: a lista de modulos de cada trilha --- */
.tr-lista { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.tr-item a { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--borda-suave); border-radius: var(--bt-raio);
  background: var(--painel-bg); color: var(--texto); text-decoration: none; }
.tr-item a:hover { border-color: var(--azul); background: var(--hover-azul); }
.tr-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid;
  place-items: center; font-weight: 700; font-size: var(--fs-min);
  background: var(--marca-azul); color: var(--destaque); border: 1px solid var(--painel-borda); }
.tr-corpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tr-tit { font-weight: 600; font-size: var(--fs-destaque); }
.tr-meta { font-size: var(--fs-min); color: var(--texto-apagado); }
.tr-item .tag { flex: none; }
.tr-e-concluido .tr-num { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-borda); }
.tr-e-revisar .tr-num, .tr-e-andando .tr-num { background: var(--tmp-bg); color: var(--tmp-fg); border-color: var(--tmp-borda); }

/* --- a barra de andamento do modulo --- */
.tr-barra { height: 5px; border-radius: 3px; background: var(--borda-suave); overflow: hidden; margin: 2px 0 16px; }
.tr-barra > span { display: block; height: 100%; background: var(--azul); border-radius: 3px; }

/* --- a abertura --- */
.tr-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tr-intro .bloco h3 { margin: 0 0 6px; font-size: var(--fs-cabecalho); text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-apagado); }
.tr-intro .bloco p, .tr-intro .bloco li { font-size: var(--fs-corpo); }
.tr-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0; }

/* --- um passo --- */
.tr-inst { font-size: var(--fs-h1); line-height: 1.3; margin: 0 0 14px; max-width: 60ch; }
.tr-print { margin: 0 0 14px; }
.tr-print a { display: block; border: 1px solid var(--borda); border-radius: var(--bt-raio);
  overflow: hidden; background: var(--campo); }
.tr-print a:hover { border-color: var(--azul); }
.tr-print img { display: block; width: 100%; height: auto; }
.tr-print figcaption { font-size: var(--fs-min); color: var(--texto-apagado); margin-top: 5px; }
.tr-apoio { max-width: 72ch; }
.tr-nums { counter-reset: tn; list-style: none; padding: 0; margin: 12px 0; max-width: 72ch; }
.tr-nums li { counter-increment: tn; position: relative; padding: 3px 0 3px 34px; }
.tr-nums li::before { content: counter(tn); position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tr-ambar); color: #231a05; font-weight: 700; font-size: 12px; }
.tr-ok { max-width: 72ch; border-left: 3px solid var(--ok-borda); padding: 6px 0 6px 12px; }
.tr-ok b, .tr-dica b { color: var(--texto-apagado); font-size: var(--fs-min);
  text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.tr-dica { max-width: 72ch; border-left: 3px solid var(--painel-borda); padding: 6px 0 6px 12px; }
.tr-cuidado { max-width: 72ch; background: var(--erro-bg); border: 1px solid var(--erro-borda);
  border-radius: var(--bt-raio); padding: 10px 14px; margin: 12px 0; }
.tr-cuidado b { display: block; font-size: var(--fs-min); text-transform: uppercase;
  letter-spacing: .04em; color: var(--erro-fg); margin-bottom: 3px; }
.tr-se { max-width: 72ch; margin-top: 16px; }
.tr-se h3 { font-size: var(--fs-h2); margin: 0 0 6px; }
.tr-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--borda-suave); }

/* --- o teste e a correcao --- */
.tr-teste fieldset { border: 1px solid var(--borda-suave); margin: 0 0 12px; }
.tr-teste legend { font-weight: 600; font-size: var(--fs-destaque); padding: 0 6px; }
.tr-opcao { display: flex; gap: 9px; align-items: flex-start; padding: 7px 4px; cursor: pointer;
  border-radius: 7px; }
.tr-opcao:hover { background: var(--hover-azul); }
.tr-opcao input { margin-top: 3px; flex: none; }
.tr-corrigida { border-left: 3px solid var(--borda); }
.tr-c-ok { border-left-color: var(--ok-borda); }
.tr-c-nao { border-left-color: var(--erro-borda); }
.tr-corrigida h3 { font-size: var(--fs-destaque); margin: 0 0 8px; }
.tr-sua, .tr-certa { margin: 4px 0; }

/* --- a grade do Andamento da equipe --- */
.tr-grade { border-collapse: collapse; }
.tr-grade th, .tr-grade td { border-bottom: 1px solid var(--borda-suave); padding: 6px 4px; }
.tr-grade .tr-pessoa { text-align: left; padding-right: 14px; white-space: nowrap; font-weight: 600; }
.tr-col { width: 26px; font-size: var(--fs-min); color: var(--texto-apagado); font-weight: 500; }
.tr-cel { text-align: center; }
.tr-sep { border-left: 1px solid var(--borda); }
.tr-col-tot { white-space: nowrap; padding-left: 14px; font-size: var(--fs-min); }
.tr-q { display: inline-block; width: 15px; height: 15px; border-radius: 4px;
  border: 1px solid var(--borda); background: var(--off-bg); vertical-align: -2px; }
.tr-q.tr-e-concluido { background: var(--bt-verde); border-color: var(--bt-verde); }
.tr-q.tr-e-revisar { background: var(--tr-ambar); border-color: var(--tr-ambar); }
.tr-q.tr-e-andando { background: var(--tmp-bg); border-color: var(--tmp-borda); }
.tr-legenda { margin: 6px 0 0; padding-left: 20px; font-size: var(--fs-min); }
.tr-legenda li { padding: 2px 0; }

/* --- a lupa do print (static/treino.js) --- */
.tr-lupa { position: fixed; inset: 0; z-index: 90; background: rgba(8,10,20,.92);
  display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.tr-lupa img { max-width: 100%; max-height: 100%; border-radius: 6px; }

@media (max-width: 760px) {
  .tr-inst { font-size: var(--fs-h2); }
  .tr-item a { flex-wrap: wrap; }
  .tr-nav { flex-wrap: wrap; }
}