/* ============================================================================ tokens.css — Design tokens (muniVM · marca cívica 2026) Cargar PRIMERO en cada página, antes de style.css / components.css / CSS de página. Tema: :root (light) + [data-theme="dark"] (lo setea app.js sobre ). Identidad nueva: azul cívico profundo + acento teal "en vivo". Tipografía IBM Plex Sans (UI) + IBM Plex Mono (telemetría/coords/IMEI). IMPORTANTE: se conservan TODOS los nombres de variables previos (incluidos los --color-* legacy y --brand-*) para no recablear el CSS/JS existente; solo cambian los VALORES y se agregan tokens nuevos. Heredan a través de Shadow DOM. ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); :root { color-scheme: light; /* ---- Marca (azul cívico + acento teal) ---- */ --brand-blue: #0b4f9e; /* primario / acción */ --brand-blue-deep: #083d7c; /* hover / activo */ --brand-blue-soft: #1576d2; /* highlights / links */ --brand-blue-wash: #e8f1fb; /* fondos suaves de marca */ --accent-teal: #0d9488; /* acento "en vivo" / movimiento */ --accent-teal-soft: #5eead4; /* compat: repunta el viejo magenta al acento teal para no dejar referencias rotas */ --brand-magenta: var(--accent-teal); --brand-magenta-2: var(--accent-teal); --brand-magenta-3: var(--accent-teal); /* gradiente de marca: mismo tono, sutil (anti AI-slop, no azul→magenta) */ --brand-gradient: linear-gradient(135deg, #0b4f9e 0%, #1576d2 100%); --brand-gradient-soft: linear-gradient(135deg, rgba(11,79,158,.08), rgba(13,148,136,.08)); /* ---- Escala neutra (slate cívico, ligeramente fría) ---- */ --neutral-0: #ffffff; --neutral-50: #f6f8fb; --neutral-100: #eef2f7; --neutral-200: #dde4ec; --neutral-300: #b9c4d2; --neutral-400: #7b8a9e; --neutral-500: #4a5868; --neutral-600: #2a3645; --neutral-700: #131c27; /* ---- Semánticos de estado ---- */ --color-success: #16a34a; --color-success-bg: #dcfce7; --color-warning: #d97706; --color-warning-bg: #fef3c7; --color-error: #dc2626; --color-error-bg: #fee2e2; --color-info: #0b4f9e; --color-info-bg: #e8f1fb; /* ---- Estado operativo de flota (icono+texto siempre, no color-solo) ---- */ --status-moving: #16a34a; /* en movimiento / encendido */ --status-idle: #d97706; /* detenido / inactivo */ --status-alarm: #dc2626; /* alarma */ --status-offline: #64748b; /* sin conexión */ --status-live: #0d9488; /* señal fresca / en vivo */ /* ---- Superficies / texto (semántico) ---- */ --surface-base: #eef2f7; --surface-card: #ffffff; --surface-raised: #ffffff; --surface-sunken: #e7edf4; --surface-overlay: rgba(19, 28, 39, .55); --text-primary: #131c27; --text-secondary: #3c4a5a; --text-muted: #52606e; /* AA: 5.66 sobre card, 4.88 sobre base */ --text-on-brand: #ffffff; --border-subtle: #e2e8f0; --border-strong: #cbd5e1; /* ---- Re-mapeo de --color-* legacy (mismos nombres, valores nuevos) ---- */ --color-bg: var(--surface-base); --color-text: var(--text-primary); --color-text-secondary: var(--text-muted); --color-header-bg: var(--surface-card); --color-header-border: var(--border-subtle); --color-footer-bg: var(--surface-card); --color-footer-shadow: 0 -1px 0 var(--border-subtle), 0 -8px 24px rgba(19,28,39,.06); --color-primary: var(--brand-blue); --color-primary-hover: var(--brand-blue-deep); --color-primary-text: var(--text-on-brand); --color-modal-bg: var(--surface-card); --color-modal-shadow: var(--shadow-xl); --color-card-bg: var(--surface-card); --color-scrollbar-thumb: var(--border-strong); --color-scrollbar-track: transparent; --color-shadow: var(--shadow-md); --color-border: var(--border-subtle); --color-hover: rgba(11, 79, 158, .06); /* ---- Consola de operaciones diurna (pantalla del mapa) ---- */ --console-bg: #ffffff; /* barra de mando / paneles instrumentales */ --surface-data: #f1f5fa; /* bloques de dato inset (lecturas) */ --grid-line: rgba(11, 79, 158, .07); /* retícula tipo blueprint, muy tenue */ --hairline: var(--border-subtle); --console-accent: var(--accent-teal); /* señal "en vivo" */ --glow-live: 0 0 0 4px color-mix(in srgb, var(--accent-teal) 24%, transparent); --glow-live-soft: 0 0 20px -2px color-mix(in srgb, var(--accent-teal) 55%, transparent); --accent-line: linear-gradient(90deg, var(--accent-teal), color-mix(in srgb, var(--accent-teal) 0%, transparent)); --console-shadow: 0 10px 30px -10px rgba(16,24,40,.22), 0 2px 8px -2px rgba(16,24,40,.10); /* ---- Escala de espaciado (ritmo 4px) ---- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; /* ---- Tipografía ---- */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 700; --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; /* ---- Radius ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --radius-circle: 50%; /* ---- Sombras / elevación (cool, en capas) ---- */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06); --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .07); --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, .18), 0 4px 10px -4px rgba(16, 24, 40, .10); --shadow-xl: 0 24px 56px -12px rgba(16, 24, 40, .26), 0 8px 20px -8px rgba(16, 24, 40, .14); --shadow-brand: 0 10px 26px -8px rgba(11, 79, 158, .42); /* ---- Foco visible ---- */ --focus-ring: 0 0 0 3px rgba(11, 79, 158, .40); --focus-ring-offset: 2px; --focus-ring-color: var(--brand-blue); /* ---- Z-index ---- */ --z-base: 1; --z-sticky: 100; --z-navbar: 999; --z-modal: 1000; --z-toast: 9999; --z-loader: 10000; /* ---- Motion ---- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-emphasized: cubic-bezier(.2, 0, 0, 1.2); /* legacy usado por inputs de fecha en style.css */ --calendar-icon-inversion: 0; } [data-theme="dark"] { color-scheme: dark; --surface-base: #0c1420; --surface-card: #131d2b; --surface-raised: #1b2738; --surface-sunken: #090f18; --surface-overlay: rgba(0, 0, 0, .65); --text-primary: #e6edf5; --text-secondary: #aebccd; --text-muted: #9aa8b8; /* AA: 4.93 sobre card oscuro */ --border-subtle: #243244; --border-strong: #33455c; --brand-blue: #2f80e0; /* primario más claro para contraste en oscuro */ --brand-blue-deep: #1f6bc6; --brand-blue-soft: #5ea4ee; --brand-blue-wash: #15273f; --accent-teal: #2dd4bf; --accent-teal-soft:#5eead4; --color-primary: var(--brand-blue); --color-primary-hover: var(--brand-blue-soft); --color-hover: rgba(255, 255, 255, .06); --color-info: var(--brand-blue); --color-info-bg: #15273f; --brand-gradient: linear-gradient(135deg, #1f6bc6 0%, #2f80e0 100%); --status-moving: #34d27f; --status-idle: #f0a52e; --status-alarm: #f26d6d; --status-offline: #7f8ea0; --status-live: #2dd4bf; --color-success: #34d27f; --color-success-bg: #103325; --color-warning: #f0a52e; --color-warning-bg: #3a2a0c; --color-error: #f26d6d; --color-error-bg: #3a1717; --color-footer-shadow: 0 -1px 0 var(--border-subtle), 0 -8px 24px rgba(0,0,0,.5); --focus-ring: 0 0 0 3px rgba(94, 164, 238, .50); /* Consola en oscuro (secundario, se mantiene funcional) */ --console-bg: #101a28; --surface-data: #0f1a28; --grid-line: rgba(94, 164, 238, .09); --glow-live: 0 0 0 4px color-mix(in srgb, var(--accent-teal) 30%, transparent); --glow-live-soft: 0 0 22px -2px color-mix(in srgb, var(--accent-teal) 65%, transparent); --console-shadow: 0 12px 34px -10px rgba(0,0,0,.6), 0 2px 8px -2px rgba(0,0,0,.4); --calendar-icon-inversion: 1; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }