/** * RubIA Pulse — Theme overlay (dark default + light variant) * * Estratégia: sem reescrever as classes Tailwind do codebase. Quando * está ativo, as regras abaixo sobrescrevem * as cores hardcoded mais usadas. O dark é o default — nada a sobrescrever. * * Variáveis CSS (--rubia-*) são para componentes JS (helpdot, etc) que * não passam pelas classes Tailwind. */ :root { --rubia-bg: #021a24; --rubia-card-bg: #054159; --rubia-text: #ffffff; --rubia-text-muted: rgba(255, 255, 255, 0.55); --rubia-accent: #04BFAD; --rubia-accent-ink: #021a24; --rubia-accent-soft: rgba(4, 191, 173, 0.15); --rubia-accent-border: rgba(4, 191, 173, 0.4); --rubia-border: rgba(255, 255, 255, 0.1); --rubia-overlay: rgba(255, 255, 255, 0.05); --rubia-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7); --rubia-popover-bg: #054159; --rubia-popover-text: #ffffff; } html[data-theme="light"] { --rubia-bg: #f1f5f9; --rubia-card-bg: #ffffff; --rubia-text: #0f172a; --rubia-text-muted: rgba(15, 23, 42, 0.6); --rubia-accent: #0d6e63; --rubia-accent-ink: #ffffff; --rubia-accent-soft: rgba(13, 110, 99, 0.10); --rubia-accent-border: rgba(13, 110, 99, 0.30); --rubia-border: rgba(15, 23, 42, 0.1); --rubia-overlay: rgba(15, 23, 42, 0.04); --rubia-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 20px -8px rgba(15, 23, 42, 0.12); --rubia-popover-bg: #ffffff; --rubia-popover-text: #0f172a; } /* ================================================================== * BACKGROUND e CARDS * ================================================================== */ html[data-theme="light"] body { background-color: var(--rubia-bg) !important; color: var(--rubia-text) !important; } html[data-theme="light"] .card { background: var(--rubia-card-bg) !important; border-color: var(--rubia-border) !important; } html[data-theme="light"] .bg-\[\#021a24\] { background-color: var(--rubia-bg) !important; } html[data-theme="light"] .bg-\[\#054159\] { background-color: var(--rubia-card-bg) !important; } html[data-theme="light"] .text-\[\#021a24\] { color: var(--rubia-text) !important; } html[data-theme="light"] .text-\[\#054159\] { color: var(--rubia-text) !important; } /* ================================================================== * TEXTO BRANCO → escuro com mesma opacidade aproximada * ================================================================== */ html[data-theme="light"] .text-white { color: var(--rubia-text) !important; } html[data-theme="light"] .text-white\/30, html[data-theme="light"] .text-white\/40, html[data-theme="light"] .text-white\/50 { color: rgba(15, 23, 42, 0.55) !important; } html[data-theme="light"] .text-white\/60, html[data-theme="light"] .text-white\/70 { color: rgba(15, 23, 42, 0.7) !important; } html[data-theme="light"] .text-white\/80, html[data-theme="light"] .text-white\/90 { color: rgba(15, 23, 42, 0.85) !important; } /* opacity-XX em containers com texto branco precisa ser preservado */ html[data-theme="light"] body .opacity-30 { color: rgba(15, 23, 42, 0.55); } html[data-theme="light"] body .opacity-40 { color: rgba(15, 23, 42, 0.6); } html[data-theme="light"] body .opacity-50 { color: rgba(15, 23, 42, 0.65); } html[data-theme="light"] body .opacity-60 { color: rgba(15, 23, 42, 0.7); } /* ================================================================== * TEAL accents — escurecidos para contraste WCAG AA no light * ================================================================== */ html[data-theme="light"] .text-teal-400 { color: #0d6e63 !important; } html[data-theme="light"] .text-teal-300 { color: #14b8a6 !important; } html[data-theme="light"] .text-teal-500 { color: #0d6e63 !important; } html[data-theme="light"] .bg-teal-400 { background-color: #0d6e63 !important; color: #ffffff !important; } html[data-theme="light"] .bg-teal-500 { background-color: #0d6e63 !important; } html[data-theme="light"] .bg-teal-400\/10, html[data-theme="light"] .bg-teal-400\/15, html[data-theme="light"] .bg-teal-400\/20, html[data-theme="light"] .bg-teal-400\/25, html[data-theme="light"] .bg-teal-500\/10, html[data-theme="light"] .bg-teal-500\/15 { background-color: rgba(13, 110, 99, 0.10) !important; color: #0d6e63 !important; } html[data-theme="light"] .border-teal-400 { border-color: #0d6e63 !important; } html[data-theme="light"] .border-teal-400\/20, html[data-theme="light"] .border-teal-400\/30, html[data-theme="light"] .border-teal-400\/40 { border-color: rgba(13, 110, 99, 0.3) !important; } /* ================================================================== * Overlays — brancos viram escuros, pretos ficam mais sutis * ================================================================== */ html[data-theme="light"] .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04) !important; } html[data-theme="light"] .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] .bg-white\/15 { background-color: rgba(15, 23, 42, 0.10) !important; } html[data-theme="light"] .bg-white\/20 { background-color: rgba(15, 23, 42, 0.14) !important; } html[data-theme="light"] .bg-black\/20 { background-color: rgba(15, 23, 42, 0.04) !important; } html[data-theme="light"] .bg-black\/30, html[data-theme="light"] .bg-black\/40 { background-color: rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] .border-white\/5 { border-color: rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] .border-white\/10 { border-color: rgba(15, 23, 42, 0.1) !important; } html[data-theme="light"] .border-white\/20 { border-color: rgba(15, 23, 42, 0.15) !important; } /* ================================================================== * STATUS COLORS (mantêm semântica mas ajustados pro fundo claro) * ================================================================== */ html[data-theme="light"] .text-red-400, html[data-theme="light"] .text-red-500 { color: #b91c1c !important; } html[data-theme="light"] .bg-red-500 { background-color: #dc2626 !important; } html[data-theme="light"] .bg-red-500\/15, html[data-theme="light"] .bg-red-950\/50 { background-color: rgba(185, 28, 28, 0.08) !important; } html[data-theme="light"] .border-red-500\/30, html[data-theme="light"] .border-red-500 { border-color: rgba(185, 28, 28, 0.3) !important; } html[data-theme="light"] .text-green-400, html[data-theme="light"] .text-green-500 { color: #047857 !important; } html[data-theme="light"] .bg-green-500 { background-color: #059669 !important; } html[data-theme="light"] .border-green-500 { border-color: #059669 !important; } html[data-theme="light"] .text-yellow-400, html[data-theme="light"] .text-yellow-500 { color: #a16207 !important; } html[data-theme="light"] .bg-yellow-500 { background-color: #d97706 !important; color: #ffffff !important; } html[data-theme="light"] .bg-yellow-500\/15 { background-color: rgba(180, 83, 9, 0.10) !important; } html[data-theme="light"] .text-purple-300, html[data-theme="light"] .text-purple-400 { color: #6d28d9 !important; } html[data-theme="light"] .bg-purple-500 { background-color: #7c3aed !important; color: #ffffff !important; } html[data-theme="light"] .bg-purple-500\/15, html[data-theme="light"] .bg-purple-500\/25 { background-color: rgba(124, 58, 237, 0.12) !important; color: #6d28d9 !important; } html[data-theme="light"] .text-blue-400 { color: #1d4ed8 !important; } html[data-theme="light"] .text-orange-400 { color: #c2410c !important; } html[data-theme="light"] .text-pink-400 { color: #be185d !important; } /* ================================================================== * Gradientes (onboarding card, RubIA brand) — mais sutis no light * ================================================================== */ html[data-theme="light"] .from-teal-500\/15, html[data-theme="light"] .from-teal-500\/10 { --tw-gradient-from: rgba(13, 110, 99, 0.08) var(--tw-gradient-from-position) !important; } html[data-theme="light"] .to-emerald-500\/10, html[data-theme="light"] .to-emerald-500\/5 { --tw-gradient-to: rgba(5, 150, 105, 0.06) var(--tw-gradient-to-position) !important; } /* ================================================================== * Inputs — fundo levemente cinza pra delimitar do card branco * ================================================================== */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background-color: rgba(15, 23, 42, 0.03) !important; color: var(--rubia-text) !important; border-color: rgba(15, 23, 42, 0.15) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: rgba(15, 23, 42, 0.4) !important; } /* ================================================================== * Sombras mais sutis no light * ================================================================== */ html[data-theme="light"] .shadow, html[data-theme="light"] .shadow-lg, html[data-theme="light"] .shadow-xl, html[data-theme="light"] .shadow-2xl { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px -8px rgba(15, 23, 42, 0.12) !important; } /* O glow do logo R do header não fica bem no claro */ html[data-theme="light"] .shadow-\[0_0_15px_rgba\(4\,191\,173\,0\.5\)\] { box-shadow: 0 1px 3px rgba(13, 110, 99, 0.3) !important; } /* ================================================================== * Bordas com cor explícita * ================================================================== */ html[data-theme="light"] .border-\[rgba\(4\,191\,173\,0\.2\)\] { border-color: rgba(13, 110, 99, 0.2) !important; } /* ================================================================== * Toggle switch genérico (admin-users) já cinza no dark, fica mais escuro no light * ================================================================== */ html[data-theme="light"] .toggle { background: rgba(15, 23, 42, 0.15) !important; } html[data-theme="light"] .toggle.on { background: var(--rubia-accent) !important; } /* ================================================================== * Tabela — separadores e hovers * ================================================================== */ html[data-theme="light"] tr.hover\:bg-white\/5:hover, html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(15, 23, 42, 0.03) !important; } html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.05) !important; } html[data-theme="light"] .hover\:bg-teal-400\/25:hover { background-color: rgba(13, 110, 99, 0.18) !important; } /* ================================================================== * Highlight do detrator (alerta de crise) — vermelho mais visível no light * ================================================================== */ html[data-theme="light"] .alert-pulse { border-color: #dc2626 !important; } /* ================================================================== * CLASSES INLINE recorrentes nos