/* ============================================================================ LINK ADVANCE — TOKENS Sistema unificado a partir de Eventos Link Advance, Link Advance Academia (moodle-pwa) y TMS Minero. Este archivo es la ÚNICA fuente de color, radio, sombra, tipografía y motion. Ninguna app debe escribir un hex suelto: si falta un color, se agrega aquí como token. Decisiones vigentes (2026-08-19): · Azul de acción = #306cb4, extraído del logotipo oficial. · Los tonos profundos (700–950) adoptan la escala v4 de Academia, que es la que sostiene los héroes, sidebars y degradados oscuros. · Sora + Manrope en TODOS los dispositivos. No se cambia de tipografía en táctil (TMS Minero sí lo hace; es la excepción heredada, no la regla). ============================================================================ */ @font-face { font-family: "Manrope"; src: url("../assets/fonts/Manrope-Variable.ttf") format("truetype"); font-style: normal; font-weight: 400 800; font-display: swap; } @font-face { font-family: "Sora"; src: url("../assets/fonts/Sora-Variable.ttf") format("truetype"); font-style: normal; font-weight: 600 800; font-display: swap; } :root { /* ── Escala azul ────────────────────────────────────────────────────────── 500 es el azul del logo. 700–950 vienen de la escala profunda de Academia: son más saturados y fríos a propósito, para que un héroe o un sidebar azul-marino no se vea lavado. */ --blue-50: #eef4fa; --blue-100: #d7e6f4; --blue-200: #b0cce8; --blue-300: #80acd7; --blue-400: #5089c4; --blue-500: #306cb4; /* primario — acción */ --blue-600: #2a5d9c; /* hover */ --blue-700: #0951a2; /* presionado / degradado */ --blue-800: #074486; /* héroes, encabezados de marca */ --blue-900: #08386d; --blue-950: #092f58; /* ── Tinta (grises fríos) ── nunca negro puro: la marca es azul. */ --ink-950: #06182e; --ink-900: #0b2340; --ink-800: #183754; --ink-700: #314d69; --ink-600: #4d627a; --ink-500: #6c7f94; --ink-400: #97a6b8; --ink-300: #cad6e3; --ink-200: #dde6ef; --ink-100: #ebf1f7; --ink-50: #f4f8fd; /* ── Roles de acción ── */ --primary: var(--blue-500); --primary-hover: var(--blue-600); --primary-press: var(--blue-700); --primary-soft: var(--blue-50); --focus-ring: rgba(80, 137, 196, .45); /* ── Texto ── */ --text-strong: var(--ink-950); /* titulares */ --text: var(--ink-800); /* cuerpo */ --text-muted: var(--ink-500); /* auxiliar */ --text-invert: #ffffff; /* ── Superficies ── */ --page: var(--ink-50); --surface: #ffffff; /* tarjeta */ --surface-muted: #fbfcfe; --surface-2: var(--ink-100); /* hundida */ /* ── Superficie oscura (sidebar, héroes, barras de marca) ── */ --dark-bg: var(--ink-950); --dark-bg-2: var(--blue-950); --dark-text: #c3cfe0; --dark-muted: #7d8aa3; --dark-hover: rgba(80, 137, 196, .16); /* ── Bordes ── */ --border: #e1e6ef; --border-strong: #cdd5e3; /* ── Semánticos ── */ --success: #16a35a; --success-bg: #e8f8ef; --success-fg: #0f7a41; --warning: #f2a312; --warning-bg: #fff5e3; --warning-fg: #9a6a08; --danger: #e0413d; --danger-bg: #fdecec; --danger-fg: #b5312d; /* Naranjo del semáforo de mantención: entre "por vencer" (ámbar) y "atrasado" (rojo). Sin él, inminente y atrasado se leen igual de lejos. */ --alert: #ea6a1f; --alert-bg: #fdeee2; --alert-fg: #a8480d; --info: var(--blue-500); --info-bg: var(--blue-50); --info-fg: var(--blue-800); /* ── Semáforo de mantención ── Los cinco estados tienen variable propia y NO usan directamente --success/--warning/--danger. La razón: cada faena puede cambiarlos desde Configuración → Estados, y el JS los reescribe sobre con el color que guardó. Si el chip apuntara a --danger, cambiar "atrasado" a violeta también teñiría los botones de borrar y las alertas de error. --est-tinta es el color hacia el que se mezcla el texto para que se lea: al negro en claro, al blanco en oscuro. */ --est-normal: #16a35a; --est-aviso: #f2a312; --est-inminente: #ea6a1f; --est-atrasado: #e0413d; --est-sin_tbo: #97a6b8; --est-tinta: #0b1320; --est-fondo: var(--surface); /* ── Degradados ── uso medido: héroes, encabezados y marca. Nunca de relleno. */ --gradient-brand: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 55%, var(--blue-400) 100%); --gradient-brand-radial: radial-gradient(circle at 68% 18%, #1768bf 0%, var(--blue-700) 48%, var(--blue-800) 100%); --gradient-ink: linear-gradient(150deg, var(--ink-950) 0%, var(--blue-950) 100%); --gradient-page: radial-gradient(circle at 8% 3%, rgba(48, 108, 180, .10), transparent 28rem), radial-gradient(circle at 96% 16%, rgba(9, 81, 162, .07), transparent 24rem); /* ── Sombras ── suaves y tintadas de azul, jamás negro puro. */ --shadow-xs: 0 2px 6px rgba(12, 23, 38, .07); --shadow-sm: 0 6px 20px rgba(9, 47, 88, .09); --shadow-md: 0 12px 32px rgba(12, 23, 38, .14); --shadow-lg: 0 20px 60px rgba(12, 23, 38, .18); --shadow-brand: 0 10px 26px rgba(48, 108, 180, .34); --shadow-focus: 0 0 0 4px var(--focus-ring); /* ── Radios ── esquinas redondeadas = sello de la marca. */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; /* inputs */ --r-lg: 16px; --r-xl: 24px; /* tarjetas */ --r-2xl: 32px; --r-pill: 999px; /* botones, chips */ /* ── Radios del chasis táctil ── más cerrados que los de escritorio; es lo que hace que una tarjeta "se lea" como app y no como página web. */ --r-ios-sm: 10px; --r-ios-md: 14px; --r-ios-lg: 20px; /* ── Espaciado ── */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* ── Tipografía ── */ --font-display: "Sora", "Segoe UI", system-ui, sans-serif; /* títulos, cifras, marca */ --font-body: "Manrope", "Segoe UI", system-ui, sans-serif; /* cuerpo y UI */ --font-mono: "JetBrains Mono", ui-monospace, monospace; /* series, folios, código */ /* ── Layout ── */ --content-max: 1240px; --sidebar-w: 264px; --sidebar-w-min: 76px; --topbar-h: 64px; --tabbar-h: 56px; --row-h: 44px; /* blanco de toque mínimo */ --row-h-lg: 56px; /* ── Motion ── transiciones limpias, sin rebotes. */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-ios: cubic-bezier(.32, .72, 0, 1); /* sale rápido, frena largo */ --t-fast: .15s var(--ease); --t: .22s var(--ease); --t-ios: .3s var(--ease-ios); /* ── Material translúcido ── barras fijas, hojas y controles sobre contenido. */ --hairline: rgba(60, 60, 67, .20); --surface-chrome: rgba(252, 252, 254, .86); --blur-chrome: saturate(180%) blur(20px); --fill-1: rgba(120, 120, 128, .20); --fill-2: rgba(120, 120, 128, .16); --fill-3: rgba(120, 120, 128, .12); --fill-4: rgba(120, 120, 128, .08); } /* ============================================================================ MODO OSCURO Se activa con [data-theme="dark"] en . El bloque de preferencia del sistema solo aplica si el usuario NO eligió explícitamente un tema, para que el interruptor de la app gane en ambas direcciones. ============================================================================ */ :root[data-theme="dark"] { color-scheme: dark; --page: #0f1623; --surface: #1a2235; --surface-muted: #172031; --surface-2: #141d2e; --text-strong: #e8edf5; --text: #b8c4d8; --text-muted: #8494ad; --border: #243047; --border-strong: #2e3d58; --primary: #4d90da; /* #306cb4 no alcanza AA sobre #0f1623 */ --primary-hover: #6aa4e4; --primary-soft: rgba(48, 108, 180, .18); --success-bg: rgba(22, 163, 90, .18); --success-fg: #4ade80; --warning-bg: rgba(242, 163, 18, .18); --warning-fg: #fbbf24; --danger-bg: rgba(224, 65, 61, .18); --danger-fg: #f87171; --alert-bg: rgba(234, 106, 31, .20); --alert-fg: #fb923c; --info-bg: rgba(48, 108, 180, .18); --info-fg: #7ab8ef; --shadow-xs: 0 2px 8px rgba(0, 0, 0, .30); --shadow-sm: 0 6px 20px rgba(0, 0, 0, .35); --shadow-md: 0 12px 32px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .50); --gradient-page: none; --hairline: rgba(255, 255, 255, .13); --est-tinta: #ffffff; --surface-chrome: rgba(26, 34, 53, .88); --fill-1: rgba(255, 255, 255, .36); --fill-2: rgba(255, 255, 255, .32); --fill-3: rgba(255, 255, 255, .24); --fill-4: rgba(255, 255, 255, .18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --page: #0f1623; --surface: #1a2235; --surface-muted: #172031; --surface-2: #141d2e; --text-strong: #e8edf5; --text: #b8c4d8; --text-muted: #8494ad; --border: #243047; --border-strong: #2e3d58; --primary: #4d90da; --primary-hover: #6aa4e4; --primary-soft: rgba(48,108,180,.18); --success-bg: rgba(22,163,90,.18); --success-fg: #4ade80; --warning-bg: rgba(242,163,18,.18); --warning-fg: #fbbf24; --danger-bg: rgba(224,65,61,.18); --danger-fg: #f87171; --alert-bg: rgba(234,106,31,.20); --alert-fg: #fb923c; --info-bg: rgba(48,108,180,.18); --info-fg: #7ab8ef; --shadow-xs: 0 2px 8px rgba(0,0,0,.30); --shadow-sm: 0 6px 20px rgba(0,0,0,.35); --shadow-md: 0 12px 32px rgba(0,0,0,.45); --shadow-lg: 0 20px 60px rgba(0,0,0,.50); --gradient-page: none; --hairline: rgba(255,255,255,.13); --surface-chrome: rgba(26,34,53,.88); --est-tinta: #ffffff; --fill-1: rgba(255,255,255,.36); --fill-2: rgba(255,255,255,.32); --fill-3: rgba(255,255,255,.24); --fill-4: rgba(255,255,255,.18); } } /* ============================================================================ ALIAS DE MIGRACIÓN Solo para portar apps ya escritas (Eventos, TMS, Academia) sin reescribir cientos de usos. En CÓDIGO NUEVO usar los tokens reales de arriba. ============================================================================ */ :root { --surface-page: var(--page); --surface-card: var(--surface); --surface-sunken: var(--surface-2); --text-body: var(--text); --text-primary: var(--text-strong); --text-secondary: var(--text-muted); --border-subtle: var(--border); --border-normal: var(--border-strong); --error: var(--danger); --error-bg: var(--danger-bg); --radius-xs: var(--r-xs); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-2xl: var(--r-2xl); --radius-pill: var(--r-pill); --radius-full: var(--r-pill); --radius: var(--r-md); --shadow-card: var(--shadow-xs); --shadow-pop: var(--shadow-md); --shadow-modal: var(--shadow-lg); --brand-gradient: var(--gradient-brand); --font-title: var(--font-display); --font-ui: var(--font-body); --font-sans: var(--font-body); --transition: var(--t); --sidebar-width: var(--sidebar-w); --topbar-height: var(--topbar-h); }