/* ============================================================================
   TRAPELTRACE — COLOR TOKENS
   Primitives (raw scales) → Semantic aliases (light + dark) → Operational status.
   Brand accent #588EED is sampled directly from the official logotype. It is a
   FUNCTIONAL accent (actions, selection, live data, brand marks) — never a
   background wash. Status is always conveyed by icon + text + color, never color alone.
   ============================================================================ */

:root {
  /* ---- PRIMITIVE: Brand blue (from logo #588EED) ---- */
  --blue-50:#EEF3FE; --blue-100:#DBE6FC; --blue-200:#BCD0F9; --blue-300:#93B3F4;
  --blue-400:#6E9BEF; --blue-500:#588EED; --blue-600:#3563CC; --blue-700:#2B54AF;
  --blue-800:#244896; --blue-900:#1E3A78; --blue-950:#15274E;

  /* ---- PRIMITIVE: Cool slate neutrals (blue-tinted) ---- */
  --slate-0:#FFFFFF; --slate-50:#F5F7FA; --slate-100:#EAEEF4; --slate-200:#D5DCE6;
  --slate-300:#B4BFCE; --slate-400:#8695A9; --slate-500:#5F6E85; --slate-600:#455063;
  --slate-700:#28344A; --slate-800:#1B2740; --slate-850:#151F33; --slate-900:#0E1826;
  --slate-950:#080E19;

  /* ---- PRIMITIVE: Semantic hues ---- */
  --green-50:#ECFDF3; --green-100:#D1FADF; --green-400:#4ADE80; --green-500:#22C55E; --green-600:#16A34A; --green-700:#15803D; --green-900:#0B3E22;
  --amber-50:#FFF8EB; --amber-100:#FEEFC7; --amber-400:#FBBF24; --amber-500:#F59E0B; --amber-600:#D97706; --amber-700:#B45309; --amber-900:#4A2E05;
  --red-50:#FEF2F2;  --red-100:#FCE0E0;  --red-400:#F87171;  --red-500:#EF4444;  --red-600:#DC2626;  --red-700:#B91C1C;  --red-900:#4A1010;
  --orange-50:#FFF4ED;--orange-400:#FB923C;--orange-500:#F97316;--orange-600:#EA580C;
  --violet-50:#F5F1FE;--violet-400:#A78BFA;--violet-500:#8B5CF6;--violet-600:#7C3AED;
  --cyan-50:#ECFDFB; --cyan-400:#2DD4BF; --cyan-500:#06B6D4; --cyan-600:#0891B2;
  --teal-50:#EDFBF7; --teal-400:#2DD4BF; --teal-500:#14B8A6; --teal-600:#0D9488;

  /* ============================================================
     SEMANTIC — LIGHT MODE (default)
     ============================================================ */
  --bg-canvas:var(--slate-50);
  --bg-base:var(--slate-0);
  --surface-1:var(--slate-0);
  --surface-2:var(--slate-50);
  --surface-3:var(--slate-100);
  --surface-raised:var(--slate-0);
  --surface-sunken:var(--slate-100);
  --surface-inverse:var(--slate-900);
  --surface-overlay:rgba(8,14,25,.45);

  --border-subtle:var(--slate-100);
  --border-default:var(--slate-200);
  --border-strong:var(--slate-300);
  --border-focus:var(--blue-500);

  --text-primary:var(--slate-900);
  --text-secondary:var(--slate-600);
  --text-tertiary:var(--slate-500);
  --text-disabled:var(--slate-300);
  --text-inverse:var(--slate-0);
  --text-link:var(--blue-600);
  --text-brand:var(--blue-600);

  --interactive-primary:var(--blue-600);
  --interactive-primary-hover:var(--blue-700);
  --interactive-primary-active:var(--blue-800);
  --interactive-primary-subtle:var(--blue-50);
  --interactive-secondary:var(--slate-100);
  --interactive-secondary-hover:var(--slate-200);
  --interactive-ghost-hover:var(--slate-100);
  --interactive-selected:var(--blue-50);
  --interactive-selected-border:var(--blue-500);
  --focus-ring:rgba(88,142,237,.45);

  /* Feedback (light) — surface tint / border / solid / on-solid text */
  --success-bg:var(--green-50);   --success-border:var(--green-500); --success-solid:var(--green-600); --success-text:var(--green-700); --success-on:var(--slate-0);
  --warning-bg:var(--amber-50);   --warning-border:var(--amber-500); --warning-solid:var(--amber-600); --warning-text:var(--amber-700); --warning-on:var(--slate-900);
  --error-bg:var(--red-50);       --error-border:var(--red-500);     --error-solid:var(--red-600);     --error-text:var(--red-700);     --error-on:var(--slate-0);
  --info-bg:var(--blue-50);       --info-border:var(--blue-500);     --info-solid:var(--blue-600);     --info-text:var(--blue-700);     --info-on:var(--slate-0);

  /* Data-viz categorical series (max 6 before repeating; distinct in hue + value) */
  --chart-1:var(--blue-500); --chart-2:var(--teal-500); --chart-3:var(--violet-500);
  --chart-4:var(--amber-500); --chart-5:var(--cyan-500); --chart-6:var(--red-500);
  --chart-grid:var(--slate-200); --chart-axis:var(--slate-400); --chart-empty:var(--slate-100);

  /* Map layer tokens (light basemap) */
  --map-surface:var(--slate-100); --map-route-real:var(--blue-600); --map-route-planned:var(--slate-400);
  --map-geofence-fill:rgba(88,142,237,.14); --map-geofence-stroke:var(--blue-500);
  --map-marker:var(--blue-600); --map-marker-cluster:var(--slate-800); --map-stop:var(--amber-500); --map-alert:var(--red-500);
}

