/* =========================================================== Global-VZLA · Plataforma Web — TOKENS COMPARTIDOS ----------------------------------------------------------- Única fuente de verdad de color, espaciado, tipografía, radios y elevación para TODAS las herramientas (hub, Control de Activos, Conversion Lab, Ads-Lab, Presell-Lab, Scout). REGLA DURA: nunca un color fijo en un componente. Siempre var(--token). Un color escrito a mano solo puede estar bien en UN tema; en el otro rompe, y nadie se entera hasta que lo ve un usuario. Ver shared/DESIGN.md. El tema se controla con data-theme en : (sin atributo) ó [data-theme="light"] → claro [data-theme="dark"] → oscuro [data-theme="auto"] → sigue al SO shared/theme.js fija data-theme; un inline script en el lo aplica temprano para evitar parpadeo. ⭐ CÓMO ESTÁ ARMADO ESTE ARCHIVO (leer antes de tocarlo) ----------------------------------------------------------- El tema oscuro tiene que aplicarse en DOS situaciones que en CSS plano no pueden compartir un bloque: `[data-theme="dark"]`, y `[data-theme="auto"]` dentro de un @media. Antes eso obligaba a escribir la paleta oscura dos veces, y ya se desincronizó: dos tokens quedaron con el valor del tema claro en modo auto. Por eso los VALORES viven una sola vez, en §1, con prefijo `--l-` (claro) y `--d-` (oscuro). Los bloques de tema solo ASIGNAN. Si cambiás un color, cambia en los dos lados solo. Y si agregás un token nuevo y te olvidás de una asignación, el token queda vacío (visible al instante) en vez de heredar el color del otro tema (invisible hasta que alguien mira la pantalla). =========================================================== */ /* =========================================================== 1 · PALETAS — los valores, declarados UNA sola vez =========================================================== */ :root{ /* ---------- Claro: "Acero frío" ---------- Rediseñado 2026-08-09. El anterior era casi blanco sobre blanco (fondo #F3F5FB, tarjetas #FFFFFF, bordes #E6EAF2): las superficies no se distinguían y el borde se perdía, así que la pantalla se leía como una hoja plana. Acá el fondo baja a un gris azulado, la tarjeta blanca se despega y el borde se ve. Indigo y cian se oscurecen: el #4F46E5 y el #22D3EE de la marca están calibrados para brillar sobre grafito, y sobre blanco el cian claro es ilegible. La marca no cambia; cambia qué tono de la marca se usa según sobre qué se apoya. */ --l-bg:#EEF1F7; --l-bg-2:#F6F8FC; --l-sidebar:#FFFFFF; --l-surface:#FFFFFF; --l-surface-2:#F4F6FB; --l-surface-3:#E9EDF6; --l-border:#D3DAE8; --l-border-2:#B9C3D6; --l-text:#0D1526; /* 16.1:1 sobre el fondo */ --l-text-2:#4A5568; /* 6.6:1 */ --l-text-3:#5E6A7D; /* 4.8:1 */ --l-accent:#4338CA; /* relleno sólido; con texto blanco encima da 7.9:1 */ --l-accent-text:#4338CA; /* el mismo, porque sobre blanco ya es legible */ --l-accent-2:#4F46E5; --l-accent-soft:rgba(67,56,202,.10); --l-accent-line:rgba(67,56,202,.30); --l-cyan:#0B6480; --l-cyan-soft:rgba(11,100,128,.10); --l-cyan-line:rgba(11,100,128,.30); /* Tres gradientes, tres usos. Ver la nota en el bloque oscuro. */ --l-grad:linear-gradient(135deg,#4338CA 0%,#0B6480 100%); --l-grad-solid:linear-gradient(135deg,#4338CA 0%,#0B6480 100%); --l-grad-text:linear-gradient(135deg,#4338CA 0%,#0B6480 100%); --l-danger-solid:#B91C1C; /* blanco encima: 6.5:1 */ /* ⚠️ Los estados están más oscuros de lo que parece necesario porque el uso más exigente es el chip: el color SOBRE su propio fondo tenue. Ahí el fondo tira hacia el mismo tono y el contraste cae ~0.7 puntos. Medido: con el verde un escalón más claro, el chip daba 3.79:1. */ --l-success:#147136; --l-success-soft:rgba(20,113,54,.12); --l-success-line:rgba(20,113,54,.32); --l-warning:#9A4708; --l-warning-soft:rgba(154,71,8,.12); --l-warning-line:rgba(154,71,8,.32); --l-danger:#B91C1C; --l-danger-soft:rgba(185,28,28,.10); --l-danger-line:rgba(185,28,28,.30); --l-shadow-sm:0 1px 2px rgba(15,23,42,.06); --l-shadow:0 1px 2px rgba(15,23,42,.05), 0 2px 6px rgba(15,23,42,.06); --l-shadow-lg:0 16px 40px -16px rgba(15,23,42,.24); --l-shadow-pop:0 20px 48px -18px rgba(15,23,42,.30); --l-ring:0 0 0 3px rgba(79,70,229,.28); --l-chart-grid:rgba(15,23,42,.08); /* ---------- Oscuro: la identidad original del hub ---------- Se conserva el carácter (grafito profundo, indigo insignia, cian eléctrico). Lo único corregido es --text-3, que sobre el fondo daba 3.0:1 y se usa en etiquetas de tabla y pies de tarjeta. */ --d-bg:#0B0E14; --d-bg-2:#0E1320; --d-sidebar:#0B0F18; --d-surface:#161D2B; --d-surface-2:#1B2436; --d-surface-3:#232C40; --d-border:rgba(255,255,255,.09); --d-border-2:rgba(255,255,255,.16); --d-text:#EEF2FB; --d-text-2:#98A2B8; /* 7.5:1 sobre el fondo */ --d-text-3:#8A95AD; /* 6.4:1 */ --d-accent:#4F46E5; /* relleno sólido; con texto blanco encima da 6.3:1 */ /* ⚠️ El indigo insignia como TEXTO sobre una tarjeta oscura da 2.68:1: ilegible. Para texto va el indigo claro de la misma familia (5.7:1 sobre tarjeta). Es el mismo color de marca un escalón más claro, porque sobre grafito hay que aclarar igual que sobre blanco hay que oscurecer. */ --d-accent-text:#93A2FB; /* un escalón más claro que #818CF8, que sobre el fondo indigo tenue del chip y del menú activo se quedaba en 4.34:1 */ --d-accent-2:#6366F1; --d-accent-soft:rgba(99,102,241,.16); --d-accent-line:rgba(99,102,241,.42); --d-cyan:#22D3EE; --d-cyan-soft:rgba(34,211,238,.14); --d-cyan-line:rgba(34,211,238,.38); /* ⭐ TRES gradientes, porque el gradiente de marca se usa para tres cosas distintas y una sola versión no puede servir a las tres. --grad decoración SIN texto encima (barras, puntos, filos). Es el indigo→cian eléctrico de la identidad. --grad-solid relleno CON texto blanco encima (avatar). El cian eléctrico con blanco encima da 1.81:1 y las iniciales desaparecen: acá los extremos son un escalón más profundos (6.3:1 y 5.4:1). --grad-text el gradiente ES el texto (background-clip:text). Necesita lo contrario: extremos CLAROS, porque se apoya sobre el fondo grafito. */ --d-grad:linear-gradient(135deg,#6366F1 0%,#22D3EE 100%); --d-grad-solid:linear-gradient(135deg,#4F46E5 0%,#0E7490 100%); --d-grad-text:linear-gradient(135deg,#818CF8 0%,#22D3EE 100%); --d-danger-solid:#D42B2B; /* blanco encima: 5.0:1 */ --d-success:#34D399; --d-success-soft:rgba(52,211,153,.14); --d-success-line:rgba(52,211,153,.38); --d-warning:#FBBF24; --d-warning-soft:rgba(251,191,36,.15); --d-warning-line:rgba(251,191,36,.40); --d-danger:#F87171; --d-danger-soft:rgba(248,113,113,.15); --d-danger-line:rgba(248,113,113,.40); --d-shadow-sm:0 1px 2px rgba(0,0,0,.35); --d-shadow:0 1px 2px rgba(0,0,0,.4); --d-shadow-lg:0 24px 50px -20px rgba(0,0,0,.7); --d-shadow-pop:0 26px 56px -20px rgba(0,0,0,.78); --d-ring:0 0 0 3px rgba(99,102,241,.40); --d-chart-grid:rgba(255,255,255,.07); /* ---------- Sin tema: iguales en claro y oscuro ---------- */ /* Tipografía */ --font-display:'Space Grotesk', system-ui, sans-serif; /* títulos, números grandes */ --font-body:'Sora', system-ui, sans-serif; /* cuerpo, UI, formularios */ --font-mono:'JetBrains Mono', ui-monospace, monospace; /* datos, ids, etiquetas */ /* Escala tipográfica. Antes convivían 13px, 13.5px, 12.5px, 11.5px y 14.5px sin criterio: la letra "casi igual" entre dos pantallas se lee como descuido, no como matiz. */ --fs-2xs:10px; /* etiquetas mono en mayúscula */ --fs-xs:11px; /* pies, contadores */ --fs-sm:12px; /* datos de tabla, chips */ --fs-base:13px; /* texto de UI por defecto */ --fs-md:14px; /* cuerpo, campos de formulario */ --fs-lg:16px; /* subtítulos */ --fs-xl:20px; /* títulos de sección */ --fs-2xl:26px; /* números de KPI */ --fs-3xl:34px; /* saludo del hub, cifra protagonista */ --lh-tight:1.2; --lh:1.5; --lh-loose:1.65; /* párrafos largos: reportes, leyendas */ /* Espaciado, escala de 4. Un solo ritmo para toda la plataforma: si un espacio no está acá, casi siempre fue elegido a ojo. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; /* Radios */ --r-xs:6px; /* chip, contador */ --r-sm:8px; /* botón chico, celda editable */ --r-md:10px; /* botón, campo, ícono-botón */ --r-lg:14px; /* tarjeta */ --r-xl:18px; /* modal, panel grande */ --r-full:999px; /* Altura de controles. Un botón y un campo que van uno al lado del otro tienen que medir lo mismo; antes cada herramienta elegía la suya y la barra superior quedaba dispareja. */ --h-sm:32px; --h-md:38px; /* estándar: botones y campos de la barra superior */ --h-lg:46px; /* formularios grandes: login, alta */ /* Movimiento */ --t-fast:.12s; --t:.18s; --t-slow:.28s; --ease:cubic-bezier(.2,.7,.2,1); /* Capas. Se declaran acá para que ninguna herramienta invente un z-index y termine tapando algo. El ORDEN es lo que importa. ⚠️ El aviso flotante va ARRIBA del modal a propósito: uno disparado al guardar un formulario antes quedaba tapado justo cuando más falta hacía. */ --z-rail:30; /* riel/sidebar */ --z-topbar:20; /* barra superior pegajosa */ --z-imp:60; /* cartel "estás en el ambiente de un cliente" */ --z-modal:100; /* modal + su fondo */ --z-pop:140; /* calendario, menú desplegable sobre un modal */ --z-tip:200; /* globo de ayuda: flota sobre todo */ --z-toast:300; /* aviso: nada lo tapa */ /* Texto que va ENCIMA de un fondo sólido de marca o de estado. Blanco en los dos temas, porque el relleno es oscuro en los dos. Mata los `color:#fff` escritos a mano, que en tema claro pintaban blanco sobre superficies casi blancas. */ --on-accent:#FFFFFF; --on-solid:#FFFFFF; } /* =========================================================== 2 · ASIGNACIÓN — tema CLARO (base / default) =========================================================== */ :root, :root[data-theme="light"]{ --bg:var(--l-bg); --bg-2:var(--l-bg-2); --sidebar:var(--l-sidebar); --surface:var(--l-surface); --surface-2:var(--l-surface-2); --surface-3:var(--l-surface-3); --border:var(--l-border); --border-2:var(--l-border-2); --text:var(--l-text); --text-2:var(--l-text-2); --text-muted:var(--l-text-2); --text-3:var(--l-text-3); --accent:var(--l-accent); --accent-text:var(--l-accent-text); --accent-2:var(--l-accent-2); --accent-soft:var(--l-accent-soft); --accent-line:var(--l-accent-line); --cyan:var(--l-cyan); --cyan-soft:var(--l-cyan-soft); --cyan-line:var(--l-cyan-line); --grad:var(--l-grad); --grad-solid:var(--l-grad-solid); --grad-text:var(--l-grad-text); --success:var(--l-success); --success-soft:var(--l-success-soft); --success-line:var(--l-success-line); --warning:var(--l-warning); --warning-soft:var(--l-warning-soft); --warning-line:var(--l-warning-line); --danger:var(--l-danger); --danger-soft:var(--l-danger-soft); --danger-line:var(--l-danger-line); --danger-solid:var(--l-danger-solid); --info:var(--l-cyan); --info-soft:var(--l-cyan-soft); --info-line:var(--l-cyan-line); /* Alias históricos: los usan las 6 herramientas. No borrar. */ --green:var(--l-success); --green-soft:var(--l-success-soft); --amber:var(--l-warning); --amber-soft:var(--l-warning-soft); --red:var(--l-danger); --red-soft:var(--l-danger-soft); --shadow-sm:var(--l-shadow-sm); --shadow:var(--l-shadow); --shadow-lg:var(--l-shadow-lg); --shadow-pop:var(--l-shadow-pop); --ring:var(--l-ring); --chart-grid:var(--l-chart-grid); color-scheme:light; } /* =========================================================== 3 · ASIGNACIÓN — tema OSCURO =========================================================== */ :root[data-theme="dark"]{ --bg:var(--d-bg); --bg-2:var(--d-bg-2); --sidebar:var(--d-sidebar); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3); --border:var(--d-border); --border-2:var(--d-border-2); --text:var(--d-text); --text-2:var(--d-text-2); --text-muted:var(--d-text-2); --text-3:var(--d-text-3); --accent:var(--d-accent); --accent-text:var(--d-accent-text); --accent-2:var(--d-accent-2); --accent-soft:var(--d-accent-soft); --accent-line:var(--d-accent-line); --cyan:var(--d-cyan); --cyan-soft:var(--d-cyan-soft); --cyan-line:var(--d-cyan-line); --grad:var(--d-grad); --grad-solid:var(--d-grad-solid); --grad-text:var(--d-grad-text); --success:var(--d-success); --success-soft:var(--d-success-soft); --success-line:var(--d-success-line); --warning:var(--d-warning); --warning-soft:var(--d-warning-soft); --warning-line:var(--d-warning-line); --danger:var(--d-danger); --danger-soft:var(--d-danger-soft); --danger-line:var(--d-danger-line); --danger-solid:var(--d-danger-solid); --info:var(--d-cyan); --info-soft:var(--d-cyan-soft); --info-line:var(--d-cyan-line); --green:var(--d-success); --green-soft:var(--d-success-soft); --amber:var(--d-warning); --amber-soft:var(--d-warning-soft); --red:var(--d-danger); --red-soft:var(--d-danger-soft); --shadow-sm:var(--d-shadow-sm); --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg); --shadow-pop:var(--d-shadow-pop); --ring:var(--d-ring); --chart-grid:var(--d-chart-grid); color-scheme:dark; } /* =========================================================== 4 · ASIGNACIÓN — AUTO, cuando el sistema operativo está oscuro ----------------------------------------------------------- Repite las asignaciones del §3 (en CSS plano dos selectores no pueden compartir un cuerpo, y este vive dentro de un @media). Lo que NO se repite son los valores: los dos leen las mismas variables `--d-*`, así que cambiar un color se propaga solo. Si agregás un token, agregalo en §2, §3 y §4. =========================================================== */ @media (prefers-color-scheme: dark){ :root[data-theme="auto"]{ --bg:var(--d-bg); --bg-2:var(--d-bg-2); --sidebar:var(--d-sidebar); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3); --border:var(--d-border); --border-2:var(--d-border-2); --text:var(--d-text); --text-2:var(--d-text-2); --text-muted:var(--d-text-2); --text-3:var(--d-text-3); --accent:var(--d-accent); --accent-text:var(--d-accent-text); --accent-2:var(--d-accent-2); --accent-soft:var(--d-accent-soft); --accent-line:var(--d-accent-line); --cyan:var(--d-cyan); --cyan-soft:var(--d-cyan-soft); --cyan-line:var(--d-cyan-line); --grad:var(--d-grad); --grad-solid:var(--d-grad-solid); --grad-text:var(--d-grad-text); --success:var(--d-success); --success-soft:var(--d-success-soft); --success-line:var(--d-success-line); --warning:var(--d-warning); --warning-soft:var(--d-warning-soft); --warning-line:var(--d-warning-line); --danger:var(--d-danger); --danger-soft:var(--d-danger-soft); --danger-line:var(--d-danger-line); --danger-solid:var(--d-danger-solid); --info:var(--d-cyan); --info-soft:var(--d-cyan-soft); --info-line:var(--d-cyan-line); --green:var(--d-success); --green-soft:var(--d-success-soft); --amber:var(--d-warning); --amber-soft:var(--d-warning-soft); --red:var(--d-danger); --red-soft:var(--d-danger-soft); --shadow-sm:var(--d-shadow-sm); --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg); --shadow-pop:var(--d-shadow-pop); --ring:var(--d-ring); --chart-grid:var(--d-chart-grid); color-scheme:dark; } }