/* ============================================================
   Lotus OS — TEMA · paleta CERRADO AJUSTADO (FRONT-5, 17/09/2026)
   ============================================================
   Substitui web/tema.css. Em relação ao anterior mudam APENAS
   valores de token nos dois temas: neutros quentes (terra, papel)
   no lugar do azul-preto; seis estados na mesma luminosidade;
   acento azul-aço calmo; --info e --acento separados (ação ≠
   estado); --tinta-sobre-status escura no escuro e declarada
   também no clean. Tudo medido: estados ≥ 4,5 como texto no
   painel, tinta em etiqueta cheia ≥ 4,5, acento×info ≥ 0,12,
   ok×crítico protan/deutan ≥ 0,10, info×roxo cvd ≥ 0,05,
   info×texto2 ≥ 0,08, crítico ≥ 5% acima da atenção, e G11: todo
   par acento/estados ≥ 0,04 em protan e deutan.
   Conjuntos de valor único (--menu, --perfil, --cat, --emb, --uf,
   --faixa, --px) e tipografia/escala: iguais ao anterior.
   Novos: --brilho-topo, --transicao-rapida (FRONT-5 botão).
   ============================================================
   Este arquivo existe para que TODO app da Lotus use as mesmas
   decisões visuais, e não só o painel da roteirização.

   Até 26/08/2026 os tokens viviam dentro de style.css, que é do
   app principal. Conferência, motorista e portaria tinham CSS
   próprio inline, com as cores escritas à mão em cada um — e a
   consequência prática não era estética: o conferente que abre o
   painel e a conferência via dois cinzas diferentes para a mesma
   coisa, e a operação aprendia duas linguagens visuais para um
   sistema só.

   Quem for criar app novo (Frota, Cliente, Ocorrências) importa
   ESTE arquivo e ganha os dois temas de graça:

       <link rel="stylesheet" href="/tema.css">
       <script src="/tema.js"></script>

   Regra que os temas seguem: eles trocam APENAS valores de token.
   Nenhum tema muda estrutura de página. Um tema que precise mexer
   em layout é sinal de que falta um token.

   Fase 0+1 (11/09/2026, docs/frontend-fase1/): este é o ÚNICO lugar
   que define token — o style.css deixou de carregar a cópia. Dois
   temas (`padrao` escuro é o :root; `clean` claro redefine embaixo);
   Dark Glass, Futurista e os nomes antigos (claro/meianoite/grafite)
   saíram — o tema.js migra quem os tinha salvos.

   Os nomes dizem o PAPEL da cor (--acento, --ok, --critico…) e os
   valores são hex/rgba PUROS de propósito: o tok() lê daqui para
   canvas e Leaflet, e color-mix() não vira cor pronta. Os nomes
   antigos (--ciano, --verde, --veu-fraco…) seguem valendo como alias.
   ============================================================ */

