/* ============================================================ FinSight — Tema ESCURO (v9.13.27) Aplicado quando OBJETIVO: garantir leitura plena de TODOS os rótulos, valores e dados em todas as páginas — sem nenhuma área branca/clara sobrando, sem texto preto sobre fundo escuro. ============================================================ */ html[data-theme="dark"] { /* ═══ Paleta Prospecta — ajustada para escuro ═══ */ --primary: #A78BFA; --primary-light: rgba(167,139,250,.18); --primary-dark: #8A5CFF; --primary-50: #1B1730; --primary-100: #251F3D; --primary-200: #2F2750; --primary-500: #A78BFA; --primary-600: #8A5CFF; --primary-700: #7347E0; --primary-800: #5C32C2; --primary-900: #2D1A5E; /* ═══ Funcionais ═══ */ --secondary: #34D399; --secondary-light: rgba(52,211,153,.18); --accent: #FB923C; --accent-light: rgba(251,146,60,.18); --warning: #FBBF24; --warning-light: rgba(251,191,36,.18); --danger: #F87171; --danger-light: rgba(248,113,113,.18); --purple: #A78BFA; --purple-light: rgba(167,139,250,.18); /* ═══ Backgrounds ═══ */ --bg-body: #0F172A; --bg-card: #1E293B; --bg-card-hover: #25334A; --bg-card-elevated: #283449; --bg-sidebar: #0B1220; --bg-sidebar-hover: rgba(167,139,250,.14); --bg-sidebar-active: rgba(167,139,250,.22); --bg-input: #111827; --bg-table-head: #111827; --bg-table-row-alt: #1A2436; --bg-table-row-hover:rgba(167,139,250,.10); /* ═══ Texto ═══ */ --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-sidebar: rgba(241,245,249,.70); --text-sidebar-active: #FFFFFF; /* ═══ Bordas ═══ */ --border: #334155; --border-light: #1F2937; --border-strong:#475569; /* ═══ Sombras ═══ */ --shadow: 0 1px 2px rgba(0,0,0,.40), 0 4px 16px rgba(0,0,0,.30); --shadow-md: 0 4px 24px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30); --shadow-lg: 0 12px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35); color-scheme: dark; } /* ════════════════════════════════════════════════════════════ BODY / WRAPPER ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body, html[data-theme="dark"] .main-wrapper, html[data-theme="dark"] .page-container { background: var(--bg-body); color: var(--text-primary); } html[data-theme="dark"] .topbar { background: var(--bg-sidebar) !important; border-bottom: 1px solid var(--border) !important; color: var(--text-primary) !important; } html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .last-update, html[data-theme="dark"] .topbar * { color: var(--text-primary); } html[data-theme="dark"] .last-update { color: var(--text-secondary); } /* ════════════════════════════════════════════════════════════ FORM CONTROLS — selects, inputs, textarea, buttons ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .filter-select, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html[data-theme="dark"] .filter-select option, html[data-theme="dark"] select option { background: var(--bg-input); color: var(--text-primary); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-muted); opacity: .8; } html[data-theme="dark"] button:not(.theme-toggle-btn):not(.dre-regime-btn):not(.passivo-modo-btn):not(.kpi-card):not(.seg-tab) { color: var(--text-primary); } html[data-theme="dark"] .btn, html[data-theme="dark"] button.btn { background: var(--bg-card-elevated); color: var(--text-primary); border-color: var(--border); } html[data-theme="dark"] .btn:hover { background: var(--bg-card-hover); } html[data-theme="dark"] .btn-primary { background: var(--primary); color: #0F172A; border-color: var(--primary); } html[data-theme="dark"] .btn-primary:hover { background: var(--primary-dark); color:#fff; } html[data-theme="dark"] .btn-success { background: var(--secondary); color: #0F172A; } /* ════════════════════════════════════════════════════════════ CARDS — todos os contêineres com fundo branco Cobre tanto classes (.card / .kpi-card) quanto inline styles ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .card, html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .loading-card, html[data-theme="dark"] .sync-modal-card { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-title, html[data-theme="dark"] .kpi-label, html[data-theme="dark"] .kpi-value, html[data-theme="dark"] .kpi-sub, html[data-theme="dark"] .kpi-period, html[data-theme="dark"] .page-header h1, html[data-theme="dark"] .page-header p, html[data-theme="dark"] .page-header * { color: var(--text-primary) !important; } html[data-theme="dark"] .card-header { background: transparent !important; border-bottom-color: var(--border) !important; } html[data-theme="dark"] .kpi-sub, html[data-theme="dark"] .kpi-period, html[data-theme="dark"] .page-header p { color: var(--text-secondary) !important; } /* KPI cards coloridos preservam a cor de destaque, mas ajustam fundo */ html[data-theme="dark"] .kpi-card.purple { border-top-color: #A78BFA; } html[data-theme="dark"] .kpi-card.green { border-top-color: #34D399; } html[data-theme="dark"] .kpi-card.blue { border-top-color: #60A5FA; } html[data-theme="dark"] .kpi-card.red { border-top-color: #F87171; } html[data-theme="dark"] .kpi-card.yellow { border-top-color: #FBBF24; } html[data-theme="dark"] .kpi-card.cyan { border-top-color: #22D3EE; } html[data-theme="dark"] .kpi-icon.cyan { background: rgba(34,211,238,0.18); color: #22D3EE; } html[data-theme="dark"] .kpi-card.orange { border-top-color: #FB923C; } html[data-theme="dark"] .kpi-icon { background: var(--primary-light) !important; color: var(--primary) !important; } /* ════════════════════════════════════════════════════════════ TABELAS — leitura plena ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] table { color: var(--text-primary) !important; background: var(--bg-card) !important; border-color: var(--border) !important; } html[data-theme="dark"] thead, html[data-theme="dark"] thead th, html[data-theme="dark"] table th { background: var(--bg-table-head) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html[data-theme="dark"] tbody td, html[data-theme="dark"] table td { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-light) !important; } html[data-theme="dark"] tbody tr:nth-child(even) td, html[data-theme="dark"] table tr:nth-child(even) td { background: var(--bg-table-row-alt) !important; } html[data-theme="dark"] tbody tr:hover td, html[data-theme="dark"] table tr:hover td { background: var(--bg-table-row-hover) !important; } /* Sticky tables wrapper */ html[data-theme="dark"] .fs-table-wrapper { background: var(--bg-card) !important; border-color: var(--border) !important; } html[data-theme="dark"] .fs-table-wrapper::-webkit-scrollbar-track { background: var(--bg-input); } html[data-theme="dark"] .fs-table-wrapper::-webkit-scrollbar-thumb { background: var(--primary); } /* ════════════════════════════════════════════════════════════ BADGES / TAGS ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .badge { background: var(--bg-card-elevated) !important; color: var(--text-primary) !important; border: 1px solid var(--border); } html[data-theme="dark"] .badge-blue { background: rgba(96,165,250,.20) !important; color: #93C5FD !important; border-color: rgba(96,165,250,.40); } html[data-theme="dark"] .badge-green { background: rgba(52,211,153,.20) !important; color: #6EE7B7 !important; border-color: rgba(52,211,153,.40); } html[data-theme="dark"] .badge-red { background: rgba(248,113,113,.20) !important; color: #FCA5A5 !important; border-color: rgba(248,113,113,.40); } html[data-theme="dark"] .badge-yellow { background: rgba(251,191,36,.20) !important; color: #FCD34D !important; border-color: rgba(251,191,36,.40); } html[data-theme="dark"] .badge-purple { background: rgba(167,139,250,.20) !important; color: #C4B5FD !important; border-color: rgba(167,139,250,.40); } /* ════════════════════════════════════════════════════════════ TABS / SEGMENT TABS ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .segment-tabs, html[data-theme="dark"] .seg-tabs { background: var(--bg-input); border-color: var(--border); } html[data-theme="dark"] .seg-tab { background: transparent !important; color: var(--text-secondary) !important; border-color: transparent !important; } html[data-theme="dark"] .seg-tab.active { background: var(--primary) !important; color: #0F172A !important; } html[data-theme="dark"] .seg-tab:hover:not(.active) { background: var(--bg-card-hover) !important; color: var(--text-primary) !important; } /* ════════════════════════════════════════════════════════════ MODAIS — drill-down, sync, loading ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.65) !important; } html[data-theme="dark"] .modal-overlay > div, html[data-theme="dark"] #drillModal > div, html[data-theme="dark"] .sync-modal-card, html[data-theme="dark"] .loading-card { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border); } html[data-theme="dark"] #drillTitle, html[data-theme="dark"] #drillSub, html[data-theme="dark"] #drillNav, html[data-theme="dark"] #drillKpis, html[data-theme="dark"] #drillContent, html[data-theme="dark"] #drillContent * { color: var(--text-primary); } html[data-theme="dark"] #drillNav { background: var(--bg-input) !important; border-color: var(--border) !important; } html[data-theme="dark"] #drillSub { color: var(--text-secondary) !important; } /* Trace modal */ html[data-theme="dark"] .trace-modal, html[data-theme="dark"] .trace-modal-content, html[data-theme="dark"] .trace-modal *:not(.trace-pill):not(.trace-badge) { color: var(--text-primary); } html[data-theme="dark"] .trace-modal-content { background: var(--bg-card) !important; border: 1px solid var(--border); } /* ════════════════════════════════════════════════════════════ OVERRIDES DE INLINE-STYLES — captura cards/banners gerados via JS Cobre: background:#fff/#ffffff/#f9fafb/#fafafa/#fef2f2 etc ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] [style*="background:#fff"]:not([style*="background:#fff7"]):not([style*="background:#fff8"]), html[data-theme="dark"] [style*="background: #fff"]:not([style*="background: #fff7"]):not([style*="background: #fff8"]), html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background: #ffffff"], html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background: #FFFFFF"] { background: var(--bg-card) !important; color: var(--text-primary) !important; } html[data-theme="dark"] [style*="background:#f9fafb"], html[data-theme="dark"] [style*="background: #f9fafb"], html[data-theme="dark"] [style*="background:#F9FAFB"], html[data-theme="dark"] [style*="background: #F9FAFB"], html[data-theme="dark"] [style*="background:#fafafa"], html[data-theme="dark"] [style*="background: #fafafa"], html[data-theme="dark"] [style*="background:#f5f5f5"], html[data-theme="dark"] [style*="background: #f5f5f5"], html[data-theme="dark"] [style*="background:#f3f4f6"], html[data-theme="dark"] [style*="background: #f3f4f6"] { background: var(--bg-input) !important; color: var(--text-primary) !important; } /* Banners coloridos (info/warn/error) — preservam tons mas escurecem fundo */ html[data-theme="dark"] [style*="background:#f0f9ff"], html[data-theme="dark"] [style*="background: #f0f9ff"], html[data-theme="dark"] [style*="background:#eff6ff"], html[data-theme="dark"] [style*="background: #eff6ff"] { background: rgba(96,165,250,.12) !important; color: var(--text-primary) !important; border-color: rgba(96,165,250,.35) !important; } html[data-theme="dark"] [style*="background:#fef2f2"], html[data-theme="dark"] [style*="background: #fef2f2"], html[data-theme="dark"] [style*="background:#fee2e2"], html[data-theme="dark"] [style*="background: #fee2e2"] { background: rgba(248,113,113,.14) !important; color: var(--text-primary) !important; border-color: rgba(248,113,113,.40) !important; } html[data-theme="dark"] [style*="background:#fff7ed"], html[data-theme="dark"] [style*="background: #fff7ed"], html[data-theme="dark"] [style*="background:#fffbeb"], html[data-theme="dark"] [style*="background: #fffbeb"], html[data-theme="dark"] [style*="background:#fef3c7"], html[data-theme="dark"] [style*="background: #fef3c7"] { background: rgba(251,191,36,.14) !important; color: var(--text-primary) !important; border-color: rgba(251,191,36,.40) !important; } html[data-theme="dark"] [style*="background:#ecfdf5"], html[data-theme="dark"] [style*="background: #ecfdf5"], html[data-theme="dark"] [style*="background:#d1fae5"], html[data-theme="dark"] [style*="background: #d1fae5"], html[data-theme="dark"] [style*="background:#e3fbf3"], html[data-theme="dark"] [style*="background: #e3fbf3"] { background: rgba(52,211,153,.14) !important; color: var(--text-primary) !important; border-color: rgba(52,211,153,.40) !important; } html[data-theme="dark"] [style*="background:#f0ebff"], html[data-theme="dark"] [style*="background: #f0ebff"], html[data-theme="dark"] [style*="background:#FAF7FF"], html[data-theme="dark"] [style*="background: #FAF7FF"], html[data-theme="dark"] [style*="background:#faf7ff"], html[data-theme="dark"] [style*="background: #faf7ff"] { background: rgba(167,139,250,.12) !important; color: var(--text-primary) !important; border-color: rgba(167,139,250,.40) !important; } /* Texto em cores escuras → forçar para a paleta clara */ html[data-theme="dark"] [style*="color:#1A1A2E"], html[data-theme="dark"] [style*="color: #1A1A2E"], html[data-theme="dark"] [style*="color:#1a1a2e"], html[data-theme="dark"] [style*="color: #1a1a2e"], html[data-theme="dark"] [style*="color:#111827"], html[data-theme="dark"] [style*="color: #111827"], html[data-theme="dark"] [style*="color:#1f2937"], html[data-theme="dark"] [style*="color: #1f2937"], html[data-theme="dark"] [style*="color:#374151"], html[data-theme="dark"] [style*="color: #374151"], html[data-theme="dark"] [style*="color:#0c4a6e"], html[data-theme="dark"] [style*="color: #0c4a6e"], html[data-theme="dark"] [style*="color:#7f1d1d"], html[data-theme="dark"] [style*="color: #7f1d1d"], html[data-theme="dark"] [style*="color:#9a3412"], html[data-theme="dark"] [style*="color: #9a3412"], html[data-theme="dark"] [style*="color:#713f12"], html[data-theme="dark"] [style*="color: #713f12"], html[data-theme="dark"] [style*="color:#7c2d12"], html[data-theme="dark"] [style*="color: #7c2d12"], html[data-theme="dark"] [style*="color:#000"], html[data-theme="dark"] [style*="color: #000"], html[data-theme="dark"] [style*="color:#222"], html[data-theme="dark"] [style*="color: #222"], html[data-theme="dark"] [style*="color:#333"], html[data-theme="dark"] [style*="color: #333"] { color: var(--text-primary) !important; } html[data-theme="dark"] [style*="color:#6b7280"], html[data-theme="dark"] [style*="color: #6b7280"], html[data-theme="dark"] [style*="color:#9ca3af"], html[data-theme="dark"] [style*="color: #9ca3af"], html[data-theme="dark"] [style*="color:#9CA3AF"], html[data-theme="dark"] [style*="color: #9CA3AF"], html[data-theme="dark"] [style*="color:#d1d5db"], html[data-theme="dark"] [style*="color: #d1d5db"] { color: var(--text-secondary) !important; } /* Bordas claras → bordas escuras */ html[data-theme="dark"] [style*="border:1px solid #e5e7eb"], html[data-theme="dark"] [style*="border: 1px solid #e5e7eb"], html[data-theme="dark"] [style*="border:1px solid #e5e1f0"], html[data-theme="dark"] [style*="border: 1px solid #e5e1f0"], html[data-theme="dark"] [style*="border:1px solid #f0edf7"], html[data-theme="dark"] [style*="border: 1px solid #f0edf7"], html[data-theme="dark"] [style*="border:1px solid #fecaca"], html[data-theme="dark"] [style*="border: 1px solid #fecaca"], html[data-theme="dark"] [style*="border:1px solid #bae6fd"], html[data-theme="dark"] [style*="border: 1px solid #bae6fd"], html[data-theme="dark"] [style*="border:1px solid #fed7aa"], html[data-theme="dark"] [style*="border: 1px solid #fed7aa"] { border-color: var(--border) !important; } /* ════════════════════════════════════════════════════════════ GRÁFICOS Chart.js — fundo do canvas/wrap ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .chart-wrap, html[data-theme="dark"] canvas { background: transparent !important; } /* ════════════════════════════════════════════════════════════ TOAST / NOTIFICATIONS ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .toast { background: var(--bg-card-elevated) !important; color: var(--text-primary) !important; border: 1px solid var(--border); } /* ════════════════════════════════════════════════════════════ LEITURA EXECUTIVA (cards de insights) ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .leitura-executiva, html[data-theme="dark"] .leitura-card, html[data-theme="dark"] [class*="leitura-"] { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* ════════════════════════════════════════════════════════════ DRE — linhas clicáveis ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .dre-row-click:hover { background: var(--bg-table-row-hover) !important; } /* ════════════════════════════════════════════════════════════ Botões de toggle (regime DRE / passivo) — adapta ao dark ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .dre-regime-btn, html[data-theme="dark"] .passivo-modo-btn { background: var(--bg-card-elevated) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } html[data-theme="dark"] .dre-regime-btn.active, html[data-theme="dark"] .passivo-modo-btn.active { background: var(--primary) !important; color: #0F172A !important; border-color: var(--primary) !important; } /* ════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON (na topbar) ════════════════════════════════════════════════════════════ */ .theme-toggle-btn { background: transparent; border: 1px solid var(--border); color: var(--text-primary); width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); margin-right: 8px; } .theme-toggle-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); } .theme-toggle-btn i { font-size: 14px; } /* ════════════════════════════════════════════════════════════ SCROLLBARS globais no dark ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-input); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ════════════════════════════════════════════════════════════ PROTEÇÃO FINAL — qualquer rótulo/dado dentro de #pageContainer que tenha herdado cor escura: força cor primária do tema. Aplica seletivamente a elementos sem cor inline explícita. ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] #pageContainer h1, html[data-theme="dark"] #pageContainer h2, html[data-theme="dark"] #pageContainer h3, html[data-theme="dark"] #pageContainer h4, html[data-theme="dark"] #pageContainer h5, html[data-theme="dark"] #pageContainer h6, html[data-theme="dark"] #pageContainer p, html[data-theme="dark"] #pageContainer span:not([style*="color"]), html[data-theme="dark"] #pageContainer div:not([style*="color"]), html[data-theme="dark"] #pageContainer label, html[data-theme="dark"] #pageContainer li, html[data-theme="dark"] #pageContainer dt, html[data-theme="dark"] #pageContainer dd { color: var(--text-primary); } /* Subtítulos / textos secundários (sem cor inline) */ html[data-theme="dark"] #pageContainer small, html[data-theme="dark"] #pageContainer .text-muted, html[data-theme="dark"] #pageContainer .subtle { color: var(--text-secondary); } /* Links */ html[data-theme="dark"] a:not(.nav-item):not(.btn) { color: var(--primary); } html[data-theme="dark"] a:not(.nav-item):not(.btn):hover { color: var(--primary-dark); text-decoration: underline; } /* Code / pre */ html[data-theme="dark"] code, html[data-theme="dark"] pre { background: var(--bg-input) !important; color: var(--text-primary) !important; border: 1px solid var(--border); } /* hr */ html[data-theme="dark"] hr { border-color: var(--border); } /* ════════════════════════════════════════════════════════════ v9.14.2 — DIFERENCIAÇÃO DE COR PARA VALORES POSITIVOS × NEGATIVOS ════════════════════════════════════════════════════════════ Apenas no tema ESCURO: valores monetários e percentuais ganham cores semânticas para leitura instantânea — • Positivos / entradas → verde (#34D399) • Negativos / saídas / déficit → vermelho (#F87171) • Zero → cinza neutro (mantém legibilidade) Mecânica: 1) `fmt.currency` envolve TODO valor monetário em → pinta automaticamente em qualquer página que use fmt.currency(). 2) Compatibilidade com classes legadas .pos / .neg / .warn já usadas em páginas de auditoria, conciliação e diagnóstico. 3) Páginas que historicamente representam SAÍDAS (Despesas, Custos, Passivo) recebem regra de fallback que pinta os de vermelho (saídas implícitas), preservando a leitura. ════════════════════════════════════════════════════════════ */ /* ── 1) Valores envoltos por fmt.currency (mecanismo principal) ── */ html[data-theme="dark"] .fin-value.is-pos, html[data-theme="dark"] .fin-value.is-pos *, html[data-theme="dark"] .pos, html[data-theme="dark"] .value-positive, html[data-theme="dark"] .text-pos { color: #34D399 !important; } html[data-theme="dark"] .fin-value.is-neg, html[data-theme="dark"] .fin-value.is-neg *, html[data-theme="dark"] .neg, html[data-theme="dark"] .value-negative, html[data-theme="dark"] .text-neg, html[data-theme="dark"] .saida { color: #F87171 !important; } html[data-theme="dark"] .fin-value.is-zero { color: var(--text-muted) !important; } /* ── 2) KPI cards — diferenciação por contexto ── Receita / Saldo positivo / Resultado positivo → verde claro no value Saídas / Despesas / Custos / Passivo / Necessidade → vermelho claro */ html[data-theme="dark"] .kpi-card.green .kpi-value, html[data-theme="dark"] .kpi-card.blue .kpi-value:not([style*="color"]) { color: #34D399 !important; } html[data-theme="dark"] .kpi-card.red .kpi-value { color: #F87171 !important; } /* Ícone do KPI vermelho ganha tom vermelho-suave */ html[data-theme="dark"] .kpi-icon.red { background: rgba(248,113,113,0.18) !important; color: #F87171 !important; } html[data-theme="dark"] .kpi-icon.green { background: rgba(52,211,153,0.18) !important; color: #34D399 !important; } /* ── 3) Setas de variação YoY/MoM ── */ html[data-theme="dark"] .kpi-change.up, html[data-theme="dark"] .kpi-change.positive { color: #34D399 !important; } html[data-theme="dark"] .kpi-change.down, html[data-theme="dark"] .kpi-change.negative { color: #F87171 !important; } /* ── 4) Páginas de saídas: tabelas .num em DESPESAS / CUSTOS / PASSIVO ── Estas páginas só exibem saídas — todos os valores numéricos das suas tabelas são, por natureza, saídas. Pinta o em vermelho suave (preserva legibilidade) sem afetar Receitas/Margem/DRE. */ html[data-theme="dark"] body.page-despesas td.num:not(.bold), html[data-theme="dark"] body.page-custos td.num:not(.bold), html[data-theme="dark"] body.page-passivo td.num:not(.bold) { color: #FCA5A5 !important; } html[data-theme="dark"] body.page-despesas td.num.bold, html[data-theme="dark"] body.page-custos td.num.bold, html[data-theme="dark"] body.page-passivo td.num.bold { color: #F87171 !important; } /* Receita / margem positiva → verde nos totais */ html[data-theme="dark"] body.page-receitas .total-row td.num, html[data-theme="dark"] body.page-receitas tfoot td.num { color: #34D399 !important; } /* ── 5) DRE: linhas indentadas com sinal "(-) ..." → vermelho ── No DRE, qualquer linha cujo label inicie com "(-)" representa subtração — vermelho. Linhas "(+)" ou "(=)" positivas → verde. */ html[data-theme="dark"] .dre-row[data-sign="-"], html[data-theme="dark"] .dre-row[data-sign="-"] td, html[data-theme="dark"] .dre-row.dre-saida td.num { color: #FCA5A5; } html[data-theme="dark"] .dre-row[data-sign="+"] td.num.bold, html[data-theme="dark"] .dre-row[data-sign="="] td.num.bold { color: #34D399; } /* ── 6) Saldo de Caixa: positivo verde, negativo vermelho (fluxo) ── */ html[data-theme="dark"] .saldo-positivo, html[data-theme="dark"] [data-saldo="pos"] { color: #34D399 !important; } html[data-theme="dark"] .saldo-negativo, html[data-theme="dark"] [data-saldo="neg"] { color: #F87171 !important; } /* ── 7) Badges de variação ── */ html[data-theme="dark"] .badge-success, html[data-theme="dark"] .badge.success, html[data-theme="dark"] .badge.positive { background: rgba(52,211,153,0.18) !important; color: #34D399 !important; } html[data-theme="dark"] .badge-danger, html[data-theme="dark"] .badge.danger, html[data-theme="dark"] .badge.negative { background: rgba(248,113,113,0.18) !important; color: #F87171 !important; } /* ── 8) Override de cores hardcoded comuns no light theme ── No tema light o código usa muitas vezes `style="color:#e02424"` (saídas) e `style="color:#059669"` (positivos) inline. No dark, esses tons ficam saturados demais. Suaviza via filtros para ficar alinhado à paleta do tema. */ html[data-theme="dark"] [style*="color:#e02424"], html[data-theme="dark"] [style*="color: #e02424"], html[data-theme="dark"] [style*="color:#dc2626"], html[data-theme="dark"] [style*="color: #dc2626"], html[data-theme="dark"] [style*="color:#ef4444"], html[data-theme="dark"] [style*="color: #ef4444"] { color: #F87171 !important; } html[data-theme="dark"] [style*="color:#059669"], html[data-theme="dark"] [style*="color: #059669"], html[data-theme="dark"] [style*="color:#10b981"], html[data-theme="dark"] [style*="color: #10b981"], html[data-theme="dark"] [style*="color:#0e9f6e"], html[data-theme="dark"] [style*="color: #0e9f6e"] { color: #34D399 !important; } /* ── 9) Drill-down modal: KPIs e linhas ── */ html[data-theme="dark"] #drillRoot .kpi-box[data-kind="receita"] .kpi-value, html[data-theme="dark"] #drillRoot .kpi-box[data-kind="entrada"] .kpi-value { color: #34D399 !important; } html[data-theme="dark"] #drillRoot .kpi-box[data-kind="despesa"] .kpi-value, html[data-theme="dark"] #drillRoot .kpi-box[data-kind="custo"] .kpi-value, html[data-theme="dark"] #drillRoot .kpi-box[data-kind="passivo"] .kpi-value, html[data-theme="dark"] #drillRoot .kpi-box[data-kind="saida"] .kpi-value { color: #F87171 !important; } /* ════════════════════════════════════════════════════════════ v9.14.3 — SAÍDAS EM VERMELHO (REFORÇO) ════════════════════════════════════════════════════════════ Solicitação do usuário: "Ponha os valores que são saídas vermelho". Reforço acima da v9.14.2 com seletor `.is-saida` aplicado em marcação semântica nos JS (KPIs, linhas, valores, tabelas) além do wrapping de valores negativos via fmt.currency(-Math.abs(...)). ════════════════════════════════════════════════════════════ */ /* ── A) Marca semântica .is-saida — SEMPRE vermelho ── */ html[data-theme="dark"] .is-saida, html[data-theme="dark"] .is-saida *, html[data-theme="dark"] .kpi-value.is-saida, html[data-theme="dark"] .kpi-card.is-saida .kpi-value, html[data-theme="dark"] [data-tipo="saida"] .kpi-value, html[data-theme="dark"] [data-tipo="saida"] .fin-value { color: #F87171 !important; } /* O texto do label do KPI de saída pode ficar em tom suave (não vermelho) */ html[data-theme="dark"] .kpi-card.is-saida .kpi-label, html[data-theme="dark"] .kpi-card[data-tipo="saida"] .kpi-label, html[data-theme="dark"] .kpi-card.is-saida .kpi-period, html[data-theme="dark"] .kpi-card[data-tipo="saida"] .kpi-period { color: var(--text-secondary) !important; } /* Borda/topo de KPI de saída — destaca em vermelho suave */ html[data-theme="dark"] .kpi-card.is-saida, html[data-theme="dark"] .kpi-card[data-tipo="saida"] { border-top-color: #F87171 !important; } /* ── B) Tabelas com data-tipo="saida" — todos os td.num em vermelho ── */ html[data-theme="dark"] table[data-tipo="saida"] td.num, html[data-theme="dark"] table[data-tipo="saida"] tfoot td.num, html[data-theme="dark"] table[data-tipo="saida"] .total-row td.num { color: #FCA5A5 !important; } html[data-theme="dark"] table[data-tipo="saida"] td.num.bold, html[data-theme="dark"] table[data-tipo="saida"] tfoot td.num.bold, html[data-theme="dark"] table[data-tipo="saida"] .total-row td { color: #F87171 !important; } /* ── C) Cobertura ampla por página de saída (despesas/custos/passivo) ── Inclui agora também os KPI cards (não só td.num). */ html[data-theme="dark"] body.page-despesas .kpi-card .kpi-value, html[data-theme="dark"] body.page-custos .kpi-card .kpi-value, html[data-theme="dark"] body.page-passivo .kpi-card .kpi-value { color: #F87171 !important; } /* Exceção: KPI verde (eficiência, saldo OK) deve manter verde */ html[data-theme="dark"] body.page-despesas .kpi-card.green .kpi-value, html[data-theme="dark"] body.page-custos .kpi-card.green .kpi-value, html[data-theme="dark"] body.page-passivo .kpi-card.green .kpi-value { color: #34D399 !important; } /* Exceção: KPI azul (informativo, contagem) — neutro */ html[data-theme="dark"] body.page-despesas .kpi-card.blue .kpi-value, html[data-theme="dark"] body.page-custos .kpi-card.blue .kpi-value, html[data-theme="dark"] body.page-passivo .kpi-card.blue .kpi-value { color: var(--text-primary) !important; } /* Exceção: KPI yellow (atenção/dispersão) — amarelo, não vermelho */ html[data-theme="dark"] body.page-passivo .kpi-card.yellow .kpi-value { color: #FBBF24 !important; } /* ── D) Página Fluxo: KPI "Saídas Previstas" e composição de saídas ── */ html[data-theme="dark"] body.page-fluxo .kpi-card.red .kpi-value, html[data-theme="dark"] body.page-fluxo .is-saida, html[data-theme="dark"] body.page-fluxo .is-saida * { color: #F87171 !important; } /* ── E) Reforço final: qualquer .fin-value.is-neg vence todo o resto ── Garante que mesmo quando dentro de um ou KPI verde, se o valor foi gerado com sinal negativo (fmt.currency com valor < 0), a cor vermelha prevaleça. */ html[data-theme="dark"] .fin-value.is-neg, html[data-theme="dark"] td .fin-value.is-neg, html[data-theme="dark"] .kpi-value .fin-value.is-neg, html[data-theme="dark"] .total-row .fin-value.is-neg { color: #F87171 !important; font-weight: 600; } /* ── F) DRE — reforça "(-)" em vermelho e dre-saida ── */ html[data-theme="dark"] tr.dre-row[data-sign="-"] td, html[data-theme="dark"] tr.dre-row[data-sign="-"] td.num, html[data-theme="dark"] tr.dre-row[data-sign="-"] td.bold, html[data-theme="dark"] tr.dre-saida td, html[data-theme="dark"] tr.dre-saida td.num { color: #F87171 !important; } /* ════════════════════════════════════════════════════════════ v9.14.4 — REGRA UNIVERSAL: SALDO POSITIVO=VERDE, SALDO NEG=VERMELHO ════════════════════════════════════════════════════════════ Solicitação do usuário: "O saldo se positivo fica na cor verde, se negativo vermelho. Os valores do DRE e fluxo de caixa que for positivo deixa verde o que for custo, despesa ou qualquer outra saída fique vermelho. Aplique essa formatação na aba de orçamento, passivo, margens, Despesas, custos também." Estrutura semântica universal aplicada nos JS: • data-tipo="saida" → SEMPRE vermelho (custo/despesa/imposto) • data-tipo="saldo-pos" → SEMPRE verde (entrada/lucro/saldo+) • data-tipo="saldo-neg" → SEMPRE vermelho (déficit/prejuízo/saldo-) • Classes correspondentes: .is-saida / .is-saldo-pos / .is-saldo-neg ════════════════════════════════════════════════════════════ */ /* ── A) Universal: saldo positivo → VERDE ── */ html[data-theme="dark"] .is-saldo-pos, html[data-theme="dark"] .is-saldo-pos *, html[data-theme="dark"] [data-tipo="saldo-pos"], html[data-theme="dark"] [data-tipo="saldo-pos"] .kpi-value, html[data-theme="dark"] [data-tipo="saldo-pos"] .fin-value, html[data-theme="dark"] td.is-saldo-pos, html[data-theme="dark"] tr.is-saldo-pos td, html[data-theme="dark"] tr.is-saldo-pos td.num, html[data-theme="dark"] tr.is-saldo-pos td.bold, html[data-theme="dark"] tr[data-tipo="saldo-pos"] td.num, html[data-theme="dark"] tr[data-tipo="saldo-pos"] td.bold { color: #34D399 !important; } /* ── B) Universal: saldo negativo → VERMELHO ── */ html[data-theme="dark"] .is-saldo-neg, html[data-theme="dark"] .is-saldo-neg *, html[data-theme="dark"] [data-tipo="saldo-neg"], html[data-theme="dark"] [data-tipo="saldo-neg"] .kpi-value, html[data-theme="dark"] [data-tipo="saldo-neg"] .fin-value, html[data-theme="dark"] td.is-saldo-neg, html[data-theme="dark"] tr.is-saldo-neg td, html[data-theme="dark"] tr.is-saldo-neg td.num, html[data-theme="dark"] tr.is-saldo-neg td.bold, html[data-theme="dark"] tr[data-tipo="saldo-neg"] td.num, html[data-theme="dark"] tr[data-tipo="saldo-neg"] td.bold { color: #F87171 !important; } /* ── C) Universal: saída (custo/despesa/imposto/passivo) → VERMELHO ── */ html[data-theme="dark"] td.is-saida, html[data-theme="dark"] td[data-tipo="saida"], html[data-theme="dark"] tr.is-saida td.num, html[data-theme="dark"] tr[data-tipo="saida"] td.num, html[data-theme="dark"] tr[data-tipo="saida"] td.bold { color: #F87171 !important; } /* ── D) DRE: linhas (=) e (+) com saldo dinâmico ── */ html[data-theme="dark"] tr.dre-row[data-tipo="saldo-pos"] td, html[data-theme="dark"] tr.dre-row[data-tipo="saldo-pos"] td.num, html[data-theme="dark"] tr.dre-row[data-tipo="saldo-pos"] td.bold { color: #34D399 !important; font-weight: 700; } html[data-theme="dark"] tr.dre-row[data-tipo="saldo-neg"] td, html[data-theme="dark"] tr.dre-row[data-tipo="saldo-neg"] td.num, html[data-theme="dark"] tr.dre-row[data-tipo="saldo-neg"] td.bold { color: #F87171 !important; font-weight: 700; } /* ── E) Páginas com escopo: Orçamento, Margem (sobrescreve) ── */ html[data-theme="dark"] body.page-orcamento .kpi-card[data-tipo="saida"] .kpi-value, html[data-theme="dark"] body.page-margem .kpi-card[data-tipo="saida"] .kpi-value { color: #F87171 !important; } html[data-theme="dark"] body.page-orcamento .kpi-card[data-tipo="saldo-pos"] .kpi-value, html[data-theme="dark"] body.page-margem .kpi-card[data-tipo="saldo-pos"] .kpi-value { color: #34D399 !important; } html[data-theme="dark"] body.page-orcamento .kpi-card[data-tipo="saldo-neg"] .kpi-value, html[data-theme="dark"] body.page-margem .kpi-card[data-tipo="saldo-neg"] .kpi-value { color: #F87171 !important; } /* ── F) Fluxo: linhas de saldo mensal/acumulado seguem sinal ── */ html[data-theme="dark"] body.page-fluxo tr[data-tipo="saldo-pos"] td.num, html[data-theme="dark"] body.page-fluxo tr[data-tipo="saldo-pos"] td.bold { color: #34D399 !important; } html[data-theme="dark"] body.page-fluxo tr[data-tipo="saldo-neg"] td.num, html[data-theme="dark"] body.page-fluxo tr[data-tipo="saldo-neg"] td.bold { color: #F87171 !important; } html[data-theme="dark"] body.page-fluxo tr[data-tipo="saida"] td.num { color: #FCA5A5 !important; } html[data-theme="dark"] body.page-fluxo tr[data-tipo="saida"] td.bold { color: #F87171 !important; } /* ── G) Prioridade máxima — .fin-value vence todo o resto ── */ html[data-theme="dark"] [data-tipo="saida"] .fin-value, html[data-theme="dark"] [data-tipo="saida"] .fin-value *, html[data-theme="dark"] [data-tipo="saldo-neg"].fin-value, html[data-theme="dark"] [data-tipo="saldo-neg"] .fin-value, html[data-theme="dark"] .is-saida .fin-value, html[data-theme="dark"] .is-saldo-neg .fin-value { color: #F87171 !important; } html[data-theme="dark"] [data-tipo="saldo-pos"] .fin-value, html[data-theme="dark"] .is-saldo-pos .fin-value { color: #34D399 !important; } /* ── H) Subtítulos/labels não devem ser pintados ── */ html[data-theme="dark"] [data-tipo="saida"] .kpi-label, html[data-theme="dark"] [data-tipo="saldo-pos"] .kpi-label, html[data-theme="dark"] [data-tipo="saldo-neg"] .kpi-label, html[data-theme="dark"] [data-tipo="saida"] .kpi-period, html[data-theme="dark"] [data-tipo="saldo-pos"] .kpi-period, html[data-theme="dark"] [data-tipo="saldo-neg"] .kpi-period { color: var(--text-secondary) !important; }