/* =========================================
   MOTOBROSS — Industrial Racing Design System
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,600;1,700;1,800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Reset base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

:root {
  /* Brand */
  --lime: #B2E63A;
  --lime-rgb: 178,230,58;   /* mismo acento en RGB, para rgba(var(--lime-rgb), α) */
  --lime-bright: #C8FF3E;
  --lime-dim: #8AB52B;
  --lime-soft: rgba(var(--lime-rgb), 0.12);
  --lime-border: rgba(var(--lime-rgb), 0.28);

  /* Surfaces */
  --bg: #0A0A0B;
  --bg-2: #0F1011;
  --surface: #16181A;
  --surface-2: #1C1F22;
  --surface-3: #24272B;
  --elevated: #1F2225;

  /* Borders */
  --border: #26292D;
  --border-strong: #34383D;
  --border-soft: #1E2124;

  /* Text */
  --text: #F5F5F4;
  --text-mute: #9CA0A4;
  --text-dim: #6B6F73;
  --text-faint: #4A4D51;

  /* Semantic */
  --danger: #FF5151;
  --danger-soft: rgba(255, 81, 81, 0.12);
  --warn: #FFB020;
  --warn-soft: rgba(255, 176, 32, 0.14);
  --info: #5BB0FF;
  --info-soft: rgba(91, 176, 255, 0.12);

  /* Type */
  --font-display: 'Saira Condensed', 'Saira', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-pop: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-lime: 0 0 0 1px rgba(var(--lime-rgb),0.4), 0 0 24px rgba(var(--lime-rgb),0.15);

  /* Layout */
  --sidebar-w: 260px;
  --header-h: 64px;

  /* Gradientes y efectos temáticos */
  --bg-hero:           linear-gradient(135deg, #08090A 0%, #0E1012 100%);
  --bg-hero-inner:     linear-gradient(135deg, #0A0B0C 0%, #0E1012 100%);
  --bg-modal-header:   linear-gradient(135deg, #0A0B0C 0%, #0E1012 100%);
  --text-watermark:    rgba(255,255,255,0.03);
  --card-bg:           rgba(22,24,26,0.75);
  --card-border:       rgba(38,41,45,0.6);
  --drawer-bg:         rgba(10,10,11,0.88);
}

/* ══════════════════════════════════════════════════════════════════
   TEMA CLARO — Estilo C · Diurna "Papel Cálido"
   Paleta: neutros arena, acento lima-oliva, tipografía condensada
   ══════════════════════════════════════════════════════════════════ */
body.light-mode {
  /* ── Superficies (papel cálido, sin brillo de blanco puro) ──── */
  --bg:           #F0EBE0;
  --bg-2:         #E8E2D5;
  --surface:      #F4EFE4;
  --surface-2:    #FAF5EB;
  --surface-3:    #EFE9DD;
  --elevated:     #F4EFE4;

  /* ── Bordes / filetes ───────────────────────────────────────── */
  --border:       #E5DECF;
  --border-strong:#D6CDBB;
  --border-soft:  #ECE5D7;

  /* ── Texto (tinta cálida, suave — sin negro puro) ───────────── */
  /* Jerarquía real: principal < mute < dim < faint (antes el mute
     era casi tan oscuro como el principal → todo se veía duro). */
  --text:         #2C2924;
  --text-mute:    #5B5448;
  --text-dim:     #877F70;
  --text-faint:   #A89F8D;

  /* ── Acento lima-oliva (contraste sobre claro) ──────────────── */
  --lime:         #6E9A1F;
  --lime-rgb:     110,154,31;
  --lime-bright:  #84B827;
  --lime-dim:     #5B8418;
  --lime-soft:    rgba(110,154,31,0.10);
  --lime-border:  rgba(110,154,31,0.26);

  /* ── Semánticos suavizados para fondo claro ─────────────────── */
  --danger:       #D2453C;
  --danger-soft:  rgba(210,69,60,0.10);
  --warn:         #C68A1C;
  --warn-soft:    rgba(198,138,28,0.13);
  --info:         #4790D0;
  --info-soft:    rgba(71,144,208,0.10);

  /* ── Sombras suaves (papel, sin profundidad excesiva) ────────── */
  --shadow-card:  0 1px 3px rgba(40,30,15,0.05), 0 4px 14px rgba(40,30,15,0.06);
  --shadow-pop:   0 8px 32px rgba(40,30,15,0.13);
  --shadow-lime:  0 0 0 1px rgba(110,154,31,0.30), 0 0 18px rgba(110,154,31,0.11);

  /* ── Gradientes temáticos (cálidos, tenues) ─────────────────── */
  --bg-hero:         linear-gradient(135deg, #F2EDE2 0%, #EAE4D8 100%);
  --bg-hero-inner:   linear-gradient(135deg, #EFE9DE 0%, #E5DFD2 100%);
  --bg-modal-header: linear-gradient(135deg, #F2EDE2 0%, #EAE4D8 100%);
  --text-watermark:  rgba(44,41,36,0.04);
  --card-bg:         #F4EFE4;
  --card-border:     rgba(40,30,15,0.08);
  --drawer-bg:       rgba(245,241,232,0.98);
}

/* ── Sidebar diurna: arena cálida (no más oscura) ───────────────── */
body.light-mode .sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
body.light-mode .sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 55%;
  background: linear-gradient(180deg, var(--lime) 0%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
body.light-mode .sidebar-brand          { border-bottom-color: var(--border); }
body.light-mode .sidebar-brand-name     { color: var(--text); }
body.light-mode .sidebar-brand-sub      { color: var(--text-mute); font-family: var(--font-mono); letter-spacing: 0.1em; }
body.light-mode .nav-section-label,
body.light-mode .sidebar-section        { color: var(--text-dim); }
body.light-mode .nav-item               { color: var(--text-mute); }
body.light-mode .nav-item:hover         { background: rgba(var(--lime-rgb),0.08); color: var(--text); }
body.light-mode .nav-item.active        { background: rgba(var(--lime-rgb),0.13); color: var(--lime-dim); font-weight: 600; }
body.light-mode .nav-item.active .nav-icon { color: var(--lime); }
body.light-mode .nav-item .badge-num    { background: rgba(var(--lime-rgb),0.15); color: var(--lime-dim); }
body.light-mode .sidebar-user           { border-top-color: var(--border); }
body.light-mode .sidebar-user-name      { color: var(--text); }
body.light-mode .sidebar-user-role      { color: var(--text-mute); }
body.light-mode .sidebar-nav::-webkit-scrollbar-track { background: var(--surface-2); }
body.light-mode .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ============================================================
   VARIANTES DE TEMA  ·  seleccionables en Configuración
   - Claro base (data-light="calido")  = el bloque body.light-mode de arriba.
   - Oscuro base (data-dark="noche")   = el :root de arriba.
   Las demás variantes solo SOBRESCRIBEN variables de color.
   La tipografía nunca cambia.
   ============================================================ */

/* ── CLARO · Papel cálido (sepia tenue) ─────────────────────── */
body.light-mode[data-light="papel"] {
  --bg:#ECE6D9; --bg-2:#E4DDCD; --surface:#F1EBDE; --surface-2:#F6F0E4; --surface-3:#ECE5D6; --elevated:#F1EBDE;
  --border:#DED6C6; --border-strong:#CFC6B2; --border-soft:#E7E0D0;
  --text:#34302A; --text-mute:#675F52; --text-dim:#938B7C; --text-faint:#B0A795;
  --lime:#5C8418; --lime-rgb:92,132,24; --lime-dim:#4E7314; --lime-soft:rgba(92,132,24,0.10); --lime-border:rgba(92,132,24,0.26);
  --bg-hero:linear-gradient(135deg,#EFE9DC 0%,#E6DFD0 100%);
  --bg-hero-inner:linear-gradient(135deg,#ECE5D8 0%,#E2DACB 100%);
  --bg-modal-header:linear-gradient(135deg,#EFE9DC 0%,#E6DFD0 100%);
  --card-bg:#F1EBDE;
}

/* ── CLARO · Neutro frío (gris claro) ───────────────────────── */
body.light-mode[data-light="neutro"] {
  --bg:#F3F4F6; --bg-2:#E9EBEE; --surface:#FBFBFC; --surface-2:#FFFFFF; --surface-3:#F1F2F4; --elevated:#FBFBFC;
  --border:#E5E7EB; --border-strong:#D5D8DD; --border-soft:#EEF0F2;
  --text:#24272C; --text-mute:#5B6068; --text-dim:#878D95; --text-faint:#AEB3BA;
  --bg-hero:linear-gradient(135deg,#FAFBFC 0%,#F1F2F4 100%);
  --bg-hero-inner:linear-gradient(135deg,#F6F7F9 0%,#ECEEF1 100%);
  --bg-modal-header:linear-gradient(135deg,#FAFBFC 0%,#F1F2F4 100%);
  --text-watermark:rgba(20,24,30,0.04);
  --card-bg:#FBFBFC; --card-border:rgba(15,20,30,0.08);
}

/* ── CLARO · Treinta (estilo fintech: blanco + azul-pizarra + teal) ── */
body.light-mode[data-light="treinta"] {
  --bg:#EEF2F5; --bg-2:#E4EAEE; --surface:#FFFFFF; --surface-2:#F6F9FB; --surface-3:#EEF2F5; --elevated:#FFFFFF;
  --border:#E6EBEF; --border-strong:#D4DCE2; --border-soft:#EFF3F6;
  --text:#243441; --text-mute:#586872; --text-dim:#8795A0; --text-faint:#B0BAC3;
  /* Acento teal-esmeralda (iconos, enlaces, estados activos) */
  --lime:#12B886; --lime-rgb:18,184,134; --lime-dim:#0E9A72; --lime-bright:#16C997;
  --lime-soft:rgba(18,184,134,0.10); --lime-border:rgba(18,184,134,0.28);
  --danger:#E5484D; --danger-soft:rgba(229,72,77,0.10);
  --warn:#E0A21B; --warn-soft:rgba(224,162,27,0.13);
  --text-watermark:rgba(20,40,60,0.04);
  --card-bg:#FFFFFF; --card-border:rgba(20,40,60,0.07);
  --bg-hero:linear-gradient(135deg,#FFFFFF 0%,#F2F5F7 100%);
  --bg-hero-inner:linear-gradient(135deg,#FBFCFD 0%,#EFF3F6 100%);
  --bg-modal-header:linear-gradient(135deg,#FFFFFF 0%,#F2F5F7 100%);
}
/* Botón primario azul marino (como Treinta) */
body.light-mode[data-light="treinta"] .btn-primary {
  background:#1E2A38; color:#FFFFFF; border-color:#1E2A38;
}
body.light-mode[data-light="treinta"] .btn-primary:hover { background:#27384A; }
/* Item de menú activo con acento teal (frío, coherente con el tema) */
body.light-mode[data-light="treinta"] .sidebar { background:#FFFFFF; border-right-color:#E6EBEF; }
body.light-mode[data-light="treinta"] .nav-item { color:#586872; }
body.light-mode[data-light="treinta"] .nav-item:hover { background:#F1F4F6; color:#243441; }
body.light-mode[data-light="treinta"] .nav-item.active {
  background:var(--lime-soft); color:var(--lime-dim); font-weight:600;
}
body.light-mode[data-light="treinta"] .nav-item.active .nav-icon { color:var(--lime); }
body.light-mode[data-light="treinta"] .nav-item .badge-num { background:rgba(18,184,134,0.15); color:#0E9A72; }

/* ── CLARO · Rosa (blush cálido + rosa empolvado) ───────────── */
body.light-mode[data-light="rosa"] {
  --bg:#F7EFEE; --bg-2:#EFE3E1; --surface:#FDF8F7; --surface-2:#FFFFFF; --surface-3:#F4E9E7; --elevated:#FDF8F7;
  --border:#ECDFDD; --border-strong:#DEC9C6; --border-soft:#F3E8E6;
  --text:#3A2C32; --text-mute:#7A6A70; --text-dim:#A6949B; --text-faint:#C4B4BA;
  --lime:#D6638C; --lime-rgb:214,99,140; --lime-dim:#B84E76; --lime-bright:#E27BA0;
  --lime-soft:rgba(214,99,140,0.10); --lime-border:rgba(214,99,140,0.26);
  --danger:#D2453C; --danger-soft:rgba(210,69,60,0.10);
  --warn:#C68A1C; --warn-soft:rgba(198,138,28,0.13);
  --text-watermark:rgba(58,44,50,0.04);
  --card-bg:#FDF8F7; --card-border:rgba(60,44,50,0.07);
  --bg-hero:linear-gradient(135deg,#FDF8F7 0%,#F3E7E5 100%);
  --bg-hero-inner:linear-gradient(135deg,#FAF1F0 0%,#F0E3E1 100%);
  --bg-modal-header:linear-gradient(135deg,#FDF8F7 0%,#F3E7E5 100%);
}

/* ── OSCURO · Carbón / OLED (negro profundo) ────────────────── */
body:not(.light-mode)[data-dark="carbon"] {
  --bg:#000000; --bg-2:#070708; --surface:#0E0F10; --surface-2:#141517; --surface-3:#1B1C1E; --elevated:#0E0F10;
  --border:#1E2023; --border-strong:#2A2D31; --border-soft:#161719;
  --card-bg:rgba(14,15,16,0.85); --card-border:rgba(255,255,255,0.06);
  --bg-hero:linear-gradient(135deg,#000000 0%,#0A0B0C 100%);
  --bg-hero-inner:linear-gradient(135deg,#040405 0%,#0A0B0C 100%);
  --bg-modal-header:linear-gradient(135deg,#040405 0%,#0A0B0C 100%);
}

/* ── OSCURO · Azul noche (azulado, más suave) ───────────────── */
body:not(.light-mode)[data-dark="azulado"] {
  --bg:#0B0E14; --bg-2:#0F131A; --surface:#141925; --surface-2:#1A2030; --surface-3:#222A3C; --elevated:#141925;
  --border:#243047; --border-strong:#33425E; --border-soft:#1A2230;
  --text:#EAEDF3; --text-mute:#9AA3B5; --text-dim:#6B7488; --text-faint:#4C566B;
  --card-bg:rgba(20,25,37,0.80); --card-border:rgba(120,150,200,0.10);
  --bg-hero:linear-gradient(135deg,#080B11 0%,#0E121A 100%);
  --bg-hero-inner:linear-gradient(135deg,#0A0E15 0%,#0E121A 100%);
  --bg-modal-header:linear-gradient(135deg,#0A0E15 0%,#0E121A 100%);
}

/* ── OSCURO · Rosa noche (ciruela oscuro + acento rosa) ─────── */
body:not(.light-mode)[data-dark="rosa"] {
  --bg:#17121A; --bg-2:#1C151F; --surface:#221A26; --surface-2:#2A2030; --surface-3:#342839; --elevated:#221A26;
  --border:#352B3B; --border-strong:#473A4E; --border-soft:#241C29;
  --text:#F3EAEF; --text-mute:#B5A3AE; --text-dim:#8A7A84; --text-faint:#5E5160;
  --lime:#E889AE; --lime-rgb:232,137,174; --lime-dim:#D06E96; --lime-bright:#F2A0C0;
  --lime-soft:rgba(232,137,174,0.12); --lime-border:rgba(232,137,174,0.30);
  --card-bg:rgba(34,26,38,0.80); --card-border:rgba(232,137,174,0.10);
  --bg-hero:linear-gradient(135deg,#140F17 0%,#1A1320 100%);
  --bg-hero-inner:linear-gradient(135deg,#171019 0%,#1A1320 100%);
  --bg-modal-header:linear-gradient(135deg,#171019 0%,#1A1320 100%);
}

/* ── OSCURO · Treinta noche (azul-pizarra + teal, fintech) ──── */
body:not(.light-mode)[data-dark="treinta"] {
  --bg:#0F1720; --bg-2:#131D28; --surface:#172230; --surface-2:#1E2B3A; --surface-3:#283645; --elevated:#172230;
  --border:#26323F; --border-strong:#33424F; --border-soft:#1C2733;
  --text:#E4EAF0; --text-mute:#93A1B0; --text-dim:#6B7B8B; --text-faint:#4C5A68;
  --lime:#16C9A0; --lime-rgb:22,201,160; --lime-dim:#12A886; --lime-bright:#2DDDB4;
  --lime-soft:rgba(22,201,160,0.12); --lime-border:rgba(22,201,160,0.30);
  --card-bg:rgba(23,34,48,0.80); --card-border:rgba(120,160,200,0.10);
  --bg-hero:linear-gradient(135deg,#0C131B 0%,#101A24 100%);
  --bg-hero-inner:linear-gradient(135deg,#0E1620 0%,#101A24 100%);
  --bg-modal-header:linear-gradient(135deg,#0E1620 0%,#101A24 100%);
}

/* ── Avatar en modo claro: fondo lima, texto oscuro ─────────────── */
body.light-mode .avatar {
  background: var(--lime);
  color: #07130A;
  font-family: var(--font-display);
  font-style: italic;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
body.light-mode .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(30,20,10,0.04);
}

/* ── Botón primario (pill lima) ──────────────────────────────────── */
body.light-mode .btn-primary {
  background: var(--lime);
  color: #07130A;
  border-color: var(--lime);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(var(--lime-rgb),0.28);
}
body.light-mode .btn-primary:hover {
  background: var(--lime-dim);
  border-color: var(--lime-dim);
}
body.light-mode .btn {
  border-radius: 999px;
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
body.light-mode .btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
body.light-mode .icon-btn {
  color: var(--text-mute);
  border-color: var(--border-strong);
  background: transparent;
  border-radius: 999px;
}
body.light-mode .icon-btn:hover {
  background: rgba(var(--lime-rgb),0.10);
  color: var(--text);
}

/* ── Cards: sin sombras pesadas, jerarquía por filetes ─────────── */
body.light-mode .card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.light-mode .kpi-card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(40,30,15,0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── KPI separadores tipo filete (sin box) ───────────────────────── */
body.light-mode .kpi-row-flat {
  display: flex;
  gap: 0;
}
body.light-mode .kpi-row-flat .kpi-item {
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
body.light-mode .kpi-row-flat .kpi-item:first-child {
  border-left: none;
  padding-left: 0;
}

/* ── Tablas ──────────────────────────────────────────────────────── */
body.light-mode .tbl thead th {
  background: var(--surface-2);
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
}
body.light-mode .tbl tbody td { border-bottom-color: var(--border-soft); }
body.light-mode .tbl tbody tr:hover { background: var(--surface-3); }

/* ── Inputs / selects ────────────────────────────────────────────── */
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(var(--lime-rgb),0.14);
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: var(--text-faint); }

/* ── Badges ──────────────────────────────────────────────────────── */
body.light-mode .badge-lime   { background: var(--lime-soft);   color: var(--lime-dim); }
body.light-mode .badge-warn   { background: var(--warn-soft);   color: var(--warn); }
body.light-mode .badge-danger { background: var(--danger-soft); color: var(--danger); }
body.light-mode .badge-info   { background: var(--info-soft);   color: var(--info); }

/* ── Drawer ──────────────────────────────────────────────────────── */
body.light-mode .drawer {
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 40px rgba(30,20,10,0.10);
}
body.light-mode .drawer-overlay { background: rgba(26,23,20,0.28); }

/* ── Modales ─────────────────────────────────────────────────────── */
body.light-mode .modal-backdrop { background: rgba(26,23,20,0.45); }
body.light-mode .modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(30,20,10,0.18);
}
body.light-mode .modal-header {
  background: var(--bg-modal-header);
  border-bottom: 1px solid var(--border);
}

/* ── Tabs ────────────────────────────────────────────────────────── */
body.light-mode .tab-bar { border-bottom: 1px solid var(--border); }
body.light-mode .tab-btn { color: var(--text-dim); }
body.light-mode .tab-btn:hover { color: var(--text); }
body.light-mode .tab-btn.active {
  color: var(--lime);
  border-bottom-color: var(--lime);
  font-weight: 700;
}

/* ── Barras de progreso ──────────────────────────────────────────── */
body.light-mode .progress-track { background: var(--surface-3); border-radius: 2px; }
body.light-mode .progress-fill  { background: var(--lime); border-radius: 2px; }

/* ── Vin-strip / micro-labels mono ──────────────────────────────── */
body.light-mode .vin-strip {
  background: transparent;
  color: var(--text-dim);
  letter-spacing: 0.18em;
}

/* ── Divisores horizontales ─────────────────────────────────────── */
body.light-mode hr,
body.light-mode .divider { background: var(--border); }

/* ── Scrollbars globales ─────────────────────────────────────────── */
body.light-mode *                          { scrollbar-color: var(--border-strong) var(--surface-2); }
body.light-mode *::-webkit-scrollbar-track { background: var(--surface-2); }
body.light-mode *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
body.light-mode *::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
body.light-mode .canvas::-webkit-scrollbar-track  { background: var(--surface-2); }

/* ── Gráficos / sparklines (lima oliva) ─────────────────────────── */
body.light-mode .chart-line    { stroke: var(--lime) !important; }
body.light-mode .chart-fill    { fill: url(#lime-grad-light) !important; }
body.light-mode .chart-dot     { fill: var(--lime) !important; }
body.light-mode .chart-grid    { stroke: var(--border) !important; }

/* ── Código / mono inline ───────────────────────────────────────── */
body.light-mode code {
  background: var(--surface-3);
  color: var(--lime-dim);
  border: 1px solid var(--border);
}


/* Typography utilities */
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.mono { font-family: var(--font-mono); }

/* ===== Layout shell ===== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  background: var(--bg);
}

.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.sidebar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--lime) 0%, transparent 60%);
  opacity: 0.5;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand img {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}
.sidebar-brand-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.sidebar-brand-sub {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

.sidebar-section {
  padding: 14px 18px 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-weight: 600;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 14px;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: var(--bg); }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--text-mute);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active {
  background: var(--lime-soft);
  color: var(--lime);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--lime);
  border-radius: 0 2px 2px 0;
}
.nav-item .ic { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.nav-item .badge-new {
  margin-left: auto;
  background: var(--lime);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}
.nav-item .badge-num {
  margin-left: auto;
  background: var(--surface-2);
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  font-family: var(--font-mono);
}

.sidebar-user {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-user .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--lime);
  color: #000;
  font-weight: 700;
  display: grid; place-items: center;
  font-size: 13px;
  font-family: var(--font-display);
}
.sidebar-user-name { font-size: 13px; font-weight: 600; }
.sidebar-user-role { font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; }

/* Main canvas */
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg);
  flex-shrink: 0;
}
.topbar-title { 
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.topbar-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  width: 320px;
  gap: 8px;
}
.topbar-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  width: 100%;
}
.topbar-search input::placeholder { color: var(--text-dim); }
.topbar-search kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 1px 5px;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-mute);
  position: relative;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--lime);
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.canvas {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  position: relative;
}
.canvas::-webkit-scrollbar { width: 5px; height: 5px; }
.canvas::-webkit-scrollbar-track { background: #0A0A0B; }
.canvas::-webkit-scrollbar-thumb { background: #26292D; border-radius: 4px; }
.canvas::-webkit-scrollbar-thumb:hover { background: #34383D; }

/* Scrollbar global — tema oscuro */
* { scrollbar-width: thin; scrollbar-color: #26292D #0A0A0B; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: #0A0A0B; }
*::-webkit-scrollbar-thumb { background: #26292D; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #34383D; }

/* POS ocupa todo el canvas sin scroll ni padding */
[data-screen-label="pos"] .canvas {
  padding: 0 !important;
  overflow: hidden !important;
}

/* Motos: limitar ancho máximo en monitores grandes */
[data-screen-label="catalogo-moto"] .canvas {
  max-width: 1560px;
}

/* ===== Common controls ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary {
  background: var(--lime);
  color: #000;
  border-color: var(--lime);
  font-weight: 700;
}
.btn-primary:hover { background: var(--lime-bright); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-danger {
  color: var(--danger);
  border-color: rgba(255,81,81,0.3);
  background: var(--danger-soft);
}
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 6px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip.active {
  background: var(--lime);
  color: #000;
  border-color: var(--lime);
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge-lime { background: var(--lime-soft); color: var(--lime); border: 1px solid var(--lime-border); }
.badge-red { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255,81,81,0.28); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(255,176,32,0.3); }
.badge-info { background: var(--info-soft); color: var(--info); border: 1px solid rgba(91,176,255,0.3); }
.badge-neutral { background: var(--surface-2); color: var(--text-mute); border: 1px solid var(--border); }

/* Card */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  position: relative;
}
.card-pad { padding: 18px 20px; }

.kpi-card {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--lime);
  opacity: 0;
}
.kpi-card.accent::before { opacity: 1; }
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kpi-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1;
}
.kpi-sub {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Table */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.tbl tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.tbl tbody tr:hover { background: var(--bg-2); }
.tbl tbody tr.row-alert td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}
.tbl tbody tr.row-danger td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

/* Drawer */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: 480px;
  max-width: 100vw;
  background: var(--drawer-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--card-border);
  z-index: 51;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.22s cubic-bezier(.2,.7,.2,1);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.drawer-title {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: 20px; text-transform: uppercase; letter-spacing: 0.01em;
  flex: 1;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.input, .select, .textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--text);
  font-size: 13.5px;
  width: 100%;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(var(--lime-rgb),0.15);
}
.input-with-icon {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 0 12px;
  gap: 8px;
}
.input-with-icon input {
  background: transparent; border: none; outline: none;
  padding: 10px 0;
  color: var(--text);
  font-size: 13.5px;
  width: 100%;
}
.input-with-icon input::placeholder { color: var(--text-dim); }

.toggle {
  position: relative;
  width: 36px; height: 20px;
  background: var(--surface-2);
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.15s;
}
.toggle.on { background: var(--lime); border-color: var(--lime); }
.toggle.on::after { left: 18px; background: #000; }

/* Status dot */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.lime { background: var(--lime); box-shadow: 0 0 8px rgba(var(--lime-rgb),0.7); }
.status-dot.red { background: var(--danger); }
.status-dot.warn { background: var(--warn); }
.status-dot.dim { background: var(--text-faint); }

/* Product thumbnail (placeholder pattern) */
.thumb {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #1A1D20, #0F1011);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  flex-shrink: 0;
  background-image: 
    repeating-linear-gradient(45deg, rgba(var(--lime-rgb),0.06) 0px, rgba(var(--lime-rgb),0.06) 1px, transparent 1px, transparent 6px);
}
.thumb-lg { width: 56px; height: 56px; font-size: 10px; }

/* Helmet bar separators */
.dash-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 16px 0;
}

/* Grid helpers */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

.text-mute { color: var(--text-mute); }
.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.text-lime { color: var(--lime); }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.font-mono { font-family: var(--font-mono); }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.08em; }

.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 13.5px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 28px; }
.text-3xl { font-size: 36px; }
.text-4xl { font-size: 48px; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* Section title */
.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-title::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--lime);
  display: inline-block;
}

/* Tab bar */
.tabs {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 2px;
}
.tab {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mute);
  cursor: pointer;
  user-select: none;
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--lime);
  color: #000;
}

.tabs-underline {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}
.tab-u {
  padding: 12px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-u:hover { color: var(--text); }
.tab-u.active { color: var(--lime); border-bottom-color: var(--lime); }

/* Sparkline + chart placeholders */
.spark {
  height: 36px;
  width: 100%;
  position: relative;
}

/* Empty state */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-mute);
}
.empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid; place-items: center;
  margin: 0 auto 16px;
  color: var(--lime);
}

/* Login screen */
.login-stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
}
.login-art {
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--border);
}
.login-form-side {
  display: grid;
  place-items: center;
  padding: 40px;
}
.login-card {
  width: 100%;
  max-width: 400px;
}

/* Mobile preview frame styles */
.mobile-shell {
  background: var(--bg);
  height: 100%;
  overflow-y: auto;
  font-family: var(--font-body);
  color: var(--text);
}

/* Premium banner */
.banner-premium {
  background: linear-gradient(90deg, #08090A 0%, #11140F 100%);
  border: 1px solid var(--lime-border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  position: relative;
  overflow: hidden;
}
.banner-premium::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(var(--lime-rgb),0.18), transparent 60%);
}

/* VIN/SKU strip */
.vin-strip {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Tweaks panel adjustments (override defaults) */
.tp-host {
  --tp-bg: var(--surface);
  --tp-border: var(--border-strong);
  --tp-fg: var(--text);
  --tp-accent: var(--lime);
}

/* Custom styled payment badges */
.badge-nequi {
  background: rgba(138, 43, 226, 0.12) !important;
  color: #c79cff !important;
  border: 1px solid rgba(138, 43, 226, 0.35) !important;
}
.badge-daviplata {
  background: rgba(225, 29, 72, 0.12) !important;
  color: #ff8fa3 !important;
  border: 1px solid rgba(225, 29, 72, 0.35) !important;
}
.badge-transferencia {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
}
.badge-efectivo {
  background: var(--lime-soft) !important;
  color: var(--lime) !important;
  border: 1px solid var(--lime-border) !important;
}
.badge-tarjeta {
  background: rgba(6, 182, 212, 0.12) !important;
  color: #67e8f9 !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
}
.badge-credito {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border: 1px solid rgba(255, 176, 32, 0.3) !important;
}

/* KPI sparkline hover transitions */
.kpi-sparkline {
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.kpi-card:hover .kpi-sparkline {
  opacity: 1;
  transform: translateY(-1px);
}

/* ===== Modal overlay ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.15s ease;
}

.modal {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.18s ease;
}

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-mute);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.modal-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Modal alterno (.modal-box) usado en Empleados/Roles — base temática.
   Antes solo tenía estilos en light-mode; ahora sigue cualquier tema. */
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  animation: slideUp 0.18s ease;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-modal-header);
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ============================================================
   Responsive · Catálogo de Motos (móvil)
   Corrige salto/parpadeo y lag al hacer scroll en móvil. Causas:
   (1) backdrop-filter:blur en .card se repinta en cada frame;
   (2) scroll anidado con 100vh recalcula al mostrarse/ocultarse
       la barra del navegador.
   Solución: sin blur, una sola columna, sin sticky y sin scroll
   anidado (un único contexto de scroll = la página).
   ============================================================ */
@media (max-width: 768px) {
  /* El blur de fondo (backdrop-filter) se repinta en cada frame de scroll y
     causa lag/parpadeo en móvil. Lo desactivamos y dejamos el fondo opaco
     (var(--surface) coincide con el color de la tarjeta en ambos temas). */
  .card, .kpi-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
  }

  .moto-catalog-grid {
    grid-template-columns: 1fr !important;
  }
  .moto-left-panel {
    position: static !important;
    top: auto !important;
  }
  .moto-list-scroll {
    max-height: none !important;           /* un solo contexto de scroll: la página */
    overflow: visible !important;          /* sin scroll anidado = sin jank al subir */
  }
}