/* ============================================================
   Sistema Facilita — TEMA (dark/light) · contrato compartilhado
   Tokens copiados da referencia aprovada
   ("Referencia Gerencial (Claude Design)\painel-gerencial").
   Consumido por: login, escolha (dev-server) e painel, admin (dev-admin).
   Aplicacao do tema: data-theme no <html>, via assets/js/tema.js.
   A TV (public\tv\) NAO usa este arquivo — fica dark fixa.
   ============================================================ */

/* ============================================================
   ESCURO — "puxado para o preto", família do Pipedrive escuro
   (decisão do Hayã, 15/09/2026; planta: _central\fase-ux\01-moldura-kanban-barra.md §4)

   ANTES era NAVY (fundo #070c24, superfície #0b1334): a cor da marca pintava a
   CHAPA inteira. Agora a chapa é neutra (preto azulado) e o navy/âmbar voltam a
   ser o que sempre deveriam ter sido — ACENTO. Medido no Pipe escuro do cliente
   (`capturas\kanban.png`): fundo #0e1017 · superfícies #1e2029/#2a2c35 ·
   texto #e2e2e4 · texto-2 #898b90.

   A ESCADA DE ELEVAÇÃO (no escuro sobe CLAREANDO — três degraus, opacos):
     --bg-0  #0f1116  chapa: corpo da página, board do Kanban
     --bg-1  #1a1c23  superfície-1: topbar, barra do módulo, bandeja da coluna
     --pop-bg #242731 superfície-2: card, popover, tooltip, modal

   🔴 --card é OPACO agora (era rgba(255,255,255,.035)). Translúcido não é
   superfície: o valor final dependia do que estivesse atrás, e era exatamente o
   "véu" que `telas\funil.css` teve de contornar publicando --fn-card-bg. Com a
   escada opaca, quem consome --card cai no degrau 1 em qualquer contexto.

   Contraste: TODOS os pares texto×superfície desta tabela foram medidos pela
   fórmula WCAG 2.x contra os três fundos acima; o pior par é --ink-3 sobre
   --pop-bg, 5,66:1 (piso AA 4,5). Cores de UI (âmbar, navy claro, good) contra
   piso 3:1, pior caso 6,98:1. Tabela completa em `_central\fase-ux\13-tema-r1.md`.
   ============================================================ */