/* ============================================================
   SEMANTIC — DARK MODE (control-room first)
   Applied via [data-theme="dark"] on any ancestor.
   ============================================================ */
[data-theme="dark"] {
  --bg-canvas:var(--slate-950);
  --bg-base:var(--slate-900);
  --surface-1:var(--slate-850);
  --surface-2:var(--slate-800);
  --surface-3:var(--slate-700);
  --surface-raised:var(--slate-800);
  --surface-sunken:var(--slate-950);
  --surface-inverse:var(--slate-0);
  --surface-overlay:rgba(3,7,14,.62);

  --border-subtle:#1E2A40;
  --border-default:#28344A;
  --border-strong:#3A4A63;
  --border-focus:var(--blue-400);

  --text-primary:#EAEEF4;
  --text-secondary:#A6B2C6;
  --text-tertiary:#7E8CA3;
  --text-disabled:#455063;
  --text-inverse:var(--slate-900);
  --text-link:var(--blue-400);
  --text-brand:var(--blue-400);

  --interactive-primary:var(--blue-500);
  --interactive-primary-hover:var(--blue-400);
  --interactive-primary-active:var(--blue-300);
  --interactive-primary-subtle:rgba(88,142,237,.16);
  --interactive-secondary:var(--slate-700);
  --interactive-secondary-hover:var(--slate-600);
  --interactive-ghost-hover:rgba(134,149,169,.14);
  --interactive-selected:rgba(88,142,237,.16);
  --interactive-selected-border:var(--blue-400);
  --focus-ring:rgba(110,155,239,.55);

  --success-bg:rgba(34,197,94,.14);  --success-border:var(--green-500); --success-solid:var(--green-500); --success-text:var(--green-400); --success-on:var(--slate-950);
  --warning-bg:rgba(245,158,11,.14); --warning-border:var(--amber-500); --warning-solid:var(--amber-500); --warning-text:var(--amber-400); --warning-on:var(--slate-950);
  --error-bg:rgba(239,68,68,.15);    --error-border:var(--red-500);     --error-solid:var(--red-500);     --error-text:var(--red-400);     --error-on:var(--slate-950);
  --info-bg:rgba(88,142,237,.15);    --info-border:var(--blue-500);     --info-solid:var(--blue-500);     --info-text:var(--blue-400);     --info-on:var(--slate-950);

  --chart-1:var(--blue-400); --chart-2:var(--teal-400); --chart-3:var(--violet-400);
  --chart-4:var(--amber-400); --chart-5:var(--cyan-400); --chart-6:var(--red-400);
  --chart-grid:#28344A; --chart-axis:#5F6E85; --chart-empty:#151F33;

  --map-surface:var(--slate-850); --map-route-real:var(--blue-400); --map-route-planned:var(--slate-500);
  --map-geofence-fill:rgba(88,142,237,.18); --map-geofence-stroke:var(--blue-400);
  --map-marker:var(--blue-400); --map-marker-cluster:var(--slate-200); --map-stop:var(--amber-400); --map-alert:var(--red-400);
}