:root {
  /* ---- cor semântica (mapa-hex-token.md §1) ---- */
  --fundo: #100f0e;
  --painel: #1a1917;
  --painel2: #22201d;           /* um degrau acima do painel: inputs, rodapés, skeleton */
  --borda: #35322e;
  --linha-tabela: rgba(53, 50, 46, .55);
  --texto: #ece7df;
  --texto2: #8f8880;
  --texto3: #6e675f;            /* terciário: SÓ placeholder e dica, nunca conteúdo (18/09). 3,44 sobre --fundo, 3,15 sobre --painel */
  --acento: #4ec0e9;            /* G3 (18/09): ≥ 0,10 de todos os estados — acento×ok 0,102. ação. dado (tag de embarcador via --ciano) também vem daqui — D7 */
  --acento-hover: #74cdec;
  --acao-liberar: #42afa5;      /* AÇÃO da guarita/coletor ("liberar saída"): verde de semáforo, lido a metros.
                                   Token próprio (18/09): ação não pode depender do token de estado — hoje
                                   nasce igual ao --ok, mas se o --ok mudar, este só muda por decisão.
                                   Tinta --tinta-sobre-acento por cima: 7,08. */
  --ok: #42afa5;                /* verde-azulado (~187°): separa do crítico para protan/deutan */
  --atencao: #b67f46;
  --critico: #f2716a;           /* vermelhão (~25°) — G11: ≥ 0,04 da atenção em protan/deutan */
  --info: #768ab9;              /* estado "separada", prazo, 1ª perna — apagado de propósito: não é ação */
  --agendado: #ce62ae;          /* rosa da janela de agendamento */
  --roxo: #af90ef;
  --misto: var(--atencao);      /* alias (D4): entrega com dois embarcadores pisca em âmbar */

  /* tintas: texto EM CIMA de uma cor cheia. Escolhe-se pelo FUNDO, não pelo texto. */
  --tinta-sobre-acento: #14110f;   /* sobre --acento e --ok */
  --tinta-sobre-status: #14110f;   /* sobre --critico/--roxo/--agendado/--info. ESCURA no escuro (17/09): estado
                                      legível como texto no painel (L≈0,65) não segura branco por cima — o antigo
                                      #e63946×branco dava 4,0. Os conjuntos --emb-, --cat-, --perfil- (valor único,
                                      tons escuros) usam --tinta-sobre-categoria, que segue branca. */
  --tinta-sobre-aviso: #14110f;    /* sobre --atencao */
  --tinta-assinatura: #111111;     /* caneta do canvas de assinatura — igual nos dois temas (Moises, 11/09) */

  /* véus: camadas translúcidas sobre o painel — o claro inverte para preto */
  --veu-1: rgba(255, 250, 240, .04);
  --veu-2: rgba(255, 250, 240, .08);
  --veu-3: rgba(255, 250, 240, .12);
  --veu-modal: rgba(0, 0, 0, .6);  /* backdrop de modal / diálogo / sessão (D5) */
  --realce-acento: rgba(78, 192, 233, .10);
  --realce-acento-forte: rgba(78, 192, 233, .35);
  --brilho-topo: rgba(255, 250, 240, .06);   /* 1px de luz na aresta de cima de superfície em relevo (FRONT-5) */
  --sombra-interna: inset 0 -1px 0 rgba(255, 250, 240, .08);   /* CAVIDADE (campo). No escuro sombra preta não existe
                                      (preto a 25% sobre --fundo = 0,018 OKLab): o recurso é o lábio de luz na aresta
                                      de BAIXO — a cavidade pega luz onde o relevo (--brilho-topo) faz sombra. 0,083. */

  /* ---- nomes antigos: aliases. var(--ciano) continua valendo em todo lugar ---- */
  /* --ciano deixou de ser alias (17/09): a tag de embarcador foi para --emb-*
     e nenhum componente lê --ciano como dado. Mantido com o valor do acento
     só para o CSS legado das telas; não usar em regra nova. */
  --ciano: #4ec0e9;
  --verde: var(--ok);
  --ambar: var(--atencao);
  --vermelho: var(--critico);
  --rosa: var(--agendado);
  --veu-fraco: var(--veu-1);
  --veu-medio: var(--veu-2);
  --realce-ciano: var(--realce-acento);
  --realce-ciano-forte: var(--realce-acento-forte);

  /* ---- conjuntos de VALOR ÚNICO: iguais nos dois temas ---- */
  /* menu lateral do painel — escuro por design nos dois temas (D9) */
  --menu-fundo: #111a2e;
  --menu-texto: #b8c4d4;
  --menu-texto-forte: #ffffff;
  --menu-acento: #58c4dc;
  /* --perfil-*, --cat-*, --emb-*: deixaram de ser valor único em 18/09 — agora têm valor POR TEMA
     (bloco CATEGÓRICAS no fim deste :root e no clean). */
  /* UF nas abas de cidade (D16) — os 20 de CORES_UF, valor único nos 2 temas.
     É MARCADOR (borda da aba e do balão, via --uf-cor no style=), nunca tinta
     de texto: são tons de fundo escuro (auditoria 11/09). --uf-go tem o hex
     do acento ESCURO e não o segue no claro — de propósito: cor de categoria. */
  --uf-go: #00b4d8; --uf-df: #8b5cf6; --uf-to: #f59e0b; --uf-ap: #10b981; --uf-mg: #ec4899;
  --uf-sp: #3b82f6; --uf-ba: #eab308; --uf-mt: #f97316; --uf-ms: #14b8a6; --uf-pa: #a3e635;
  --uf-ma: #f43f5e; --uf-pi: #06b6d4; --uf-rj: #6366f1; --uf-pr: #84cc16; --uf-sc: #22d3ee;
  --uf-rs: #d946ef; --uf-pe: #fb923c; --uf-ce: #4ade80; --uf-ro: #facc15; --uf-am: #2dd4bf;
  /* faixas de lead time do mapa do CD (D18): 0–1 dia · 2 · 3 · 4+ · crítico */
  --faixa-1: #52b788;
  --faixa-2: #e9c46a;
  --faixa-3: #f4a261;
  --faixa-4: #e63946;
  --faixa-5: #9b5de5;
  /* zonas do mapa do CD (D18, acréscimo de C em 11/09): o Go não semeia cor de
     bloco, então é este token que vale em produção. Fundos esmaecidos por zona. */
  --zona-rec: #1d3b53;
  --zona-conf: #1e4038;
  --zona-corr: #20242a;
  --zona-sep: #41372a;
  --zona-asep: #3a2b41;
  --zona-est: #232b3f;
  --zona-man: #402a2a;
  --zona-vest: #2c2c35;
  --zona-exped: #233f2b;
  /* sprites do pixel.js — antes só existiam como fallback var(--px-x, #hex) */
  --px-metal: #8b98a8;
  --px-metal-escuro: #5c6675;
  --px-cabine: #3f6fae;
  --px-pneu: #23262b;
  --px-vidro: #bfe3f2;
  --px-chao: #3a3f47;
  --px-porta: #6f7c8c;
  --px-vaga: #7a8697;
  --px-bloqueada: #55555588;
  --px-tabua: #e8b88a;
  --px-chassi: #4a5568;
  --px-brilho: #ffffff;
  --px-sombra: #000000;
  --px-hachura: #555555;

  /* ---- tipografia (C9): escala 10/11/12/13/15/18/24, pesos 400/500/600/700.
     --peso-forte continua 700 (é o negrito do sistema inteiro); o passo 600
     ganhou nome próprio (--peso-semi) e o antigo --peso-extra (800) colapsa
     no 700 como alias. ---- */
  --fonte-familia: system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --fonte-xs: 10px;
  --fonte-sm: 11px;
  --fonte-md: 12px;
  --fonte-base: 13px;
  --fonte-lg: 15px;
  --fonte-xl: 18px;
  --fonte-xxl: 24px;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --peso-extra: var(--peso-forte);
  --entrelinha: 1.45;
  --caixa-alta: .5px; /* letter-spacing dos títulos em maiúsculas */
  /* tamanhos que o operador ajusta na tela (A− / A+) — fora da escala de
     propósito: o app.js reescreve estes no documentElement */
  --fonte-lista: 13px;      /* lista de entregas disponíveis */
  --fonte-lista-sel: 13px;  /* lista da carga em montagem */
  --fonte-resumo: 14px;     /* resumo operacional do Mapa */

  /* ---- espaçamento: escala de 4 ---- */
  --esp-0: 2px;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --altura-topo: 52px;

  /* ---- borda ---- */
  --raio-sm: 4px;
  --raio-md: 6px;
  --raio-lg: 8px;
  --raio-xl: 10px;
  --raio-pilula: 14px;
  --linha: 1px solid var(--borda);
  --linha-tracejada: 1px dashed var(--borda);

  /* ---- sombra ---- */
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --sombra-md: 0 4px 12px -4px rgba(0, 0, 0, .5);
  --sombra-lg: 0 12px 30px -10px rgba(0, 0, 0, .7);
  --sombra-foco: 0 0 0 2px var(--realce-acento-forte);
  --sombra-pixel: rgba(0, 0, 0, .3);   /* sombra dura do pixel art (tetris / baú) */

  /* ---- movimento ---- */
  --transicao: 180ms cubic-bezier(.2, .8, .2, 1);
  --transicao-rapida: 120ms cubic-bezier(.2, .8, .2, 1);   /* micro-interação: hover/press (FRONT-5) */

  /* ---- CATEGÓRICAS — dado na banda de luminosidade OPOSTA ao estado (18/09, portão --exigir-categorias 18/18).
     escuro: chip escuro (L 0,40–0,52) com tinta branca. C1 ≥ 5,29 · C2 ≥ 0,072 · C3 ≥ 0,049.
     cat-7 e cat-8 são NEUTROS: parada 7 e 8 leem-se pelo número (G11). ---- */
  --tinta-sobre-categoria: #ffffff;
  /* escala categórica — 6 tonalidades + 2 neutros, na banda oposta à dos estados */
  --cat-1: #025b97;   /* azul */
  --cat-2: #8f2b11;   /* terracota */
  --cat-3: #165710;   /* verde */
  --cat-4: #533e5f;   /* ameixa */
  --cat-5: #72613a;   /* mostarda */
  --cat-6: #1f7681;   /* petroleo */
  --cat-7: #4c4741;   /* neutro 1 — só o número */
  --cat-8: #6e6862;   /* neutro 2 — só o número */
  /* embarcador — mesma tonalidade de hoje, na banda nova */
  --emb-ype: #025b97;
  --emb-politriz: #533e5f;
  --emb-roan: #165710;
  --emb-mili: #8f2b11;
  --emb-outro: #4c4741;
  /* GARAGEM (23/09/2026): a cor do caminhão do motorista é DADO — é a mesma
     nos dois temas, como a tag de embarcador. O que muda com o tema é só o
     fundo do desenho, o contorno e o vidro. */
  --gar-cab-vermelho: #a8321c;
  --gar-cab-azul: #1d5f98;
  --gar-cab-branco: #eceae6;
  --gar-cab-preto: #2b2a28;
  --gar-cab-verde: #1f6b3a;
  --gar-cab-amarelo: #c9922a;
  --gar-bau-branco: #f2f0ec;
  --gar-bau-prata: #c9c5be;
  --gar-bau-azul: #2a6ea8;
  --gar-bau-vermelho: #b03a24;
  --gar-bau-preto: #33312e;
  --gar-bau-verde: #2b7a48;
  --gar-roda-claro: #ded9d2;
  --gar-roda-escuro: #4a4642;
  --gar-roda-cromado: #b9c3cb;
  --gar-pneu: #2b2a28;
  /* perfil de veículo (D19) */
  --perfil-34: #025b97;
  --perfil-van: #1f7681;
  --perfil-toco: #72613a;
  --perfil-truck: #533e5f;
  --perfil-carreta: #8f2b11;
  /* GARAGEM no tema escuro: o caminhão é o MESMO (cor de caminhão é dado);
     só o que está em volta dele acompanha o tema. */
  --gar-fundo: #1c1b1a;
  --gar-linha: #ddd6cf;
  --gar-vidro: #3d5a6c;
  --gar-sombra: #000000;
  --gar-farol: #d7aa32;
  --gar-pin-fundo: #24231f;

  --transicao-lenta: 320ms cubic-bezier(.2, .8, .2, 1);

  /* ---- camada ---- */
  --z-topo: 50;
  --z-pop: 60;
  --z-modal: 100;

  /* ---- superfície: sobraram de Dark Glass/Futurista; o style.css ainda os lê ---- */
  --painel-superficie: var(--painel);
  --painel-desfoque: none;
  --painel-brilho: none;
  --card-sombra: none;
}

