/* =====================================================================
   TEMA ESCURO — variáveis e ajustes feitos à mão.

   Ligado por <html data-tema="escuro"> (js/tema.js, escolha salva no
   navegador). Carregado por último. Duas partes:
     · este arquivo: a versão escura das VARIÁVEIS de cada folha (styles,
       ds, bi) e o que precisa de decisão caso a caso;
     · tema-escuro-gerado.css: as cores FIXAS espalhadas pelas folhas,
       convertidas por scripts/gerar-tema-escuro.mjs (npm run tema-escuro).
   A tela de Conversas tem tema escuro próprio (conversas.css) e segue este
   quando a pessoa não escolheu outro lá.

   Contraste (texto sobre --surface #161d2a): --texto 13:1, --texto-suave
   7,6:1, --texto-fraco 4,6:1 — todos AA; cores de status ≥ 4,5:1.
   ===================================================================== */

html[data-tema="escuro"] {
  color-scheme: dark;               /* calendário, listas e barras de rolagem nativos no escuro */

  /* styles.css */
  --bg: #0e131c;                    /* página */
  --surface: #161d2a;               /* cartões */
  --surface-2: #1c2433;             /* áreas destacadas dentro do cartão */
  --border: #283246;
  --border-forte: #36425b;
  --texto: #e7ecf5;
  --texto-suave: #a9b3c7;
  --texto-fraco: #7f8ba3;
  --verde: #4ade80;   --verde-bg: #14301f;
  --vermelho: #f87171; --vermelho-bg: #3a1a1d;
  --sombra-sm: 0 1px 2px rgba(0,0,0,.35);
  --sombra-md: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  --sombra-lg: 0 16px 40px rgba(0,0,0,.55);
  /* Liquid glass no escuro: o cartão fica num cinza-azulado translúcido
     (nunca branco leitoso) com um fio de borda quase invisível. */
  --glass-bg: rgba(20,27,40,.82);
  --glass-borda: rgba(255,255,255,.08);
  --glass-sombra: 0 32px 80px -28px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);

  /* ds.css */
  --marinho: #3b6cf2;               /* ação principal: marinho some no fundo escuro */
  --marinho-escuro: #2f5ddc;
  --ambar: #fbbf24;   --ambar-bg: #33280f;
  --roxo: #c4b5fd;    --roxo-bg: #2a2143;
  --tabela-cab: #1a2231;
  --tabela-linha: #222b3b;
  --tabela-hover: #1d2a42;
  --tabela-zebra: var(--surface);
  --tabela-navy: var(--surface);
  --rotulo: #c3cbdb;
  --neutro-bg: #252e3f;
  --neutro-tx: #b8c1d3;
}

/* Comercial / Vendas (bi.css): as variáveis vivem em .bi */
[data-tema="escuro"] .bi {
  --white: #161d2a;
  --bg: #0e131c;
  --ink: #e8edf6;
  --ink2: #bac3d4;
  --ink3: #99a4ba;
  --ink4: #8b96ad;
  --rule: #263044;
  --rule2: #1f2838;
  --ruleStrong: #333e55;
  --wash: #1b2433;
  --sh: none;
  --blue: #5b8cf0;
  --serieCusto: #f08a2c;
  --serieMargem: #a78bfa;
  --blueDeep: #93b4ff;
  --blueBar: #3a5f9e;
  --blueWash: #1a2a47;
  --good: #4ade80;
  --bad: #f87171;
  --badWash: #3a1a1d;
  --warn: #fbbf24;
  --warnInk: #fbbf24;
  --p-blue: #5b8cf0;    --p-blue-wash: #1b2a4a;
  --p-green: #34d399;   --p-green-wash: #12322a;
  --p-violet: #a78bfa;  --p-violet-wash: #2a2146;
  --p-orange: #fbbf24;  --p-orange-wash: #3a2b12;
  --p-aqua: #22d3ee;    --p-aqua-wash: #0f3038;
  --p-magenta: #f472b6; --p-magenta-wash: #3a1830;
  --p-yellow: #e0a526;  --p-yellow-wash: #33280f;
  --p-red: #f07a79;     --p-red-wash: #3a1a1d;
}
/* O fundo da página no modo Comercial é a página, não um cartão. */
[data-tema="escuro"] main.modo-bi { background: var(--bg); }
[data-tema="escuro"] body { background: var(--bg); }

