/*===================================================== GCA — SISTEMA DE TEMAS (tokens) Duas variantes coexistindo: "claro" (padrão — valores idênticos ao que já está em produção, só extraídos pra variável, ZERO mudança visual) e "dark-premium" (nova identidade, pedida pelo usuário — trilha Stripe/Linear/Arc/Vercel: grafite profundo — nunca preto puro —, glass discreto e pouco frequente, vermelho da marca só como sotaque, nunca preenchendo grandes áreas). Alternado via atributo data-theme no (ver alternarTemaGCA(), js/app.js) e persistido em localStorage — aplicado o mais cedo possível no boot (antes do CSS terminar de carregar, se possível) pra nunca haver "flash" do tema errado. ESCOPO ATUAL: Fase 1 (2026-07-25) cobriu Sidebar, Header, Dashboard e os componentes compartilhados usados por ela (.card, .panel, .dashboard-table, .btn-secondary). Fase 2 (2026-07-29) somou Assembleias — o que trouxe junto o resto dos componentes REALMENTE compartilhados entre módulos (.status-btn/.tipo-toggle, .search-box, .periodo-filtro, .btn-primary, .modal-*, .form-group, .info-card, .pagination-*, todos em css/comissoes.css), já que Assembleias depende deles. Os módulos ainda não revisados especificamente (Comissões, Gestor, Carteira Inteligente, Configurações, Administrador) herdam esses componentes compartilhados já escuros, mas cores/textos próprios de cada tela continuam fixos (claros) até a vez de cada um. Ver changelog_v34.md pro plano de rollout completo. DECISÃO DE PERFORMANCE (confirmada com o usuário): glass (blur pesado) só nas superfícies-assinatura — Sidebar, Header, cards de KPI (--gca-fundo-card-glass + --gca-blur-glass). Painéis de gráfico e tabelas usam --gca-fundo-card-solido (opaco, sem blur) — mais leve, evita empilhar várias camadas de blur numa tela densa de dados. =====================================================*/ :root { /* ===== TEMA CLARO (padrão) ===== */ /* Fundo/header/elevado escurecidos ~1-2 tons (2026-09-11, pedido do usuário) — antes quase idênticos ao branco dos cards (#F4F6F9 vs #FFFFFF), a interface inteira lia como um bloco branco só. Mesmo raciocínio de escada já usado no Dark Premium, só que mais sutil: fundo/header no mesmo tom (evita o header virar uma "caixa" — já resolvido assim no escuro, ver bloco dark-premium abaixo) < elevado (controles) < card (continua branco puro, ver abaixo). */ --gca-fundo-app:#E7EBF0; --gca-fundo-header:#E7EBF0; --gca-fundo-card-glass:#F8F9FB; --gca-fundo-card-solido:#F8F9FB; --gca-fundo-elevado:#F2F4F7; --gca-fundo-elevado-hover:#ECECEC; /* Superfície sólida de componente flutuante (modal, popover) — diferente de --gca-fundo-elevado (translúcido, pra botão/input/ chip), porque um modal precisa de fundo opaco de verdade por cima do overlay escuro. No claro é igual ao branco de sempre. */ --gca-fundo-flutuante:#FFFFFF; --gca-borda:#E8E8E8; --gca-borda-sutil:#DDD; --gca-texto-principal:#2F3640; --gca-texto-secundario:#7F8C8D; --gca-texto-terciario:#888; --gca-sombra-card:0 10px 30px rgba(0,0,0,.08); --gca-blur-glass:none; --gca-tabela-borda:#f0f0f0; --gca-tabela-borda-sutil:#f5f5f5; /* Título de .panel-header (gráficos/tabelas) — vermelho escuro no claro (já em produção); no dark-premium vira o texto principal claro, pra não empilhar mais vermelho do que o ícone ao lado já dá (ver "nunca usar vermelho em excesso" na direção de design). */ --gca-titulo-painel:#7A1526; } :root[data-theme="dark-premium"]{ /* ===== DARK PREMIUM (2026-07-25, refinado 2026-07-29) ===== */ --gca-fundo-app:#171A1F; /* Igual ao fundo do app (2026-07-29, feedback: a faixa do header estava mais clara que o resto da tela — sobrava como uma "caixa" atrás de "Dashboard"). Sem token próprio, o header se funde com o fundo; a separação de #view continua vindo só da borda inferior (.header, ver header.css). */ --gca-fundo-header:#171A1F; /* Escada de profundidade (ajuste 2026-07-29 — feedback: "ficou muito plano e muito cinza"). Antes, card-glass (.035) e card-solido (#1D2128) compositavam pra praticamente a MESMA cor em cima do fundo (#171A1F) — cards e painéis ficavam indistinguíveis. Agora cada camada lê como uma superfície diferente: fundo (mais escuro) < painel (levemente elevado, "denso") < card de KPI (glass, assinatura, mais claro/flutua mais) < elevado (dropdown/painel flutuante, o mais claro de todos). */ --gca-fundo-card-glass:rgba(255,255,255,.06); --gca-fundo-card-solido:#1A1E24; --gca-fundo-elevado:rgba(255,255,255,.09); --gca-fundo-elevado-hover:rgba(255,255,255,.13); /* Mais clara que o painel/card — é o topo da escada de profundidade, reservada pra modal/popover (ver Assembleias, 2026-07-29). */ --gca-fundo-flutuante:#22262D; --gca-borda:rgba(255,255,255,.06); --gca-borda-sutil:rgba(255,255,255,.09); --gca-texto-principal:#F5F7FA; --gca-texto-secundario:#AEB6C2; --gca-texto-terciario:#8891A0; --gca-sombra-card:0 12px 32px rgba(0,0,0,.4); --gca-blur-glass:blur(18px); --gca-tabela-borda:rgba(255,255,255,.06); --gca-tabela-borda-sutil:rgba(255,255,255,.04); --gca-titulo-painel:var(--gca-texto-principal); } /* Transição suave ao alternar (não aplicada em cor de sombra/blur, só nas propriedades que valem a pena animar sem custo de performance). */ body, .card, .panel, #header, .header, input, select{ transition:background-color .2s ease, border-color .2s ease, color .2s ease; }