/* ☀️ Clean Lotus — o Lotus OS em fundo claro */
:root[data-tema="clean"] {
  --fundo: #f5f3ef;
  --painel: #fffdfa;
  --painel2: #efece6;
  --borda: #d6d0c7;
  --linha-tabela: rgba(214, 208, 199, .8);
  --texto: #221f1b;
  --texto2: #5d574f;
  --texto3: #8a837a;            /* só placeholder e dica. 3,38 sobre --fundo, 3,69 sobre --painel */
  --acento: #0070a6;
  --acento-hover: #005a86;
  --acao-liberar: #037465;      /* tinta branca por cima: 5,89 */
  --ciano: #0070a6;             /* legado — ver :root */
  --ok: #037465;
  --atencao: #a25f19;
  --critico: #b42703;
  --info: #3e4568;
  --agendado: #b82971;
  --roxo: #6938a7;
  /* no claro os estados escurecem — TODA tinta em cima vira branca. As três
     precisam estar declaradas aqui: quem herdar do :root herda tinta escura. */
  --tinta-sobre-acento: #ffffff;
  --tinta-sobre-status: #ffffff;
  --tinta-sobre-aviso: #ffffff;
  /* no claro os véus são escuros, senão somem no branco */
  --veu-1: rgba(30, 20, 0, .03);
  --veu-2: rgba(30, 20, 0, .08);
  --veu-3: rgba(30, 20, 0, .12);
  --veu-modal: rgba(0, 0, 0, .45);
  --realce-acento: rgba(0, 112, 166, .10);
  --realce-acento-forte: rgba(0, 112, 166, .35);
  --brilho-topo: rgba(255, 255, 255, .9);
  --sombra-interna: inset 0 1px 2px rgba(40, 30, 10, .08);   /* cavidade no claro: sombra quente na aresta de cima. 0,051 */

  /* ---- CATEGÓRICAS no claro: chip CLARO (L 0,76–0,88) com tinta --texto. C1 ≥ 5,61 · C2 ≥ 0,193 · C3 ≥ 0,059 ---- */
  --tinta-sobre-categoria: #221f1b;
  /* escala categórica — 6 tonalidades + 2 neutros, na banda oposta à dos estados */
  --cat-1: #b2d5f7;   /* azul */
  --cat-2: #e79c7d;   /* terracota */
  --cat-3: #95d7a2;   /* verde */
  --cat-4: #dca2ff;   /* ameixa */
  --cat-5: #d7aa32;   /* mostarda */
  --cat-6: #58c3d2;   /* petroleo */
  --cat-7: #ddd6cf;   /* neutro 1 — só o número */
  --cat-8: #b6b0a9;   /* neutro 2 — só o número */
  /* embarcador — mesma tonalidade de hoje, na banda nova */
  --emb-ype: #b2d5f7;
  --emb-politriz: #dca2ff;
  --emb-roan: #95d7a2;
  --emb-mili: #e79c7d;
  --emb-outro: #ddd6cf;
  /* estes, sim, acompanham o tema: são interface em volta do desenho — a
     cor do caminhão não muda, o que muda é o fundo, o contorno e o vidro */
  --gar-fundo: #f5f3f0;
  --gar-linha: #2b2a28;
  --gar-vidro: #9fc4dd;
  --gar-sombra: #2b2a28;
  --gar-farol: #f3d98a;
  --gar-pin-fundo: #f7f5f2;

  /* perfil de veículo (D19) */
  --perfil-34: #b2d5f7;
  --perfil-van: #58c3d2;
  --perfil-toco: #d7aa32;
  --perfil-truck: #dca2ff;
  --perfil-carreta: #e79c7d;
  --zona-rec: #cedde9;
  --zona-conf: #cee9e2;
  --zona-corr: #d9dbdd;
  --zona-sep: #e9ddce;
  --zona-asep: #e0cee9;
  --zona-est: #ced5e9;
  --zona-man: #e9cece;
  --zona-vest: #d9d9dd;
  --zona-exped: #cee9d5;
  /* sprites: vidro e vaga um passo mais escuros, senão somem no painel branco */
  --px-vidro: #9dcbe0;
  --px-vaga: #5c6675;
  --sombra-sm: 0 1px 3px rgba(40, 30, 10, .08);
  --sombra-md: 0 4px 12px -4px rgba(40, 30, 10, .14);
  --sombra-lg: 0 12px 30px -10px rgba(40, 30, 10, .22);
  --card-sombra: var(--sombra-sm);
}
/* ============================================================
   VISÃO: celular × desktop
   ============================================================
   Pedido do Moises em 26/08/2026: "no celular as letras estão bem
   pequenas e o cabeçalho está muito em cima".

   A causa é que estes apps nasceram no monitor do escritório. Os
   tamanhos foram escolhidos olhando uma tela de 24" a 60cm de
   distância; no celular, dentro do galpão, com luva e sem parar
   de andar, o mesmo 13px é outra coisa.

   Duas correções, e elas são independentes de propósito:

   1. ESCALA — o app inteiro cresce junto (zoom), em vez de eu
      reescrever cada font-size à mão. Reescrever à mão só a
      fonte quebraria o alinhamento: o texto cresce, a caixa
      não, e o botão passa a caber menos do que mostra.

   2. RESPIRO NO TOPO — no celular a barra de status do sistema e
      a área do notch comem a faixa onde o cabeçalho estava, e o
      polegar que segura o aparelho cobre o resto. O cabeçalho
      desce 15% da altura da tela.

   O modo DESKTOP existe para o caminho contrário: ver o painel
   inteiro num celular, tabela larga e tudo, sem o navegador
   reflowar para uma coluna. Quem faz isso é o meta viewport, no
   tema.js — CSS sozinho não alcança.
   ============================================================ */