[data-theme="dark"]{
  /* T1 (onda 7, 16/09): faz <select>, date picker e scrollbar NATIVOS do
     navegador seguirem o tema — sem isso eles abrem CLAROS mesmo com o resto
     da tela escuro (achado da foto `ficha-r6-composer-escuro`, 07-tema-suites
     -e-restos-barra.md §1 T1). O <html> carrega data-theme (assets/js/tema.js:48),
     e este seletor casa com ele — mesmo raciocínio de especificidade do bloco
     `:root[data-theme="dark"]` logo abaixo. Compatível com o color-scheme LOCAL
     que `vendidos.css:96` já declara em `.vd-cab .fn-campo`: local vence por
     especificidade dentro do próprio campo; fora dele, vale este daqui. */
  color-scheme: dark;
  --bg-0:#0f1116; --bg-1:#1a1c23;
  --card:#1a1c23;   /* 🔴 opaco = superfície-1 (era véu translúcido) */
  --card-hover-border: rgba(255,255,255,.22);
  /* hairline TRANSLÚCIDO de propósito: a planta pede o tom #2c2f39, que é o que
     12% de branco resolve sobre --bg-0 (#2c2e32). Fixá-lo em hex mataria a linha
     sobre a superfície-2 — #2c2f39 sobre #242731 dá 1,12:1, invisível. */
  --hair: rgba(255,255,255,.12); --hair-strong: rgba(255,255,255,.20);
  --ink-0:#f5f6f8; --ink-1:#e6e6e8; --ink-2:#b7bac2; --ink-3:#9aa0a9;
  --track-bg: rgba(255,255,255,.07);
  --grid-line: rgba(255,255,255,.03);
  --blob-opacity:.26;   /* chapa neutra: os blobs âmbar/laranja rendem mais, então pesam menos */
  --topbar-bg: rgba(15,17,22,.72);
  --pop-bg:#242731;   /* superfície-2: popover/tooltip/card do Kanban */
  --card-shadow: none;
  --card-sheen: rgba(255,255,255,.10);
  --glow-a: 0 0 0 1px rgba(248,176,0,.4), 0 0 28px -4px rgba(248,176,0,.55);
  --glow-o: 0 0 0 1px rgba(240,138,36,.4), 0 0 28px -4px rgba(240,138,36,.5);
  /* Acentos da Facilita — âmbar INTACTO (é a marca e a ação primária). O navy
     puro #073B73 não existe no escuro: sobre chapa preta ele é quase invisível,
     então entra clareado (#8fb4e6) nos links/chips. Laranja e terracota sobem um
     degrau pelo mesmo motivo do navy — os valores antigos (#E06A05/#C26A4D)
     passavam 3:1 mas reprovavam como TEXTO sobre a superfície-2 (4,42 e 3,88). */
  --c-amber:#F8B000; --c-amber-2:#FFC53D; --c-orange:#F08A24; --c-terra:#E0A18A; --c-navy:#8fb4e6; --c-gray:#9aa0a9;
  --rowhover: rgba(255,255,255,.055);
  --ghost-bg: rgba(255,255,255,.07); --ghost-ink:#f5f6f8;
  --good:#5fe0a0; --good-bg:rgba(95,224,160,.14);
  --bad:#ff8585; --bad-bg:rgba(255,133,133,.14);
  --bad-ink:#ff8585;   /* texto de erro: no dark = --bad (8,04:1 sobre a chapa) */
  --top-row-bg: linear-gradient(90deg, rgba(248,176,0,.10), rgba(248,176,0,.02));
  --top-row-border: rgba(248,176,0,.25);
  /* T2 (onda 7, 16/09): token de texto NEUTRO para o sujeito de "SISTEMA" das
     notificações (ex.: "Pela regra X:", "Pela roleta:"), para separá-lo do
     sujeito PESSOA por COR, não só por peso. Aqui no escuro o problema não foi
     medido (origem ux-notif-3, 66 §9, é só do tema claro) — declarado igual a
     --ink-1 para o token não ficar indefinido no escuro caso o dono de
     notificacoes.css o use nos dois temas; ele NÃO precisa mudar de valor aqui
     a menos que uma medição futura peça. Dono de uso: notificacoes.css (NÃO
     editado por mim — fora do meu território). */
  --ink-sistema:#e6e6e8;

  /* ============================================================
     TOKENS DE HOVER DE BOTÃO — item do Hayã (16/09, 16:20): no escuro, o
     botão "+ Negócio" (e "todos os outros que têm essa função") ficava
     ILEGÍVEL ao passar o mouse. CAUSA MEDIDA (não suposta), com foto e
     computed style: `funil.css:181` — `.fn-btn:hover { background:
     var(--bg-1); }` — tem a MESMA especificidade (0,2,0) de
     `.fn-btn-forte:hover` (funil.css:197), e como ESTA não redefine
     `background`, a propriedade cai para `.fn-btn:hover` em QUALQUER botão
     `.fn-btn-forte` (usado em 20 pontos de 7 telas: atividades, bolsão,
     ficha, funil, lixeira, notificações, tipos-atividade — grep completo no
     relatório). Fundo vira `--bg-1` (#1a1c23, quase preto) mas o TEXTO
     continua `--crm-marca-ink` (#071038, azul-marinho pensado para
     contrastar com ÂMBAR) — dois tons escuros sobre escuro, texto
     desaparece. Fotografado: `capturas-crm\o7tema-BUG-mais-negocio-hover-
     escuro.png` e `...-marcar-vendido-hover-escuro.png`.
     No CLARO o mesmo bug de especificidade existe, mas passa despercebido
     porque `--bg-1` no claro é branco (bom contraste com o texto escuro) —
     só o ESCURO produz o apagão. Há ainda CINCO pares análogos noutras telas
     (`.aut-btn-primario:hover`, `.cmp-btn-primario:hover`,
     `.etq-btn-primario:hover`, `.mot-btn-primario:hover`,
     `.emp-btn-primario:hover`) que JÁ fazem
     `background: var(--crm-marca-forte)` no próprio hover — a REGRESSÃO é
     só em `.fn-btn-forte:hover`, que ficou incompleto.
     Consumidos por: `funil.css` (pedido nominal — NÃO editado por mim, fora
     do meu território; ver relatório §10 para o arquivo:linha exato). */
  --btn-primario-hover-bg: var(--c-amber-2);   /* #FFC53D no escuro — MAIS claro/vivo que o repouso (#F8B000), reforça "interativo" */
  --btn-primario-hover-fg: #071038;            /* = --crm-marca-ink (shell.css); replicado aqui p/ tema.css ficar autossuficiente */
  --btn-secundario-hover-bg: var(--bg-1);      /* comportamento ATUAL do .fn-btn:hover — mantido, só nomeado */
  --btn-ghost-hover-bg: var(--rowhover);       /* comportamento ATUAL do .crm-btn-fantasma:hover — mantido, só nomeado */
  --btn-perigo-hover-bg: var(--bg-0);          /* comportamento ATUAL do botão Descartar — já legível, só nomeado */
  --btn-perigo-hover-fg: var(--c-terra);
}
[data-theme="light"]{
  color-scheme: light;   /* T1 — ver comentário no bloco [data-theme="dark"] acima */
  --bg-0:#f7f4ee; --bg-1:#ffffff;
  --card:#ffffff;
  --card-hover-border:#d8d1c2;
  --hair:#e8e2d5; --hair-strong:#d8d1c2;
  --ink-0:#131c38; --ink-1:#232c46; --ink-2:#3c466a; --ink-3:#565f7e;
  --track-bg:#f0ece3;
  --grid-line: rgba(7,59,115,.05);
  --blob-opacity:.14;
  --topbar-bg: rgba(247,244,238,.8);
  --pop-bg:#ffffff;   /* fundo de popover/tooltip (aba do corretor) */
  --card-shadow: 0 1px 2px rgba(22,32,59,.04), 0 10px 28px -14px rgba(22,32,59,.16);
  --card-sheen: rgba(255,255,255,0);
  --glow-a: 0 6px 18px -6px rgba(248,176,0,.55);
  --glow-o: 0 6px 18px -6px rgba(217,100,0,.45);
  --c-amber:#F8B000; --c-amber-2:#DB9A00; --c-orange:#D96400; --c-terra:#9C4A31; --c-navy:#073B73; --c-gray:#7D7D7D;
  --rowhover:#f7f4ee;
  --ghost-bg:#ffffff; --ghost-ink:#131c38;
  --good:#1f9d63; --good-bg:rgba(31,157,99,.13);
  --bad:#cf4444; --bad-bg:rgba(226,85,85,.12);
  --bad-ink:#b3261e;   /* texto de erro: no light, vermelho escuro p/ contraste sobre bege (--bad e claro demais) */
  --top-row-bg: linear-gradient(90deg, rgba(248,176,0,.14), rgba(248,176,0,.03));
  --top-row-border: rgba(219,154,0,.45);
  /* T2 (onda 7, 16/09): --ink-2 (#3c466a) e --c-navy (#073B73) ficam
     indistinguíveis como sujeito de frase — os dois são "azul de tinta média".
     --ink-sistema é acromático (R≈G≈B, sem matiz), 8,54:1 sobre --bg-0
     (#f7f4ee; fórmula WCAG 2.x, medido em 16/09 — acima do piso AA 4,5:1 e do
     AAA 7:1). Publicado para o dono de notificacoes.css usar; NÃO uso aqui. */
  --ink-sistema:#46464c;

  /* Tokens de hover de botão — ver o comentário completo no bloco
     [data-theme="dark"] acima. No claro o bug de especificidade também
     existe, mas --bg-1 é branco e o texto continua legível — aqui os
     tokens só formalizam o comportamento atual (nenhuma mudança visual). */
  --btn-primario-hover-bg: var(--c-amber-2);   /* #DB9A00 no claro — mais escuro que o repouso (#F8B000), efeito "pressionado" */
  --btn-primario-hover-fg: #071038;
  --btn-secundario-hover-bg: var(--bg-1);
  --btn-ghost-hover-bg: var(--rowhover);
  --btn-perigo-hover-bg: var(--bg-0);
  --btn-perigo-hover-fg: var(--c-terra);
}

