/* ============================================================================ theme-bridge.css — Fase 1 do alinhamento visual ao Módulo Financeiro JMonte. O portal (style.css) pinta tudo com nomes de variáveis PRÓPRIOS (--accent/--bg/--card-bg/--border/--text...). Este ficheiro re-aponta essas variáveis para os DESIGN TOKENS (tokens.css: --brand-*/--surface/--sh-*), trazendo paleta navy, fonte IBM Plex e dark mode sem reescrever componentes. Carrega DEPOIS do style.css (vence por ordem; mesma especificidade). Como usa var(--token), o dark mode flui sozinho via ; só os nomes PARTILHADOS pelos dois sistemas levam valores explícitos. Fonte da verdade do visual: /app/financeiro-portal/design-export/ NÃO @import do theme.css vivo do financeiro — consumir só o design-export. ========================================================================== */ :root{ /* ---- nomes só-do-portal → tokens (dark flui via var()) ---------------- */ --accent:var(--brand-500); --accent-dark:var(--brand-600); --accent-light:var(--brand-50); --bg:var(--surface-sunken); --card-bg:var(--surface); --gray:var(--text-muted); --gray-light:var(--border-strong); --shadow-sm:var(--sh-1); --shadow-md:var(--sh-2); --radius-sm:var(--r-sm); --radius:var(--r-md); --radius-lg:var(--r-lg); /* ---- nomes PARTILHADOS → valores explícitos (claro) do snapshot ------- usamos o tom MÉDIO (serve de preenchimento p/ .btn-success etc.); o texto sobre fundo pálido (badges/flashes) usa os -fg no refino.css p/ contraste. */ --text:#1f2d3d; --text-muted:#7b8794; --border:#e3e7ee; --success:#2e9e5b; --success-bg:#e6f6ec; --warning:#e0a106; --warning-bg:#fff7e6; --danger:#c62828; --danger-bg:#fdecec; } [data-theme="dark"]{ --text:#e8ecf4; --text-muted:#8b96ad; --border:#2a3347; --success:#3fb56e; --success-bg:#16301f; --warning:#e8b53a; --warning-bg:#332a10; --danger:#e25555; --danger-bg:#371b1d; /* fundos do portal EXPLÍCITOS no escuro (não depender da cadeia var(--surface*)); blindagem contra qualquer regra :root que apareça depois e "ganhe" por ordem. */ --bg:#10151f; --card-bg:#1a2130; } /* fonte IBM Plex vence o html,body do style.css (mesma especificidade, vem depois) */ html,body{font-family:var(--font-sans)} /* ============================================================================ PATCHES DARK — hardcodes claros do style.css que ainda não invertem na Fase 1. (limpeza completa = Fase 2, ao adotar/escopar as classes base) ========================================================================== */ [data-theme="dark"]{ /* gradiente do ecrã de login */ --login-grad-1:#10151f; --login-grad-2:#0b0f17; } .tela-login{background:linear-gradient(135deg,var(--login-grad-1,#f4f7fa) 0%,var(--login-grad-2,#dde7ef) 100%)} [data-theme="dark"] .modal-footer{background:var(--surface-2)} [data-theme="dark"] .box-senha .credencial{background:var(--surface-2)} [data-theme="dark"] .badge.inativo, [data-theme="dark"] .badge-papel.gerente, [data-theme="dark"] .badge-papel.gestor{background:var(--gray-200)} [data-theme="dark"] .badge-papel.externo{background:var(--gray-100)} /* texto que ficava escuro-sobre-escuro (flashes/alertas/badge master): forçar tom claro legível no dark */ [data-theme="dark"] .flash.sucesso{color:var(--success-fg)} [data-theme="dark"] .flash.erro{color:var(--danger-fg)} [data-theme="dark"] .flash.info, [data-theme="dark"] .alerta-info, [data-theme="dark"] .badge-papel.master{color:var(--info-fg)} /* ============================================================================ BOTÃO DE TEMA (topbar) — SVG sol/lua, sem emoji (regra de design) ========================================================================== */ #btn-tema{ margin-left:2px;background:transparent;border:1px solid var(--border);color:var(--text-muted); width:34px;height:34px;border-radius:var(--r-md);cursor:pointer;display:inline-flex; align-items:center;justify-content:center;flex-shrink:0; transition:background var(--t-fast,120ms) var(--ease,ease),border-color var(--t-fast,120ms) var(--ease,ease),color var(--t-fast,120ms) var(--ease,ease); } #btn-tema:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)} #btn-tema:active{transform:scale(0.94)} #btn-tema svg{width:18px;height:18px;display:block} #btn-tema .ico-lua{display:none} [data-theme="dark"] #btn-tema .ico-sol{display:none} [data-theme="dark"] #btn-tema .ico-lua{display:block} @media (prefers-reduced-motion: reduce){ #btn-tema{transition:none} #btn-tema:active{transform:none} }