:root {
  --escala-visao: 1;
  --desce-topo: 0px;
}

html[data-visao-efetiva="celular"] {
  --escala-visao: 1.25;
  /* 15vh dentro de um documento com zoom renderiza 15vh × zoom — a divisão
     devolve o valor que o Moises pediu MEDIDO NA TELA, e não no sistema de
     coordenadas de dentro do zoom, que ninguém enxerga.
     O safe-area vem por fora porque o notch não obedece a zoom nenhum. */
  --desce-topo: calc(env(safe-area-inset-top, 0px) + 15vh / var(--escala-visao));

  zoom: var(--escala-visao);
}

/* O cabeçalho é <header> no painel e <h1> nos apps de campo — os dois são
   filhos diretos do body, e é só neles que o respiro entra. Empurrar o body
   inteiro deslocaria também o que é fixo na tela. */
html[data-visao-efetiva="celular"] body > header,
html[data-visao-efetiva="celular"] body > h1 {
  margin-top: var(--desce-topo);
}

/* Alvo de toque: no celular o dedo com luva erra o que o mouse acerta. */
html[data-visao-efetiva="celular"] button,
html[data-visao-efetiva="celular"] [role="button"] {
  min-height: 34px;
}

/* O seletor de visão em si. Discreto: ele é usado uma vez por aparelho, não
   uma vez por turno. */
