/* ══════════════════════════════════════════════════════════════════════════════ temaEscuro.css — camada 1 do modo escuro (2026-08-11) O sistema tem 352 páginas com estilo inline e SEM global.css. 331 delas (94%) declaram as mesmas variáveis no seu próprio `:root` (--text 328×, --border 301×, --primary 254×, --bg 220×, --bg-soft 187×). Este arquivo REDECLARA essas variáveis sob `html[data-tema="escuro"]` — seletor com atributo (0,1,1) vence o `:root` da página (0,1,0) sem precisar de !important e sem tocar em nenhuma página. O que ESTE arquivo NÃO cobre: cor cravada direto na regra (#ffffff aparece 4449× fora de variável). Disso cuida o motor em /js/temaEscuro.js, que reescreve o CSSOM em runtime. Valor curado aqui SEMPRE vence o motor — a folha gerada por ele entra como primeiro filho do , antes deste arquivo. Paleta escura: preto QUENTE (hue da marca), não cinza frio genérico — a terracota #A73C21 só conversa com fundo amarronzado. Contraste conferido: texto #F2EDE9 sobre #14100F = 15.4:1 · terracota clara #E0714F = 6.3:1 (AA+). ══════════════════════════════════════════════════════════════════════════════ */ html[data-tema="escuro"] { color-scheme: dark; /* scrollbar, caret e form nativo escuros */ /* ── Superfícies (ordem de elevação preservada: página < card < flutuante) ── */ --df-esc-fundo: #14100F; --df-esc-superficie: #1E1917; --df-esc-elevado: #262020; --df-esc-borda: #362E2B; /* ── Marca clareada só o necessário pra ler sobre fundo escuro ── */ --df-esc-primaria: #E0714F; --df-esc-texto: #F2EDE9; --df-esc-texto-soft: #B3A9A3; /* ── Fundo / superfície ── */ --bg: #14100F; --bg-soft: #14100F; --bg-card: #1E1917; --bg-alt: #1E1917; --surface: #1E1917; --surface-2: #262020; --card: #1E1917; --card-bg: #1E1917; --panel: #1E1917; --branco: #1E1917; --white: #1E1917; --cinza-claro: #262020; --hover: #262020; --bg-hover: #262020; /* ── Creme legado: morreu na tela (regra sem-fundo-creme), mas variável antiga ainda existe em página não refatorada — aqui ela cai na superfície escura. ── */ --cream: #1E1917; --creme: #1E1917; --df-creme: #1E1917; --brand-creme: #1E1917; /* ── Texto ── */ --text: #F2EDE9; --text-2: #B3A9A3; --text-soft: #B3A9A3; --text-muted: #B3A9A3; --muted: #B3A9A3; --texto: #F2EDE9; --df-preto: #F2EDE9; /* 7 usos, todos como cor de texto — seguro clarear */ /* `--dark` fica de FORA de propósito: 31 usos como texto mas 18 como FUNDO (medido). Clarear transformaria card escuro em bloco claro no meio da tela — foi o que apareceu no Simulador Tributário. Deixando como está, o fundo escuro continua certo e o texto escuro é resolvido pela rede de contraste, que decide olhando o fundo REAL de cada elemento. Mesma razão pra `--white`, que é 155× fundo contra 1× texto e por isso vira superfície, não tinta. */ /* ── Bordas e linhas ── */ --border: #362E2B; --borda: #362E2B; --border-color: #362E2B; --line: #362E2B; --divider: #362E2B; /* ── Marca: fundo mantém a cor cheia (botão terracota continua terracota); o que clareia é o uso como TEXTO/ícone sobre fundo escuro. ── */ /* ── Marca: NÃO redeclarada de propósito ─────────────────────────────────── `--primary` é usada 2279× como texto MAS 1314× como FUNDO (medido). Clareá-la pintou de salmão o hero de Treinamento, SAC, Diretoria, Reembolso e Contabilidade — a tela inteira virou laranja claro. Mesma armadilha de `--primary-d`/`--primary-dark`/`--df-terracota`/`--df-vinho`: todas têm centenas de usos como fundo. Então a terracota e o vinho ficam EXATAMENTE como são. O texto que usar essas variáveis é resolvido pela rede de contraste do motor, que mede texto×fundo no DOM já pintado e só clareia quem está de fato ilegível — decisão por elemento, não por variável. Regra que vale pra próxima sessão: variável de marca com uso misto NÃO se redeclara; quem resolve é a rede. */ /* `--primary-l` é o único caso 100% fundo (101 usos, ZERO como texto): é o "primária clarinha" de faixa/realce, que no escuro tem de ser tinta escura. */ --primary-l: #33201A; --primary-pale: rgba(167,60,33,.18); /* Amarelo AMORTECIDO. `#FFC760` sólido num fundo escuro queima a vista — foi o botão "Nova solicitação" que apareceu berrante. Este âmbar mantém o matiz da marca (h≈40°) e funciona nos DOIS papéis: como fundo fica calmo, e como texto sobre o escuro dá contraste ~7:1. */ --accent: #E3A93F; --df-amarelo: #E3A93F; --df-acento: #E3A93F; --gold: #E3A93F; --amber: #E3A93F; /* Vermelho da marca SUAVIZADO. `#FF0E22` puro num hero de tela cheia vibra sobre o fundo escuro (o topo de Treinamento). Este tom mantém o matiz (h≈355°) e a função de alerta, sem queimar: como fundo fica firme, como texto continua legível (contraste ~5:1 sobre o escuro). */ --brand-red: #C4172A; --df-vermelho: #C4172A; /* ── Semânticas: fundo pastel vira tinta translúcida da própria cor ── */ --green: #34D07A; --red: #FF4757; --blue: #5AB2F5; --success-fg: #34D07A; --success-bg: rgba(52,208,122,.14); --warning-fg: #FFC760; --warning-bg: rgba(255,199,96,.14); --danger-fg: #FF4757; --danger-bg: rgba(255,71,87,.14); --green-bg: rgba(52,208,122,.14); --red-bg: rgba(255,71,87,.14); /* ── Sombra: no escuro sombra colorida some. Preto puro, mais funda. ── */ --shadow: 0 8px 24px rgba(0,0,0,.55); --card-shadow: 0 8px 24px rgba(0,0,0,.55); --card-shadow-hov: 0 10px 32px rgba(0,0,0,.68); /* ── Sidebar: já era escura no claro (vinho). No escuro desce mais um tom pra não competir com o conteúdo. ── */ --sidebar-bg: #1A0F0C; } /* Fundo do documento — página que pinta o body por regra crua é corrigida pelo motor; esta é a rede de segurança pra nenhuma tela nascer branca no boot. */ html[data-tema="escuro"], html[data-tema="escuro"] body { background-color: #14100F; color: #F2EDE9; } /* Form nativo: input/select/textarea que não declaram cor herdam do UA (branco). */ html[data-tema="escuro"] input, html[data-tema="escuro"] select, html[data-tema="escuro"] textarea { background-color: #1E1917; color: #F2EDE9; border-color: #362E2B; } html[data-tema="escuro"] input::placeholder, html[data-tema="escuro"] textarea::placeholder { color: #7E736D; } /* Autofill do Chrome pinta amarelo-claro por dentro — só o inset shadow vence. */ html[data-tema="escuro"] input:-webkit-autofill, html[data-tema="escuro"] input:-webkit-autofill:hover, html[data-tema="escuro"] input:-webkit-autofill:focus { -webkit-text-fill-color: #F2EDE9; -webkit-box-shadow: 0 0 0 1000px #1E1917 inset; caret-color: #F2EDE9; } /* Tabela zebrada / hover de linha vindos de variável já foram tratados acima; aqui só o caso do que alterna com cor crua muito clara sem variável. */ html[data-tema="escuro"] ::selection { background: rgba(224,113,79,.35); color: #FFFFFF; } /* O lockup da marca tem a palavra "Divino Fogão" em PRETO — desenhado pra fundo claro. Sobre o header escuro ele praticamente some (visto no teste, no topo do hub). `invert` sozinho resolveria o preto e estragaria o vermelho da marca (#FF0E22 vira ciano); com o hue-rotate de volta, o texto fica claro E o fogão continua vermelho. Só o lockup — ícone e foto de gente não entram. */ html[data-tema="escuro"] img[src*="logo-lockup"], html[data-tema="escuro"] img[src*="logo_oficial"] { filter: invert(1) hue-rotate(180deg) saturate(1.15); background: transparent; } /* Elemento que declara explicitamente que NÃO deve ser tematizado (ex.: preview de PDF, área que imita papel). Página nova pode marcar com data-tema-ignorar. */ html[data-tema="escuro"] [data-tema-ignorar], html[data-tema="escuro"] [data-tema-ignorar] * { background-color: #FFFFFF !important; color: #1F2933 !important; } /* ── Cabeçalho de página: fundo escuro da marca + LETRA BRANCA ──────────────── Com o amortecimento do motor, todo hero de cor cheia (terracota, vinho, vermelho) fica num tom escuro e firme. O texto em cima tem de ser branco, sempre — é o que dá o contraste alto e o mesmo desenho em todos os módulos, em vez de cada página parar num tom diferente escolhido pela rede de contraste. As classes vêm do que o sistema realmente usa (medido): page-header 64×, banner 51×, hero 48×, mais os filhos hero-title/hero-sub/hero-badge e topo. `!important` aqui é intencional: o objetivo é justamente vencer a cor que a página declarou pro tema claro. */ /* O `:not(...)` é o coração desta regra, não um detalhe: o cabeçalho carrega TAMBÉM botões e selos com fundo próprio (o "Nova solicitação" âmbar, o chip do setor). Forçar branco neles com `!important` deixava texto branco sobre fundo claro — e pior, vencia a rede de contraste, que é justamente quem sabe consertar isso. Aqui o branco vale para o TEXTO do cabeçalho (título, subtítulo, migalha) e nada mais; o que tem fundo próprio fica por conta da rede, elemento a elemento. `:not(button *)` cobre o span dentro do botão. */ html[data-tema="escuro"] :is(.hero, .page-header, .banner, .topo), html[data-tema="escuro"] :is(.hero, .page-header, .banner, .topo) *:not(button):not(a):not(button *):not(a *):not([class*="btn"]):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]):not([class*="tag"]):not([class*="btn"] *):not([class*="badge"] *) { color: #FFFFFF !important; } /* ── Botões flutuantes do sistema ───────────────────────────────────────────── O recolhedor de flutuantes (`flutuantesRecolher.js`) nasce translúcido de propósito no claro: `rgba(250,250,250,.42)` com `opacity:.55`, pra não roubar a tela do conteúdo. No escuro isso vira um disco quase invisível — vidro claro a 42% sobre #14100F fica preto, e o ícone terracota some junto. A rede de contraste não alcança: quem some é o FUNDO translúcido, não o texto. Aqui ele ganha corpo sólido e o âmbar da marca. Seletor com atributo + id vence o `