/* ── Tokens de diseño compartidos por toda la app ────────────────────────────── Única fuente de verdad de colores. Se incluye primero en el de cada página, antes del CSS propio de esa página. No definir :root aquí abajo en otros archivos — solo estilos de componente. Paleta y valores tomados de los mockups de referencia (Inicio, claro/oscuro): azul (no índigo) como color primario, sidebar que sigue el tema activo en vez de quedar siempre oscuro. Mecanismo de tema: por defecto sigue la preferencia del sistema (prefers-color-scheme). Si el usuario elige manualmente con el toggle del sidebar (js/sidebar.js), se guarda en localStorage y se fuerza vía [data-theme] en , que siempre gana sobre la preferencia del sistema. */ /* Sin esto, el navegador no sabe que la página está en oscuro y renderiza controles nativos (select, inputs, scrollbar) con su tema claro por defecto, aunque el resto ya use los tokens de color correctos. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } :root { --bg: #f8fafc; --surface: #ffffff; --surface-alt: #f1f5f9; --border: #e2e8f0; --text: #0f172a; --text-sub: #64748b; --primary: #2563eb; --primary-h: #1d4ed8; --primary-soft: #eff6ff; --primary-soft-text: #2563eb; --accent: #f59e0b; --warning: #f59e0b; --danger: #ef4444; --success: #22c55e; --info: #0ea5e9; --danger-soft: #fef2f2; --danger-soft-text: #b91c1c; --danger-soft-border:#fca5a5; --success-soft: #f0fdf4; --success-soft-text: #166534; --radius: 14px; --shadow: 0 4px 6px rgba(0,0,0,.06); --shadow-hover: 0 10px 28px -8px rgba(37,99,235,.22); /* Sidebar: sigue el mismo tema, con un tono apenas distinto del contenido */ --sidebar-bg: #ffffff; --sidebar-border: #e2e8f0; --sidebar-text: #0f172a; --sidebar-text-sub: #64748b; --sidebar-hover: rgba(15,23,42,.04); --sidebar-active: #eff6ff; --sidebar-active-text: #2563eb; --bg-glow: none; } @media (prefers-color-scheme: dark) { :root { --bg: #0f1115; --surface: #1a1e27; --surface-alt: #171a21; --border: #252a36; --text: #f8fafc; --text-sub: #94a3b8; --primary: #3b82f6; --primary-h: #60a5fa; --primary-soft: rgba(59,130,246,.15); --primary-soft-text: #60a5fa; --danger-soft: #450a0a; --danger-soft-text: #fca5a5; --danger-soft-border:#7f1d1d; --success-soft: #052e16; --success-soft-text: #86efac; --shadow: 0 2px 10px rgba(0,0,0,.35); --shadow-hover: 0 10px 28px -8px rgba(59,130,246,.35); --sidebar-bg: #171a21; --sidebar-border: #252a36; --sidebar-text: #f8fafc; --sidebar-text-sub: #94a3b8; --sidebar-hover: rgba(255,255,255,.05); --sidebar-active: rgba(59,130,246,.15); --sidebar-active-text: #60a5fa; --bg-glow: radial-gradient(150px circle at 7% 68%, rgba(59,130,246,.05), transparent 60%), radial-gradient(250px circle at 76% 20%, rgba(96,165,250,.03), transparent 60%); } } /* Elección manual del usuario (toggle en el sidebar) — gana siempre */ :root[data-theme="dark"] { --bg: #0f1115; --surface: #1a1e27; --surface-alt: #171a21; --border: #252a36; --text: #f8fafc; --text-sub: #94a3b8; --primary: #3b82f6; --primary-h: #60a5fa; --primary-soft: rgba(59,130,246,.15); --primary-soft-text: #60a5fa; --danger-soft: #450a0a; --danger-soft-text: #fca5a5; --danger-soft-border:#7f1d1d; --success-soft: #052e16; --success-soft-text: #86efac; --shadow: 0 2px 10px rgba(0,0,0,.35); --shadow-hover: 0 10px 28px -8px rgba(59,130,246,.35); --sidebar-bg: #171a21; --sidebar-border: #252a36; --sidebar-text: #f8fafc; --sidebar-text-sub: #94a3b8; --sidebar-hover: rgba(255,255,255,.05); --sidebar-active: rgba(59,130,246,.15); --sidebar-active-text: #60a5fa; --bg-glow: radial-gradient(150px circle at 7% 68%, rgba(59,130,246,.05), transparent 60%), radial-gradient(250px circle at 76% 20%, rgba(96,165,250,.03), transparent 60%); } :root[data-theme="light"] { --bg: #f8fafc; --surface: #ffffff; --surface-alt: #f1f5f9; --border: #e2e8f0; --text: #0f172a; --text-sub: #64748b; --primary: #2563eb; --primary-h: #1d4ed8; --primary-soft: #eff6ff; --primary-soft-text: #2563eb; --shadow: 0 4px 6px rgba(0,0,0,.06); --shadow-hover: 0 10px 28px -8px rgba(37,99,235,.22); --sidebar-bg: #ffffff; --sidebar-border: #e2e8f0; --sidebar-text: #0f172a; --sidebar-text-sub: #64748b; --sidebar-hover: rgba(15,23,42,.04); --sidebar-active: #eff6ff; --sidebar-active-text: #2563eb; --bg-glow: none; } /* Glow ambiental sutil de fondo (visible solo en oscuro, --bg-glow es "none" en claro). Va en un ::before fijo detrás de todo — así no choca con la regla "body { background: var(--bg) }" que define cada página (el shorthand "background" resetearía background-image si estuviera en el mismo body). */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--bg-glow); }