/* ============================================================
   Lotus OS — TEMA (tokens compartilhados)
   ============================================================
   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: #0d1117;
  --painel: #161b22;
  --painel2: #1c2230;           /* um degrau acima do painel: inputs, rodapés, skeleton */
  --borda: #30363d;
  --linha-tabela: rgba(48, 54, 61, .5);
  --texto: #e6edf3;
  --texto2: #7d8590;
  --texto3: #58606a;            /* terciário: os cinzas que viviam soltos em literal */
  --acento: #00b4d8;
  --acento-hover: #26c6da;
  --ok: #52b788;
  --atencao: #f4a261;
  --critico: #e63946;
  --info: #1d6fd1;              /* azul de prazo, YPÊ e 1ª perna */
  --agendado: #e91e8c;          /* rosa da janela de agendamento (o --rosa que nunca foi definido) */
  --roxo: #9b5de5;
  --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: #04222b;   /* sobre --acento e --ok */
  --tinta-sobre-status: #ffffff;   /* sobre --critico/--roxo/--agendado/--info e os conjuntos --emb-, --cat-, --perfil-
                                      (escrito assim porque "--emb-*" seguido de barra fechava este comentário cedo e o
                                      navegador descartava a declaração seguinte inteira — revisão 11/09) */
  --tinta-sobre-aviso: #3a2200;    /* 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, 255, 255, .04);
  --veu-2: rgba(255, 255, 255, .08);
  --veu-3: rgba(255, 255, 255, .12);
  --veu-modal: rgba(0, 0, 0, .6);  /* backdrop de modal / diálogo / sessão (D5) */
  --realce-acento: rgba(0, 180, 216, .10);
  --realce-acento-forte: rgba(0, 180, 216, .35);

  /* ---- nomes antigos: aliases. var(--ciano) continua valendo em todo lugar ---- */
  --ciano: var(--acento);
  --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;
  /* banner de perfil de veículo (D19): categórico, tinta branca em cima */
  --perfil-van: #0d9488;
  --perfil-34: #1d6fd1;
  --perfil-toco: #d97706;
  --perfil-truck: #7b4fd1;
  --perfil-carreta: #b91c1c;
  /* n-ésima parada da rota e peça do tetris (D17) — os 8 de PALETA_DEST */
  --cat-1: #2f9e57;
  --cat-2: #1d6fd1;
  --cat-3: #c0392b;
  --cat-4: #8e44ad;
  --cat-5: #d68910;
  --cat-6: #16a085;
  --cat-7: #7f8c8d;
  --cat-8: #b8377f;
  /* embarcador: a cor real vem do cadastro; isto é o fallback offline (CORES_EMB) */
  --emb-ype: #1d6fd1;
  --emb-politriz: #7b4fd1;
  --emb-roan: #2f9e57;
  --emb-mili: #d13b3b;
  --emb-outro: #6b7280;
  /* 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, .25);
  --sombra-md: 0 4px 12px -4px rgba(0, 0, 0, .45);
  --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-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: #f2f5f7;
  --painel: #ffffff;
  --painel2: #eef1f4;
  --borda: #d0d7de;
  --linha-tabela: rgba(208, 215, 222, .8);
  --texto: #1f2328;
  --texto2: #57606a;
  --texto3: #8b949e;
  --acento: #0077b6;
  --acento-hover: #005f92;
  --ok: #2d6a4f;
  --atencao: #b45309;
  --critico: #c1121f;
  --info: #1a5fb4;
  --agendado: #e91e8c;
  --roxo: #6d28d9;
  /* no claro o acento e o verde escurecem — a tinta em cima vira branca */
  --tinta-sobre-acento: #ffffff;
  --tinta-sobre-aviso: #ffffff;
  /* no claro os véus são escuros, senão somem no branco */
  --veu-1: rgba(0, 0, 0, .03);
  --veu-2: rgba(0, 0, 0, .08);
  --veu-3: rgba(0, 0, 0, .12);
  --veu-modal: rgba(0, 0, 0, .45);
  --realce-acento: rgba(0, 119, 182, .10);
  --realce-acento-forte: rgba(0, 119, 182, .35);
  --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(0, 0, 0, .08);
  --sombra-md: 0 4px 12px -4px rgba(0, 0, 0, .14);
  --sombra-lg: 0 12px 30px -10px rgba(0, 0, 0, .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. */
.banner-modo-teste {
  position: sticky; top: 0; z-index: 200;
  text-align: center; font-weight: var(--peso-forte); font-size: var(--fonte-base); letter-spacing: 1px;
  color: #1a1a1a; padding: 4px 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;
}