/* ============================================================================
Estándar One — Design System (modo claro / oscuro)
Tokens vía CSS variables. data-theme="light|dark" en .
Paleta: GRAFITO NEUTRO + acento TEAL (elegante, sin el azul genérico).
============================================================================ */
:root {
/* Acento teal (reemplaza el azul institucional). Ramp usado por botones. */
--brand: #0d8276;
--brand-600: #0a685e;
--brand-400: #35a99b;
--brand-300: #8fcfc6;
--radius: 14px;
--radius-sm: 9px;
--radius-lg: 20px;
--gap: 16px;
/* Escala de espaciado (ritmo consistente en toda la app) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-8: 48px;
/* Escala tipográfica */
--fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px;
--fs-5: 20px; --fs-6: 26px; --fs-7: 34px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow-lg: 0 2px 6px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.10);
--shadow-hover: 0 4px 12px rgba(0,0,0,.07), 0 22px 48px rgba(0,0,0,.12);
/* Anillo de foco accesible (reemplaza el outline por defecto del navegador) */
--ring: color-mix(in srgb, var(--primary) 42%, transparent);
--trans: .18s ease;
/* Glassmorphism: intensidad del desenfoque tras los paneles translúcidos.
Bajado de 18px a 12px: menos costo de GPU con casi el mismo efecto. */
--glass-blur: 12px;
--glass-sat: 150%;
}
/* ── Tema claro (grises neutros, sin tinte azul) ── */
:root, [data-theme="light"] {
--bg: #f5f6f7;
--surface: #ffffff;
--surface-2: #eef0f2;
--border: #e3e5e9;
--text: #17191d;
--text-2: #545a63;
--muted: #8a919b;
--primary: var(--brand);
--primary-hover: var(--brand-600);
--primary-contrast: #ffffff;
--success: #157f54; --success-bg: #e6f3ec;
--warning: #a86a00; --warning-bg: #f7eeda;
--danger: #c03a3a; --danger-bg: #f8e7e7;
--info: #0c7583; --info-bg: #e1f0f2;
--neutral-bg:#eceef1;
/* Superficies de vidrio (translúcidas, con desenfoque de fondo) */
--glass: rgba(255,255,255,.68);
--glass-2: rgba(255,255,255,.52);
--glass-border: rgba(255,255,255,.75);
--glass-hi: rgba(255,255,255,.95);
/* Manchas de color del fondo aurora en movimiento */
--aurora-1: rgba(13,130,118,.22);
--aurora-2: rgba(53,169,155,.18);
--aurora-3: rgba(120,140,170,.16);
}
/* ── Tema oscuro (grafito neutro de alto contraste, sin navy) ── */
[data-theme="dark"] {
--bg: #0c0d10;
--surface: #15171b;
--surface-2: #1c1f25;
--border: #2b2f37;
--text: #e9ebee;
--text-2: #aab0b9;
--muted: #757c86;
--primary: #17b0a0; /* teal brillante para acentos */
--primary-hover: #22c4b2;
--primary-contrast: #06231f; /* texto oscuro sobre el teal brillante */
--success: #35d3a0; --success-bg: #0f2a23;
--warning: #f0b429; --warning-bg: #2b2410;
--danger: #f27272; --danger-bg: #2b1616;
--info: #2bbccd; --info-bg: #0e2a31;
--neutral-bg:#20242c;
--shadow: 0 1px 3px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
--shadow-hover: 0 6px 16px rgba(0,0,0,.55), 0 24px 56px rgba(0,0,0,.55);
--glass: rgba(20,22,27,.60);
--glass-2: rgba(28,31,37,.46);
--glass-border: rgba(255,255,255,.09);
--glass-hi: rgba(255,255,255,.14);
--aurora-1: rgba(23,176,160,.22);
--aurora-2: rgba(13,130,118,.20);
--aurora-3: rgba(46,70,110,.28);
}
/* ── Variantes del modo oscuro (docs/73 fase 4) ───────────────────────────────
`data-variante` en (lo pone theme.js). Sólo redefinen los tokens de fondo,
superficie, borde y texto: el color de marca lo sigue derivando temas.js, así que
cualquier variante funciona con cualquier color de acento. En modo claro no aplican. */
/* Negro puro: en pantallas OLED el píxel apagado no consume. Pensado para el teléfono. */
[data-theme="dark"][data-variante="negro"] {
--bg: #000000;
--surface: #0b0b0d;
--surface-2: #131316;
--border: #26262b;
--glass: rgba(10,10,12,.66);
--glass-2: rgba(18,18,21,.50);
--glass-border: rgba(255,255,255,.08);
}
/* Cálido: grises con una pizca de marrón. De noche cansa menos que el grafito frío. */
[data-theme="dark"][data-variante="calido"] {
--bg: #14100d;
--surface: #1d1814;
--surface-2: #251f19;
--border: #3a3128;
--text: #efe8e0;
--text-2: #bfb3a5;
--muted: #8b8072;
--glass: rgba(29,24,20,.62);
--glass-2: rgba(37,31,25,.48);
--glass-border: rgba(255,240,220,.10);
}
/* Alto contraste: fondo negro, texto blanco puro y bordes marcados (accesibilidad).
El vidrio se vuelve casi opaco: la translucidez es lo que baja la legibilidad. */
[data-theme="dark"][data-variante="contraste"] {
--bg: #000000;
--surface: #0d0d0d;
--surface-2: #171717;
--border: #6a6a6a;
--text: #ffffff;
--text-2: #e2e2e2;
--muted: #b0b0b0;
--glass: rgba(10,10,10,.95);
--glass-2: rgba(23,23,23,.92);
--glass-border: rgba(255,255,255,.34);
}
[data-theme="dark"][data-variante="contraste"] .card,
[data-theme="dark"][data-variante="contraste"] .table-wrap { border-width: 2px; }
/* ── Decoraciones de temática (docs/73 fase 4) ────────────────────────────────
Van SIEMPRE detrás del contenido (z-index -1) y sin capturar el mouse: no se ponen
nunca encima de una tabla, un importe ni un formulario. Se apagan solas con
`prefers-reduced-motion` y en modo ligero, que es donde molestarían o costarían GPU. */
[data-decoracion]::after {
content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
/* Nieve: tres capas de puntos cayendo a distinta velocidad. Sin imágenes ni JS. */
[data-decoracion="nieve"]::after {
background-image:
radial-gradient(2.5px 2.5px at 20% 10%, rgba(255,255,255,.85), transparent),
radial-gradient(2px 2px at 65% 25%, rgba(255,255,255,.70), transparent),
radial-gradient(1.6px 1.6px at 40% 60%, rgba(255,255,255,.60), transparent),
radial-gradient(2.2px 2.2px at 85% 75%, rgba(255,255,255,.75), transparent),
radial-gradient(1.8px 1.8px at 10% 85%, rgba(255,255,255,.65), transparent);
background-size: 340px 340px, 280px 280px, 400px 400px, 320px 320px, 360px 360px;
animation: nevar 14s linear infinite;
opacity: .55;
}
@keyframes nevar { from { background-position: 0 -340px, 0 -280px, 0 -400px, 0 -320px, 0 -360px; }
to { background-position: 0 340px, 0 280px, 0 400px, 0 320px, 0 360px; } }
/* En modo claro la nieve blanca no se ve: se oscurece apenas para que exista. */
:root:not([data-theme="dark"])[data-decoracion="nieve"]::after { filter: invert(1) brightness(.55); opacity: .28; }
/* Telaraña: dos esquinas fijas, sin animación (Halloween no necesita movimiento). */
[data-decoracion="telarana"]::after {
background-image:
repeating-radial-gradient(circle at 0 0, transparent 0 26px, color-mix(in srgb, var(--acento, #5b2c83) 30%, transparent) 26px 27px),
repeating-radial-gradient(circle at 100% 0, transparent 0 26px, color-mix(in srgb, var(--acento, #5b2c83) 30%, transparent) 26px 27px);
background-size: 240px 240px, 240px 240px;
background-position: top left, top right;
background-repeat: no-repeat;
opacity: .5;
}
/* Accesibilidad y rendimiento mandan sobre lo decorativo. */
@media (prefers-reduced-motion: reduce) { [data-decoracion]::after { animation: none; } }
:root[data-perf="ligero"] [data-decoracion]::after,
[data-perf="ligero"][data-decoracion]::after { display: none; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
-webkit-font-smoothing: antialiased; transition: background var(--trans), color var(--trans);
}
/* Fondo aurora: manchas de color grandes que se desplazan lentamente detrás del vidrio. */
body::before {
content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
background:
radial-gradient(38% 38% at 18% 22%, var(--aurora-1), transparent 62%),
radial-gradient(34% 34% at 82% 16%, var(--aurora-2), transparent 62%),
radial-gradient(46% 46% at 72% 82%, var(--aurora-3), transparent 64%),
radial-gradient(30% 30% at 40% 60%, var(--aurora-2), transparent 60%);
/* Aurora ESTÁTICA: el gradiente se rasteriza una sola vez. Antes se animaba en
bucle infinito con blur(48px) => la GPU repintaba una capa gigante 60fps para
siempre (el motivo #1 del ventilador). Ahora no cuesta nada en reposo. */
filter: blur(48px) saturate(120%);
}
/* ── Modo ligero (data-perf="ligero" en ): apaga los desenfoques que cargan
la GPU. Se autodetecta en equipos modestos; se puede forzar desde Configuración. ── */
:root[data-perf="ligero"] body::before { display: none; } /* sin aurora */
:root[data-perf="ligero"] *,
:root[data-perf="ligero"] *::before,
:root[data-perf="ligero"] *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Sin el desenfoque detrás, los paneles de vidrio se hacen más opacos para seguir legibles. */
:root[data-perf="ligero"]:not([data-theme="dark"]) {
--glass: rgba(255,255,255,.94); --glass-2: rgba(255,255,255,.88); --glass-hi: #fff;
}
:root[data-perf="ligero"][data-theme="dark"] {
--glass: rgba(20,22,27,.95); --glass-2: rgba(28,31,37,.9);
}
/* ── Navegador SIN soporte de desenfoque de fondo ──────────────────────────────
Mismo criterio que el modo ligero: si no hay desenfoque detrás, el vidrio translúcido
deja ver el fondo aurora a través del texto y se vuelve difícil de leer. Se opaca.
(Antes esto no existía y esos navegadores mostraban paneles semitransparentes sin blur.) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root:not([data-theme="dark"]) {
--glass: rgba(255,255,255,.94); --glass-2: rgba(255,255,255,.88); --glass-hi: #fff;
}
:root[data-theme="dark"] {
--glass: rgba(20,22,27,.95); --glass-2: rgba(28,31,37,.9);
}
}
a { color: var(--primary); text-decoration: none; }
/* Jerarquía tipográfica: tamaños y tracking diferenciados (el "tracking" negativo
en los títulos grandes es lo que da el aire de producto cuidado, no genérico). */
h1,h2,h3,h4 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; color: var(--text); }
h1 { font-size: clamp(22px, 2.2vw, 27px); letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: var(--fs-5); letter-spacing: -.015em; }
h3 { font-size: var(--fs-4); letter-spacing: -.01em; font-weight: 650; }
h4 { font-size: var(--fs-3); font-weight: 650; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ── Layout app: sidebar + main ── */
/* Alturas: `dvh` es la altura VISIBLE de verdad. En Safari de iPhone `100vh` incluye la barra
de direcciones (que aparece y desaparece al hacer scroll), así que el layout queda más alto
que la pantalla y el último ítem del menú queda tapado. Se deja `vh` primero como respaldo
para navegadores que no entienden `dvh`: el que sí lo entiende pisa la línea anterior. */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; min-height: 100dvh;
transition: grid-template-columns var(--trans); }
/* Sidebar colapsable en desktop: los módulos ocupan la pantalla completa
y el logo pasa a la topbar para seguir siempre visible. */
.app.collapsed { grid-template-columns: 0 1fr; }
.app.collapsed .sidebar { width: 0; min-width: 0; padding: 0; border-right: none; overflow: hidden; }
.topbar-logo { height: 34px; width: auto; display: none; transition: filter var(--trans); }
.app.collapsed .topbar-logo { display: block; }
[data-theme="dark"] .topbar-logo { filter: invert(1) brightness(1.9) grayscale(1); }
/* La marca del producto (BRAND.logoProducto) NO se invierte: ya sigue el tema por
dentro con var(--primary) / var(--primary-contrast). El filter de arriba existe
para los logos monocromáticos que suben las organizaciones; aplicado a un
recuadro verde lo deja magenta. */
.topbar-logo-producto { display: none; height: auto; }
.app.collapsed .topbar-logo-producto { display: flex; align-items: center; }
[data-theme="dark"] .topbar-logo-producto { filter: none; }
.sidebar {
background: var(--glass); border-right: 1px solid var(--glass-border);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
display: flex; flex-direction: column; padding: 14px 12px; gap: 4px;
position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
/* Zona segura de abajo: en iPhone sin botón físico, la raya de gestos se come el último ítem. */
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 8px 8px 16px; }
.sidebar .brand img { height: 34px; width: auto; }
.sidebar .brand b { font-size: 15px; }
/* Logo monocromático: en dark mode se invierte a claro para contrastar con el grafito.
Alcanza SÓLO a los (los logos que suben las organizaciones). La marca del
producto es un