/* A cor de destaque configurável é aplicada por js/config.js já na versão
   escura (tom escuro para fundo, claro para texto) — nada a fazer aqui. */

/* ---------------------------------------------------------------------
   Barra lateral: o trilho azul da marca fica; o painel branco escurece
   (já por variável). Aba ativa: texto claro sobre tinta de destaque.
   --------------------------------------------------------------------- */
[data-tema="escuro"] .painel { border-right-color: var(--border); }
[data-tema="escuro"] .painel::-webkit-scrollbar-thumb { background: #36425b; }

/* ---------------------------------------------------------------------
   Mapas (Leaflet): as imagens das ruas vêm claras do OpenStreetMap —
   invertidas e com o matiz corrigido ficam escuras sem trocar de mapa.
   Só a camada de imagens: marcadores, traçados e rótulos ficam intactos.
   --------------------------------------------------------------------- */
[data-tema="escuro"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55); }
[data-tema="escuro"] .leaflet-container { background: #0f1520; }
[data-tema="escuro"] .leaflet-control-zoom a,
[data-tema="escuro"] .leaflet-bar a { background: var(--surface); color: var(--texto); border-bottom-color: var(--border); }
[data-tema="escuro"] .leaflet-control-zoom a:hover { background: var(--surface-2); }
[data-tema="escuro"] .leaflet-control-attribution { background: rgba(22,29,42,.8) !important; color: var(--texto-fraco); }
[data-tema="escuro"] .leaflet-control-attribution a { color: var(--texto-suave); }
[data-tema="escuro"] .leaflet-popup-content-wrapper,
[data-tema="escuro"] .leaflet-popup-tip,
[data-tema="escuro"] .leaflet-tooltip { background: var(--surface); color: var(--texto); border-color: var(--border); box-shadow: var(--sombra-md); }
[data-tema="escuro"] .leaflet-tooltip-top::before { border-top-color: var(--surface); }
[data-tema="escuro"] .leaflet-tooltip-bottom::before { border-bottom-color: var(--surface); }
[data-tema="escuro"] .leaflet-tooltip-left::before { border-left-color: var(--surface); }
[data-tema="escuro"] .leaflet-tooltip-right::before { border-right-color: var(--surface); }

/* ---------------------------------------------------------------------
   Campos: fundo do campo um pouco acima do cartão, para se destacar.
   --------------------------------------------------------------------- */
[data-tema="escuro"] :is(input, select, textarea) { background-color: #121926; color: var(--texto); border-color: var(--border-forte); }
[data-tema="escuro"] :is(input, select, textarea):disabled,
[data-tema="escuro"] input[readonly] { background-color: var(--surface-2); color: var(--texto-suave); }
[data-tema="escuro"] :is(input, textarea)::placeholder { color: var(--texto-fraco); }
/* A seta desenhada do <select> (ds.css) era cinza-escura: no escuro, clara. */
[data-tema="escuro"] :where(main:not(.modo-bi)) select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b3c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
}
[data-tema="escuro"] .bi :is(input, select, textarea) { background-color: #121926; }

/* Datas: o ícone nativo do calendário já segue o color-scheme. */

/* ---------------------------------------------------------------------
   Ajustes caso a caso
   --------------------------------------------------------------------- */
/* Aviso do DS: a borda gerada cobre os quatro lados; o filete âmbar da
   esquerda volta. */
[data-tema="escuro"] :where(main:not(.modo-bi)) .aviso { border-left-color: #e0a526; }

/* ---------------------------------------------------------------------
   Comercial: o --blue escuro é claro o bastante para linha e texto sobre
   fundo escuro, mas branco em cima dele perde contraste. Onde ele é FUNDO
   com texto branco (cabeçalho das tabelas, botão principal, marcadores),
   entra um azul mais fundo.
   --------------------------------------------------------------------- */
[data-tema="escuro"] .bi { --tbCab: var(--wash); --tbZebra: var(--white); --tbHover: #1d2a42; --tbLinha: #232d3f; --tbTopo: var(--white); }
[data-tema="escuro"] .bi .tw .rk-n { background: #263044; }
[data-tema="escuro"] .bi .tw .pct { background: #263044; color: #c9d2e1; }
[data-tema="escuro"] .bi .tw .pct.good { background: rgba(74,222,128,.14); color: #6ee7a0; }
[data-tema="escuro"] .bi .tw .pct.warn { background: rgba(251,191,36,.14); color: #fcd34d; }
[data-tema="escuro"] .bi .tw .pct.bad, [data-tema="escuro"] .bi .tw .pct.crit, [data-tema="escuro"] .bi .tw td.r .neg { background: rgba(248,113,113,.14); color: #fca5a5; }
[data-tema="escuro"] .bi tbody.nf-itens tr td { background: #172030; }
[data-tema="escuro"] .bi .btn-primario { background: #2f63d4; border-color: #2f63d4; }
[data-tema="escuro"] .bi .ibtn[aria-expanded="true"],
[data-tema="escuro"] .bi .pros-n,
[data-tema="escuro"] .bi .chat-usuario,
[data-tema="escuro"] .bi .cal-dia-cab.hoje .dd,
[data-tema="escuro"] .bi .cal-guia-hora,
[data-tema="escuro"] .bi .cal-mes-dia.hoje .cal-mes-num { background: #2f63d4; border-color: #2f63d4; }

/* Dica dos gráficos do Comercial: no escuro, a cor do cartão a fundia com
   o gráfico. Fica um degrau acima, com borda e sombra marcadas. */
[data-tema="escuro"] .bi .tipbox { background: #222b3c; border-color: #3a4660; box-shadow: 0 8px 24px -6px rgba(0,0,0,.6); }
[data-tema="escuro"] .bi .bi-regioes-menu { box-shadow: 0 12px 28px rgba(0,0,0,.45); }
/* Barra de filtros (bi.css § Barra de filtros) no escuro. */
[data-tema="escuro"] .bi { --flBorda: #2b364a; --flBordaHover: #3a4660; --flTexto: #e6ebf3; }

/* Busca de páginas do menu (js/menu.js): o campo é transparente dentro da
   caixa; a caixa é que tem o fundo. */
[data-tema="escuro"] .menu-busca input,
[data-tema="escuro"] .menu-busca input:focus { background: transparent; border: 0; box-shadow: none; }
[data-tema="escuro"] .menu-modulo-lista { box-shadow: 0 12px 28px rgba(0,0,0,.45); }

/* Acompanhamento de leads (redesign) */
[data-tema="escuro"] .bi .lk-col-compra { background: #15261d; }
[data-tema="escuro"] .bi .lk-col-fora_area { background: #2a2416; }
[data-tema="escuro"] .bi .lk-rol-cursor { background: #3a475c; }
[data-tema="escuro"] .bi .lk-vazio { background: transparent; }
[data-tema="escuro"] .bi .lk-prox-box.atrasada { background: #33270f; }
[data-tema="escuro"] .bi .lk-etq.erp { background: #173322; }
[data-tema="escuro"] .bi .lk-prox-box.lk-nf { background: #173322; }
[data-tema="escuro"] .lk-menu { box-shadow: 0 12px 28px rgba(0,0,0,.45); }
[data-tema="escuro"] .bi .lk-q.media { background: #3a2c10; color: #f5c46a; }
[data-tema="escuro"] .bi .lk-q.alta { background: #173322; color: #7fd6a0; }

/* Pedidos de venda (redesign) */
[data-tema="escuro"] .pv-ritmo.baixo { background: #3a2a12; color: #f5b45a; }
[data-tema="escuro"] .pv-ritmo.alto { background: #173322; color: #7fd6a0; }
[data-tema="escuro"] .pv-pop { box-shadow: 0 12px 28px rgba(0,0,0,.45); }

[data-tema="escuro"] .ds-cartao-pop { box-shadow: 0 12px 28px rgba(0,0,0,.45); }
[data-tema="escuro"] .bi .pessoa-lista { box-shadow: 0 12px 28px rgba(0,0,0,.45); }