/* o ◐ (tema) veste o mesmo traje do "visão": na guarita, sem regra própria,
   ficava com a cara do navegador (preto sobre #efefef) nos 2 temas (11/09) */
[data-lotus-visao], [data-lotus-tema] {
  width: auto;
  /* o motorista.html tem `button { flex: 1; min-width: 120px }` para os botões
     de ação; sem isto o ◐ virava um bloco de 235×60 (auditoria 11/09) */
  flex: 0 0 auto;
  min-width: auto;
  padding: 4px 9px;
  font: var(--peso-normal) var(--fonte-sm) var(--fonte-familia);
  color: var(--texto2);
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  cursor: pointer;
  white-space: nowrap;
}
[data-lotus-visao]:hover, [data-lotus-tema]:hover { color: var(--texto); border-color: var(--texto2); }

/* ═══ BANNER DO MODO TESTE (GOAL 4-frentes §2, 09/09/2026) ═══
   Listrado de obra, fixo no topo, IMPOSSÍVEL de ocultar — quem olha qualquer
   tela sabe que os dados podem ser apagados. As cores são literais de
   propósito: o banner tem que gritar igual nos dois temas. */
/* UMA LINHA, ALTURA FIXA (FRONT-4, 11/09/2026): a frase inteira quebrava em
   duas linhas no celular — 54px de faixa listrada empurrando a tela para
   baixo, com altura mudando conforme a largura. Agora a faixa tem altura fixa
   e a explicação (.bmt-extra) sai no estreito: fica o que importa, MODO
   TESTE, que é o que não pode faltar em tela nenhuma. */