/* ============================================================
   OPERATIONAL STATUS — theme-agnostic (readable on both modes).
   Every status MUST also carry an icon + label (never color alone).
   dot = indicator color, -bg / -text = chip surface + label.
   ============================================================ */
:root {
  --st-moving:var(--green-500);       /* en movimiento */
  --st-stopped:var(--amber-500);      /* detenido */
  --st-online:var(--green-500);       /* en línea */
  --st-offline:var(--slate-400);      /* fuera de línea */
  --st-no-signal:var(--orange-500);   /* sin señal */
  --st-no-gps:var(--violet-500);      /* sin GPS */
  --st-low-battery:var(--amber-500);  /* batería baja */
  --st-critical:var(--red-500);       /* alerta crítica */
  --st-attended:var(--green-600);     /* alerta atendida */
  --st-maintenance:var(--cyan-500);   /* mantenimiento */
  --st-geofence:var(--blue-500);      /* geocerca */
  --st-route:var(--teal-500);         /* recorrido */
  --st-pending:var(--amber-500);      /* evento pendiente */
  --st-unknown:var(--slate-400);      /* estado desconocido */
}
/* ============================================================================
   TRAPELTRACE — TYPOGRAPHY TOKENS
   Saira = display/headings (technical, geometric, echoes the extended logotype).
   Manrope = UI/body (legible, geometric, tabular numerals).
   JetBrains Mono = coordinates, patentes, device IDs, telemetry, timestamps.
   ============================================================================ */
:root {
  --font-display:'Saira','Manrope',system-ui,sans-serif;
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,'Menlo',monospace;

  /* Weights */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  /* Type scale — size (font) */
  --fs-display:44px; --fs-h1:32px; --fs-h2:26px; --fs-h3:21px; --fs-h4:17px;
  --fs-panel-title:14px; --fs-body-lg:16px; --fs-body:14px; --fs-body-sm:13px;
  --fs-label:13px; --fs-button:14px; --fs-table:13px; --fs-metric:30px;
  --fs-metric-lg:40px; --fs-overline:11px; --fs-caption:12px;
  --fs-mono-sm:12px; --fs-mono:13px; --fs-mono-lg:15px;

  /* Line-heights (unitless) */
  --lh-display:1.04; /* @kind other */
  --lh-h1:1.12; /* @kind other */
  --lh-h2:1.18; /* @kind other */
  --lh-h3:1.25; /* @kind other */
  --lh-h4:1.35; /* @kind other */
  --lh-panel-title:1.3; /* @kind other */
  --lh-body-lg:1.55; /* @kind other */
  --lh-body:1.5; /* @kind other */
  --lh-body-sm:1.45; /* @kind other */
  --lh-label:1.3; /* @kind other */
  --lh-button:1; /* @kind other */
  --lh-table:1.4; /* @kind other */
  --lh-metric:1.05; /* @kind other */
  --lh-metric-lg:1; /* @kind other */
  --lh-overline:1.2; /* @kind other */
  --lh-caption:1.4; /* @kind other */

  /* Letter-spacing / tracking */
  --ls-display:-0.02em; /* @kind other */
  --ls-h1:-0.015em; /* @kind other */
  --ls-h2:-0.01em; /* @kind other */
  --ls-h3:-0.005em; /* @kind other */
  --ls-h4:0; /* @kind other */
  --ls-panel-title:0.02em; /* @kind other */
  --ls-body-lg:0; /* @kind other */
  --ls-body:0; /* @kind other */
  --ls-body-sm:0; /* @kind other */
  --ls-label:0.005em; /* @kind other */
  --ls-button:0.01em; /* @kind other */
  --ls-table:0; /* @kind other */
  --ls-metric:-0.01em; /* @kind other */
  --ls-metric-lg:-0.02em; /* @kind other */
  --ls-overline:0.09em; /* @kind other */
  --ls-caption:0.01em; /* @kind other */
  --ls-mono:0.01em; /* @kind other */
}
/* ============================================================================
   TRAPELTRACE — SPACING, RADII, BORDERS, ELEVATION, MOTION, LAYERS, BREAKPOINTS
   Base unit = 4px. Dashboards run dense; 4/8 rhythm keeps high-density tables and
   panels aligned while leaving room for comfortable marketing/landing layouts.
   ============================================================================ */