/* ============================================================
   SIDEBAR DO CRM no tema escuro — ajuste de TOKEN, não de tela.

   `public\crm\css\shell.css` (dono: ux-shell) pinta o rail com
   `--crm-navy`/`--crm-navy-2`, publicados lá em `:root` — ou seja, o MESMO navy
   nos dois temas. Com a chapa preta, um rail #073b73 vira o objeto mais saturado
   da tela e desmente a decisão ("escuro puxado pro preto"). Aqui o token é
   redefinido SÓ no escuro; o claro continua exatamente o navy da marca.

   Por que `:root[data-theme="dark"]` e não `[data-theme="dark"]`: tema.css é
   carregado ANTES de shell.css nas 7 páginas que o importam, e `:root` (0,1,0)
   empata com `[data-theme="dark"]` (0,1,0) — no empate ganha a ORDEM, e a ordem
   daria shell.css. `:root[data-theme="dark"]` é (0,2,0) e ganha sempre, sem
   depender de quem carrega primeiro. Mesmo truque, e mesmo motivo, do bloco
   equivalente em `telas\funil.css`.

   ⚠️ ACHADO PARA O DONO DO SHELL (medido, não suposto): `--crm-navy` serve DOIS
   papéis — o rail E o fundo do `.crm-avatar` da topbar. Com o rail preto, o
   avatar vira um círculo #262933 sobre a topbar #1a1c23: 1,17:1, ou seja, a
   FORMA some (o texto branco por cima segue em 14,5:1 e continua legível). Isso
   se conserta em shell.css, separando o token do avatar do token do rail — está
   fora do meu território e vai no relatório 13-tema-r1.md, não é conserto meu.
   ============================================================ */
