/* ============================================================================ PandaNexo Rent a Car — DESIGN TOKENS Sistema de diseño unificado (landing + panel admin). Basado en Material Design 3: color por roles, escala de formas, elevación tonal, tipografía fluida y motion expresivo. Capas: 1. Primitivas → rampas de color crudas, nunca se usan directamente. 2. Semánticas → roles (surface, on-surface, primary...). Cambian con el tema. 3. Sistema → tipografía, espaciado, radios, elevación, motion, layout. 4. Legado → alias de las variables antiguas para no romper nada. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. PRIMITIVAS — rampas de color ---------------------------------------------------------------------------- */ :root { /* Marca: cobalto técnico. Transmite confianza, precisión, movilidad. */ --blue-50: #EEF4FF; --blue-100: #D9E5FF; --blue-200: #BCD1FF; --blue-300: #8EB2FF; --blue-400: #5A88FC; --blue-500: #3563F0; --blue-600: #1F47DB; --blue-700: #1A38B8; --blue-800: #1B3193; --blue-900: #1A2C74; --blue-950: #111C4A; /* Secundario: cian técnico para datos, métricas y gráficos. */ --cyan-50: #ECFEFF; --cyan-100: #CFFAFE; --cyan-200: #A5F3FC; --cyan-300: #67E8F9; --cyan-400: #22D3EE; --cyan-500: #06B6D4; --cyan-600: #0891B2; --cyan-700: #0E7490; --cyan-800: #155E75; --cyan-900: #164E63; /* Neutrales fríos (slate) — coherentes con la identidad azul. */ --slate-0: #FFFFFF; --slate-25: #FBFCFE; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-850: #172032; --slate-900: #0F172A; --slate-950: #0A0F1A; --slate-1000: #060A12; /* Funcionales */ --emerald-50: #ECFDF5; --emerald-100: #D1FAE5; --emerald-400: #34D399; --emerald-500: #10B981; --emerald-600: #059669; --emerald-700: #047857; --emerald-900: #064E3B; --amber-50: #FFFBEB; --amber-100: #FEF3C7; --amber-400: #FBBF24; --amber-500: #F59E0B; --amber-600: #D97706; --amber-700: #B45309; --amber-900: #78350F; --red-50: #FEF2F2; --red-100: #FEE2E2; --red-400: #F87171; --red-500: #EF4444; --red-600: #DC2626; --red-700: #B91C1C; --red-900: #7F1D1D; --sky-50: #F0F9FF; --sky-100: #E0F2FE; --sky-400: #38BDF8; --sky-500: #0EA5E9; --sky-600: #0284C7; --sky-900: #0C4A6E; /* Marca de canal */ --whatsapp: #25D366; --whatsapp-ink: #128C7E; } /* ---------------------------------------------------------------------------- 2. SEMÁNTICAS — TEMA CLARO (por defecto) ---------------------------------------------------------------------------- */ :root { color-scheme: light; /* Fondo de pantalla y superficies con elevación tonal */ --surface-dim: #EEF2F7; --surface: var(--slate-50); --surface-bright: var(--slate-0); --surface-1: var(--slate-0); --surface-2: var(--slate-0); --surface-3: var(--slate-50); --surface-4: var(--slate-100); --surface-5: var(--slate-100); --surface-alt: var(--slate-100); --surface-sunken: var(--slate-100); --surface-inverse: var(--slate-900); --on-surface-inverse: var(--slate-50); /* Texto */ --on-surface: var(--slate-900); --on-surface-strong: var(--slate-950); --on-surface-variant: var(--slate-700); --on-surface-muted: var(--slate-500); --on-surface-faint: var(--slate-400); /* Bordes */ --outline: var(--slate-200); --outline-variant: var(--slate-100); --outline-strong: var(--slate-300); --outline-focus: var(--blue-500); /* Primario */ --primary: var(--blue-600); --primary-hover: var(--blue-700); --primary-active: var(--blue-800); --on-primary: #FFFFFF; --primary-container: var(--blue-50); --primary-container-alt: var(--blue-100); --on-primary-container: var(--blue-800); --primary-outline: var(--blue-200); /* Secundario (cian) */ --secondary: var(--cyan-600); --on-secondary: #FFFFFF; --secondary-container: var(--cyan-50); --on-secondary-container: var(--cyan-800); /* Terciario / premium (ámbar) */ --tertiary: var(--amber-600); --on-tertiary: #FFFFFF; --tertiary-container: var(--amber-50); --on-tertiary-container: var(--amber-700); /* Estados */ --success: var(--emerald-600); --on-success: #FFFFFF; --success-container: var(--emerald-50); --on-success-container: var(--emerald-700); --warning: var(--amber-600); --on-warning: #FFFFFF; --warning-container: var(--amber-50); --on-warning-container: var(--amber-700); --danger: var(--red-600); --on-danger: #FFFFFF; --danger-container: var(--red-50); --on-danger-container: var(--red-700); --info: var(--sky-600); --on-info: #FFFFFF; --info-container: var(--sky-50); --on-info-container: var(--sky-600); /* Canal WhatsApp */ --wa: var(--emerald-500); --wa-hover: var(--emerald-600); --on-wa: #FFFFFF; --wa-container: var(--emerald-50); --on-wa-container: var(--emerald-700); /* Capas de interacción (state layers M3) */ --state-hover: rgba(15, 23, 42, 0.045); --state-press: rgba(15, 23, 42, 0.085); --state-selected: rgba(31, 71, 219, 0.10); --ripple-ink: rgba(15, 23, 42, 0.16); --ripple-ink-on-primary: rgba(255, 255, 255, 0.35); /* Scrim y sombras */ --scrim: rgba(15, 23, 42, 0.48); --shadow-rgb: 15, 23, 42; --shadow-alpha: 0.10; /* Efecto vidrio (app bars translúcidas como en Android 14) */ --glass-bg: rgba(255, 255, 255, 0.82); --glass-border: rgba(255, 255, 255, 0.6); /* Gradientes de marca */ --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 50%, var(--cyan-600) 100%); --gradient-surface: linear-gradient(180deg, var(--blue-50) 0%, var(--slate-0) 70%); --gradient-sheen: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%); } /* ---------------------------------------------------------------------------- 2b. SEMÁNTICAS — TEMA OSCURO Se aplica automáticamente si el sistema (Android/Windows) está en oscuro, salvo que el usuario haya forzado el claro; o manualmente con data-theme. ---------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-dim: var(--slate-1000); --surface: var(--slate-950); --surface-bright: var(--slate-850); --surface-1: #101725; --surface-2: #141C2C; --surface-3: #182133; --surface-4: #1B2539; --surface-5: #1F2A40; --surface-alt: #101725; --surface-sunken: var(--slate-1000); --surface-inverse: var(--slate-100); --on-surface-inverse: var(--slate-900); --on-surface: #E8EDF6; --on-surface-strong: #F8FAFC; --on-surface-variant: #AFBCD0; --on-surface-muted: #8494AC; --on-surface-faint: #64748B; --outline: rgba(148, 163, 184, 0.20); --outline-variant: rgba(148, 163, 184, 0.12); --outline-strong: rgba(148, 163, 184, 0.34); --outline-focus: var(--blue-300); --primary: var(--blue-400); --primary-hover: var(--blue-300); --primary-active: var(--blue-200); --on-primary: var(--blue-950); --primary-container: rgba(58, 106, 252, 0.16); --primary-container-alt: rgba(58, 106, 252, 0.24); --on-primary-container: var(--blue-200); --primary-outline: rgba(90, 136, 252, 0.38); --secondary: var(--cyan-400); --on-secondary: var(--cyan-900); --secondary-container: rgba(34, 211, 238, 0.14); --on-secondary-container: var(--cyan-200); --tertiary: var(--amber-400); --on-tertiary: var(--amber-900); --tertiary-container: rgba(251, 191, 36, 0.14); --on-tertiary-container: var(--amber-100); --success: var(--emerald-400); --on-success: var(--emerald-900); --success-container: rgba(52, 211, 153, 0.14); --on-success-container: var(--emerald-100); --warning: var(--amber-400); --on-warning: var(--amber-900); --warning-container: rgba(251, 191, 36, 0.14); --on-warning-container: var(--amber-100); --danger: var(--red-400); --on-danger: var(--red-900); --danger-container: rgba(248, 113, 113, 0.14); --on-danger-container: var(--red-100); --info: var(--sky-400); --on-info: var(--sky-900); --info-container: rgba(56, 189, 248, 0.14); --on-info-container: var(--sky-100); --wa: var(--emerald-400); --wa-hover: var(--emerald-300, #6EE7B7); --on-wa: var(--emerald-900); --wa-container: rgba(52, 211, 153, 0.14); --on-wa-container: var(--emerald-100); --state-hover: rgba(255, 255, 255, 0.06); --state-press: rgba(255, 255, 255, 0.11); --state-selected: rgba(90, 136, 252, 0.18); --ripple-ink: rgba(255, 255, 255, 0.20); --ripple-ink-on-primary: rgba(255, 255, 255, 0.28); --scrim: rgba(2, 6, 14, 0.68); --shadow-rgb: 0, 0, 0; --shadow-alpha: 0.44; --glass-bg: rgba(16, 23, 37, 0.82); --glass-border: rgba(148, 163, 184, 0.14); --gradient-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 55%, var(--cyan-700) 100%); --gradient-surface: linear-gradient(180deg, rgba(53, 99, 240, 0.10) 0%, var(--slate-950) 70%); --gradient-sheen: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%); } } /* Igual que el bloque anterior, pero forzado por el usuario. */ :root[data-theme="dark"] { color-scheme: dark; --surface-dim: var(--slate-1000); --surface: var(--slate-950); --surface-bright: var(--slate-850); --surface-1: #101725; --surface-2: #141C2C; --surface-3: #182133; --surface-4: #1B2539; --surface-5: #1F2A40; --surface-alt: #101725; --surface-sunken: var(--slate-1000); --surface-inverse: var(--slate-100); --on-surface-inverse: var(--slate-900); --on-surface: #E8EDF6; --on-surface-strong: #F8FAFC; --on-surface-variant: #AFBCD0; --on-surface-muted: #8494AC; --on-surface-faint: #64748B; --outline: rgba(148, 163, 184, 0.20); --outline-variant: rgba(148, 163, 184, 0.12); --outline-strong: rgba(148, 163, 184, 0.34); --outline-focus: var(--blue-300); --primary: var(--blue-400); --primary-hover: var(--blue-300); --primary-active: var(--blue-200); --on-primary: var(--blue-950); --primary-container: rgba(58, 106, 252, 0.16); --primary-container-alt: rgba(58, 106, 252, 0.24); --on-primary-container: var(--blue-200); --primary-outline: rgba(90, 136, 252, 0.38); --secondary: var(--cyan-400); --on-secondary: var(--cyan-900); --secondary-container: rgba(34, 211, 238, 0.14); --on-secondary-container: var(--cyan-200); --tertiary: var(--amber-400); --on-tertiary: var(--amber-900); --tertiary-container: rgba(251, 191, 36, 0.14); --on-tertiary-container: var(--amber-100); --success: var(--emerald-400); --on-success: var(--emerald-900); --success-container: rgba(52, 211, 153, 0.14); --on-success-container: var(--emerald-100); --warning: var(--amber-400); --on-warning: var(--amber-900); --warning-container: rgba(251, 191, 36, 0.14); --on-warning-container: var(--amber-100); --danger: var(--red-400); --on-danger: var(--red-900); --danger-container: rgba(248, 113, 113, 0.14); --on-danger-container: var(--red-100); --info: var(--sky-400); --on-info: var(--sky-900); --info-container: rgba(56, 189, 248, 0.14); --on-info-container: var(--sky-100); --wa: var(--emerald-400); --wa-hover: #6EE7B7; --on-wa: var(--emerald-900); --wa-container: rgba(52, 211, 153, 0.14); --on-wa-container: var(--emerald-100); --state-hover: rgba(255, 255, 255, 0.06); --state-press: rgba(255, 255, 255, 0.11); --state-selected: rgba(90, 136, 252, 0.18); --ripple-ink: rgba(255, 255, 255, 0.20); --ripple-ink-on-primary: rgba(255, 255, 255, 0.28); --scrim: rgba(2, 6, 14, 0.68); --shadow-rgb: 0, 0, 0; --shadow-alpha: 0.44; --glass-bg: rgba(16, 23, 37, 0.82); --glass-border: rgba(148, 163, 184, 0.14); --gradient-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 55%, var(--cyan-700) 100%); --gradient-surface: linear-gradient(180deg, rgba(53, 99, 240, 0.10) 0%, var(--slate-950) 70%); --gradient-sheen: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%); } /* ---------------------------------------------------------------------------- 3. SISTEMA — tipografía, espaciado, forma, elevación, motion, layout ---------------------------------------------------------------------------- */ :root { /* Familias */ --font-display: 'Plus Jakarta Sans', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; /* Tabular para que las cifras no "bailen" al actualizarse */ --font-numeric: 'Inter', system-ui, sans-serif; /* Escala tipográfica fluida: se adapta del móvil al desktop sin saltos */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-md: 0.875rem; /* 14px */ --text-base:0.9375rem; /* 15px */ --text-lg: 1rem; /* 16px */ --text-xl: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --text-2xl: clamp(1.1875rem, 1.08rem + 0.5vw, 1.375rem); --text-3xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); --text-4xl: clamp(1.625rem, 1.3rem + 1.7vw, 2.25rem); --text-5xl: clamp(1.9375rem, 1.35rem + 2.9vw, 3rem); --text-6xl: clamp(2.25rem, 1.4rem + 4.2vw, 3.75rem); /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Interlineado */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Tracking */ --ls-tighter: -0.02em; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.06em; /* Espaciado — rejilla de 4pt */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 1.75rem; /* 28 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ /* Padding lateral de página: crece con la pantalla y respeta el notch */ --gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* Escala de formas (M3 shape scale) */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-3xl: 36px; --r-full: 999px; /* Elevación — sombras suaves de dos capas, como Material */ --el-0: none; --el-1: 0 1px 2px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.9)), 0 1px 3px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.5)); --el-2: 0 1px 2px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.8)), 0 3px 8px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.7)); --el-3: 0 2px 4px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.7)), 0 8px 20px -4px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.9)); --el-4: 0 4px 8px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.6)), 0 14px 32px -6px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 1.05)); --el-5: 0 6px 12px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 0.6)), 0 24px 52px -10px rgba(var(--shadow-rgb), calc(var(--shadow-alpha) * 1.2)); /* Realce coloreado para elementos primarios */ --el-primary: 0 4px 14px -2px rgba(31, 71, 219, 0.34); --el-wa: 0 4px 14px -2px rgba(16, 185, 129, 0.34); /* Motion — curvas de Material 3 Expressive */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-slower: 480ms; --tr-fast: var(--dur-fast) var(--ease-standard); --tr-base: var(--dur-base) var(--ease-standard); --tr-slow: var(--dur-slow) var(--ease-emphasized); /* Layout */ --appbar-h: 60px; --bottomnav-h: 62px; --sidebar-w: 268px; --sidebar-collapsed-w: 76px; --content-max: 1280px; --content-narrow: 1040px; --reading-max: 68ch; /* Área táctil mínima recomendada por Material (48dp) */ --touch-min: 48px; /* Insets seguros del dispositivo (notch, barra de gestos) */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); /* Capas z */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-appbar: 900; --z-bottomnav: 950; --z-scrim: 1000; --z-drawer: 1010; --z-sheet: 1020; --z-dialog: 1030; --z-snackbar: 1100; --z-tooltip: 1200; } /* Ajuste de layout en pantallas grandes: más aire, sin barra inferior. */ @media (min-width: 992px) { :root { --appbar-h: 68px; --bottomnav-h: 0px; } } /* ---------------------------------------------------------------------------- 4. LEGADO — alias de las variables antiguas. Permite que todo el CSS existente se re-tematice (incluido el modo oscuro) sin tocar un solo selector. No usar estos nombres en código nuevo. ---------------------------------------------------------------------------- */ :root { /* landing.css */ --android-blue-primary: var(--primary); --android-blue-dark: var(--primary-hover); --android-blue-light: var(--blue-500); --android-blue-surface: var(--primary-container); --android-blue-subtle: var(--primary-container-alt); --android-bg-screen: var(--surface); --android-surface-card: var(--surface-1); --android-surface-alt: var(--surface-alt); --android-border-light: var(--outline); --android-border-mid: var(--outline-strong); --android-text-primary: var(--on-surface); --android-text-medium: var(--on-surface-variant); --android-text-muted: var(--on-surface-muted); --android-text-white: #FFFFFF; --android-whatsapp: var(--wa); --android-whatsapp-dark: var(--wa-hover); --android-whatsapp-subtle: var(--wa-container); --android-gold: var(--tertiary); --android-yellow: var(--amber-500); --android-danger: var(--danger); --font-heading: var(--font-display); --elevation-1: var(--el-1); --elevation-2: var(--el-2); --elevation-3: var(--el-3); --elevation-blue: var(--el-primary); /* admin.css */ --bg-primary: var(--surface); --bg-secondary: var(--surface-1); --bg-tertiary: var(--surface-3); --bg-card: var(--surface-1); --bg-card-hover: var(--surface-3); --bg-input: var(--surface-1); --bg-input-focus: var(--surface-1); --border: var(--outline); --border-hover: var(--outline-strong); --border-active: var(--primary); --text-primary: var(--on-surface); --text-secondary: var(--on-surface-muted); --text-tertiary: var(--on-surface-faint); --text-inverse: var(--on-surface-inverse); --accent: var(--primary); --accent-hover: var(--primary-hover); --accent-light: var(--primary-container); --accent-glow: rgba(31, 71, 219, 0.28); --success-bg: var(--success-container); --success-border: var(--primary-outline); --warning-bg: var(--warning-container); --warning-border: var(--outline); --danger-bg: var(--danger-container); --danger-border: var(--outline); --info-bg: var(--info-container); --info-border: var(--outline); --sidebar-width: var(--sidebar-w); --sidebar-collapsed: var(--sidebar-collapsed-w); --header-height: var(--appbar-h); --radius-sm: var(--r-sm); --radius: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --shadow-sm: var(--el-1); --shadow: var(--el-2); --shadow-lg: var(--el-3); --shadow-xl: var(--el-4); --transition: all var(--tr-base); --transition-fast: all var(--tr-fast); }