/*
 * Rumbo · Portal de Reservas GIRAG Cargo — Design tokens v1.1 (6 oct 2026, reunión de diseño)
 * Generado desde la misma fuente que tokens.json. No editar a mano sin actualizar ambos.
 * Claro y oscuro son temas de primer nivel. Sin preferencia explícita: manda el sistema (prefers-color-scheme);
 * si el sistema no declara nada, claro. Forzar: <html data-theme="light"> o <html data-theme="dark">.
 * Guarda la preferencia del usuario (localStorage 'rumbo-theme') y aplícala en <html data-theme>.
 *
 * Contrato: --color-accent es RELLENO de marca (botones, barras, iconos). Para TEXTO de color
 * acento usa --color-accent-text (en modo claro el naranja puro no llega a 4.5:1).
 * Sobre --color-accent el texto va SIEMPRE en --color-accent-contrast (azul marino), nunca blanco (2,86:1).
 *
 * Novedades v1.1: --color-surface-3, --color-field-bg, --color-tint-accent/-blue (contenedores que se despegan del fondo),
 * --bg-glow y --grid-* (fondo de cuadrícula del hero, para oscuro), --status-notch-* y --status-icon-* (notch de estado:
 * fondo neutro, solo el icono cambia de color), --field-focus-* (foco de campos: una línea + sombreado suave),
 * --font-data (cifras e IDs: Inter con zero/cv05/cv08/ss01; --font-num-features añade tnum para columnas; reemplaza a JetBrains Mono).
 * Los --status-draft/active/transit/queued/done/alert (+ -bg) quedan DEPRECADOS: no usarlos en componentes nuevos.
 *
 * Fuentes (Google Fonts), sin JetBrains Mono:
 * https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,500..800&family=Inter:opsz,wght@14..32,400..700&display=swap
 */

:root {
  --ink-50: #F3F5FA;
  --ink-100: #E9ECF5;
  --ink-200: #C8CDD8;
  --ink-300: #8E96BE;
  --ink-400: #5B66C4;
  --ink-500: #3B4499;
  --ink-600: #2C3580;
  --ink-700: #1E2766;
  --ink-800: #131A52;
  --ink-850: #0B0F3E;
  --ink-900: #050B2F;
  --ink-950: #03071F;
  --orange-50: #FFF3EA;
  --orange-100: #FFE0C7;
  --orange-200: #FFC08F;
  --orange-300: #FFA35C;
  --orange-400: #FF8C33;
  --orange-500: #FF6B00;
  --orange-600: #E55F00;
  --orange-700: #A84300;
  --orange-800: #7A3100;
  --orange-900: #4D1F00;
  --green-300: #4FE0A5;
  --green-500: #00C07A;
  --green-700: #007A4D;
  --amber-300: #FFD066;
  --amber-500: #FFB300;
  --amber-700: #8A5A00;
  --red-300: #FF8A85;
  --red-400: #FF5A55;
  --red-500: #E53935;
  --red-600: #C62828;
  --blue-300: #8CC4FF;
  --blue-400: #4DA3FF;
  --blue-600: #1F5FBF;
  --font-display: 'Archivo', 'Carlito', 'Calibri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Carlito', 'Calibri', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'Inter', 'Carlito', 'Calibri', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-data-features: 'zero' 1, 'cv05' 1, 'cv08' 1, 'ss01' 1;
  --font-num-features: 'tnum' 1, 'zero' 1, 'ss01' 1;
  --font-mono: var(--font-data); /* DEPRECADO: alias de --font-data. JetBrains Mono se retiró el 6 oct 2026 */
  --font-display-stretch: 112%;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --tracking-display: -0.02em;
  --tracking-caps: 0.08em;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --duration-slower: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --focus-ring-width: 3px;
  --tap-min: 44px;
  --grid-size: 48px;
  --field-focus-ring: 4px;
}