:root {
  /* Spacing scale (4px base) */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* Semantic spacing */
  --gap-tight:var(--space-2);
  --gap-cozy:var(--space-3);
  --gap-default:var(--space-4);
  --gap-loose:var(--space-6);
  --pad-control:var(--space-3);      /* inputs / buttons inner x */
  --pad-card:var(--space-5);
  --pad-panel:var(--space-6);
  --pad-cell-compact:8px;            /* dense monitoring tables */
  --pad-cell-default:12px;
  --pad-cell-comfortable:16px;

  /* Layout widths */
  --w-content:1200px;      /* marketing / reports */
  --w-prose:680px;
  --w-sidebar:264px;
  --w-sidebar-collapsed:64px;
  --w-drawer:400px;
  --w-panel-detail:380px;
  --h-topbar:56px;
  --h-topbar-lg:64px;

  /* Radii — restrained, technical (never pill-round on structural surfaces) */
  --radius-none:0; --radius-xs:3px; --radius-sm:5px; --radius-md:8px;
  --radius-lg:12px; --radius-xl:16px; --radius-2xl:20px; --radius-pill:999px; --radius-round:50%;

  /* Border widths */
  --border-hair:1px; --border-thin:1.5px; --border-thick:2px; --border-accent:3px;

  /* Elevation — soft, cool-tinted, restrained (no heavy drop shadows) */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(8,14,25,.06);
  --shadow-sm:0 1px 3px rgba(8,14,25,.08),0 1px 2px rgba(8,14,25,.06);
  --shadow-md:0 4px 12px rgba(8,14,25,.10),0 1px 3px rgba(8,14,25,.06);
  --shadow-lg:0 12px 28px rgba(8,14,25,.14),0 4px 8px rgba(8,14,25,.06);
  --shadow-xl:0 24px 56px rgba(8,14,25,.20);
  --shadow-focus:0 0 0 3px var(--focus-ring);
  --shadow-inset:inset 0 1px 2px rgba(8,14,25,.08);
  /* Dark-mode elevation leans on borders + subtle glow rather than shadow */
  --shadow-dark-md:0 4px 16px rgba(0,0,0,.4);
  --shadow-dark-lg:0 16px 40px rgba(0,0,0,.5);

  /* Opacity */
  --opacity-disabled:.45; /* @kind other */
  --opacity-muted:.65; /* @kind other */
  --opacity-hover-veil:.08; /* @kind other */
  --opacity-scrim:.55; /* @kind other */

  /* Motion — sober, functional. Ease-out for entrances, standard for transforms. */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-moderate:280ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --ease-emphasized:cubic-bezier(.2,0,0,1.2); /* @kind other */
  --dur-map-marker:600ms;   /* @kind other */
  --dur-data-refresh:200ms; /* @kind other */

  /* Z-index layers */
  --z-base:0; /* @kind other */
  --z-raised:10; /* @kind other */
  --z-sticky:100; /* @kind other */
  --z-map-overlay:200; /* @kind other */
  --z-drawer:300; /* @kind other */
  --z-dropdown:400; /* @kind other */
  --z-modal:500; /* @kind other */
  --z-toast:600; /* @kind other */
  --z-tooltip:700; /* @kind other */

  /* Breakpoints (reference values; use in @media) */
  --bp-mobile:480px; /* @kind other */
  --bp-tablet:768px; /* @kind other */
  --bp-notebook:1024px; /* @kind other */
  --bp-desktop:1280px; /* @kind other */
  --bp-wide:1600px; /* @kind other */
  --bp-control:1920px; /* @kind other */
}
/* TRAPELTRACE — base reset + primitive helpers (kept minimal; components own their looks). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-primary);background:var(--bg-canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--interactive-primary-hover);text-decoration:underline}
button{font-family:inherit}
:where(button,a):focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
code,kbd,samp{font-family:var(--font-mono)}
.tt-mono{font-family:var(--font-mono);letter-spacing:var(--ls-mono);font-variant-numeric:tabular-nums}
.tt-num{font-variant-numeric:tabular-nums}
::selection{background:var(--interactive-primary-subtle);color:var(--text-brand)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}