/* ── SOMA Theme System ─────────────────────────────────────────────────────── Dark mode tokens + hardcoded-value overrides. Loaded in after inline :root styles so it wins the cascade. Applied via html[data-theme="dark"]. ─────────────────────────────────────────────────────────────────────────── */ /* ── Dark tokens ──────────────────────────────────────────────────────────── */ html[data-theme="dark"] { --c-body: oklch(11% 0.022 260); /* deep navy-black body */ --c-card: oklch(15.5% 0.028 258); /* elevated card surface */ --c-sidebar: oklch(9% 0.030 262); /* sidebar, slightly deeper */ --c-border: oklch(23% 0.020 258); /* subtle separator */ --c-text: oklch(91% 0.008 255); /* warm near-white */ --c-text-sec: oklch(62% 0.013 258); /* medium blue-gray */ --c-text-muted: oklch(44% 0.010 258); /* very muted */ --c-success: oklch(66% 0.18 162); /* readable on dark */ --c-warning: oklch(74% 0.17 78); /* readable on dark */ --c-error: oklch(62% 0.22 25); /* readable on dark */ /* --c-accent: #DD1A72 stays unchanged — magenta pops on dark */ /* Internal aliases for hardcoded-value overrides */ --_surface: oklch(18% 0.025 258); /* replaces #F8FAFC / #F1F5F9 */ --_surface-alt: oklch(20% 0.022 258); /* hover / pressed state */ --_shadow: rgba(0, 0, 0, .4); --_overlay: rgba(0, 0, 0, .55); } /* ── Base reset ───────────────────────────────────────────────────────────── */ html[data-theme="dark"] body { background: var(--c-body); color: var(--c-text); } /* ── Topbar ───────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .topbar { background: var(--c-sidebar); border-bottom-color: var(--c-accent); } html[data-theme="dark"] .tb-dot { background: var(--c-accent); } html[data-theme="dark"] .tb-logo-name strong { color: #fff; } /* ── Sidebar ──────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .sidebar { background: var(--c-sidebar); border-right-color: rgba(255,255,255,.05); } html[data-theme="dark"] .sb-row:hover, html[data-theme="dark"] .sb-row.on { background: rgba(255,255,255,.05); } html[data-theme="dark"] .sb-foot-row:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.5); } html[data-theme="dark"] .sb-user { border-top-color: rgba(255,255,255,.05); } html[data-theme="dark"] .sb-lbl { color: rgba(255,255,255,.25); } html[data-theme="dark"] .sb-chip.r { background: rgba(226,75,74,.3); color: oklch(72% 0.14 25); } html[data-theme="dark"] .sb-chip.a { background: rgba(245,158,11,.2); color: oklch(78% 0.15 78); } /* ── Panel (left analysis pane) ───────────────────────────────────────────── */ html[data-theme="dark"] .panel { background: var(--c-card); border-right-color: var(--c-border); } html[data-theme="dark"] .panel-head { border-bottom-color: var(--c-border); } html[data-theme="dark"] .panel-badge.r { background: oklch(18% 0.07 25); color: oklch(72% 0.14 25); } html[data-theme="dark"] .panel-badge.a { background: oklch(18% 0.06 78); color: oklch(78% 0.15 78); } html[data-theme="dark"] .panel-lbl { color: var(--c-text-muted); } html[data-theme="dark"] .panel-m { background: var(--_surface); border-color: var(--c-border); } html[data-theme="dark"] .panel-mv { color: var(--c-text); } html[data-theme="dark"] .panel-sugs { border-bottom-color: var(--c-border); } html[data-theme="dark"] .panel-actions { border-top-color: var(--c-border); } html[data-theme="dark"] .panel-ago { color: var(--c-text-muted); } html[data-theme="dark"] .panel-corr { color: var(--c-text-sec); } /* ── Metrics grid ─────────────────────────────────────────────────────────── */ html[data-theme="dark"] .panel-mg { background: var(--_surface); border-color: var(--c-border); } /* ── MSV block ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .panel-msv { border-bottom-color: var(--c-border); } html[data-theme="dark"] .msv-score-lbl, html[data-theme="dark"] .msv-freq, html[data-theme="dark"] .msv-empty { color: var(--c-text-muted); } html[data-theme="dark"] .msv-phase-lbl { color: var(--c-text-sec); } html[data-theme="dark"] .msv-phase-track { background: var(--c-border); } html[data-theme="dark"] .msv-badge { background: var(--_surface); border-color: var(--c-border); color: var(--c-text-sec); } /* ── Alert context cards ──────────────────────────────────────────────────── */ html[data-theme="dark"] .alert-ctx.critical { background: oklch(13% 0.04 25); border-color: oklch(22% 0.09 25); } html[data-theme="dark"] .alert-ctx.warning { background: oklch(13% 0.04 78); border-color: oklch(22% 0.08 78); } html[data-theme="dark"] .alert-ctx.positive { background: oklch(13% 0.04 155); border-color: oklch(22% 0.07 155); } html[data-theme="dark"] .alert-ctx.critical .alert-ctx-header { color: oklch(68% 0.18 25); } html[data-theme="dark"] .alert-ctx.warning .alert-ctx-header { color: oklch(74% 0.17 78); } html[data-theme="dark"] .alert-ctx.positive .alert-ctx-header { color: oklch(66% 0.18 155); } html[data-theme="dark"] .alert-ctx-msg { color: var(--c-text-sec); } html[data-theme="dark"] .alert-ctx .sug { background: var(--c-card); border-color: var(--c-border); } html[data-theme="dark"] .alert-ctx .sug:hover { background: var(--_surface-alt); border-color: oklch(35% 0.018 258); } /* ── Suggestion buttons ───────────────────────────────────────────────────── */ html[data-theme="dark"] .sug { background: var(--_surface); border-color: var(--c-border); } html[data-theme="dark"] .sug:hover { background: var(--_surface-alt); border-color: oklch(35% 0.018 258); } html[data-theme="dark"] .sug:hover .sug-txt { color: var(--c-text); } html[data-theme="dark"] .sug-txt { color: var(--c-text-sec); } html[data-theme="dark"] .sug-group-hdr { color: var(--c-text); } /* ── Tabs bar ─────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .tabs-bar { background: var(--c-card); border-bottom-color: var(--c-border); } html[data-theme="dark"] .tab-btn { color: var(--c-text-muted); } html[data-theme="dark"] .tab-btn:hover { color: var(--c-text); } html[data-theme="dark"] .tab-btn.on { color: var(--c-accent); border-bottom-color: var(--c-accent); } /* ── Chat area ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .chat-msgs { background: var(--c-body); } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) { background: var(--c-card); border-color: var(--c-border); color: var(--c-text-sec); } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) h2, html[data-theme="dark"] :is(.mbubble.soma,.dash-content) h3, html[data-theme="dark"] :is(.mbubble.soma,.dash-content) h4, html[data-theme="dark"] :is(.mbubble.soma,.dash-content) strong { color: var(--c-text); } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) table { color: var(--c-text); } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) tr:hover td { background: var(--_surface); } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) th { background: var(--_surface); color: var(--c-text-muted); border-color: var(--c-border); } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) td { border-color: var(--c-border); } /* The dashboard (renderSomaJSON) draws its dividers as INLINE border colors on and
(hardcoded light hex for light mode). Inline styles beat the stylesheet, so dark mode can't recolor them via td/th rules. Override the inline borders directly so the row/section separators stay visible on the dark card instead of vanishing or reading as harsh near-white lines. */ html[data-theme="dark"] :is(.mbubble.soma,.dash-content) [style*="border-bottom"] { border-bottom-color: rgba(255,255,255,.14) !important; } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) [style*="border-left"] { border-left-color: rgba(255,255,255,.18) !important; } /* ── TOOL-WIDE inline dark-mode sweep ───────────────────────────────────────── Every page paints JS-rendered content with hardcoded LIGHT hex (built for light mode). theme.css class rules can't reach inline styles, so this remaps the WHOLE inline palette across the app by property+value. Case-insensitive (i). Dark theme only — light mode is never touched. Surfaces↔text are paired inversions of the same hue so contrast stays correct. Saturated accent fills (magenta #DD1A72, #D97706, #059669, #0284C7, status dots, change pills text) are LEFT vivid — they read fine on dark. */ /* Neutral light surfaces → dark elevation */ html[data-theme="dark"] [style*="background:#FAFBFC" i], html[data-theme="dark"] [style*="background:#F8FAFC" i], html[data-theme="dark"] [style*="background:#F1F5F9" i], html[data-theme="dark"] [style*="background:#FAFAFA" i], html[data-theme="dark"] [style*="background:#F0F2F5" i], html[data-theme="dark"] [style*="background:#FFFFFF" i], html[data-theme="dark"] [style*="background: #fff;" i], html[data-theme="dark"] [style*="background:#fff;" i], html[data-theme="dark"] .soma-gap-card { background: var(--_surface) !important; } html[data-theme="dark"] [style*="background:#E2E8F0" i], html[data-theme="dark"] [style*="background:#CBD5E1" i] { background: var(--c-border) !important; } /* Tinted light surfaces → dark tint of the same hue */ html[data-theme="dark"] [style*="background:#FEE2E2" i], html[data-theme="dark"] [style*="background:#FEF2F2" i], html[data-theme="dark"] [style*="background:#FFF1F2" i], html[data-theme="dark"] [style*="background:#FCE7F3" i], html[data-theme="dark"] [style*="background:#FDF2F8" i] { background: rgba(220,38,38,.16) !important; } html[data-theme="dark"] [style*="background:#DCFCE7" i], html[data-theme="dark"] [style*="background:#ECFDF5" i], html[data-theme="dark"] [style*="background:#F0FDF4" i] { background: rgba(22,163,74,.16) !important; } html[data-theme="dark"] [style*="background:#FFFBEB" i], html[data-theme="dark"] [style*="background:#FEF3C7" i], html[data-theme="dark"] [style*="background:#FEF9C3" i] { background: rgba(245,158,11,.15) !important; } html[data-theme="dark"] [style*="background:#EFF6FF" i], html[data-theme="dark"] [style*="background:#F0F9FF" i], html[data-theme="dark"] [style*="background:#DBEAFE" i] { background: oklch(22% 0.045 245) !important; } html[data-theme="dark"] [style*="background:#F9F5FF" i], html[data-theme="dark"] [style*="background:#F3E8FF" i] { background: oklch(24% 0.05 300) !important; } /* Dark text → readable light (paired with the surfaces above) */ html[data-theme="dark"] [style*="color:#0F172A" i], html[data-theme="dark"] [style*="color:#78350F" i], html[data-theme="dark"] [style*="color:#1E293B" i] { color: var(--c-text) !important; } html[data-theme="dark"] [style*="color:#334155" i], html[data-theme="dark"] [style*="color:#475569" i] { color: var(--c-text-sec) !important; } html[data-theme="dark"] [style*="color:#7F1D1D" i], html[data-theme="dark"] [style*="color:#991B1B" i], html[data-theme="dark"] [style*="color:#B91C1C" i] { color: oklch(70% 0.17 25) !important; } html[data-theme="dark"] [style*="color:#14532D" i], html[data-theme="dark"] [style*="color:#166534" i], html[data-theme="dark"] [style*="color:#065F46" i], html[data-theme="dark"] [style*="color:#15803D" i] { color: oklch(72% 0.16 155) !important; } html[data-theme="dark"] [style*="color:#1E3A5F" i], html[data-theme="dark"] [style*="color:#0369A1" i], html[data-theme="dark"] [style*="color:#1E3A8A" i], html[data-theme="dark"] [style*="color:#0C4A6E" i] { color: oklch(82% 0.07 245) !important; } html[data-theme="dark"] [style*="color:#92400E" i], html[data-theme="dark"] [style*="color:#B45309" i], html[data-theme="dark"] [style*="color:#A16207" i] { color: oklch(80% 0.13 75) !important; } html[data-theme="dark"] [style*="color:#6B21A8" i], html[data-theme="dark"] [style*="color:#4A154B" i] { color: oklch(78% 0.12 300) !important; } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) a { color: oklch(68% 0.18 245); } html[data-theme="dark"] :is(.mbubble.soma,.dash-content) code { background: var(--_surface); color: var(--c-text); } html[data-theme="dark"] .mavatar.soma { background: oklch(13% 0.04 260); color: var(--c-accent); border-color: rgba(232,31,118,.25); } html[data-theme="dark"] .typing span { background: var(--c-border); } html[data-theme="dark"] .stop-btn { background: var(--c-card); border-color: var(--c-border); color: var(--c-text-muted); } html[data-theme="dark"] .stop-btn:hover { color: var(--c-text); border-color: oklch(35% 0.018 258); } html[data-theme="dark"] .empty-state { color: var(--c-text-muted); } html[data-theme="dark"] .retry-btn { background: var(--_surface); border-color: var(--c-border); color: var(--c-text-sec); } html[data-theme="dark"] .retry-row { background: oklch(14% 0.05 25); border-color: oklch(22% 0.09 25); } /* ── Chat input ───────────────────────────────────────────────────────────── */ html[data-theme="dark"] .chat-input-area { background: var(--c-card); border-top-color: var(--c-border); } html[data-theme="dark"] .chat-input-wrap { background: var(--_surface); border-color: var(--c-border); } html[data-theme="dark"] .chat-input-wrap:focus-within { border-color: oklch(35% 0.018 258); } html[data-theme="dark"] .chat-input-wrap input { color: var(--c-text); } html[data-theme="dark"] .chat-input-wrap input::placeholder { color: var(--c-text-muted); } html[data-theme="dark"] .chat-hint { color: var(--c-text-muted); } html[data-theme="dark"] .clip-btn { border-color: var(--c-border); color: var(--c-text-muted); } html[data-theme="dark"] .clip-btn:hover { background: var(--_surface); border-color: oklch(35% 0.018 258); color: var(--c-text); } html[data-theme="dark"] .clip-btn.has-file { color: var(--c-accent); border-color: var(--c-accent); } /* ── File preview chip ────────────────────────────────────────────────────── */ html[data-theme="dark"] .file-preview { background: var(--_surface); border-color: var(--c-border); color: var(--c-text-sec); } html[data-theme="dark"] .file-preview .fp-size { color: var(--c-text-muted); } /* ── Magic prompt menu ────────────────────────────────────────────────────── */ html[data-theme="dark"] .magic-btn { border-color: var(--c-border); color: var(--c-text-muted); } html[data-theme="dark"] .magic-btn:hover { background: var(--_surface); border-color: oklch(35% 0.018 258); color: var(--c-text); } html[data-theme="dark"] .magic-menu { background: var(--c-card); border-color: var(--c-border); box-shadow: 0 8px 32px var(--_shadow); } html[data-theme="dark"] .magic-head { border-bottom-color: var(--c-border); color: var(--c-text-muted); } html[data-theme="dark"] .magic-head button { color: var(--c-text-muted); } html[data-theme="dark"] .magic-head button:hover { color: var(--c-text); } html[data-theme="dark"] .magic-cat:hover { background: var(--_surface); } html[data-theme="dark"] .magic-prompt:hover { background: oklch(17% 0.04 350); color: var(--c-text); } /* ── Action buttons ───────────────────────────────────────────────────────── */ html[data-theme="dark"] .pabtn { background: var(--c-card); border-color: var(--c-border); color: var(--c-text-sec); } html[data-theme="dark"] .pabtn:hover { background: var(--_surface); border-color: oklch(35% 0.018 258); color: var(--c-text); } html[data-theme="dark"] .pabtn.primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } /* ── Dashboard tab ────────────────────────────────────────────────────────── */ html[data-theme="dark"] .dash { background: var(--c-card); } html[data-theme="dark"] .dash-empty { color: var(--c-text-muted); } /* ── Panel badges (alertas sidebar) ──────────────────────────────────────── */ html[data-theme="dark"] .sb-chip { color: var(--c-text-muted); } /* ── Confirm overlay ──────────────────────────────────────────────────────── */ html[data-theme="dark"] .confirm-overlay { background: var(--_overlay); } html[data-theme="dark"] .confirm-card { background: var(--c-card); box-shadow: 0 12px 40px var(--_shadow); } html[data-theme="dark"] .confirm-title { color: var(--c-text); } html[data-theme="dark"] .confirm-body { color: var(--c-text-sec); } html[data-theme="dark"] .confirm-cancel { background: var(--c-card); border-color: var(--c-border); color: var(--c-text-sec); } html[data-theme="dark"] .confirm-cancel:hover { border-color: oklch(35% 0.018 258); color: var(--c-text); } /* ── Insights panel (index/overview) ─────────────────────────────────────── */ html[data-theme="dark"] .insights-panel, html[data-theme="dark"] .ov-panel { background: var(--c-body); } html[data-theme="dark"] .ins-avg-lbl, html[data-theme="dark"] .ins-phase-name, html[data-theme="dark"] .ins-stat-lbl, html[data-theme="dark"] .ins-delta-domain, html[data-theme="dark"] .ins-section-lbl { color: var(--c-text-sec); } html[data-theme="dark"] .ins-phase-track { background: var(--c-border); } html[data-theme="dark"] .ins-stat { background: var(--_surface); border-color: var(--c-border); } html[data-theme="dark"] .ins-delta-item { border-bottom-color: var(--c-border); } html[data-theme="dark"] .ins-criteria-row { background: var(--c-card); border-color: var(--c-border); } html[data-theme="dark"] .ins-compare-col { background: var(--_surface); border-color: var(--c-border); } html[data-theme="dark"] .ins-compare-divider { color: var(--c-text-muted); } html[data-theme="dark"] .ins-compare-col-label { color: var(--c-text-muted); } html[data-theme="dark"] .ins-compare-phase-name { color: var(--c-text-sec); } html[data-theme="dark"] .ins-compare-phase-track { background: var(--c-border); } html[data-theme="dark"] .ins-compare-stats { background: var(--_surface); border-color: var(--c-border); } /* ── Overview / main page cards ───────────────────────────────────────────── */ html[data-theme="dark"] .acard { background: var(--c-card); border-color: var(--c-border); } html[data-theme="dark"] .acard:hover { border-color: oklch(35% 0.018 258); } html[data-theme="dark"] .ac-domain { color: var(--c-text); } html[data-theme="dark"] .ac-score-lbl, html[data-theme="dark"] .ac-meta { color: var(--c-text-muted); } html[data-theme="dark"] .ac-btn { background: var(--_surface); border-color: var(--c-border); color: var(--c-text-sec); } html[data-theme="dark"] .ac-btn:hover { background: var(--_surface-alt); color: var(--c-text); } html[data-theme="dark"] .ac-btn.p { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } /* ── Historial ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .hist-row { background: var(--c-card); border-color: var(--c-border); } html[data-theme="dark"] .hist-domain { color: var(--c-text); } html[data-theme="dark"] .hist-date, html[data-theme="dark"] .hist-meta { color: var(--c-text-muted); } /* ── Actualizaciones ──────────────────────────────────────────────────────── */ html[data-theme="dark"] .upd-card { background: var(--c-card); border-color: var(--c-border); } html[data-theme="dark"] .upd-title { color: var(--c-text); } html[data-theme="dark"] .upd-body { color: var(--c-text-sec); } html[data-theme="dark"] .upd-date { color: var(--c-text-muted); } html[data-theme="dark"] .tag { background: var(--_surface); color: var(--c-text-sec); } /* ── Configuracion ────────────────────────────────────────────────────────── */ html[data-theme="dark"] .cfg-section { background: var(--c-card); border-color: var(--c-border); } html[data-theme="dark"] .cfg-label { color: var(--c-text-sec); } html[data-theme="dark"] .cfg-input, html[data-theme="dark"] .cfg-select { background: var(--_surface); border-color: var(--c-border); color: var(--c-text); } html[data-theme="dark"] .cfg-input:focus, html[data-theme="dark"] .cfg-select:focus { border-color: oklch(35% 0.02 258); outline: 2px solid rgba(232,31,118,.25); } html[data-theme="dark"] .cfg-hint { color: var(--c-text-muted); } /* ── Login ────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .login-card { background: var(--c-card); border-color: var(--c-border); box-shadow: 0 8px 32px var(--_shadow); } html[data-theme="dark"] .login-input { background: var(--_surface); border-color: var(--c-border); color: var(--c-text); } html[data-theme="dark"] .login-input:focus { border-color: oklch(35% 0.02 258); } html[data-theme="dark"] .login-label { color: var(--c-text-sec); } /* ── Clientes page ────────────────────────────────────────────────────────── */ html[data-theme="dark"] .client-row { background: var(--c-card); border-color: var(--c-border); } html[data-theme="dark"] .client-row:hover { border-color: oklch(35% 0.018 258); } html[data-theme="dark"] .client-name { color: var(--c-text); } html[data-theme="dark"] .client-meta { color: var(--c-text-muted); } /* ── Main / .main / .page areas ──────────────────────────────────────────── */ html[data-theme="dark"] .main, html[data-theme="dark"] .page { background: var(--c-body); } /* ── Page headings ────────────────────────────────────────────────────────── */ html[data-theme="dark"] .page-title { color: var(--c-text); } html[data-theme="dark"] .page-sub, html[data-theme="dark"] .page-desc { color: var(--c-text-sec); } /* ── Scrollbars (Webkit) ──────────────────────────────────────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--c-body); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: oklch(28% 0.018 258); border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: oklch(34% 0.018 258); } /* ── Theme toggle button ──────────────────────────────────────────────────── */ .theme-toggle { width: 32px; height: 32px; border-radius: 8px; background: none; border: 1px solid rgba(255, 255, 255, .13); color: rgba(255, 255, 255, .55); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: border-color .12s, color .12s, background .12s; flex-shrink: 0; } .theme-toggle:hover { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .05); } .theme-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* ── Transition for smooth theme switching ───────────────────────────────── */ *, *::before, *::after { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } /* Exclude elements where transitions cause jank */ .chat-msgs *, .mbubble *, .typing span, [class*="animate"], .chart-container * { transition: none !important; } /* ── Page class-rule overrides (each page's own