:root[data-theme="dark"]{
  --crm-navy:#262933;     /* rail: um degrau acima da chapa, como a sidebar do Pipe */
  --crm-navy-2:#1c1f27;   /* fim do gradiente vertical do rail */
}

/* ---- fallback de tokens que vivem em outros arquivos (typography/spacing) ----
   Mantem o tema.css autossuficiente caso a pagina nao importe os outros CSS. */
:root{
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---- transicao suave ao trocar de tema ---- */
body{ transition: background .35s ease, color .35s ease; }

/* ============================================================
   Botao de alternancia de tema (sol/lua) — mesmo estilo da referencia
   Marcacao esperada:
   <button class="theme-toggle" onclick="alternarTema()" ...>
     <svg class="sun" ...>...</svg><svg class="moon" ...>...</svg>
   </button>
   ============================================================ */
.theme-toggle{
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--hair-strong); background:var(--ghost-bg); color:var(--ink-0);
  cursor:pointer; display:grid; place-items:center; transition:.2s; flex:none;
}
.theme-toggle:hover{ border-color:var(--c-amber); box-shadow:var(--glow-a); }
.theme-toggle svg{ width:16px; height:16px; }
[data-theme="dark"] .theme-toggle .sun{ display:block; }
[data-theme="dark"] .theme-toggle .moon{ display:none; }
[data-theme="light"] .theme-toggle .sun{ display:none; }
[data-theme="light"] .theme-toggle .moon{ display:block; }

/* ============================================================
   Logos por tema — alterna pela classe .for-dark / .for-light
   Marcacao esperada (ambos os <img> no mesmo container):
   <img class="logo for-dark"  src="/assets/img/logo-h-amber.png">
   <img class="logo for-light" src="/assets/img/logo-h-navy.png">
   ============================================================ */
.logo.for-dark, .logo.for-light{ display:none; }
[data-theme="dark"] .logo.for-dark{ display:block; }
[data-theme="light"] .logo.for-light{ display:block; }

