(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:#F4F6FB" i], html[data-theme="dark"] [style*="background:#E6EBF4" i], html[data-theme="dark"] [style*="background:#FAFAFA" i], html[data-theme="dark"] [style*="background:#E9EDF5" 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:#DDE3EE" i], html[data-theme="dark"] [style*="background:#C4CCDC" 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; } /* ── Extended sweep — light fills enumerated from EVERY page/tab ─────────────── Backgrounds the original sweep missed (attribution resumen/chips, plan, pérdidas, oportunidades, diagnóstico, etc.). Same hue-paired remapping. Keeps the sweep tool-wide so any tab inherits dark surfaces without per-view CSS. */ /* Neutral fills → dark elevation */ html[data-theme="dark"] [style*="background:#F1F5FB" i], html[data-theme="dark"] [style*="background:#F8FAFC" i], html[data-theme="dark"] [style*="background:#F1F5F9" i], html[data-theme="dark"] [style*="background: #F1F5FB" i], html[data-theme="dark"] [style*="background:#EEF2F8" i] { background: var(--_surface) !important; } /* Pink / magenta fills (attribution resumen) → dark pink tint */ html[data-theme="dark"] [style*="background:#FFF7FB" i], html[data-theme="dark"] [style*="background:#FFF0F6" i], html[data-theme="dark"] [style*="background:#FDE4EF" i], html[data-theme="dark"] [style*="background:#FFF1F7" i] { background: oklch(22% 0.05 350) !important; } /* Green fills → dark green tint */ html[data-theme="dark"] [style*="background:#D1FAE5" i], html[data-theme="dark"] [style*="background:#BBF7D0" i] { background: rgba(22,163,74,.16) !important; } /* Blue fills → dark blue tint */ html[data-theme="dark"] [style*="background:#E0F2FE" i], html[data-theme="dark"] [style*="background:#E0E7FF" i] { background: oklch(22% 0.045 245) !important; } /* Purple fills → dark purple tint */ html[data-theme="dark"] [style*="background:#DDD6FE" i], html[data-theme="dark"] [style*="background:#EDE9FE" i] { background: oklch(24% 0.05 300) !important; } /* Light tint BORDERS → dark-tint border of the same hue (kills harsh light hairlines on tinted cards). The vivid metric-card borders (#F87171/#4ADE80) are NOT listed, so they stay bold. Matches the "solid #HEX" inline form. */ html[data-theme="dark"] [style*="solid #F3D4E4" i], html[data-theme="dark"] [style*="solid #F4C4DA" i], html[data-theme="dark"] [style*="solid #F9D1E6" i], html[data-theme="dark"] [style*="solid #FBCFE8" i], html[data-theme="dark"] [style*="solid #FDE4EF" i], html[data-theme="dark"] [style*="solid #F9D1E6" i] { border-color: rgba(232,31,118,.34) !important; } html[data-theme="dark"] [style*="solid #FECACA" i], html[data-theme="dark"] [style*="solid #FCA5A5" i], html[data-theme="dark"] [style*="solid #FECDD3" i] { border-color: rgba(220,38,38,.38) !important; } html[data-theme="dark"] [style*="solid #FDE68A" i], html[data-theme="dark"] [style*="solid #FCD34D" i] { border-color: rgba(245,158,11,.38) !important; } html[data-theme="dark"] [style*="solid #86EFAC" i], html[data-theme="dark"] [style*="solid #A7F3D0" i], html[data-theme="dark"] [style*="solid #BBF7D0" i] { border-color: rgba(22,163,74,.38) !important; } html[data-theme="dark"] [style*="solid #BAE6FD" i], html[data-theme="dark"] [style*="solid #BFDBFE" i], html[data-theme="dark"] [style*="solid #93C5FD" i] { border-color: rgba(59,130,246,.40) !important; } html[data-theme="dark"] [style*="solid #E8DEF8" i], html[data-theme="dark"] [style*="solid #DDD6FE" i] { border-color: rgba(139,92,246,.40) !important; } html[data-theme="dark"] [style*="solid #D8D4C8" i] { border-color: var(--c-border) !important; } html[data-theme="dark"] [style*="solid #DDE3EE" i], html[data-theme="dark"] [style*="dashed #DDE3EE" i], html[data-theme="dark"] [style*="dashed #C4CCDC" i] { border-color: var(--c-border) !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], html[data-theme="dark"] [style*="color:#586273" 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], html[data-theme="dark"] [style*="color:#E5484D" 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], html[data-theme="dark"] [style*="color:#16A34A" i], html[data-theme="dark"] [style*="color:#0E9F6E" 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], html[data-theme="dark"] [style*="color:#2563EB" 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], html[data-theme="dark"] [style*="color:#B8730A" 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: var(--_ring); } 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: var(--_ring); } 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: var(--_ring); 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: var(--_ring); 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: var(--_ring); 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: var(--_ring); 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: var(--_ring); } 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: var(--_ring); 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: var(--_ring); } 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: var(--_ring); } 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; } /* ── Feedback en el toque, no en el clic (apple-design §1 — Respuesta) ─────── Antes NINGÚN botón de SOMA tenía :active — solo :hover, así que el toque no se sentía hasta que el clic terminaba. No se toca la propiedad `transition` (cada página ya declara la suya para border/background/color por botón; una regla nueva de `transition` en el mismo selector la reemplazaría entera, no se suma). Por eso esto es solo el cambio de `transform` en :active — se ve al instante en el press y el navegador lo revierte sin animación al soltar, que sigue siendo "responde en el momento", no un salto tardío al final. */ button:not(:disabled):active, [role="button"]:active, a.btn-primary:active, a.btn-google:active, a.nav-cta:active { transform: scale(.97); } /* ── Dropdowns anclados al trigger (apple-design §7/§12 — Consistencia espacial + materializar) ─────────────────────────────────────────────── .avatar-menu, .ac-menu, .sb-client-menu y #clientSwitchMenu (cephalopoda) eran display:none→block instantáneo — sin relación visual con el botón que los abre. .magic-menu ya resolvía esto con un scale/fade anclado (@keyframes magicIn en cada página); esto lleva el mismo tratamiento a los otros cuatro, con transform-origin real por posición de cada uno (avatar-menu/ac-menu cuelgan a la derecha del trigger → top right; sb-client-menu es full-width bajo el botón → top center; #clientSwitchMenu cuelga a la izquierda → top left). No se toca `display`, solo se agrega `animation` a la clase .open ya existente — mismo patrón no-destructivo que el fix de :active de arriba. */ @keyframes soma-menu-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } .avatar-menu.open, .ac-menu.open { animation: soma-menu-in .13s cubic-bezier(.2, .8, .2, 1); transform-origin: top right; } .sb-client-menu.open { animation: soma-menu-in .13s cubic-bezier(.2, .8, .2, 1); transform-origin: top center; } #clientSwitchMenu.open { animation: soma-menu-in .13s cubic-bezier(.2, .8, .2, 1); transform-origin: top left; } /* cephalopoda.html no declara su propio @media(prefers-reduced-motion) — a diferencia de las otras 11 páginas — así que #clientSwitchMenu necesita este override aquí para no ignorar la preferencia del usuario. */ @media (prefers-reduced-motion: reduce) { .avatar-menu.open, .ac-menu.open, .sb-client-menu.open, #clientSwitchMenu.open { animation: none; } } /* ── Modales/diálogos: materializar en vez de aparecer de golpe (apple-design §12 — Materializar, no solo desvanecer) ──────────────────── .slack-dialog/.ctx-dialog/.confirm-overlay se crean vía JS ya completos (dialog.className='...'; document.body.appendChild(...)) y se destruyen con .remove() al cerrar — no hay clase .open que alternar, así que la animación va directo en la clase base: corre sola en cuanto el elemento entra al árbol de render, sin JS nuevo, y no vuelve a correr porque el elemento no se reutiliza (se crea de cero cada vez que se abre). #settingsOverlay (drawer de configuración del cliente, analisis.html) es la excepción: vive siempre en el DOM y se alterna con style.display inline ('none'→'block'). Un elemento con display:none no está en el árbol de render, así que volver a 'block' technically re-entra al árbol — el navegador reinicia cualquier animation definida en él, igual que una inserción nueva. Es un drawer de borde derecho (position:absolute;right:0), no un modal centrado, así que entra con slide horizontal (mismo origen espacial que su posición final — apple-design §7), no con scale. */ @keyframes soma-scrim-in { from { opacity: 0 } to { opacity: 1 } } @keyframes soma-card-in { from { opacity: 0; transform: scale(.95) } to { opacity: 1; transform: scale(1) } } @keyframes soma-drawer-in { from { transform: translateX(100%) } to { transform: translateX(0) } } .slack-dialog, .ctx-dialog, .confirm-overlay, #settingsOverlay { animation: soma-scrim-in .15s ease-out; } .slack-box, .ctx-box, .confirm-card { animation: soma-card-in .18s cubic-bezier(.2, .8, .2, 1); } #settingsOverlay > div { animation: soma-drawer-in .22s cubic-bezier(.2, .8, .2, 1); } @media (prefers-reduced-motion: reduce) { .slack-dialog, .ctx-dialog, .confirm-overlay, .slack-box, .ctx-box, .confirm-card, #settingsOverlay, #settingsOverlay > div { animation: none; } } /* ── Page class-rule overrides (each page's own