.banner-modo-teste {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; box-sizing: border-box; white-space: nowrap; overflow: hidden;
  text-align: center; font-weight: var(--peso-forte); font-size: var(--fonte-base); letter-spacing: 1px;
  color: #1a1a1a; padding: 0 8px;
  background: repeating-linear-gradient(45deg,
    #f5c518 0 14px, #2b2b2b 14px 18px, #f5c518 18px 32px);
  text-shadow: 0 0 3px #f5c518, 0 0 7px #f5c518;
}
@media (max-width: 560px) { .banner-modo-teste .bmt-extra { display: none; } }

/* O CABEÇALHO SAIU DAQUI (FRONT-2 item 7, 12/09/2026): `.cab-app`,
   `.cab-nome` e `.cab-acoes` são COMPONENTE, e componente mora em
   componentes.css. Este arquivo é cor e escala — foi o contrato do FRONT-0, e
   é o mesmo motivo pelo qual a regra de quebra do cabeçalho do painel já tinha
   saído daqui em 11/09 (5e24d7d): o que mora no tema alcança as dez telas. */


/* ═══ ÍCONES (FRONT-3, 11/09/2026) ═══
   Um ícone do sprite (web/icones.svg, Lucide 1.45 ISC) desenhado pelo
   helper ico() de /ico.js. Mora no tema.css, e não no style.css, porque as
   10 telas carregam o tema e só uma carrega o style.

   `currentColor` é a regra inteira: o ícone NÃO tem cor própria, herda a do
   texto em que está. É o que faz o mesmo triangle-alert sair vermelho em
   .badge.critico e âmbar em .badge.atencao sem uma linha de CSS por caso —
   e o que mantém o ícone certo nos dois temas de graça. Ícone com cor
   escrita à mão é o mesmo erro que a Fase 1 tirou das cores.

   O traço mora aqui, e não no <symbol> do sprite, pelo mesmo motivo: um
   symbol com stroke próprio não herdaria nada. */
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* alinha com a linha de texto: um ícone de 16px ao lado de uma fonte de
     13px fica com a base 3px alta sem isto, e a moldura inteira treme */
  vertical-align: -0.125em;
  /* não encolhe dentro de flex (botão com ícone + rótulo longo) */
  flex: 0 0 auto;
}
/* O ESPAÇO entre ícone e rótulo vem do HTML (`${ico('save')} salvar`), não de
   uma margem automática. Tentei automatizar e não dá: `:only-child` em CSS
   conta só ELEMENTOS, então num `<button><svg/> salvar</button>` o ícone É
   filho único — a regra casaria exatamente no caso em que há texto ao lado, e
   erraria nos dois sentidos. Onde o espaço precisa ser maior ou exato, o PAI
   resolve com flex e `gap` (é o que o .toast faz). */

