/* ============================================================ variables.css — Design Tokens (CRM Hefer) Fase 1 de modularización (ver ROADMAP). Extraído 1:1 desde styles.css líneas 1–142, sin alterar ningún valor. Contiene: paleta Mac Premium (:root) + overrides de modo claro. ============================================================ */ :root { /* --- MAC PREMIUM DESIGN TOKENS (DARK MODE NATIVO) --- */ /* v8.6.5: fondos actualizados a valores Apple systemBackground exactos. Antes: negro-estudio (#121212–#2C2C2C). Ahora: grafito-caliente Apple (#1C1C1E–#48484A). La diferencia es +10–22 puntos de luminosidad y una temperatura de color levemente azulada — más fiel a macOS Sequoia/iOS 18. El cambio afecta TODA la app (superficies, tablas, modales) porque estos 4 tokens son la raíz de la que cuelgan --bg/--bg2/--bg3/--bg4 y el resto. */ --bg-app: #1C1C1E; --bg-shell: #2C2C2E; --bg-surface: #3A3A3C; --bg-surface-hover: #48484A; /* Efecto Cristal (Glassmorphism para Elementos Flotantes) */ --bg-glass-topbar: rgba(44, 44, 46, 0.75); --bg-glass-drawer: rgba(36, 36, 38, 0.82); /* v8.6.5: saturate subida de 140% → 180% (Apple Vibrancy usa 180–200%) */ --blur-premium: blur(20px) saturate(180%); /* Bordes Retina Ultra Finos */ --border-neutral: rgba(255, 255, 255, 0.08); --border-retina: rgba(255, 255, 255, 0.12); --border-focus: #007AFF; /* Tipografía Semántica (SF Pro Colors) */ --txt-main: #FFFFFF; --txt-body: #E5E5EA; --txt-muted: #8E8E93; --txt-on-accent: #FFFFFF; /* Acentos Oficiales de Apple (System Colors) v8.6.5: accent en dark mode corregido a #0A84FF (iOS/macOS dark system blue). #007AFF es el valor de light mode; en dark, Apple lo sube de saturación para compensar el contraste sobre fondos más claros. */ --accent: #0A84FF; --accent-hover: #409CFF; --accent-bg: rgba(10, 132, 255, 0.15); /* v8.6.5: colores de sistema dark corregidos a valores iOS 18 dark */ --success: #30D158; /* systemGreen dark (#34C759 es light) */ --success-bg: rgba(48, 209, 88, 0.15); --warning: #FF9F0A; /* systemOrange dark (#FF9500 es light) */ --warning-bg: rgba(255, 159, 10, 0.15); --danger: #FF453A; /* systemRed dark (#FF3B30 es light) */ --danger-bg: rgba(255, 69, 58, 0.15); /* Sombras de Proyección Profunda Mac */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); /* Ajustes de Estructura Previos (Mantener intactos) */ --shell-max: 1040px; --shell-pad: 20px; --drawer-w: 260px; --topbar-h: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* Tipografía Escala */ --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --transition-smooth: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); /* v8.7.36: token único de motion — el spring real de iOS/macOS (UIKit usa esta curva para sheets, alerts, dismissals). Antes convivían ~15 valores de cubic-bezier distintos sueltos por el CSS, la mayoría variantes de "ease-out" genérico que no tienen el "asentamiento" característico de Apple. Meta: reemplazar gradualmente esos usos por var(--ease-ios) para que toda la app comparta una sola física de movimiento. */ --ease-ios: cubic-bezier(0.16, 1, 0.3, 1); /* ============================================================ v8.6.2 — FIX SISTÉMICO: variables huérfanas (auditoría completa) ============================================================ Se comparó CADA var(--x) usado en css/*.css contra lo definido acá. Resultado: 36 variables sin definir en al menos un modo, repartidas en 2 grupos. Ninguna es nueva — ya se usaban en el styles.css original, monolítico; nadie las había podido cruzar contra su definición porque vivían en un solo archivo de 3370 líneas. No agrego ningún bloque [data-theme="dark"] nuevo: no hace falta, :root YA ES el default oscuro (mismo patrón que los tokens Mac Premium de arriba, que sí estaban bien). Lo que agrego son SOLO los valores que faltaban, alias 1:1 a tokens que ya existen y ya son theme-aware — cero paletas nuevas, cero deuda extra. */ /* Grupo A — tenían valor para [data-theme="light"] (ver más abajo) pero NINGUNO para oscuro/default: quedaban transparent/invisible en el tema que más se usa. Afecta tablas, badges, tags, modales, overlays, inputs — ~480 declaraciones en total. */ --bg: var(--bg-app); --bg2: var(--bg-shell); --bg3: var(--bg-surface); --bg4: var(--bg-surface-hover); --border: var(--border-neutral); --border2: var(--border-retina); --text: var(--txt-main); --text2: var(--txt-body); --text3: var(--txt-muted); --tone-danger: var(--danger); --tone-danger-bg: var(--danger-bg); --tone-warn: var(--warning); --tone-warn-bg: var(--warning-bg); --tone-success: var(--success); --tone-success-bg: var(--success-bg); --tone-info: var(--accent); --tone-info-bg: var(--accent-bg); --overlay-hover: rgba(255, 255, 255, 0.06); --overlay-active: rgba(255, 255, 255, 0.1); --glass-bg: var(--bg-glass-drawer); --glass-bg-hover: rgba(44, 44, 44, 0.85); --bg-overlay-strong: rgba(18, 18, 18, 0.97); --bg-modifier: rgba(255, 255, 255, 0.06); --bg-modifier-strong: rgba(255, 255, 255, 0.1); --border-modifier: rgba(255, 255, 255, 0.16); --accent-blue: var(--accent); --accent-blue-hover: var(--accent-hover); --accent-blue-trans: var(--accent-bg); --input-bg: rgba(255, 255, 255, 0.06); --input-focus-ring: var(--accent-bg); --modal-scrim: rgba(0, 0, 0, 0.55); /* Grupo B — NUNCA tenían valor, en ningún modo. Usados en login, dashboard, topbar y leyenda de mapa. */ --bg-main: var(--bg-app); --bg-sidebar: var(--bg-surface); --bg-elevated: var(--bg-surface); --bg-elevated-2: var(--bg-surface-hover); --border-subtle: var(--border-neutral); --border-strong: var(--border-retina); --accent-primary: var(--accent); --accent2: var(--accent-hover); --text-primary: var(--txt-main); --text-secondary: var(--txt-body); --text-muted: var(--txt-muted); /* alias del typo "text-" vs "txt-" del token de arriba */ /* Colores de estado del pin/leyenda de mapa (Clientes/Prospectos/Visitados) — fijos a propósito en ambos modos: son un código de color reconocible, no deben cambiar con el tema. */ --c-cliente: #00E676; --c-prospecto: var(--danger); --c-visitado: var(--warning); --radius: var(--radius-md); /* genérico, usado en botones/inputs/toasts — distinto de --radius-sm/md/lg */ } /* ── v8.7.36: MODO CLARO — bloque único (fix deuda técnica) ── Antes había DOS bloques `html[data-theme="light"]` separados redefiniendo tokens parcialmente superpuestos (--bg-surface, --bg-glass-topbar, --bg-glass-drawer, --border-retina, --shadow-sm/md/lg aparecían en AMBOS con valores distintos). Funcionaba porque el segundo ganaba por orden de cascada (misma especificidad que :root), pero era una trampa: dos fuentes de verdad para el mismo tema. Se fusionaron en este único bloque SIN CAMBIAR NINGÚN VALOR FINAL — para cada clave duplicada se conservó el valor que ya ganaba. Cero diferencia visual, una sola fuente de verdad. JS controla [data-theme] en — ver script inline en e initTheme(). */ html[data-theme="light"] { /* --- Mac Premium tokens (light) — únicos, sin duplicado --- */ --bg-app: #F5F5F7; --bg-shell: #FFFFFF; --bg-surface-hover: #E5E5EA; --border-neutral: rgba(0, 0, 0, 0.06); --txt-main: #1D1D1F; --txt-body: #424245; --txt-muted: #86868B; --txt-on-accent: #FFFFFF; --accent: #007AFF; --accent-hover: #0063CC; --accent-bg: rgba(0, 122, 255, 0.1); --success: #248A3D; --success-bg: rgba(36, 138, 61, 0.1); --warning: #C97D00; --warning-bg: rgba(201, 125, 0, 0.1); --danger: #D7261E; --danger-bg: rgba(215, 38, 30, 0.1); --bg: #eef1f6; --bg2: #ffffff; --bg3: #f4f6fa; --bg4: #e7ebf2; --border: rgba(10,22,40,0.08); --border2: rgba(10,22,40,0.14); --text: #16202e; --text2: #5b7088; --text3: #94a3b8; /* --accent y --accent2 se mantienen: el azul de marca rinde bien sobre fondos claros y oscuros */ --tone-danger: #c0292f; --tone-danger-bg: rgba(192, 41, 47, 0.10); --tone-warn: #92600a; --tone-warn-bg: rgba(146, 96, 10, 0.10); --tone-success: #0f7d56; --tone-success-bg: rgba(15, 125, 86, 0.10); --tone-info: #1f6fa8; --tone-info-bg: rgba(31, 111, 168, 0.10); --overlay-hover: rgba(10,22,40,0.045); --overlay-active: rgba(10,22,40,0.08); --glass-bg: rgba(255,255,255,0.55); --glass-bg-hover: rgba(255,255,255,0.8); --bg-overlay-strong: rgba(255,255,255,0.97); /* v8.5.16: mismos tokens que :root pero invertidos a oscurecer (no aclarar) — mismo razonamiento que --overlay-hover/--overlay-active arriba */ --bg-modifier: rgba(10,22,40,0.045); --bg-modifier-strong: rgba(10,22,40,0.08); --border-modifier: rgba(10,22,40,0.16); --modal-scrim: rgba(120,130,145,0.32); /* ── Mac Premium Design Tokens (claro) ── */ --bg-surface: #FFFFFF; --bg-glass-topbar: rgba(255, 255, 255, 0.65); --bg-glass-drawer: rgba(246, 246, 246, 0.75); --border-retina: rgba(0, 0, 0, 0.08); --accent-blue: #007AFF; --accent-blue-hover: #0062CC; --accent-blue-trans: rgba(0, 122, 255, 0.1); --input-bg: rgba(0, 0, 0, 0.04); --input-focus-ring: rgba(0, 122, 255, 0.2); --shadow-sm: 0 1px 2px rgba(0,0,0,0.02); --shadow-md: 0 4px 14px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03); --shadow-lg: 0 12px 30px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); color-scheme: light; }