/* 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 OFICIAL (parte 181) — usar SO estes tamanhos:
   11 mini · 12 legenda/badge · 13 apoio/tabela-compacta · 14 corpo/tabela ·
   15 destaque/input · 17 h2 · 20 logo-sm · 24 h1 · 28/34 numeros/logo.
   Nada de fracionados (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).
   ============================================================ */

:root {
  --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: #D95252; --falta-fg: #fff;   /* badge de falta/alerta */
  --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);
}
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: #15803d;  --ok-borda: rgba(22,163,74,.35);
  --tmp-bg: rgba(202,138,4,.12); --tmp-fg: #a16207; --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: #D90B1C; --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: #8a6d1f;
  --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);
}

* { 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;
  /* 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; }
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-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; }
/* 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: 11px; 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: 11px; 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: 12px; 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; }

.nav-recolher { display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; background: none;
  color: var(--texto-suave); border: 1px solid var(--borda);
  border-radius: 8px; padding: 6px; line-height: 0;
  transition: color .12s ease, border-color .12s ease; }
.nav-recolher:hover { color: var(--texto); border-color: var(--azul); }
.sidebar { transition: width .18s ease; }
@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. */
  html[data-menu="recolhido"] .logo-simbolo { height: 30px; padding: 4px;
    border-radius: 8px; }
  /* 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) {
  .nav-recolher { display: none; }
  .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: 11px; 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%; }

/* ---- 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; }
.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; }
@media (max-width: 760px) { .painel-grid { grid-template-columns: 1fr; } }
.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: 2.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); }

/* ---- badges / dots ---- */
.badge { display: inline-block; font-size: 12px; 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: 12px; 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: 12px; 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); }
td.acoes { white-space: nowrap; }
td.acoes form { display: inline-block; margin-right: 6px; }
/* botao pequeno de tabela — mesma familia do botao grande, so menor */
button.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;
  transition: background-color .12s ease, border-color .12s ease; }
button.mini:hover { background: var(--marca-azul); border-color: var(--azul); }
button.mini:active { background: var(--marca-azul); filter: brightness(.94); }
button.mini.perigo { border-color: var(--erro-borda); background: var(--erro-bg); color: var(--erro-fg); }
button.mini.perigo:hover { background: var(--erro-bg); border-color: var(--perigo-bg); filter: brightness(1.1); }
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: 12px; }
.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; } }
.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); }
.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: 11px; }
.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; }
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; }
.chip-x { border: 0; background: none; color: var(--texto-apagado); cursor: pointer;
  font-size: 13px; padding: 0 2px; font-family: inherit; }
.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: 12px;
  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: 11px; }

/* ---- 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:12px; 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:1 1 auto; padding-right:2px }
.th-bt { border:0; background:none; color:inherit; cursor:pointer; opacity:.35;
  font-size:11px; line-height:1; padding:1px 2px; border-radius:3px;
  font-family:inherit }
.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 }
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:12.5px; 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:11px; 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:12.5px;
  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:12px; color:var(--texto-suave) }

/* ---- 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; }