/* A caixa do sprite injetado: fora do fluxo, sem tamanho, sem foco. `hidden`
   sozinho não basta no Safari em modo PWA, que ainda reserva a caixa. */
#lotus-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ICO-CSS: início (GERADO por docs/frontend-fase3/gerar-sprite.py) */
/* Máscaras dos poucos ícones que a folha de estilo desenha em
   ::before/::after. Editar à mão é perder na próxima geração. */
:root {
  --ico-grip-vertical: url("data:image/svg+xml,%3Csvg class='lucide lucide-grip-vertical' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='9' cy='12' r='1' /%3E %3Ccircle cx='9' cy='5' r='1' /%3E %3Ccircle cx='9' cy='19' r='1' /%3E %3Ccircle cx='15' cy='12' r='1' /%3E %3Ccircle cx='15' cy='5' r='1' /%3E %3Ccircle cx='15' cy='19' r='1' /%3E %3C/svg%3E");
  --ico-triangle-alert: url("data:image/svg+xml,%3Csvg class='lucide lucide-triangle-alert' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E %3Cpath d='M12 9v4' /%3E %3Cpath d='M12 17h.01' /%3E %3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg class='lucide lucide-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 6 9 17l-5-5' /%3E %3C/svg%3E");
}
/* ICO-CSS: fim */