/* Claro: tema por defecto */
:root,
[data-theme="light"] {
  color-scheme: light;
  --color-bg: #EAEEF8;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3F5FB;
  --color-border: #C3CAE0;
  --color-border-strong: #5A64A8;
  --color-accent: #FF6B00;
  --color-accent-hi: #E55F00;
  --color-accent-contrast: #050B2F;
  --color-accent-text: #A84300;
  --color-text: #050B2F;
  --color-text-muted: #3D4470;
  --color-text-subtle: #4F59A0;
  --color-success: #007A4D;
  --color-warning: #8A5A00;
  --color-danger: #C62828;
  --color-info: #1F5FBF;
  --color-danger-fill: #C62828;
  --color-success-bg: #E6F2ED;
  --color-warning-bg: #F3EEE6;
  --color-danger-bg: #F9EAEA;
  --color-info-bg: #DCE7FB;
  --color-accent-bg: #FFE9D6;
  --color-focus: #A84300;
  --status-draft: #5A64A8;
  --status-draft-bg: #EEF0F6;
  --status-active: #A84300;
  --status-active-bg: #F6ECE6;
  --status-transit: #1F5FBF;
  --status-transit-bg: #E9EFF9;
  --status-queued: #8A5A00;
  --status-queued-bg: #F3EEE6;
  --status-done: #007A4D;
  --status-done-bg: #E6F2ED;
  --status-alert: #C62828;
  --status-alert-bg: #F9EAEA;
  --shadow-1: 0 1px 2px rgba(5, 11, 47, 0.10), 0 0 0 1px rgba(5, 11, 47, 0.08);
  --shadow-2: 0 12px 28px -12px rgba(5, 11, 47, 0.28), 0 0 0 1px rgba(5, 11, 47, 0.08);
  --shadow-3: 0 28px 64px -20px rgba(5, 11, 47, 0.32), 0 0 0 1px rgba(5, 11, 47, 0.06);
  --glow-accent: 0 0 0 1px rgba(255, 107, 0, 0.6), 0 8px 28px -8px rgba(255, 107, 0, 0.5);
  --dest-1: #A84300;
  --dest-2: #1F5FBF;
  --dest-3: #6A4BD6;
  --dest-4: #0B7F87;
  --dest-5: #B4317A;
  --dest-6: #7A6420;
  --color-surface-3: #E4E9F6;
  --color-field-bg: #FFFFFF;
  --color-tint-accent: #FFE9D6;
  --color-tint-blue: #DCE7FB;
  --status-notch-bg: #EEF1F9;
  --status-notch-border: #C3CAE0;
  --status-notch-text: #050B2F;
  --status-icon-nueva: #5A64A8;
  --status-icon-creada: #1F5FBF;
  --status-icon-en-embarque: #B84A00;
  --status-icon-en-transito: #0A7A82;
  --status-icon-enturnada: #8A5A00;
  --status-icon-en-descargue: #6A4BD6;
  --status-icon-descargada: #007A4D;
  --status-icon-cerrada: #3D4470;
  --status-icon-cancelada: #B4317A;
  --status-icon-anulada: #C62828;
  --logo-ink: #050B2F;
  --logo-sub: #3D4470;
  --field-focus-border: #A84300;
  --field-focus-shadow: 0 0 0 4px rgba(168, 67, 0, 0.16);
  --bg-glow: radial-gradient(900px 460px at 88% 0%, rgba(255, 107, 0, 0.10), transparent 70%), radial-gradient(800px 520px at 0% 100%, rgba(31, 95, 191, 0.08), transparent 70%);
  --grid-line: rgba(90, 100, 168, 0.18);
  --grid-opacity: 0;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #050B2F;
  --color-surface: #141D63;
  --color-surface-2: #1B2475;
  --color-border: #4A55B0;
  --color-border-strong: #6F7BD6;
  --color-accent: #FF6B00;
  --color-accent-hi: #FF8C33;
  --color-accent-contrast: #050B2F;
  --color-accent-text: #FF8C33;
  --color-text: #FFFFFF;
  --color-text-muted: #C8CDD8;
  --color-text-subtle: #A0A8CE;
  --color-success: #00C07A;
  --color-warning: #FFB300;
  --color-danger: #FF5A55;
  --color-info: #4DA3FF;
  --color-danger-fill: #C62828;
  --color-success-bg: #0B3A55;
  --color-warning-bg: #3B3350;
  --color-danger-bg: #3B2260;
  --color-info-bg: #1D327C;
  --color-accent-bg: #3A2953;
  --color-focus: #FF6B00;
  --status-draft: #8E96BE;
  --status-draft-bg: #202552;
  --status-active: #FF8C33;
  --status-active-bg: #32233C;
  --status-transit: #4DA3FF;
  --status-transit-bg: #16275D;
  --status-queued: #FFB300;
  --status-queued-bg: #322934;
  --status-done: #00C07A;
  --status-done-bg: #092B48;
  --status-alert: #FF5A55;
  --status-alert-bg: #321B42;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(111, 123, 214, 0.28);
  --shadow-2: 0 12px 30px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(111, 123, 214, 0.38);
  --shadow-3: 0 28px 64px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glow-accent: 0 0 0 1px rgba(255, 107, 0, 0.5), 0 8px 32px -6px rgba(255, 107, 0, 0.45);
  --dest-1: #FF8C33;
  --dest-2: #4DA3FF;
  --dest-3: #A98BFF;
  --dest-4: #2EC5CE;
  --dest-5: #F27BB5;
  --dest-6: #D9C27A;
  --color-surface-3: #26308F;
  --color-field-bg: #050B2F;
  --color-tint-accent: #3A2953;
  --color-tint-blue: #1D327C;
  --status-notch-bg: #050B2F;
  --status-notch-border: #4A55B0;
  --status-notch-text: #FFFFFF;
  --status-icon-nueva: #A9B1D8;
  --status-icon-creada: #4DA3FF;
  --status-icon-en-embarque: #FF8C33;
  --status-icon-en-transito: #2EC5CE;
  --status-icon-enturnada: #FFD066;
  --status-icon-en-descargue: #A98BFF;
  --status-icon-descargada: #4FE0A5;
  --status-icon-cerrada: #C8CDD8;
  --status-icon-cancelada: #F27BB5;
  --status-icon-anulada: #FF5A55;
  --logo-ink: #FFFFFF;
  --logo-sub: #C8CDD8;
  --field-focus-border: #FF6B00;
  --field-focus-shadow: 0 0 0 4px rgba(255, 107, 0, 0.24);
  --bg-glow: radial-gradient(900px 460px at 88% 6%, rgba(255, 107, 0, 0.20), transparent 70%), radial-gradient(800px 560px at 0% 100%, rgba(77, 163, 255, 0.16), transparent 70%), radial-gradient(700px 400px at 45% 40%, rgba(91, 102, 196, 0.18), transparent 75%);
  --grid-line: rgba(111, 123, 214, 0.34);
  --grid-opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #050B2F;
    --color-surface: #141D63;
    --color-surface-2: #1B2475;
    --color-border: #4A55B0;
    --color-border-strong: #6F7BD6;
    --color-accent: #FF6B00;
    --color-accent-hi: #FF8C33;
    --color-accent-contrast: #050B2F;
    --color-accent-text: #FF8C33;
    --color-text: #FFFFFF;
    --color-text-muted: #C8CDD8;
    --color-text-subtle: #A0A8CE;
    --color-success: #00C07A;
    --color-warning: #FFB300;
    --color-danger: #FF5A55;
    --color-info: #4DA3FF;
    --color-danger-fill: #C62828;
    --color-success-bg: #0B3A55;
    --color-warning-bg: #3B3350;
    --color-danger-bg: #3B2260;
    --color-info-bg: #1D327C;
    --color-accent-bg: #3A2953;
    --color-focus: #FF6B00;
    --status-draft: #8E96BE;
    --status-draft-bg: #202552;
    --status-active: #FF8C33;
    --status-active-bg: #32233C;
    --status-transit: #4DA3FF;
    --status-transit-bg: #16275D;
    --status-queued: #FFB300;
    --status-queued-bg: #322934;
    --status-done: #00C07A;
    --status-done-bg: #092B48;
    --status-alert: #FF5A55;
    --status-alert-bg: #321B42;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(111, 123, 214, 0.28);
    --shadow-2: 0 12px 30px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(111, 123, 214, 0.38);
    --shadow-3: 0 28px 64px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --glow-accent: 0 0 0 1px rgba(255, 107, 0, 0.5), 0 8px 32px -6px rgba(255, 107, 0, 0.45);
    --dest-1: #FF8C33;
    --dest-2: #4DA3FF;
    --dest-3: #A98BFF;
    --dest-4: #2EC5CE;
    --dest-5: #F27BB5;
    --dest-6: #D9C27A;
    --color-surface-3: #26308F;
    --color-field-bg: #050B2F;
    --color-tint-accent: #3A2953;
    --color-tint-blue: #1D327C;
    --status-notch-bg: #050B2F;
    --status-notch-border: #4A55B0;
    --status-notch-text: #FFFFFF;
    --status-icon-nueva: #A9B1D8;
    --status-icon-creada: #4DA3FF;
    --status-icon-en-embarque: #FF8C33;
    --status-icon-en-transito: #2EC5CE;
    --status-icon-enturnada: #FFD066;
    --status-icon-en-descargue: #A98BFF;
    --status-icon-descargada: #4FE0A5;
    --status-icon-cerrada: #C8CDD8;
    --status-icon-cancelada: #F27BB5;
    --status-icon-anulada: #FF5A55;
    --logo-ink: #FFFFFF;
    --logo-sub: #C8CDD8;
    --field-focus-border: #FF6B00;
    --field-focus-shadow: 0 0 0 4px rgba(255, 107, 0, 0.24);
    --bg-glow: radial-gradient(900px 460px at 88% 6%, rgba(255, 107, 0, 0.20), transparent 70%), radial-gradient(800px 560px at 0% 100%, rgba(77, 163, 255, 0.16), transparent 70%), radial-gradient(700px 400px at 45% 40%, rgba(91, 102, 196, 0.18), transparent 75%);
    --grid-line: rgba(111, 123, 214, 0.34);
    --grid-opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}