/* ============================================================
   Barra de rolagem DISCRETA (página + scrolls internos).
   Só aplica onde este CSS é carregado: painel, admin e área do corretor.
   A TV NÃO carrega tema.css → fica com a barra padrão.

   ORDEM DO HAYÃ (16/09, onda 7 · 07-onda-filtro-topo-kanban-scroll-barra.md
   §5 S1): "não quero scrollbar chamando atenção o tempo inteiro. Normalmente
   invisível ou extremamente discreta; quando o mouse passa sobre a área,
   aparece suavemente; quando sai, volta a ficar discreta. Rolagem com mouse/
   trackpad continua normal."

   ANTES (barra de 14px SEMPRE visível, o que o Hayã chamou de horrível):
     [data-theme="dark"]  { --sb-track:#1a1c23; --sb-thumb:#F8B000; }
     [data-theme="light"] { --sb-track:#eaeef7; --sb-thumb:#073B73; }
     *{ scrollbar-width:thin; scrollbar-color:var(--sb-thumb) var(--sb-track); }
     ::-webkit-scrollbar{ width:14px; height:14px; }
     ::-webkit-scrollbar-track{ background:var(--sb-track); }
     ::-webkit-scrollbar-thumb{ background:var(--sb-thumb); border:3px solid var(--sb-track);
       border-radius:10px; background-clip:padding-box; }
     ::-webkit-scrollbar-thumb:hover{ filter:brightness(1.08); }
     ::-webkit-scrollbar-corner{ background:var(--sb-track); }

   DEPOIS: trilho SEMPRE transparente (nunca pinta); polegar fino (8px),
   TRANSPARENTE em repouso, visível só quando o CONTÊINER rolável está em
   :hover ou :focus-within — nunca "sempre aceso". A rolagem por roda/trackpad
   não muda em nada: só o desenho do polegar reage.

   ⚠️ LIMITAÇÃO DECLARADA, medida e não suposta (peça do Hayã: "quando o mouse
   passa por cima… quando sai, volta a discreta" — cobre hover; "enquanto rola"
   não tem pseudo-classe CSS própria em nenhum navegador atual, sem JS):
     - Rolar com roda/trackpad → o cursor fica sobre a área → cobre-se por
       :hover. Medido como o caso dominante de uso real.
     - Rolar por TECLADO (setas/PageDown/Espaço) com o contêiner focado →
       cobre-se por :focus-within — MAS só funciona se o contêiner (ou algo
       dentro dele) for focável; contêiner sem elemento focável dentro e sem
       tabindex não aciona :focus-within e a barra fica invisível durante essa
       rolagem. Ver inventário S2 (71-tema-scrollbars-r7.md §2) para quais
       contêineres do CRM caem nesse caso — pedido nominal ao dono de cada um,
       não consertado aqui (fora do meu território tocar telas/*.css).
     - Transição suave: `scrollbar-color` anima em Chromium/Edge modernos;
       Firefox não anima `scrollbar-color` (limitação do motor, não deste CSS)
       — a troca lá é instantânea, sem quebrar a rolagem.

   🔴 ACHADO MEDIDO (não suposto): o Chromium NÃO conclui a transição de
   `scrollbar-color` na duração declarada — é ~8-10× mais lenta que o CSS pede
   (testado sob Playwright/Chromium: `.2s` levou ~2000ms reais para chegar ao
   valor final, medido por getComputedStyle a cada 500ms; `1s` declarado ainda
   estava em 27% da transição aos 2000ms). Não é bug deste arquivo: é como o
   motor interpola essa propriedade específica. `.08s` aqui converge em
   ~150-250ms reais — a duração que dá a sensação de "aparece suavemente" que
   o Hayã pediu, sem parecer travado. Não testei se o mesmo fator vale fora do
   Chromium headless (Firefox não anima; Safari não foi medido). */
[data-theme="dark"]  { --sb-thumb: rgba(255,255,255,.28); --sb-thumb-hover: rgba(255,255,255,.42); }
[data-theme="light"] { --sb-thumb: rgba(7,59,115,.22);    --sb-thumb-hover: rgba(7,59,115,.38); }

*{
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;   /* polegar E trilho invisíveis em repouso */
  transition: scrollbar-color .08s var(--ease);
}
*:hover, *:focus-within{ scrollbar-color: var(--sb-thumb) transparent; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:transparent;              /* repouso: some de vez, não só "fraco" */
  border-radius:10px;
  background-clip:padding-box;
  transition: background-color .08s var(--ease);
}
*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb{ background: var(--sb-thumb); }
::-webkit-scrollbar-thumb:hover{ background: var(--sb-thumb-hover); }
::-webkit-scrollbar-corner{ background:transparent; }