/* ============================================
   MANDAO — Design System
   Tu Kiosco, en tu puerta. 24/7
   ============================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Colors - Dark Premium Theme */
  --bg-primary: #030308;
  --bg-secondary: #080811;
  --bg-surface: rgba(13, 13, 26, 0.85);
  --bg-card: rgba(13, 13, 26, 0.65);
  --bg-card-hover: rgba(25, 25, 45, 0.8);
  --bg-card-glass: rgba(13, 13, 26, 0.7);
  --bg-elevated: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(5, 5, 12, 0.6);
  --bg-product-image: #ffffff;

  /* Neon Colors */
  --neon-orange: #ff5e2b;
  --neon-cyan: #00ffd1;
  --neon-pink: #ff2a85;
  --neon-green: #39ff14;

  /* Brand Colors (Updated to Neons) */
  --accent-orange: #ff5e2b;
  --accent-orange-light: #ff7e54;
  --accent-orange-dark: #e54b1f;
  --accent-amber: #ffb703;
  --accent-amber-light: #ffd166;
  --accent-cyan: #00ffd1;
  --accent-cyan-light: #80ffea;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #ff5e2b 0%, #ff2a85 100%);
  --gradient-brand-hover: linear-gradient(135deg, #ff7e54 0%, #ff529c 100%);
  --gradient-dark: linear-gradient(180deg, #030308 0%, #080811 100%);
  --gradient-card: linear-gradient(135deg, rgba(255, 94, 43, 0.08) 0%, rgba(255, 42, 133, 0.04) 100%);
  --gradient-cyan: linear-gradient(135deg, #00ffd1 0%, #0088cc 100%);
  --gradient-cyan-blue: linear-gradient(135deg, #00ffd1 0%, #0022ff 100%);

  /* Status Colors */
  --success: #39ff14;
  --success-bg: rgba(57, 255, 20, 0.12);
  --warning: #ffb703;
  --warning-bg: rgba(255, 183, 3, 0.12);
  --error: #ff2a85;
  --error-bg: rgba(255, 42, 133, 0.12);
  --info: #00ffd1;
  --info-bg: rgba(0, 255, 209, 0.12);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #030308;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.09);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(255, 94, 43, 0.35);

  /* Shadows and Glows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(255, 94, 43, 0.15);
  --shadow-glow-lg: 0 0 40px rgba(255, 94, 43, 0.25);
  --glow-orange: 0 0 25px rgba(255, 94, 43, 0.25);
  --glow-cyan: 0 0 25px rgba(0, 255, 209, 0.25);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Border Radius - Premium rounded web version */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Typography */
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Glass */
  --glass-bg: rgba(13, 13, 26, 0.7);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: blur(16px);
}

/* ---------- Tema claro ----------
   El selector incluye la raíz y el body además del contenedor del cliente.
   Antes solo estaba #sector-cliente, así que las variables del tema claro
   existían ÚNICAMENTE dentro de ese contenedor. Los modales —dirección,
   producto, sesión— cuelgan del body, fuera de él, y por eso se quedaban con
   los colores oscuros de :root aunque el sitio estuviera en claro.
   Era la causa de fondo de «tal ventana sigue oscura en tema claro». */
:root[data-theme="light"],
body[data-theme="light"],
#sector-cliente[data-theme="light"] {
  --bg-primary: #f5f6fa;
  --bg-secondary: #ecedf2;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f1f5;
  --bg-card-glass: rgba(255, 255, 255, 0.85);
  --bg-card-subtle: rgba(0, 0, 0, 0.025);
  --bg-elevated: rgba(0, 0, 0, 0.04);
  --bg-input: rgba(0, 0, 0, 0.04);
  --bg-header: rgba(255, 255, 255, 0.92);
  --bg-drawer: rgba(255, 255, 255, 0.98);
  --bg-product-image: #f0f1f5;

  --text-primary: #1a1a2e;
  --text-secondary: #5a6178;
  /* El gris de las etiquetas chicas, algo más oscuro que antes.
     Estaba en #8e95a9, que sobre blanco daba 2,99 de contraste: casi la mitad
     del 4,5 que hace falta. En el tema claro es más grave que en el oscuro,
     porque un gris claro sobre blanco es lo primero que se borra con el sol
     de frente. */
  --text-tertiary: #6b7180;
  --text-inverse: #ffffff;

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-hover: rgba(0, 0, 0, 0.18);
  --border-accent: rgba(255, 94, 43, 0.25);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 4px 16px rgba(255, 94, 43, 0.12);
  --shadow-glow-lg: 0 8px 32px rgba(255, 94, 43, 0.18);
  --glow-orange: 0 4px 20px rgba(255, 94, 43, 0.15);
  --glow-cyan: 0 4px 20px rgba(0, 180, 160, 0.15);
  --shadow-color: rgba(0, 0, 0, 0.06);

  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(0, 0, 0, 0.08);

  /* Light-specific status colors (softer for white backgrounds) */
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.10);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.10);
  --error: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.10);
  --info: #0891b2;
  --info-bg: rgba(8, 145, 178, 0.10);

  /* Adjusted neon colors for readability on white */
  --neon-pink: #dc2626;
  --accent-cyan: #0891b2;
  --accent-cyan-light: #06b6d4;

  /* Gradient adjustments for light */
  --gradient-dark: linear-gradient(180deg, #f5f6fa 0%, #ecedf2 100%);
  --gradient-card: linear-gradient(135deg, rgba(255, 94, 43, 0.05) 0%, rgba(255, 42, 133, 0.02) 100%);
}

/* ---------- Theme: Dark / Night (ONLY Client Portal) ---------- */
:root[data-theme="dark"],
body[data-theme="dark"],
#sector-cliente[data-theme="dark"] {
  --bg-primary: #0d1017;
  --bg-secondary: #141824;
  --bg-surface: #141824;
  --bg-card: #141824;
  --bg-card-hover: #1c2235;
  --bg-card-glass: rgba(20, 24, 36, 0.85);
  --bg-card-subtle: rgba(255, 255, 255, 0.03);
  --bg-elevated: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-header: rgba(13, 16, 23, 0.95);
  --bg-drawer: rgba(15, 19, 30, 0.98);
  --bg-product-image: #ffffff;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  /* Un poco más claro que antes, mismo tono.
     Este es el gris de las etiquetas chicas: "hace 5 min", "Km 9", los pies de
     tarjeta. Con el valor anterior (#64748b) quedaba en 3,7 de contraste sobre
     la tarjeta, por debajo del 4,5 que necesita un texto de este tamaño. Se
     leía bien en un escritorio a oscuras y desaparecía en un celular al sol
     —que es justamente donde lo mira el mandadero. Rige para el tema oscuro
     completo, así que también mejora el del cliente. */
  --text-tertiary: #7386a1;
  --text-inverse: #0d1017;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.2);
  --border-accent: rgba(255, 94, 43, 0.35);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(255, 94, 43, 0.15);
  --shadow-glow-lg: 0 0 40px rgba(255, 94, 43, 0.25);
  --glow-orange: 0 0 25px rgba(255, 94, 43, 0.25);
  --glow-cyan: 0 0 25px rgba(0, 255, 209, 0.25);
  --shadow-color: rgba(0, 0, 0, 0.5);

  --glass-bg: rgba(20, 24, 36, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-orange);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-orange-light);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  font-family: var(--font-ui);
  border: none;
  outline: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font-ui);
  outline: none;
  border: none;
}

ul, ol {
  list-style: none;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); font-weight: 700; }
h3 { font-size: var(--text-3xl); font-weight: 700; }
h4 { font-size: var(--text-2xl); font-weight: 600; }
h5 { font-size: var(--text-xl); font-weight: 600; }
h6 { font-size: var(--text-lg); font-weight: 600; }

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-secondary {
  color: var(--text-secondary);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-sm {
  max-width: 640px;
}

.container-md {
  max-width: 960px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.grid {
  display: grid;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.w-full {
  width: 100%;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* ---------- Glass Card ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card-glow:hover {
  box-shadow: var(--shadow-glow);
  border-color: var(--border-accent);
}

.card-flat {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.card-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.card-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

.card-stat .stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-primary);
  margin: var(--space-sm) 0;
}

.card-stat .stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.card-stat .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--transition-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--transition-fast);
}

.btn:hover::after {
  background: rgba(255, 255, 255, 0.05);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--gradient-brand);
  color: var(--text-inverse);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow-lg);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-secondary:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover {
  background: #16a34a;
}

.btn-outline {
  background: transparent;
  color: var(--accent-orange);
  border: 1px solid var(--accent-orange);
}

.btn-outline:hover {
  background: rgba(255, 107, 43, 0.1);
}

.btn-sm {
  padding: 8px 16px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 16px 32px;
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn-xl {
  padding: 18px 40px;
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

/* NAVBAR LOCATION FRAMELESS WITH 3D ORANGE PIN */
.navbar-location-link {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 9999px;
  padding: 4px 8px;
}
.navbar-location-link:hover {
  background: rgba(255, 94, 43, 0.1);
}
.navbar-location-link:hover .navbar-pin-icon {
  transform: translateY(-2px) scale(1.12);
  filter: drop-shadow(0 4px 12px rgba(255, 94, 43, 0.9)) !important;
}

/* LEAFLET CUSTOM MARKER ZERO MARGIN RESET */
.custom-leaflet-marker {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn-icon.sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

.btn-block {
  width: 100%;
}

/* ---------- Inputs ---------- */
.form-group {
  position: relative;
  margin-bottom: var(--space-lg);
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: all var(--transition-base);
}

.form-input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 43, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

/* ---------- Segmented Control de Roles (Ultra Profesional & Limpio) ---------- */
.auth-role-tabs-container {
  display: flex;
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  margin-bottom: 18px;
  box-sizing: border-box;
}

:root[data-theme="light"] .auth-role-tabs-container,
body[data-theme="light"] .auth-role-tabs-container {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.auth-role-tab {
  flex: 1;
  position: relative;
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

/* Divisores verticales sutiles entre secciones inactivas */
.auth-role-tab:not(:last-child):not(.active)::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 25%;
  height: 50%;
  width: 1px;
  background: var(--border-default);
  transition: opacity 0.2s ease;
}

:root[data-theme="light"] .auth-role-tab:not(:last-child):not(.active)::after,
body[data-theme="light"] .auth-role-tab:not(:last-child):not(.active)::after {
  background: #94a3b8 !important;
}

.auth-role-tab:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] .auth-role-tab {
  color: #334155 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .auth-role-tab:hover:not(.active),
body[data-theme="light"] .auth-role-tab:hover:not(.active) {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Pestaña activa: Píldora estructurada con micro-borde y realce */
.auth-role-tab.active {
  font-weight: 800;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-bottom: 2px solid var(--accent-orange) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="light"] .auth-role-tab.active,
body[data-theme="light"] .auth-role-tab.active {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #94a3b8 !important;
  border-bottom: 2.5px solid #ff5e2b !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

/* Título de acción en modal */
:root[data-theme="light"] #dropdown-auth-title,
body[data-theme="light"] #dropdown-auth-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* ---------- Botón Modo Invitado (Sin emojis, estructurado) ---------- */
.auth-guest-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 11px 16px !important;
  border-radius: var(--radius-full) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  margin-top: 12px !important;
  background: var(--bg-card-subtle) !important;
  border: 1.5px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.auth-guest-btn:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--accent-orange) !important;
  color: var(--accent-orange) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

:root[data-theme="light"] .auth-guest-btn,
body[data-theme="light"] .auth-guest-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .auth-guest-btn:hover,
body[data-theme="light"] .auth-guest-btn:hover {
  background: #f8fafc !important;
  border-color: #ff5e2b !important;
  color: #ff5e2b !important;
  box-shadow: 0 4px 12px rgba(255, 94, 43, 0.12) !important;
}

/* ---------- Tarjetas de Postulación Profesional (Comercio & Mandadero) ---------- */
.auth-notice-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

:root[data-theme="light"] .auth-notice-card,
body[data-theme="light"] .auth-notice-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

.auth-notice-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 94, 43, 0.15) 0%, rgba(255, 43, 109, 0.08) 100%);
  border: 1.5px solid rgba(255, 94, 43, 0.3);
  color: var(--accent-orange);
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(255, 94, 43, 0.15);
}

:root[data-theme="light"] .auth-notice-icon-badge,
body[data-theme="light"] .auth-notice-icon-badge {
  background: #fff5f0 !important;
  border: 1.5px solid #ff9e7d !important;
  color: #ff5e2b !important;
  box-shadow: 0 4px 14px rgba(255, 94, 43, 0.12) !important;
}

.auth-notice-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}

:root[data-theme="light"] .auth-notice-title,
body[data-theme="light"] .auth-notice-title {
  color: #0f172a !important;
}

.auth-notice-desc {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 16px;
}

:root[data-theme="light"] .auth-notice-desc,
body[data-theme="light"] .auth-notice-desc {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}

.auth-notice-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px 18px !important;
  border-radius: var(--radius-full) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 4px 14px rgba(255, 94, 43, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  border: none !important;
}

.auth-notice-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(255, 94, 43, 0.4) !important;
}

.auth-notice-footer {
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
  color: var(--text-secondary);
}

:root[data-theme="light"] .auth-notice-footer,
body[data-theme="light"] .auth-notice-footer {
  color: #334155 !important;
  font-weight: 600 !important;
}

.auth-notice-footer a {
  color: var(--accent-orange) !important;
  font-weight: 800 !important;
  text-decoration: none;
}

.auth-notice-footer a:hover {
  text-decoration: underline;
}

/* Modales e inputs en tema claro */
:root[data-theme="light"] #auth-dropdown .form-input,
body[data-theme="light"] #auth-dropdown .form-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #auth-dropdown .form-label,
body[data-theme="light"] #auth-dropdown .form-label {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* El cartel no puede ser translúcido: deja pasar la portada de atrás y el texto
   compite con lo que se ve por debajo. */
.auth-dropdown {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .auth-dropdown,
body[data-theme="light"] .auth-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Grillas responsive de formularios sin solapamientos en móviles */
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

@media (max-width: 640px) {
  .form-row-2col {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

.form-label-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: var(--space-sm);
  width: 100%;
}

.badge-ia-status {
  font-size: 10px;
  color: var(--accent-cyan);
  font-weight: 800;
  background: rgba(0, 255, 209, 0.12);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.5px;
}

/* Reglas responsive de insignias de portal para cero colisiones en móviles */
@media (max-width: 640px) {
  .portal-header-badge {
    font-size: 9.5px !important;
    padding: 4px 10px !important;
    letter-spacing: 0.5px !important;
  }

  /* En pantalla chica achica la letra, pero NO el alto: son 44 px de dedo. */
  .navbar-btn-back {
    font-size: 11px !important;
    padding: 0 12px !important;
  }

  .portal-header-navbar {
    padding: 10px 12px !important;
  }
}

@media (max-width: 400px) {
  .portal-header-badge {
    font-size: 8.5px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.2px !important;
  }
}

/* Lista de Requisitos con Asteriscos / Viñetas Destacadas */
.req-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 8px 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.req-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
}

.req-asterisk {
  font-weight: 900 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.req-asterisk.orange {
  color: var(--accent-orange) !important;
}

.req-asterisk.cyan {
  color: var(--accent-cyan) !important;
}

/* Floating label */
.form-floating {
  position: relative;
}

.form-floating .form-input {
  padding: 20px 16px 8px;
}

.form-floating .form-input:focus + .floating-label,
.form-floating .form-input:not(:placeholder-shown) + .floating-label {
  top: 6px;
  font-size: var(--text-xs);
  color: var(--accent-orange);
}

.floating-label {
  position: absolute;
  top: 14px;
  left: 16px;
  color: var(--text-tertiary);
  font-size: var(--text-base);
  transition: all var(--transition-base);
  pointer-events: none;
}

.form-select {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: all var(--transition-base);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.form-select:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 43, 0.15);
}

.form-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-base);
  resize: vertical;
  min-height: 100px;
  transition: all var(--transition-base);
}

.form-textarea:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 43, 0.15);
}

/* Search input */
.search-wrapper {
  position: relative;
}

.search-wrapper .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 1.1rem;
}

.search-wrapper .form-input {
  padding-left: 42px;
}

/* ---------- Toggle Switch ---------- */
.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: all var(--transition-spring);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(24px);
  background: white;
}

/* Big toggle for rider */
.toggle-big {
  width: 80px;
  height: 44px;
}

.toggle-big .toggle-slider::before {
  height: 34px;
  width: 34px;
  left: 4px;
  bottom: 4px;
}

.toggle-big input:checked + .toggle-slider::before {
  transform: translateX(36px);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.badge-primary {
  background: rgba(255, 107, 43, 0.15);
  color: var(--accent-orange);
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge-danger {
  background: var(--error-bg);
  color: var(--error);
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
}

.badge-neutral {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.badge-outline {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.badge-24h {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #22c55e !important;
  font-weight: 700;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.badge-eco {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.badge-lg {
  padding: 6px 14px;
  font-size: var(--text-sm);
}

/* ---------- Navigation / Header ---------- */
/* ---------- Navigation / Header (Rediseño Estilo Rappi) ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(7, 7, 13, 0.85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 var(--space-lg);
  height: 80px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: var(--space-lg);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Navbar Menu (Desktop Landing) */
.navbar-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.navbar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--transition-base);
  border: 1px solid transparent;
  white-space: nowrap;
}

.navbar-link:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.navbar-link.active {
  color: var(--text-primary);
  background: var(--gradient-brand);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: flex-start;
}

.navbar-hamburger {
  font-size: 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
}

.navbar-hamburger:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

.navbar-brand-minimal {
  display: flex;
  align-items: center;
  height: 42px;
}

.navbar-brand-minimal img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.navbar-location {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--bg-elevated);
  padding: 8px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.navbar-location:hover {
  border-color: var(--accent-orange);
  box-shadow: var(--shadow-glow);
}

.navbar-location select {
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-xs);
  cursor: pointer;
  padding-right: 4px;
}

.navbar-search {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

.navbar-search-input {
  width: 100%;
  padding: 12px 18px 12px 42px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: all var(--transition-base);
}

.navbar-search-input:focus {
  border-color: var(--accent-orange);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-glow);
}

.navbar-search-icon {
  position: absolute;
  left: 16px;
  color: var(--text-tertiary);
  font-size: 1rem;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: flex-end;
}

.navbar-login-btn {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-full);
}

.navbar-login-btn:hover {
  color: var(--accent-orange);
  background: var(--bg-elevated);
}

.navbar-cart-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 16px;
  background: var(--gradient-brand);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-glow);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
}

.navbar-cart-btn:hover {
  box-shadow: var(--shadow-glow-lg);
  transform: translateY(-1px);
}

.navbar-cart-badge {
  background: var(--text-inverse);
  color: var(--accent-orange);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  margin-left: 4px;
}

/* ---------- Menú Lateral (Sidebar Drawer) ---------- */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2000; /* Asegurar que se sitúe al frente de la navbar y el contenido */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  z-index: 2001; /* Mayor z-index que el backdrop */
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
}

.sidebar-drawer.open {
  transform: translateX(0);
}

.sidebar-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.sidebar-drawer-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.sidebar-drawer-close {
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
}

.sidebar-drawer-close:hover {
  color: var(--error);
}

/* Tarjeta Promocional en Sidebar */
.sidebar-drawer-promo {
  margin-bottom: var(--space-xl);
}

.sidebar-drawer-promo-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--gradient-card);
  border: 1px solid var(--border-accent);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.sidebar-drawer-promo-card::after {
  content: 'PROMO';
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent-orange);
  color: var(--text-inverse);
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  border-bottom-left-radius: 4px;
}

.sidebar-drawer-promo-icon {
  font-size: 2rem;
}

.sidebar-drawer-promo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-drawer-promo-text strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.sidebar-drawer-promo-text span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Enlaces del Sidebar */
.sidebar-drawer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-grow: 1;
}

.sidebar-drawer-links li {
  width: 100%;
}

.sidebar-drawer-links a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: all var(--transition-base);
}

.sidebar-drawer-links a:hover {
  border-color: var(--accent-orange);
  background: var(--bg-card-hover);
  color: var(--accent-orange);
  transform: translateX(4px);
}

.sidebar-drawer-link-icon {
  font-size: 1.2rem;
}

/* ---------- Modales de Cuenta e Ingreso (Google + Manual) ---------- */
.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-lg);
}

.login-tab {
  flex: 1;
  text-align: center;
  padding: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.login-tab.active {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  width: 100%;
  padding: 14px;
  background: #ffffff;
  color: #1f1f1f;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-sm);
  border: 1px solid #dadce0;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-lg);
}

.google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.google-icon-svg {
  width: 20px;
  height: 20px;
}

.divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  margin: var(--space-md) 0;
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-subtle);
}

.divider-text:not(:empty)::before {
  margin-right: .5em;
}

.divider-text:not(:empty)::after {
  margin-left: .5em;
}

.form-group {
  margin-bottom: var(--space-md);
  text-align: left;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.form-input:focus {
  border-color: var(--accent-orange);
  background: var(--bg-secondary);
}

/* Modales para Selección de Ubicación en Mapa */
.location-map-container {
  height: 350px;
  /* El fondo se ve solo mientras carga el mapa: con un color fijo casi negro
     dejaba un rectángulo oscuro sobre la ventana clara. */
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-md);
  position: relative;
}

/* Avatar de usuario logueado en Header */
.navbar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  border: 2px solid var(--border-hover);
  cursor: pointer;
}

/* ---------- Layout de Catálogo Split Desktop ---------- */
.catalog-split-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  width: 100%;
}

@media (min-width: 992px) {
  .catalog-split-container {
    grid-template-columns: 7fr 3fr;
    align-items: start;
  }

  .catalog-side-cart {
    display: block !important;
    position: sticky;
    top: 100px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: var(--space-lg);
    border-radius: var(--radius-sm);
  }
}

@media (max-width: 991px) {
  .catalog-side-cart {
    display: none !important;
  }
}

/* Responsive Navbar Adaptations */
@media (max-width: 991px) {
  .navbar {
    grid-template-columns: auto 1fr auto;
  }
  .navbar-search {
    display: none;
  }
  .navbar-location {
    display: none;
  }
  .navbar-login-btn {
    display: none;
  }
}

/* Body padding for bottom nav - 0px on desktop */
body.has-bottom-nav {
  padding-bottom: 0;
}

@media (max-width: 991px) {
  body.has-bottom-nav {
    padding-bottom: 96px !important;
  }
}

/* Mobile bottom nav - hidden on desktop */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(7, 7, 13, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--border-subtle);
  display: none;
  justify-content: space-around;
  padding: var(--space-sm) 0;
  padding-bottom: env(safe-area-inset-bottom, var(--space-sm));
}

@media (max-width: 991px) {
  .bottom-nav {
    display: flex;
  }
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) var(--space-md);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  transition: color var(--transition-fast);
  position: relative;
}

.bottom-nav-item .nav-icon {
  font-size: 1.3rem;
  transition: transform var(--transition-spring);
}

.bottom-nav-item.active {
  color: var(--accent-orange);
}

.bottom-nav-item.active .nav-icon {
  transform: scale(1.15);
}

.bottom-nav-item .nav-badge {
  position: absolute;
  top: 0;
  right: 8px;
  width: 18px;
  height: 18px;
  background: var(--error);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* ---------- Sidebar (Admin/Kiosco) ---------- */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  background: var(--bg-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sticky);
  transition: transform var(--transition-base);
}

.sidebar-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-nav {
  padding: var(--space-md);
  flex: 1;
  overflow-y: auto;
}

.sidebar-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-md) var(--space-md) var(--space-sm);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-base);
  margin-bottom: 2px;
}

.sidebar-link:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

.sidebar-link.active {
  color: var(--accent-orange);
  background: rgba(255, 107, 43, 0.1);
}

.sidebar-link .link-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.main-with-sidebar {
  margin-left: 260px;
  min-height: 100vh;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 3px;
  overflow-x: auto;
}

.tab {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  transition: all var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  background: var(--bg-surface);
  color: var(--accent-orange);
  box-shadow: var(--shadow-sm);
}

/* ---------- Toast Notifications ---------- */
.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  min-width: 300px;
  max-width: 420px;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  animation: slideInRight var(--transition-spring) forwards;
}

.toast.toast-exit {
  animation: slideOutRight var(--transition-base) forwards;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-error { border-left: 3px solid var(--error); }
.toast-info { border-left: 3px solid var(--info); }

.toast-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 2px;
}

.toast-message {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.toast-close {
  color: var(--text-tertiary);
  font-size: 1.2rem;
  padding: 4px;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.toast-close:hover {
  color: var(--text-primary);
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--transition-spring);
}

.modal-backdrop.active .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.modal-body {
  padding: var(--space-lg);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}

/* ---------- Timeline (Order Tracking) ---------- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-md) 0;
}

.timeline-item {
  display: flex;
  gap: var(--space-md);
  position: relative;
  padding-bottom: var(--space-xl);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.timeline-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 1;
  background: var(--bg-elevated);
  border: 2px solid var(--border-default);
  color: var(--text-tertiary);
  transition: all var(--transition-base);
}

.timeline-line {
  position: absolute;
  top: 32px;
  left: 50%;
  width: 2px;
  height: calc(100% - 8px);
  background: var(--border-default);
  transform: translateX(-50%);
}

.timeline-item:last-child .timeline-line {
  display: none;
}

.timeline-item.completed .timeline-dot {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.timeline-item.completed .timeline-line {
  background: var(--success);
}

.timeline-item.active .timeline-dot {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: white;
  box-shadow: 0 0 12px rgba(92, 103, 242, 0.4);
  animation: pulse-dot 2s ease-in-out infinite;
}

.timeline-content {
  padding-top: 4px;
  flex: 1;
}

.timeline-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.timeline-item:not(.completed):not(.active) .timeline-title {
  color: var(--text-tertiary);
}

.timeline-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.timeline-item.completed .timeline-desc,
.timeline-item.active .timeline-desc {
  color: var(--text-secondary);
}

/* ---------- Rating Stars ---------- */
.rating {
  display: flex;
  gap: 2px;
}

.rating .star {
  font-size: 1.1rem;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rating .star.filled {
  color: var(--accent-amber);
}

.rating .star:hover {
  transform: scale(1.2);
}

.rating-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.rating-display .star-icon {
  color: var(--accent-amber);
}

/* ---------- Progress Bar ---------- */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar .progress-fill {
  height: 100%;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ---------- Avatar ---------- */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-default);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--accent-orange);
  flex-shrink: 0;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--text-xs);
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: var(--text-lg);
}

.avatar-xl {
  width: 72px;
  height: 72px;
  font-size: var(--text-2xl);
}

.avatar-status {
  position: relative;
}

.avatar-status::after {
  content: '';
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  background: var(--text-tertiary);
}

.avatar-status.online::after {
  background: var(--success);
}

.avatar-status.busy::after {
  background: var(--warning);
}

/* ---------- Empty State ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
}

.empty-state .empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.empty-state .empty-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.empty-state .empty-text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 360px;
  margin: 0 auto var(--space-lg);
}

/* ---------- Skeleton Loading ---------- */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-elevated) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-text.sm { height: 12px; width: 60%; }
.skeleton-text.lg { height: 24px; }

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-image {
  height: 200px;
  width: 100%;
}

/* ---------- Chip / Tag ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--transition-base);
}

.chip:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.chip.active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--text-inverse);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(92, 103, 242, 0.25);
}

/* ---------- Divider ---------- */
.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-lg) 0;
}

.divider-sm {
  margin: var(--space-md) 0;
}

/* ---------- Counter (Qty Buttons) ---------- */
.qty-counter {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 1.1rem;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.qty-btn:hover {
  background: var(--bg-card-hover);
}

.qty-value {
  width: 36px;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ---------- Order Card ---------- */
.order-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}

.order-card:hover {
  border-color: var(--border-hover);
}

.order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.order-card-body {
  padding: var(--space-lg);
}

.order-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
}

/* ---------- Product Card ----------
   Tenía el blanco y el borde escritos a mano con !important, igual que los
   campos de formulario: en tema oscuro estas tarjetas se quedaban blancas.
   Ahora salen del tema, y de paso comparten los valores con las tarjetas del
   checkout, que es lo que hace que las dos pantallas se sientan del mismo
   sitio. */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--transition-base);
  height: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
  border-color: rgba(255, 94, 43, 0.3) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

.product-card .product-image {
  height: 130px;
  width: 100%;
  background: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.product-card .product-image-container {
  height: 160px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  position: relative;
}

.product-card .product-image-container img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 6px;
  transition: transform var(--transition-base);
  transform: scale(1.05);
}

.product-card:hover .product-image-container img {
  transform: scale(1.12);
}

.product-card .product-image .out-of-stock,
.product-card .product-image-container .out-of-stock {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 8, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--error);
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-card .product-info {
  padding: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.product-card .product-name {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a !important; /* Slate dark text */
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 34px;
  line-height: 1.3;
}

.product-card .product-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-orange) !important; /* Orange accent */
}

.product-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-xs);
}

.product-add-circle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  padding: 0 !important;
  line-height: 1 !important;
}

.product-add-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 94, 43, 0.4);
}

.product-qty-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f1f5f9 !important; /* Light background for pill */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--radius-sm);
  padding: 2px;
  width: 72px;
  height: 32px;
}

.qty-pill-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #0f172a !important; /* Dark slate text */
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.qty-pill-btn:hover {
  background: rgba(0,0,0,0.05);
}

.qty-pill-val {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a !important; /* Dark slate text */
  text-align: center;
  user-select: none;
}

.product-volume-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(13, 14, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  width: 32px;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 5;
}

.volume-value {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  display: block;
}

.volume-unit {
  font-size: 8px;
  font-weight: 700;
  color: var(--accent-orange-light);
  display: block;
  text-transform: uppercase;
}

.modal-add-btn-premium {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--radius-lg);
  height: 60px;
  border: none;
  cursor: pointer;
  background: var(--gradient-brand);
  color: white;
  box-shadow: 0 4px 15px rgba(92, 103, 242, 0.35);
  transition: all var(--transition-base);
}

.modal-add-btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(92, 103, 242, 0.5);
  filter: brightness(1.1);
}

.modal-add-btn-premium:active {
  transform: translateY(0);
}

.product-card .product-actions {
  padding: 0 var(--space-md) var(--space-md);
}

/* ---------- Kiosk Card ---------- */
.kiosk-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .kiosk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .kiosk-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
}

.kiosk-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-base);
}

.kiosk-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-3px);
}

.kiosk-card .kiosk-banner {
  height: 100px;
  background: var(--gradient-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  position: relative;
}

.kiosk-card .kiosk-status {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
}

.kiosk-card .kiosk-info {
  padding: var(--space-md);
}

.kiosk-card .kiosk-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: 4px;
}

.kiosk-card .kiosk-address {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kiosk-card .kiosk-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ---------- Cart ---------- */
.cart-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-image {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-price {
  font-weight: 700;
  color: var(--accent-orange);
  font-size: var(--text-sm);
}

.cart-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.cart-summary-row.total {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.cart-summary-row.total .amount {
  color: var(--accent-orange);
  font-family: var(--font-display);
}

/* ---------- Floating Cart Button (Mandao Pro Mobile FAB) ---------- */
.cart-fab {
  position: fixed;
  bottom: 28px;
  right: 20px;
  z-index: 999;
  background: linear-gradient(135deg, #ff5e2b 0%, #ff2a85 100%);
  color: #ffffff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 10px 28px rgba(255, 94, 43, 0.45), 0 0 20px rgba(255, 43, 133, 0.25);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  touch-action: manipulation;
}

.cart-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 35px rgba(255, 94, 43, 0.55), 0 0 25px rgba(255, 43, 133, 0.35);
}

.cart-fab:active {
  transform: scale(0.95);
}

.cart-fab .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 9999px;
  background: #ffffff;
  color: #ff5e2b;
  font-family: var(--font-display, sans-serif);
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ff5e2b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* ---------- Map Placeholder ---------- */
.map-container {
  width: 100%;
  height: 200px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.map-container .map-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7, 7, 13, 0.3), rgba(7, 7, 13, 0.1));
}

.map-pin {
  font-size: 2rem;
  z-index: 1;
  animation: bounce-pin 2s ease-in-out infinite;
}

/* ---------- Section ---------- */
.section {
  padding: var(--space-3xl) 0;
}

.section-header {
  margin-bottom: var(--space-xl);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

/* ---------- Page Header ---------- */
.page-header {
  padding: var(--space-xl) 0;
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
}

/* ---------- Table ---------- */
.table-container {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
}

.table td {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-subtle);
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--bg-card);
}

/* ---------- PRO BACK BUTTON BAR & BREADCRUMBS ---------- */




.breadcrumb-pro-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(15, 23, 42, 0.05);
  padding: 7px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.breadcrumb-city {
  color: #334155;
  font-weight: 800;
}

.breadcrumb-sep {
  color: #94a3b8;
  font-weight: 800;
}

.breadcrumb-active-item {
  color: #e54b1f;
  font-weight: 900;
  letter-spacing: 0.4px;
}

.section-title-clean {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  letter-spacing: -0.3px;
}


/* ---------- View Management ---------- */
.view {
  display: none;
  animation: fadeIn var(--transition-base) forwards;
}

.view.active {
  display: block;
}

/* ---------- Notification Sound Indicator ---------- */
.notification-pulse {
  position: relative;
}

.notification-pulse::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: var(--error);
  border-radius: 50%;
  animation: pulse-notification 1.5s ease-in-out infinite;
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 12px rgba(92, 103, 242, 0.4); }
  50% { box-shadow: 0 0 24px rgba(92, 103, 242, 0.7); }
}

@keyframes pulse-notification {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

@keyframes bounce-pin {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes scooter-ride {
  0% { transform: translateX(-100%) rotate(0deg); }
  25% { transform: translateX(25vw) rotate(-2deg); }
  50% { transform: translateX(50vw) rotate(2deg); }
  75% { transform: translateX(75vw) rotate(-1deg); }
  100% { transform: translateX(100vw) rotate(0deg); }
}

.animate-fadeIn { animation: fadeIn var(--transition-base) forwards; }
.animate-fadeInUp { animation: fadeInUp var(--transition-slow) forwards; }
.animate-fadeInDown { animation: fadeInDown var(--transition-slow) forwards; }
.animate-slideInLeft { animation: slideInLeft var(--transition-slow) forwards; }
.animate-slideInUp { animation: slideInUp var(--transition-spring) forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }

.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }

/* ---------- Utility ---------- */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* ---------- Spinner ---------- */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-default);
  border-top-color: var(--accent-orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* ---------- Notification Bell ---------- */
.notification-bell {
  position: relative;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.notification-bell:hover {
  background: var(--bg-card);
}

.notification-bell .bell-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--error);
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
}

/* ============================================
   HERO / LANDING PAGE
   ============================================ */

.hero {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl) 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg::before {
  content: none !important;
}

.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
}

.hero-emoji {
  font-size: 5rem;
  margin-bottom: var(--space-lg);
  animation: float 3s ease-in-out infinite;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  margin-bottom: var(--space-lg);
  line-height: 1.1;
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.hero-scooter {
  position: absolute;
  bottom: 120px;
  font-size: 3rem;
  animation: scooter-ride 12s linear infinite;
  z-index: 0;
  opacity: 0.15;
}

/* Feature cards on landing */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--transition-base);
}

.feature-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.feature-text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Steps section */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xl);
  position: relative;
}

.step {
  text-align: center;
  position: relative;
}

.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  margin: 0 auto var(--space-md);
}

.step-title {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.step-text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* CTA Section */
.cta-section {
  background: var(--gradient-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  text-align: center;
}

/* Footer */
.footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2xl) 0;
  margin-top: var(--space-3xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
}

.footer-title {
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.footer-link {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  padding: 4px 0;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--accent-orange);
}

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-with-sidebar {
    margin-left: 0;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --text-3xl: 1.5rem;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: var(--text-base);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .navbar-menu {
    display: none;
  }

  .navbar .menu-toggle {
    display: flex;
  }

  .cta-section {
    padding: var(--space-2xl) var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .toast-container {
    left: var(--space-md);
    right: var(--space-md);
  }

  .toast {
    min-width: auto;
  }

  .modal {
    margin: var(--space-md);
    max-height: calc(100vh - var(--space-xl));
  }

  /* Body padding for bottom nav */
  body.has-bottom-nav {
    padding-bottom: 72px;
  }
}

@media (max-width: 480px) {
  .hero-emoji {
    font-size: 3.5rem;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  .card {
    padding: var(--space-md);
  }

  .kiosk-card .kiosk-banner {
    height: 90px;
  }
}

/* ---------- Print ---------- */
@media print {
  body {
    background: white;
    color: black;
  }

  .navbar, .sidebar, .sidebar-drawer, .bottom-nav, .cart-fab, .toast-container {
    display: none !important;
  }
}

/* ---------- Premium Visual Customizations ---------- */
body.premium-bg-1 {
  background: linear-gradient(rgba(3, 3, 8, 0.7), rgba(3, 3, 8, 0.95)), url('../RECURSOS/opt/fondo-premium-1.webp?v=54d2ca94') no-repeat center center fixed;
  background-size: cover;
}

/* Las altas de comercio y de mandadero van sobre fondo plano.

   La foto premium lleva encima un negro de rgba(3,3,8,.7) a .95, y el tema
   claro pinta el texto oscuro: quedaba texto oscuro sobre fondo casi negro.
   Medido en esos formularios: 23 de 26 textos por debajo del mínimo, la
   mayoría en 1,21 de contraste cuando hace falta 4,5.

   Con dos clases le gana a `body.premium-bg-1` sin necesidad de !important. */
/* El alta de mandadero traía colores hechos para el fondo negro: cajas de
   rgba(30,41,59,.45) con texto casi blanco encima, y cian sobre transparente.
   Sacada la foto de fondo quedaron 9 textos por debajo del mínimo, el peor en
   1,72. Se corrigen acá porque los estilos están escritos en el HTML y no hay
   otra forma de alcanzarlos sin tocar cada uno. */
body.sin-fondo-premium #mandadero-dni-frente-preview,
body.sin-fondo-premium #mandadero-dni-dorso-preview,
body.sin-fondo-premium #mandadero-selfie-preview {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(100, 116, 139, 0.5) !important;
}

body.sin-fondo-premium #mandadero-dni-frente-preview span,
body.sin-fondo-premium #mandadero-dni-dorso-preview span,
body.sin-fondo-premium #mandadero-selfie-preview span {
  color: var(--text-primary) !important;
}

/* El segundo renglón de cada caja es la aclaración: más suave, pero legible. */
body.sin-fondo-premium #mandadero-dni-frente-preview span + span,
body.sin-fondo-premium #mandadero-dni-dorso-preview span + span,
body.sin-fondo-premium #mandadero-selfie-preview span + span {
  color: var(--text-secondary) !important;
}

/* El cian de marca no llega a 4,5 sobre fondo claro. Es el mismo caso que el
   naranja: hace falta un tono propio para texto. */
body.sin-fondo-premium .badge-ia-status,
body.sin-fondo-premium #sector-nuevo-mandadero [style*="--accent-cyan"] {
  color: #0e6b7d !important;
}

/* El recuadro que envuelve los requisitos tenía rgba(15,23,42,.65): azul casi
   negro, otro resto del tema oscuro. Sobre fondo claro dejaba una caja gris
   oscura y el texto verde encima daba 1,07. */
body.sin-fondo-premium #mandadero-password-reqs,
body.sin-fondo-premium #comercio-password-reqs,
body.sin-fondo-premium #reg-password-reqs {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(100, 116, 139, 0.35) !important;
}


/* Los requisitos de la contraseña. Los colores estaban escritos en
   `js/auth.js` y eran los del tema oscuro. Acá funcionan en los dos. */
/* La forma la comparten los cuatro; el color lo pone el estado. */
.req-badge {
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.req-pendiente {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-weight: 600;
  box-shadow: none;
}

.req-cumplido {
  background: rgba(4, 120, 87, 0.10);
  border: 1px solid rgba(4, 120, 87, 0.35);
  color: #065f46;
  font-weight: 700;
}

/* En oscuro el verde tiene que aclararse para seguir leyéndose. */
:root[data-theme="dark"] .req-cumplido,
body[data-theme="dark"] .req-cumplido {
  background: rgba(0, 255, 209, 0.12);
  border: 1px solid rgba(0, 255, 209, 0.4);
  color: #5eead4;
}

body.premium-bg-1.sin-fondo-premium,
body.premium-bg-2.sin-fondo-premium,
body.premium-bg-3.sin-fondo-premium,
body.sin-fondo-premium {
  background: var(--bg-primary, #f5f6fa);
}

body.premium-bg-2 {
  background: linear-gradient(rgba(3, 3, 8, 0.7), rgba(3, 3, 8, 0.95)), url('../RECURSOS/opt/fondo-premium-2.webp?v=54d2ca94') no-repeat center center fixed;
  background-size: cover;
}

body.premium-bg-3 {
  background: linear-gradient(rgba(3, 3, 8, 0.7), rgba(3, 3, 8, 0.95)), url('../RECURSOS/opt/fondo-premium-3.webp?v=54d2ca94') no-repeat center center fixed;
  background-size: cover;
}

/* Modificación de tipografía para menús interactivos y elementos clave */
.bottom-nav-item, 
.sidebar-nav a, 
.btn, 
.chip, 
.filter-chips .chip, 
.navbar-nav a,
.navbar-brand,
.brand-text,
.card-title,
.timeline-title,
.badge {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
}

/* High-contrast selected kiosk banner text details */
.kiosk-header-address {
  font-size: var(--text-sm);
  margin-top: 4px;
  color: var(--text-primary);
  font-weight: 500;
}

.kiosk-header-meta {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ==========================================================================
   NUEVAS CLASES DE DISEÑO PREMIUM (CYBER-MIDNIGHT CONTRATS)
   ========================================================================== */

/* Navbar Flotante Glass */
.navbar {
  background: rgba(13, 13, 26, 0.65) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.navbar-link {
  position: relative;
  transition: color var(--transition-fast);
}

.navbar-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-brand);
  transition: width var(--transition-fast);
  border-radius: var(--radius-full);
}

.navbar-link:hover::after,
.navbar-link.active::after {
  width: 100%;
}

.navbar-link:hover {
  color: var(--accent-orange) !important;
}

/* Glassmorphism Cards */
.card-glass {
  background: var(--bg-card-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}

.card-glass:hover {
  border-color: rgba(255, 94, 43, 0.45);
  box-shadow: var(--glow-orange);
  transform: translateY(-4px);
}

/* Glassmorphism Cards (Cyan Hover Variant) */
.card-glass-cyan:hover {
  border-color: rgba(0, 255, 209, 0.45);
  box-shadow: var(--glow-cyan);
  transform: translateY(-4px);
}

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 992px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

/* Efecto Shimmer de Barrido de Luz en Botones */
@keyframes shimmer {
  100% { left: 125%; }
}

.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(30deg);
  transition: none;
}

.btn-shimmer:hover::after {
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Animaciones 3D */
@keyframes float-y {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float-y {
  animation: float-y 5s ease-in-out infinite;
}

/* Badge con Luz Neón Parpadeante (Servicio Activo) */
.active-dot {
  width: 8px;
  height: 8px;
  background-color: var(--neon-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon-green);
  display: inline-block;
  position: relative;
}

.active-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--neon-green);
  animation: pulse-glow 2s infinite;
}

.active-dot.red {
  background-color: var(--error);
  box-shadow: 0 0 10px var(--error);
}

.active-dot.red::after {
  background-color: var(--error);
}

@keyframes pulse-glow {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Leaflet Dark Map Tile Inversion Filter (Disabled for light map style) */
.leaflet-container .leaflet-tile-pane {
  filter: none;
}

.leaflet-container {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg);
}

/* Botones de Disponibilidad Grandes para Repartidor */
.btn-availability {
  box-shadow: 0 0 0 rgba(57, 255, 20, 0);
  transition: all var(--transition-spring);
}

.online-control-card.online .btn-availability {
  box-shadow: 0 0 35px var(--neon-green);
  animation: pulse-glow-ring 2s infinite;
}

@keyframes pulse-glow-ring {
  0% { box-shadow: 0 0 0 0px rgba(57, 255, 20, 0.4); }
  70% { box-shadow: 0 0 0 20px rgba(57, 255, 20, 0); }
  100% { box-shadow: 0 0 0 0px rgba(57, 255, 20, 0); }
}

/* Input Fields Glass styling */
.form-input, .search-input {
  background: rgba(13, 13, 26, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary) !important;
  transition: all var(--transition-base) !important;
}

.form-input:focus, .search-input:focus {
  border-color: var(--accent-orange) !important;
  box-shadow: 0 0 15px rgba(255, 94, 43, 0.25) !important;
}

/* --- ROLE CARDS LANDING PAGE (PISTA DE ATERRIZAJE) --- */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.role-card {
  background: rgba(13, 13, 26, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-xl) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  position: relative;
  transition: all var(--transition-base);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.role-card:hover {
  border-color: rgba(255, 94, 43, 0.5) !important;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(255, 94, 43, 0.2);
}

.role-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: #ffffff !important;
  margin-bottom: 6px;
}

.role-desc {
  font-size: 12px;
  color: var(--text-secondary) !important;
  line-height: 1.5;
}
/* BOTÓN HAMBURGUESA VIP SIMÉTRICO ESTILO RAPPI/UBEREATS */
.btn-hamburger-pill {
  width: 38px;
  height: 38px;
  border-radius: 9999px !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  outline: none !important;
}

.btn-hamburger-pill:hover {
  background: rgba(255, 94, 43, 0.12) !important;
  border-color: rgba(255, 94, 43, 0.35) !important;
  color: var(--accent-orange) !important;
  box-shadow: 0 4px 14px rgba(255, 94, 43, 0.25) !important;
  transform: translateY(-1px);
}

.btn-hamburger-pill:hover svg {
  color: var(--accent-orange) !important;
}

/* BOTÓN VOLVER DE ALTA GAMA ESTILO UBEREATS/RAPPI PRO */




/* CAJÓN LATERAL DE CARRITO VIP (TEMA ADAPTATIVO AL 100%) */
#right-cart-drawer {
  background: var(--bg-drawer) !important;
  color: var(--text-primary) !important;
  border-left: 1px solid var(--border-default) !important;
}

#right-cart-drawer .drawer-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--bg-surface) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#right-cart-drawer .drawer-header h3 {
  color: var(--text-primary) !important;
}

#right-cart-drawer .drawer-header button {
  color: var(--text-secondary) !important;
}

.cart-drawer-footer {
  padding: 20px 24px 24px 24px !important;
  border-top: 1px solid var(--border-subtle) !important;
  background: var(--bg-surface) !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08) !important;
}

.cart-subtotal-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

.cart-subtotal-amount {
  color: var(--accent-orange) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  font-family: var(--font-display) !important;
}

.btn-checkout-pay {
  width: 100% !important;
  border-radius: 9999px !important;
  padding: 14px 24px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(255, 94, 43, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.btn-checkout-pay:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(255, 94, 43, 0.55) !important;
}

/* CONTENEDOR GRID DE PRODUCTOS ESTILO TIPO FIFA / CATÁLOGO MULTI-COLUMNA */
#plates-container {
  display: grid !important;
  /* De 210 a 160: la tarjeta es una vista rápida, no necesita tanto ancho.
     En una pantalla de 880 pasan de 3 columnas a 4. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

@media (max-width: 600px) {
  #plates-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* TARJETAS DE PRODUCTOS COMPACTAS ESTILO FIFA CLUB */
.dish-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
}

.dish-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  border-color: rgba(255, 94, 43, 0.5) !important;
  box-shadow: 0 12px 30px rgba(255, 94, 43, 0.22) !important;
}

.dish-card.out-of-stock {
  opacity: 0.65 !important;
  filter: grayscale(0.6) !important;
  cursor: not-allowed !important;
}

.dish-thumb-container {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  background: var(--bg-card-subtle) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
/* La foto de producto ocupa el espacio completo de la card en formato cuadrado 1:1,
   mostrando la comida apetitosa, grande y nítida. */
.dish-thumb-container .foto-producto {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}

.dish-thumb {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.35s ease !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08)) !important;
}

.dish-card:hover .dish-thumb {
  transform: scale(1.05) !important;
}

.dish-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 0 !important;
}

.dish-title {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 34px !important;
}

.dish-desc {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.dish-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

.dish-price {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--accent-orange) !important;
  font-family: var(--font-display) !important;
}

.btn-add-quick {
  padding: 5px 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  background: rgba(255, 94, 43, 0.12) !important;
  border: 1px solid rgba(255, 94, 43, 0.35) !important;
  color: var(--accent-orange) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-add-quick:hover {
  background: var(--accent-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 94, 43, 0.4) !important;
}

/* MODAL DE DETALLE DE PRODUCTO VIP ADAPTATIVO AL TEMA CON COLOR SÓLIDO */
#dish-modal .dish-modal-card {
  width: 100% !important;
  max-width: 480px !important;
  background: #121324 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85) !important;
}

/* REGULA TEMA CLARO SÓLIDO (#ffffff) CERO TRANSPARENCIAS */
[data-theme="light"] #dish-modal .dish-modal-card,
body[data-theme="light"] #dish-modal .dish-modal-card,
#sector-cliente[data-theme="light"] #dish-modal .dish-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18) !important;
}

.dish-modal-close-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .dish-modal-close-btn,
#sector-cliente[data-theme="light"] .dish-modal-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.dish-modal-close-btn:hover {
  background: var(--accent-orange) !important;
  color: #ffffff !important;
  border-color: var(--accent-orange) !important;
  transform: scale(1.08) !important;
}

/* CONTENEDOR AMPLIO DE IMAGEN 280PX HEIGHT */
.dish-modal-img-container {
  position: relative !important;
  width: 100% !important;
  height: 280px !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
}

[data-theme="dark"] .dish-modal-img-container,
#sector-cliente[data-theme="dark"] .dish-modal-img-container {
  background: #1a1b30 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dish-modal-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15)) !important;
  transition: transform 0.3s ease !important;
}

/* SECTOR PRECIOS Y CONTADOR DEL MODAL VIP */
.dish-modal-pricing-box {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #1a1b30 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 14px 20px !important;
  margin-bottom: 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .dish-modal-pricing-box,
body[data-theme="light"] .dish-modal-pricing-box,
#sector-cliente[data-theme="light"] .dish-modal-pricing-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.dish-modal-price-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--text-tertiary) !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 2px !important;
}

.dish-modal-price-val {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--accent-orange) !important;
  font-family: var(--font-display) !important;
  letter-spacing: -0.5px !important;
}

.dish-modal-qty-control {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 4px 6px !important;
  border-radius: 9999px !important;
}

[data-theme="light"] .dish-modal-qty-control,
body[data-theme="light"] .dish-modal-qty-control,
#sector-cliente[data-theme="light"] .dish-modal-qty-control {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.btn-qty-action {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .btn-qty-action,
body[data-theme="light"] .btn-qty-action,
#sector-cliente[data-theme="light"] .btn-qty-action {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.btn-qty-action.active {
  background: var(--accent-orange) !important;
  border: 1px solid var(--accent-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 94, 43, 0.45) !important;
}

.btn-qty-action:hover {
  transform: scale(1.08) !important;
}

.qty-num-display {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  min-width: 28px !important;
  text-align: center !important;
}

[data-theme="light"] .qty-num-display,
body[data-theme="light"] .qty-num-display,
#sector-cliente[data-theme="light"] .qty-num-display {
  color: #0f172a !important;
}

.btn-modal-add-cart {
  width: 100% !important;
  padding: 16px 24px !important;
  border-radius: 9999px !important;
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 8px 25px rgba(255, 94, 43, 0.45) !important;
  transition: all 0.25s ease !important;
}

.btn-modal-add-cart:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(255, 94, 43, 0.6) !important;
}

.modal-total-badge {
  font-size: 16px !important;
  font-weight: 900 !important;
  font-family: var(--font-display) !important;
}

/* Estilos VIP para los componentes del Navbar de Inicio */
.navbar-location-btn {
  color: #ffffff !important;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar-location-btn:hover {
  border-color: var(--accent-orange) !important;
  background: rgba(255, 94, 43, 0.08) !important;
  box-shadow: 0 0 10px rgba(255, 94, 43, 0.25);
  transform: translateY(-1px);
}

/* Los dos botones del encabezado llegan a los 44 px del estándar táctil.
 *
 * Medidos el 20/8 en producción: «Iniciar Sesión» daba 32 px y «Registrarse»
 * 30. Son los dos botones más tocados de toda la portada —la puerta de entrada
 * de cualquiera que llega por primera vez— y eran los únicos del sitio por
 * debajo de la medida. El resto ya cumplía.
 *
 * El `min-height` con `inline-flex` sube la altura sin agrandar la letra ni
 * romper el alineado con el logo. */
.btn-nav-login,
.navbar .btn-primary.btn-sm,
.btn-nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
}

.btn-nav-login {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-full) !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  margin-right: 8px;
  transition: all 0.2s ease-in-out !important;
}

.btn-nav-login:hover {
  border-color: var(--accent-orange) !important;
  background: rgba(255, 94, 43, 0.08) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 94, 43, 0.25);
  transform: translateY(-1px);
}

/* ==========================================================================
   LANDING PAGE PREMIUM SECTIONS & MOCKUPS (MANDAO STYLE)
   ========================================================================== */

.landing-section {
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.landing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .landing-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .landing-grid.reversed {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.landing-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.landing-title span {
  background: linear-gradient(135deg, var(--accent-orange), var(--neon-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.landing-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.landing-bullets li::before {
  content: "✓";
  color: var(--accent-orange);
  font-weight: 900;
  font-size: 16px;
  background: rgba(255, 94, 43, 0.1);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 94, 43, 0.2);
}

/* --- MOCKUP INTERACTIVO COMERCIO --- */
.mockup-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  perspective: 1000px;
}

.mockup-glow {
  position: absolute;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 94, 43, 0.15) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.mockup-merchant-board {
  position: relative;
  z-index: 1;
  background: rgba(18, 18, 24, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  font-family: var(--font-sans);
  transform-style: preserve-3d;
  transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s ease;
}

.mock-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.mock-board-header h4 {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin: 0;
}

.mock-board-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #10b981;
  font-weight: 700;
}

.mock-board-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
}

.mock-board-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.mock-stat-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 10px 12px;
}

.mock-stat-box.highlight {
  background: rgba(255, 94, 43, 0.05);
  border-color: rgba(255, 94, 43, 0.15);
  grid-column: span 2;
}

.mock-stat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.mock-stat-value {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}

.mock-stat-box.highlight .mock-stat-value {
  color: var(--accent-orange);
  font-size: 20px;
}

.mock-order-preview {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 12px;
}

.mock-order-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.mock-order-items {
  font-size: 12px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.4;
}

.mock-order-items span {
  color: var(--accent-orange);
}

.mock-floating-bubble {
  position: absolute;
  top: -12px;
  right: 10px;
  background: linear-gradient(135deg, var(--accent-orange), var(--neon-pink));
  color: #ffffff;
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(255, 94, 43, 0.3);
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: floatBounce 3s ease-in-out infinite;
  z-index: 10;
}

@media (max-width: 768px) {
  .mock-floating-bubble {
    top: -10px;
    right: 8px;
    font-size: 9px;
    padding: 4px 10px;
  }
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* --- MOCKUP SMARTPHONE REPARTIDOR --- */
.mock-smartphone-frame {
  position: relative;
  z-index: 1;
  background: #0d0d12;
  border: 10px solid #22222a;
  border-radius: 36px;
  padding: 10px;
  width: 250px;
  height: 480px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s ease;
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 18px;
  background: #22222a;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 10;
}

.phone-screen {
  background: #111116;
  border-radius: 26px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.phone-header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px 12px 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phone-profile {
  font-size: 11px;
  color: #ffffff;
  font-weight: 700;
}

.phone-profile span {
  display: block;
  font-size: 8px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.phone-status-dot {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 7px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
}

.phone-map-placeholder {
  flex: 1;
  background: radial-gradient(circle at center, #1b1b24 0%, #111116 100%);
  position: relative;
  overflow: hidden;
}

/* Cuadrícula simulando mapa */
.phone-map-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 20px 20px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

.phone-map-route {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  border: 2px dashed rgba(255, 94, 43, 0.4);
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%);
}

.phone-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--accent-orange);
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px var(--accent-orange);
}

.phone-pin.comercio { top: 30%; left: 20%; background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); }
.phone-pin.cliente { top: 60%; left: 75%; }

.phone-card-order {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(20, 20, 28, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.phone-order-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-orange);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.phone-order-val span {
  font-size: 9px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.phone-order-route {
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-bottom: 8px;
}

.phone-order-route strong {
  color: #ffffff;
}

.phone-order-btn {
  background: var(--accent-orange);
  color: #ffffff;
  border: none;
  width: 100%;
  padding: 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
  text-align: center;
}

.phone-floating-success {
  position: absolute;
  top: 70px;
  left: 10px;
  right: 10px;
  /* Verde más oscuro para que el texto blanco se lea.
   *
   * Estaba en #10b981, un verde muy luminoso: con letra blanca encima daba 2,8
   * de contraste y el mínimo para texto chico es 4,5. Y acá la letra es de 9px,
   * o sea el caso más exigente. Este tono da 5,5 y sigue siendo verde de
   * «listo, cobrado». Está en la portada, que es lo primero que ve un comercio
   * que evalúa sumarse. */
  background: rgba(4, 120, 87, 0.97);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(4, 120, 87, 0.35);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: scale(0.9);
  animation: floatBounce 4s ease-in-out infinite;
}

/* --- SECCIÓN ACORDEÓN FAQS --- */
.faq-accordion {
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease-in-out;
}

.faq-item.active {
  border-color: rgba(255, 94, 43, 0.2);
  background: rgba(255, 94, 43, 0.02);
}

.faq-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family: var(--font-sans);
}

.faq-question {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
/* Ni conjunciones colgando al final del renglón ni palabras solas abajo.

   La conjunción se pega en el texto con ` ` (está hecho en index.html);
   `balance` es lo que evita la palabra sola, repartiendo parejo en vez de
   llenar el primer renglón hasta el borde. Sólo hace algo cuando el texto
   parte en dos: en una computadora estas preguntas entran en un renglón. */
.faq-question { text-wrap: balance; }

.faq-icon {
  font-size: 16px;
  color: var(--text-tertiary);
  transition: transform 0.25s ease-in-out;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: var(--accent-orange);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0, 1, 0, 1), padding 0.25s ease-in-out;
  padding: 0 24px;
}

.faq-item.active .faq-content {
  max-height: 500px;
  padding: 0 24px 20px 24px;
  transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035), padding 0.25s ease-in-out;
}

.faq-answer {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --- FOOTER CORPORATIVO DE 4 COLUMNAS --- */
.premium-footer {
  margin-top: 100px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 60px 0 30px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-logo-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 250px;
}

.footer-col h5 {
  font-size: 12px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-orange);
}

.footer-banner-cta {
  background: linear-gradient(135deg, rgba(255, 94, 43, 0.9), rgba(255, 42, 133, 0.9));
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  margin-bottom: 60px;
  box-shadow: 0 15px 30px rgba(255, 94, 43, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.footer-banner-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  margin-bottom: 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

.footer-banner-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-bottom {
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
  }
}

/* --- ADAPTABILIDAD MÓVIL Y SAFARI BUGFIXES --- */
@media (max-width: 768px) {
  .landing-section {
    padding: 40px 0;
  }
  
  .landing-grid {
    text-align: center;
    gap: var(--space-xl);
  }
  
  .landing-bullets {
    align-items: flex-start;
    text-align: left;
    max-width: 450px;
    margin: 0 auto var(--space-xl) auto;
  }
  
  .mockup-wrapper {
    margin-top: 20px;
    overflow: hidden;
    width: 100%;
  }
  
  .mockup-merchant-board {
    max-width: 90% !important;
    padding: 16px !important;
    transform: none !important; /* Desactivar giros en móvil */
  }
  
  .mock-smartphone-frame {
    transform: scale(0.85) !important;
    transform-origin: center center;
    margin: -30px 0 !important;
  }
}

@media (max-width: 480px) {
  .mockup-merchant-board {
    max-width: 95% !important;
    padding: 12px !important;
  }
  
  .mock-smartphone-frame {
    transform: scale(0.8) !important;
    margin: -40px 0 !important;
  }
  
  .premium-double-cta {
    gap: var(--space-md) !important;
  }
}

/* --- CLASE DE ALINEACIÓN DE TEXTOS DE VIÑETAS (BULLET FIX) --- */
.bullet-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: left;
}

.bullet-text strong {
  color: var(--text-primary);
  font-weight: 700;
  margin-right: 4px;
}

/* --- SECCIÓN PRE-FOOTER DOUBLE CTA CARDS --- */
.premium-double-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  width: 100%;
}

@media (min-width: 768px) {
  .premium-double-cta {
    grid-template-columns: 1fr 1fr;
  }
}

.cta-card {
  position: relative;
  background: rgba(22, 22, 30, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 35px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-card:hover {
  border-color: rgba(255, 94, 43, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(255, 94, 43, 0.08);
}

.cta-card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255, 94, 43, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.cta-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-orange);
  z-index: 1;
}

.cta-card-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
  z-index: 1;
}

.cta-card-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  z-index: 1;
}

.cta-btns-group {
  display: flex;
  gap: 12px;
  z-index: 1;
}

@media (max-width: 480px) {
  .cta-btns-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  /* Los dos botones de las tarjetas ocupan el ancho en el teléfono.

     El de «Postular mi Ciudad» ya lo hacía porque vive dentro de un
     .cta-btns-group. El de «Hacer un Pedido» NO: cuelga directo de la tarjeta,
     así que esta regla no lo alcanzaba y se quedaba con su `width: fit-content`
     —205 px, pegado a la izquierda, con 135 px vacíos al costado— al lado de
     uno que ocupaba los 319. El dueño lo señaló el 2/9.

     Se arregla acá, en la regla que ya existía, en vez de escribir una nueva:
     la intención estaba, sólo le faltaba llegar al botón suelto. */
  .cta-btns-group .btn,
  .cta-card > .btn {
    width: 100% !important;
  }
  
  .cta-card {
    padding: 25px 20px;
  }
}

/* --- CAPA DE FONDO FIJO VIEWPORT (FONDO PREMIUM 1 SIN RECRETES) --- */
.fixed-hero-bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: url('../RECURSOS/opt/fondo-premium-1.webp?v=54d2ca94') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.fixed-hero-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(3, 3, 8, 0.65) 0%, rgba(8, 8, 17, 0.82) 50%, rgba(3, 3, 8, 0.96) 100%) !important;
  z-index: 1 !important;
}

#sector-login {
  position: relative !important;
  min-height: 100vh !important;
  background: transparent !important;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --bg-card: rgba(13, 13, 26, 0.65);
  --bg-surface: rgba(13, 13, 26, 0.85);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

#sector-login .hero-title,
#sector-login .landing-title,
#sector-login .role-title,
#sector-login .cta-card-title,
#sector-login .faq-title,
#sector-login .faq-question,
#sector-login h1,
#sector-login h2,
#sector-login h3,
#sector-login h4,
#sector-login .bullet-text strong {
  color: #ffffff !important;
}

#sector-login .hero-subtitle,
#sector-login .landing-subtitle,
#sector-login .bullet-text,
#sector-login .role-desc,
#sector-login .cta-card-desc,
#sector-login .faq-answer,
#sector-login .portal-single-line-subtitle {
  color: #cbd5e1 !important;
}

.premium-footer,
.premium-footer * {
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
}

.premium-footer h4,
.premium-footer .footer-col-title {
  color: #ffffff !important;
}

.premium-footer p,
.premium-footer a,
.premium-footer span,
.premium-footer li,
.footer-bottom,
.footer-bottom-text {
  color: #94a3b8 !important;
}

.premium-footer a:hover {
  color: var(--accent-orange) !important;
}

.portal-hero-title {
  white-space: nowrap !important;
  font-size: clamp(11px, 3.7vw, 22px) !important;
  letter-spacing: -0.3px !important;
}

/* --- MICRO-INDICADORES MINIMALISTAS ULTRA ELITE (NIVEL STRIPE / APPLE) --- */
.field-error,
input.field-error {
  border: 1px solid rgba(244, 63, 94, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.08) !important;
  background: rgba(244, 63, 94, 0.03) !important;
}

.field-success,
input.field-success {
  border: 1px solid rgba(16, 185, 129, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08) !important;
  background: rgba(16, 185, 129, 0.03) !important;
}

.onboarding-field-error,
.micro-status-error {
  color: #f43f5e !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: none !important;
  padding: 2px 0 !important;
  animation: onb-shake 0.25s ease;
}

.onboarding-field-success,
.micro-status-success {
  color: #10b981 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: none !important;
  padding: 2px 0 !important;
}

/* --- ESFERAS GLASSMÓRFICAS 3D FLOTANTES --- */
.floating-glass-shape {
  display: none !important;
}

.shape-1 {
  width: 140px;
  height: 140px;
  top: 18%;
  left: 6%;
  animation: floatSlow 14s infinite ease-in-out;
}

.shape-2 {
  width: 200px;
  height: 200px;
  bottom: 22%;
  right: 5%;
  animation: floatSlow 19s infinite ease-in-out alternate;
}

@keyframes floatSlow {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* --- TIPOGRAFÍA Y TEXTURA H1 HERO PREMIUM --- */
.hero-title-premium {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900;
  letter-spacing: -2px;
  color: #ffffff;
  /* Relieve 3D de alta densidad con extrusiones de color rojo carmesí a juego con el logotipo */
  text-shadow: 
    0 1px 0 #ff2a00,
    0 2px 0 #d01e00,
    0 3px 0 #a01000,
    0 4px 0 #700800,
    0 5px 1px rgba(0,0,0,0.5),
    0 8px 15px rgba(0, 0, 0, 0.85),
    0 12px 45px rgba(255, 42, 0, 0.45);
  transform: translateZ(30px);
}

.gradient-3d-text {
  background: linear-gradient(135deg, #ffffff 0%, #ff2a00 50%, #ff5b5b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 42, 0, 0.8));
  display: inline-block;
  white-space: nowrap; /* Asegura todo en la misma línea */
}

/* --- CATEGORY CAROUSEL & CARDS --- */
.category-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.category-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px 10px 4px;
  width: 100%;
  cursor: grab;
}

.category-grid:active {
  cursor: grabbing;
}

.category-grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.category-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-surface, #1e293b);
  border: 1.5px solid var(--border-default, rgba(255,255,255,0.2));
  color: var(--text-primary, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.95;
}

.category-scroll-btn:hover {
  background: var(--accent-orange, #ff5e2b);
  border-color: var(--accent-orange, #ff5e2b);
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(255,94,43,0.45);
}

.category-scroll-btn.btn-prev {
  left: -16px;
}

.category-scroll-btn.btn-next {
  right: -16px;
}

@media (max-width: 768px) {
  .category-scroll-btn {
    display: none !important;
  }
}

[data-theme="light"] .category-scroll-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
}

[data-theme="light"] .category-scroll-btn:hover {
  background: #ff5e2b !important;
  border-color: #ff5e2b !important;
  color: #ffffff !important;
}

/* --- CATEGORY CARDS (FLOATING TRANSPARENT PEDIDOSYA STYLE) --- */
.category-card {
  position: relative;
  height: auto !important;
  min-height: 124px;
  min-width: 96px;
  max-width: 108px;
  flex: 0 0 100px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 4px 14px 4px;
  gap: 8px;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible !important;
  user-select: none;
}

.category-card::before {
  display: none !important;
}

[data-theme="light"] .category-card,
#sector-cliente[data-theme="light"] .category-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.category-card:hover {
  transform: translateY(-4px);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.category-card.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.category-card.active .category-card-name {
  color: var(--accent-orange, #ff5e2b) !important;
  font-weight: 800;
}

.category-card-img-wrap {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card:hover .category-card-img-wrap {
  transform: scale(1.12);
}

.category-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.28));
  transition: filter 0.2s ease;
}

[data-theme="light"] .category-card-img,
#sector-cliente[data-theme="light"] .category-card-img {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.14));
}

.category-card:hover .category-card-img {
  filter: drop-shadow(0 10px 20px rgba(255, 94, 43, 0.38));
}

.category-card-name {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #ffffff);
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  display: block;
  min-height: 32px;
  width: 100%;
  overflow: visible !important;
  letter-spacing: -0.2px;
  text-shadow: none !important;
  transition: color 0.2s ease;
}

[data-theme="light"] .category-card-name,
#sector-cliente[data-theme="light"] .category-card-name {
  color: #1e293b !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.category-card:hover .category-card-name {
  color: var(--accent-orange, #ff5e2b) !important;
}

/* --- DEDICATED CATEGORY VIEW STYLES --- */
.category-view-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-surface, #0f172a);
  border: 1px solid var(--border-default);
  margin-bottom: var(--space-xl);
  box-shadow: 0 16px 36px rgba(0,0,0,0.3);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}

[data-theme="light"] .category-view-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.category-view-hero-icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="light"] .category-view-hero-icon {
  background: transparent;
}

.category-view-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.3));
}

.category-view-hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-view-hero-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.5px;
}

.category-view-hero-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}

/* --- OMNICHANNEL SEARCH RESULTS --- */
.search-omnicanal-results {
  margin-top: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.search-segment-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}

.search-segment-tab {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 9999px;
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.search-segment-tab.active {
  border-color: rgba(255, 94, 43, 0.4);
  background: rgba(255, 94, 43, 0.18);
  color: var(--accent-orange);
}

.search-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  margin-top: var(--space-lg);
}

.search-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: var(--space-xl);
}

@media (max-width: 640px) {
  .search-products-grid {
    grid-template-columns: 1fr;
  }
}

.search-product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: all 0.2s ease;
  position: relative;
}

[data-theme="light"] .search-product-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.search-product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 94, 43, 0.4);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.search-product-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}

.search-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.search-product-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-product-comercio {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.search-product-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent-orange);
}

.search-product-add-btn {
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--accent-orange);
  color: #ffffff;
  border: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-product-add-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 94, 43, 0.4);
}

/* --- PASSWORD VISIBILITY EYE TOGGLE --- */
.auth-dropdown span[onclick*="togglePasswordVisibility"] {
  transition: transform var(--transition-fast) ease, color var(--transition-fast) ease;
}
.auth-dropdown span[onclick*="togglePasswordVisibility"]:hover {
  transform: scale(1.15);
  color: var(--accent-orange) !important;
}
.auth-dropdown span[onclick*="togglePasswordVisibility"]:active {
  transform: scale(0.9);
}

/* --- FORMULARIOS ---
   Esta regla la aplica TODO el sitio. Tenía el fondo y el borde escritos a
   mano en un tono casi negro, con !important, así que en tema claro cada
   campo de cada pantalla —login, alta de comercios, panel de comercio,
   carrito— se veía como un bloque gris oscuro sobre fondo blanco.
   Ahora sale del tema, que ya definía los valores correctos para ambos. */
.form-input, .form-select {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-input) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-family: var(--font-sans);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  box-sizing: border-box;
}

.form-input:hover, .form-select:hover {
  border-color: var(--border-strong, var(--accent-orange)) !important;
}

/* El campo enfocado.
 *
 * Acá estaba el bug: la corrección de arriba arregló el estado normal del
 * campo para que saliera del tema, pero se olvidó de ESTE. Al enfocarse, el
 * campo se pintaba de rgba(10,10,20,0.95) —negro casi opaco— sin mirar el
 * tema y con !important, así que ganaba siempre.
 *
 * En tema claro eso significaba que cada vez que alguien tocaba un campo para
 * escribir, el campo se ponía negro. En TODO el sitio: el login, el carrito,
 * el alta de comercios, los tickets de soporte. Se arreglaba la mitad del
 * problema y la otra mitad quedaba peor, porque ahora el salto era visible.
 *
 * El fondo al enfocar es el mismo del campo: lo que cambia es el borde y el
 * halo, que alcanzan de sobra para decir dónde estás escribiendo. Un campo no
 * tiene por qué cambiar de color al tocarlo. */
.form-input:focus, .form-select:focus {
  border-color: var(--accent-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 94, 43, 0.18) !important;
  background: var(--bg-input) !important;
  outline: none !important;
}

/* La etiqueta de un campo: dice qué hay que escribir ahí, así que tiene que
   leerse sin esfuerzo.

   Estaba definida TRES veces en este mismo archivo, con tamaños y colores
   distintos. Ganaba esta —la última—, así que las otras dos eran código muerto
   que además confundía a quien intentaba cambiar el color y no veía efecto.
   Quedó una sola.

   Iba en el color secundario, y encima siete etiquetas del cartel de ingreso
   traían `color: #ffffff` escrito a mano en el HTML: blanco sobre blanco en el
   tema claro, invisible. Ahora el color sale del tema y sirve en los dos. */
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Todos los campos de una línea miden lo mismo.

   Medido en el alta de comercio: los <input> daban 48 px y los <select> 20,
   porque la regla de abajo les pone el relleno vertical en cero y nadie les
   fijaba altura, así que se achicaban hasta el alto de la letra.

   46 px: por encima de los 44 que necesita un dedo, y más contenido que los 48
   de antes. El relleno vertical va en cero y el navegador centra el texto solo,
   que es la única forma de que <input> y <select> queden iguales. */
/* Los pasos del alta (1 · 2 · 3).

   Los colores estaban escritos en el HTML, así que aunque el código pusiera
   la clase `.active` no se veía ningún cambio. Ahora el estado lo pinta esto. */
.step-bolita {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.step-rotulo {
  font-size: 10px;
  color: var(--text-secondary);
}

/* El paso en el que estás: naranja lleno. */
.step-indicator.active .step-bolita {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
}

.step-indicator.active .step-rotulo {
  color: var(--text-primary);
  font-weight: 700;
}

/* Los que ya pasaste: naranja pero sólo el contorno. */
.step-indicator.completed .step-bolita {
  background: rgba(255, 94, 43, 0.14);
  border-color: var(--accent-orange);
  color: var(--accent-orange-texto);
}

.step-indicator.completed .step-rotulo {
  color: var(--text-primary);
}

/* La línea entre pasos. */
.step-linea {
  flex: 1;
  height: 2px;
  background: var(--border-default);
  margin: 0 8px;
  transition: background 0.25s ease;
}

.step-linea.completed {
  background: var(--accent-orange);
}


/* El «Volver» de las altas de comercio y mandadero.

   Vive sobre la barra oscura del portal —rgba(13,13,26,.65)— pero heredaba el
   color de `.btn-secondary`, que es oscuro: quedaba oscuro sobre oscuro, 2,53
   de contraste con 4,5 de mínimo. Y medían 30 px de alto.

   Es la única salida de un formulario largo: tiene que verse y acertarse. */
.portal-header-navbar .navbar-btn-back {
  /* La zona que responde al dedo sigue midiendo 44 px; lo que cambia es que
     no se dibuja. Al lado está la insignia del portal y dos recuadros juntos
     se estorban. */
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 700 !important;
}

.portal-header-navbar .navbar-btn-back:hover {
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}


input.form-input, input.form-select,
select.form-input, select.form-select {
  height: 46px !important;
  min-height: 46px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

select.form-input, select.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

select.form-input option, select.form-select option {
  background-color: #141722 !important;
  color: #ffffff !important;
  padding: 10px !important;
}

/* --- BARRA DE PROGRESO RESPONSIVA --- */
@media (max-width: 576px) {
  /* Ocultar texto descriptivo de los pasos en móviles para evitar apiñamiento */
  .step-indicator span {
    display: none !important;
  }
  
  /* Achicar el contenedor de pasos para celulares */
  #comercio-progress, #mandadero-progress {
    margin-bottom: var(--space-md) !important;
    gap: 0 !important;
  }
  
  /* Ajustar márgenes de los separadores de línea en móvil */
  #comercio-line-1-2, #comercio-line-2-3, #mandadero-line-1-2 {
    margin: 0 4px !important;
  }
  
  /* Ajustar los círculos numéricos para que sean ligeramente más pequeños en móvil */
  .step-indicator > div:first-child {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  /* Tarjetas del formulario: padding adaptativo en celulares */
  #sector-nuevo-comercio .glass-card,
  #sector-nuevo-mandadero .glass-card {
    padding: var(--space-md) !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Título de la página: achicar tamaño de fuente en móvil */
  #sector-nuevo-comercio h1,
  #sector-nuevo-mandadero h1 {
    font-size: var(--text-lg) !important;
    margin-top: var(--space-md) !important;
    margin-bottom: var(--space-md) !important;
  }
  
  .hide-mobile {
    display: none !important;
  }
}

/* ---------- Casillas de Verificación PIN OTP ---------- */
.otp-box {
  width: 100% !important;
  max-width: 44px !important;
  height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 50px !important;
  box-sizing: border-box !important;
  background: rgba(13, 13, 26, 0.8) !important;
  border: 1px solid rgba(0, 255, 209, 0.3) !important;
  color: var(--neon-cyan) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
}

.otp-box:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 15px rgba(0, 255, 209, 0.45) !important;
  background: rgba(0, 255, 209, 0.05) !important;
  outline: none !important;
}

@media (max-width: 480px) {
  .otp-box {
    max-width: 36px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 17px !important;
  }
}

/* --- ANIMACIÓN DE PULSACIÓN GLOW PARA PORTALES --- */
@keyframes pulseGlow {
  0% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 5px currentColor); }
  100% { opacity: 0.5; transform: scale(0.95); }
}

/* --- REGLAS RESPONSIVAS DE AUTENTICACIÓN & MÓVIL SAFARI --- */
/* La barra de desplazamiento de este panel se comía las esquinas.

   El panel tiene 20 px de esquina redondeada y la barra medía 8 px pintados
   pegados al borde: al ser un rectángulo contra una esquina curva, cuadraba
   la punta de arriba y la de abajo. Se veía como dos cortecitos.

   La barra queda —hace falta, el formulario es más largo que la pantalla—
   pero angosta, redondeada y separada de las puntas por el margen del riel. */
.auth-dropdown {
  max-height: 88vh !important;
  overflow-y: auto !important;
  /* Sin esto el navegador lo pone en `auto` solo y aparece una barra
     horizontal que nadie pidió. */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   LAS BARRAS DE DESPLAZAMIENTO DE LOS PANELES REDONDEADOS
   ─────────────────────────────────────────────────────────────────────────
   Todos estos paneles tienen esquina redondeada y contenido que se desplaza.
   Sin esto, el navegador pinta un riel rectangular pegado al borde: contra
   una esquina curva quedan dos cortecitos, arriba y abajo a la derecha.

   El margen del riel es lo que la despega de las puntas. El ancho de 6 px y
   el fondo transparente hacen que se vea una rayita y no un palo.

   Son siete y se escriben juntos a propósito: es una sola decisión, no siete. */
.auth-dropdown,
.modal,
#location-modal,
.catalog-side-cart,
.mandao-dialogo__detalle,
.admin-sidebar,
.aviso-ubicacion {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}

.auth-dropdown::-webkit-scrollbar,
.modal::-webkit-scrollbar,
#location-modal::-webkit-scrollbar,
.catalog-side-cart::-webkit-scrollbar,
.mandao-dialogo__detalle::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.aviso-ubicacion::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.auth-dropdown::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
#location-modal::-webkit-scrollbar-track,
.catalog-side-cart::-webkit-scrollbar-track,
.mandao-dialogo__detalle::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.aviso-ubicacion::-webkit-scrollbar-track {
  background: transparent;
  margin: 18px 0;
}

.auth-dropdown::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
#location-modal::-webkit-scrollbar-thumb,
.catalog-side-cart::-webkit-scrollbar-thumb,
.mandao-dialogo__detalle::-webkit-scrollbar-thumb,
.admin-sidebar::-webkit-scrollbar-thumb,
.aviso-ubicacion::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 9999px;
}

.auth-dropdown::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover,
#location-modal::-webkit-scrollbar-thumb:hover,
.catalog-side-cart::-webkit-scrollbar-thumb:hover,
.mandao-dialogo__detalle::-webkit-scrollbar-thumb:hover,
.admin-sidebar::-webkit-scrollbar-thumb:hover,
.aviso-ubicacion::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.75);
}

/* ---------- CAJONES LATERALES DUALES (DRAWER MENUS) ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.side-drawer-left {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: rgba(13, 13, 26, 0.98);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 10001;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.7);
  overflow-y: auto;
}

.side-drawer-left.open {
  transform: translateX(0);
}

.side-drawer-right {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: rgba(13, 13, 26, 0.98);
  border-left: 1px solid rgba(0, 255, 209, 0.25);
  z-index: 10001;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
  overflow-y: auto;
}

.side-drawer-right.open {
  transform: translateX(0);
}

/* ---------- VISTA DE AJUSTES Y PERFIL MANDAO PRO ---------- */
#sector-cliente {
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

#sector-cliente[data-theme="light"] {
  background-color: #f4f6fa !important;
  color: #1e293b !important;
}

:root[data-theme="dark"],
body[data-theme="dark"],
#sector-cliente[data-theme="dark"] {
  background-color: #090b11 !important;
  color: #f8fafc !important;
}

.mandao-account-container, .rappi-account-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-md);
}

/* Ajustes y Cuenta en el teléfono: dos pantallas, no una lista larga.

   En la computadora esto es `280px 1fr`: el menú al costado y el contenido al
   lado. Al colapsar a una columna, el menú quedaba como un bloque de 425 px
   —el 46 % de la pantalla— y el contenido empezaba recién a los 441, abajo
   del pliegue.

   Resultado: para ver una sección había que bajar; para cambiarla, subir. Son
   cuatro movimientos por cada cambio.

   Ahora el teléfono muestra UNA de las dos: el menú, o la sección elegida con
   su botón de volver. La clase `.viendo-sección` decide cuál. */
@media (max-width: 880px) {
  .mandao-account-container, .rappi-account-container {
    grid-template-columns: 1fr;
  }

  /* Pantalla 1: el menú. */
  .mandao-account-container .mandao-content-panel { display: none; }

  /* Pantalla 2: la sección. */
  .mandao-account-container.viendo-seccion .mandao-profile-card { display: none; }
  .mandao-account-container.viendo-seccion .mandao-content-panel { display: block; }

  /* El botón de volver sólo tiene sentido acá: en pantalla grande las dos
     cosas se ven juntas y no hay de dónde volver. */
  .btn-volver-al-menu { display: inline-flex !important; }
}

/* «Ubicaciones» y «Centro de ayuda» no cambian el panel: abren un cartel y
   otra página. Mezcladas con las secciones parecían lo mismo y no lo son. */
.mandao-nav-aparte {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.mandao-nav-externo {
  color: var(--text-secondary) !important;
}

/* En pantalla grande no existe: no hay dos pantallas que separar.

   Lleva `!important` porque `.btn-volver` —que es la clase que le da el
   aspecto— declara `display: inline-flex` con la misma especificidad, y le
   ganaba por orden de archivo. */
button.btn-volver-al-menu { display: none !important; }

.mandao-profile-card, .rappi-profile-card {
  background: rgba(13, 13, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.mandao-content-panel, .rappi-content-panel {
  background: rgba(13, 13, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  min-height: 480px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.mandao-nav-link, .rappi-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mandao-nav-link:hover, .mandao-nav-link.active,
.rappi-nav-link:hover, .rappi-nav-link.active {
  background: rgba(255, 94, 43, 0.15);
  color: var(--accent-orange);
  font-weight: 800;
}

.mandao-preference-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.mandao-preference-chip:hover, .mandao-preference-chip.active {
  background: rgba(255, 94, 43, 0.18);
  border-color: rgba(255, 94, 43, 0.5);
  color: var(--accent-orange);
  box-shadow: 0 4px 12px rgba(255, 94, 43, 0.2);
}

/* ==========================================================================
   MANDAO ACCOUNT SETTINGS (CLIENT VIEW - RESPONSIVE & PIXEL-PERFECT)
   Optimizada para Desktop y Mobile (iPhone 14 Pro: 393px width)
   ========================================================================== */
#view-account-settings .form-label {
  display: flex !important;
  align-items: flex-end !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-secondary);
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 6px !important;
  min-height: 19px !important;
  line-height: 1.3 !important;
}

#view-account-settings .form-input {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-md) !important;
}

/* Grillas de Formulario */
.account-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.account-form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.account-form-grid-2 > div,
.account-form-grid-3 > div {
  display: flex;
  flex-direction: column;
}

.account-form-grid-3 label,
.account-form-grid-2 label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 19px !important;
}

/* Acciones y Danger Zone */
.account-action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.account-danger-zone {
  margin-top: 36px;
  padding: 22px;
  border-radius: 14px;
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Mobile & iPhone 14 Pro Responsive Breakpoint (< 768px) */
@media (max-width: 768px) {
  .mandao-account-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .mandao-content-panel {
    padding: 18px 14px !important;
    border-radius: var(--radius-lg) !important;
  }

  .mandao-profile-card {
    padding: 16px 14px !important;
    border-radius: var(--radius-lg) !important;
  }

  .account-form-grid-2,
  .account-form-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .account-action-row {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .account-action-row .btn-primary {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }

  .account-danger-zone {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 18px 14px !important;
    gap: 14px !important;
  }

  .account-danger-zone button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px !important;
  }
}

@media (max-width: 600px) {
  .auth-dropdown {
    width: 94% !important;
    padding: 16px !important;
    max-height: 85vh !important;
    border-radius: 20px !important;
  }
}

/* --- BARRA FLOTANTE DE CARRITO Y DESACOPLAMIENTO DE TIENDA --- */
.floating-cart-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 540px;
  background: linear-gradient(135deg, rgba(255, 94, 43, 0.95), rgba(255, 43, 107, 0.95));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(255, 94, 43, 0.4), 0 0 20px rgba(255, 94, 43, 0.2);
  z-index: 9999;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #ffffff;
}

.floating-cart-bar:hover {
  transform: translateX(-50%) translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(255, 94, 43, 0.5);
}

.floating-cart-bar:active {
  transform: translateX(-50%) scale(0.98);
}

/* --- ESTILOS MEJORADOS CLIENTE & VISTA COMERCIO MANDAO --- */
.navbar-cart-btn:hover {
  background: rgba(255, 94, 43, 0.22) !important;
  border-color: rgba(255, 94, 43, 0.6) !important;
  box-shadow: 0 0 15px rgba(255, 94, 43, 0.3);
  transform: translateY(-1px);
}

.navbar-cart-btn:active {
  transform: scale(0.96);
}

.navbar-location-pill:hover {
  background: rgba(255, 94, 43, 0.1) !important;
  border-color: rgba(255, 94, 43, 0.3) !important;
  box-shadow: 0 0 15px rgba(255, 94, 43, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   EL NARANJA DE MARCA COMO TEXTO
   ══════════════════════════════════════════════════════════════════════════

   Medido el 21/8: el naranja de Mandao (#ff5e2b) usado COMO TEXTO sobre fondo
   claro da **3,05 de contraste**. El estándar pide 4,5. No llega, y por eso
   había tres textos naranjas ilegibles en el perfil del comercio: la miga de
   pan, la pestaña de categoría activa y el número del carrito.

   No es un defecto del color: **es que un color pensado para rellenos no sirve
   igual para texto**. Un botón naranja con letra blanca funciona porque el
   naranja es el fondo y ocupa mucha superficie; ese mismo naranja en una letra
   de 10 px sobre blanco es casi invisible.

   La solución es la que usan los sistemas de diseño serios: **dos tonos del
   mismo color**, uno para pintar y otro para escribir.

     --accent-orange        #ff5e2b   rellenos, bordes, botones. NO SE TOCA.
     --accent-orange-texto  #a83208   texto naranja sobre fondo claro

   El tono se eligió MIDIENDO contra los fondos compuestos reales, no contra
   blanco puro. La primera elección (#c2410c) pasaba contra blanco pero se
   quedaba corta en los dos lugares donde hacía falta:

     miga de pan  (fondo real rgb 233,235,240) -> 4,33  ✗
     pestaña activa (fondo real rgb 246,219,213) -> 3,94  ✗

   Con #a83208 dan **5,62** y **5,11**. Los fondos compuestos son más oscuros
   que el blanco porque encima llevan capas semitransparentes; medir contra
   blanco puro da un número optimista que en pantalla no se cumple.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --accent-orange-texto: #a83208;
  /* El naranja de marca (#ff5e2b) con blanco encima da 3,05 y el mínimo es 4,5.
     Este es el más claro que aguanta texto blanco: 5,06. Va en los botones de
     acción, donde el texto es blanco. */
  --accent-orange-boton: #c73f10;
}

/* ─────────────────────────────────────────────────────────────────────────
   EL CUADRADO AZUL AL TOCAR UN BOTÓN
   ─────────────────────────────────────────────────────────────────────────
   Al tocar cualquier control, el navegador pinta encima su propio resaltado:
   `-webkit-tap-highlight-color`, que por defecto es rgba(51,181,229,0.4) —azul
   al 40 %— y se dibuja como RECTÁNGULO, sin respetar el borde redondeado.

   Sobre una píldora queda un cuadrado azul encima. No estaba declarado en
   ningún lado: es el valor que trae el navegador.

   Se apaga, pero NO se deja sin respuesta: si se toca algo y no pasa nada
   visible, parece que no funcionó. En su lugar va un `:active` propio, que si
   respeta la forma. */
button,
a,
input,
select,
textarea,
[role="button"],
label[for] {
  -webkit-tap-highlight-color: transparent;
}

/* La respuesta al toque, con la forma del control. */
button:active,
a.btn:active,
[role="button"]:active {
  filter: brightness(0.92);
  transform: scale(0.985);
}

/* Y para quien navega con el teclado, un anillo que sí se ve y sigue la forma.
   `:focus-visible` no se dispara al tocar con el dedo ni al hacer clic: sale
   sólo cuando hace falta. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 2px;
}


/* Los chips «Casa / Depto / Trabajo / Otra» del cartel de dirección.

   El estado vive acá y no en el código: antes `selectLocationTagType` los
   pintaba a mano con colores del tema oscuro, y el elegido daba 1,51. */
.btn-location-tag-type {
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--border-default);
  background: var(--bg-card-subtle);
  color: var(--text-primary);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* El elegido: naranja sólido con texto blanco. El naranja de marca con blanco
   encima da 3,05 y hace falta 4,5; este da 5,06. */
.btn-location-tag-type.active {
  background: var(--accent-orange-boton, #c73f10);
  border-color: var(--accent-orange-boton, #c73f10);
  color: #ffffff;
}

/* En tema oscuro el naranja original ya contrasta de sobra contra el fondo
   negro, así que ahí vuelve a ser el de la marca. */
:root[data-theme="dark"] {
  --accent-orange-texto: #ff7a4d;
}

/* La miga de pan: «ELDORADO > POLARIS ELDORADO». Estaba en 3,28. */
.breadcrumb-active-item {
  color: var(--accent-orange-texto) !important;
}

/* La pestaña de categoría activa —«Todos», «Postres»— tenía letra naranja
   sobre una pastilla del mismo naranja al 18 %: 2,32 de contraste. */
.merchant-cat-tab.active {
  color: var(--accent-orange-texto) !important;
}

/* El globito del carrito.
 *
 * Acá la solución es al revés: el fondo naranja se queda y lo que cambia es la
 * letra. Blanco sobre #ff5e2b da 3,05; un marrón muy oscuro sobre el mismo
 * naranja da **5,85**. Y además se ve más nítido en un círculo de 18 px. */
/* El globito del carrito se corrige más abajo, en la regla que ya existía y que
 * manda por tener más peso (`#sector-cliente[data-theme] #navbar-cart-badge`).
 * Poner otra acá sería empezar una guerra de `!important` por el mismo color. */


/* ══════════════════════════════════════════════════════════════════════════
   TEXTO SOBRE LA FOTO DE PORTADA: SIEMPRE CLARO
   ══════════════════════════════════════════════════════════════════════════

   Ésta es la causa de que el nombre del comercio no se leyera. Medido en
   producción el 21/8: «Polaris Eldorado» tenía **1,23 de contraste**. El
   mínimo del estándar es 3 para un título y 4,5 para texto normal. Un 1,23
   significa que el texto y el fondo son casi el mismo color.

   ¿Por qué pasaba? El nombre usaba `color: var(--text-primary)`, que es la
   variable que sigue al tema: blanca en modo oscuro, **azul casi negro en modo
   claro**. Pero abajo no hay un fondo que siga al tema: hay una FOTO con un
   degradado oscuro encima para proteger el texto, y ese degradado es oscuro
   siempre, en los dos temas.

   Entonces en modo claro el texto se «adaptaba» a un fondo blanco que nunca
   llegaba, y quedaba azul oscuro sobre negro.

   La regla: **lo que va encima de la foto no sigue al tema.** Se fija claro y
   listo, porque el fondo de abajo tampoco cambia. Es el mismo criterio que ya
   se aplicó en la portada pública (`#sector-login`), donde el fondo también es
   un render oscuro permanente.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   LA PORTADA DEL COMERCIO TIENE UNA SOLA FORMA
   ══════════════════════════════════════════════════════════════════

   2,5 a 1. Decidido con el dueño el 30/8/2026 después de medir que no había
   ninguna: el cartel del panel pedía 16:9 (1,78) y la caja real daba 2,11 en
   el teléfono y 4,21 en escritorio.

   Que sea una sola es lo que permite que el recorte que elige el comercio sea
   exactamente el que ve el cliente, y que la vista previa del panel pueda
   mostrar la verdad.

   El tope de alto es para las pantallas anchas: a 2,5:1 sobre una columna de
   1.010 px la portada daría 404 px de alto y empujaría los productos fuera de
   la pantalla. Por encima del tope la foto se recorta a los costados, que es
   donde menos molesta —el encuadre importante es el vertical—.
   ══════════════════════════════════════════════════════════════════ */
#menu-bio-cover {
  aspect-ratio: 5 / 2;
  max-height: 320px;
}

#menu-bio-cover,
#menu-bio-cover * {
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-tertiary: #cbd5e1;
}

#menu-rest-name {
  color: #ffffff !important;
}

#menu-rest-desc {
  color: #e2e8f0 !important;
  /* 11 px era tamaño de nota al pie para una descripción. */
  font-size: 13px !important;
  line-height: 1.5 !important;

  /* Reparte los renglones parejos.
   *
   * Antes decía «...para refrescar tu» y abajo, sola, la palabra «día.». Eso
   * en imprenta se llama una VIUDA y es de las cosas que más delatan que algo
   * se maquetó sin cuidado. `balance` le pide al navegador que corte donde los
   * renglones queden del mismo largo. */
  text-wrap: balance;

  /* Techo de dos renglones: una descripción larga volvería a empujar los
   * productos fuera de la pantalla, que es justo lo que se acaba de arreglar. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Los datos de la cabecera —puntaje, distancia, tiempo— van sobre una pastilla
   oscura fija, así que valen las mismas razones. */
#menu-rest-distance,
#menu-rest-rating,
#menu-rest-time {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
#menu-rest-distance {
  color: #ffffff !important;
}


@media (max-width: 768px) {
  /* El banner del buscador es lo PRIMERO que ve el cliente al entrar.

     Medido a 399 x 918: daba 292 px, el 32 % de la pantalla, para un título,
     una bajada y el buscador. Se sacó la píldora «Tus envíos 24/7» y se
     apretaron los huecos: el buscador tenía 18 px de margen abajo siendo el
     último, o sea aire contra el borde. */
  #hero-explorer-banner {
    padding: 16px !important;
  }
  #explorer-hero-title {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }
  /* ══════════════════════════════════════════════════════════════════
     LA PORTADA DEL COMERCIO, EN EL TELÉFONO
     ══════════════════════════════════════════════════════════════════

     Medido en un iPhone 14 Pro (393 x 852) antes de este cambio:

       - El banner medía 280 px  ->  33 % de la pantalla
       - La tarjeta terminaba a los 400 px  ->  47 %
       - «Nuestros Productos» aparecía a los 432 px  ->  51 %

     O sea que había que bajar MÁS DE MEDIA PANTALLA para llegar al título de
     los productos, y el primer producto quedaba directamente afuera. Alguien
     entra a un comercio a ver qué vende y lo único que ve es una foto.

     Dos cambios y entra todo:

     1. La altura baja de 280 a 170 px.
     2. El contenido deja de APILARSE en columna. Apilar el avatar arriba y el
        nombre abajo es lo que obligaba a los 280 px; en fila —avatar a la
        izquierda, nombre y descripción a la derecha— entra en 170 y se lee
        mejor, porque el nombre queda a la altura de los ojos y no pegado al
        borde.

     170 px sigue siendo una portada generosa: se ve la foto y se lee el
     nombre. Y «Nuestros Productos» pasa del 51 % al 38 % de la pantalla.
     ══════════════════════════════════════════════════════════════════ */
  /* Acá había `height: 170px !important`, y en escritorio la portada medía 240
     por un estilo en línea. Con el alto clavado en píxeles y el ancho
     elástico, la FORMA de la portada cambiaba con cada pantalla: 2,11 en un
     teléfono de 393 y 4,21 en una notebook de 1280.

     Eso hacía imposible que el comercio eligiera bien el recorte: la foto que
     encuadraba para el teléfono se recortaba distinto en la computadora, y el
     cartel del panel decía 16:9, que no era ninguna de las dos.

     Ahora la proporción es UNA SOLA y vive en la regla de abajo. */
  #menu-bio-cover > div:last-child {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  #menu-bio-emoji {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 16px !important;
    font-size: 1.7rem !important;
  }
  #menu-rest-name {
    font-size: 20px !important;
  }
  #menu-rest-desc {
    /* Sube de 11 a 13 px.
     *
     * Once píxeles es tamaño de nota al pie, no de la descripción de un
     * comercio. Y la regla de arriba ya la ponía en 13; ésta, que va después y
     * también lleva `!important`, la volvía a bajar. Dos reglas peleando por lo
     * mismo: gana la última. */
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ---------------------------------------------------- */
/* CAMERA BIOMETRICS HUD OVERLAY STYLES                */
/* ---------------------------------------------------- */
/* CÁMARA BIOMÉTRICA MANDAO IA — OVAL HUD OVERLAY ARCHITECTURE */
/* ---------------------------------------------------- */
.camera-viewport-container {
  position: relative;
  width: 300px;
  height: 380px;
  max-width: 88vw;
  border-radius: 24px;
  overflow: hidden;
  background: #05060c;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 255, 209, 0.3);
  box-shadow: 0 0 30px rgba(0, 255, 209, 0.15);
}

.camera-oval-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.oval-path-border {
  stroke: #00ffd1;
  stroke-width: 3.5;
  stroke-dasharray: 10 5;
  fill: none;
  transition: stroke 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(0, 255, 209, 0.9));
}

.camera-oval-overlay.oval-info .oval-path-border {
  stroke: #00ffd1;
  stroke-dasharray: 10 5;
  filter: drop-shadow(0 0 10px rgba(0, 255, 209, 0.9));
}

.camera-oval-overlay.oval-success .oval-path-border {
  stroke: #39ff14;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 16px rgba(57, 255, 20, 1));
}

.camera-oval-overlay.oval-warning .oval-path-border {
  stroke: #ff007f;
  stroke-dasharray: 6 3;
  filter: drop-shadow(0 0 12px rgba(255, 0, 127, 0.95));
}

@keyframes laserScanAnim {
  0% { transform: translateY(-130px); opacity: 0.3; }
  50% { transform: translateY(130px); opacity: 0.95; }
  100% { transform: translateY(-130px); opacity: 0.3; }
}

.laser-scanner-line {
  position: absolute;
  width: 210px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00ffd1, #ffffff, #00ffd1, transparent);
  box-shadow: 0 0 15px #00ffd1, 0 0 25px #00ffd1;
  animation: laserScanAnim 2.5s infinite ease-in-out;
  pointer-events: none;
  z-index: 6;
}

.camera-oval-overlay.oval-success .laser-scanner-line {
  background: linear-gradient(90deg, transparent, #39ff14, #ffffff, #39ff14, transparent);
  box-shadow: 0 0 15px #39ff14, 0 0 25px #39ff14;
}

.camera-oval-overlay.oval-warning .laser-scanner-line {
  background: linear-gradient(90deg, transparent, #ff007f, #ffffff, #ff007f, transparent);
  box-shadow: 0 0 15px #ff007f, 0 0 25px #ff007f;
}

/* ============================================================
   LIGHT THEME — Component Overrides (SCOPED STRICTLY TO #sector-cliente)
   ============================================================ */

/* --- Sector Cliente Main Background (Light Mode) --- */
#sector-cliente[data-theme="light"] {
  background-color: #f4f6fa !important;
  color: #1e293b !important;
}

/* --- Navbar (Light Mode) --- */
#sector-cliente[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

#sector-cliente[data-theme="light"] #navbar-location-btn,
#sector-cliente[data-theme="light"] #profile-dropdown-trigger {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

#sector-cliente[data-theme="light"] #navbar-location-btn:hover,
#sector-cliente[data-theme="light"] #profile-dropdown-trigger:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

#sector-cliente[data-theme="light"] #client-user-display,
#sector-cliente[data-theme="light"] #header-location-text {
  color: #0f172a !important;
  font-weight: 800 !important;
}

#sector-cliente[data-theme="light"] .navbar-hamburger {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

#sector-cliente[data-theme="light"] .navbar-cart-btn {
  background: rgba(255, 94, 43, 0.08) !important;
  border: 1px solid rgba(255, 94, 43, 0.35) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 4px rgba(255, 94, 43, 0.12) !important;
}

#sector-cliente[data-theme="light"] .navbar-cart-btn:hover {
  background: rgba(255, 94, 43, 0.15) !important;
  border-color: rgba(255, 94, 43, 0.5) !important;
}

#sector-cliente[data-theme="light"] .navbar-cart-btn span {
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] #navbar-cart-badge,
#sector-cliente[data-theme="dark"] #navbar-cart-badge {
  background: #ff5e2b !important;
  /* Letra oscura, no blanca.
   *
   * Blanco sobre el naranja de marca da **3,05** de contraste y el mínimo es
   * 4,5. Un marrón muy oscuro sobre ese mismo naranja da **5,85**, y en un
   * círculo de 22 px se lee bastante más nítido.
   *
   * El fondo naranja se queda: es el que hace que el globito se vea desde
   * lejos. Lo que cambia es lo de adentro. */
  color: #2b1000 !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(255, 94, 43, 0.35) !important;
}

/* --- Profile & Location Dropdowns (Light Mode) --- */
#sector-cliente[data-theme="light"] #profile-dropdown-menu,
#sector-cliente[data-theme="light"] #location-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

/* --- Saved Locations List Items (Light Mode) --- */
/* --- Saved Locations List Items (Light Mode) --- */
#sector-cliente[data-theme="light"] .saved-location-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
}

#sector-cliente[data-theme="light"] .saved-location-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

#sector-cliente[data-theme="light"] .saved-location-item.active {
  background: rgba(255, 94, 43, 0.08) !important;
  border-color: rgba(255, 94, 43, 0.45) !important;
}

#sector-cliente[data-theme="light"] .saved-location-type {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-orange, #ff5e2b) !important;
  white-space: nowrap;
  flex-shrink: 0;
}

#sector-cliente[data-theme="light"] .saved-location-street {
  font-size: 12.5px;
  color: #0f172a !important;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sector-cliente[data-theme="light"] .saved-location-active-tag {
  font-size: 9px;
  font-weight: 800;
  background: rgba(255, 94, 43, 0.15) !important;
  color: var(--accent-orange, #ff5e2b) !important;
  border: 1px solid rgba(255, 94, 43, 0.4);
  padding: 2px 6px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

#sector-cliente[data-theme="light"] .saved-location-edit-btn {
  background: rgba(255, 94, 43, 0.1) !important;
  border: 1px solid rgba(255, 94, 43, 0.25) !important;
  color: var(--accent-orange, #ff5e2b) !important;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

#sector-cliente[data-theme="light"] .saved-location-delete-btn {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  border-radius: 8px;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

#sector-cliente[data-theme="light"] .saved-location-edit-btn:hover {
  background: rgba(255, 94, 43, 0.2) !important;
}

#sector-cliente[data-theme="light"] .saved-location-delete-btn:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}

/* --- Saved Locations List Items (Night Mode) --- */
#sector-cliente[data-theme="dark"] .saved-location-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
}

#sector-cliente[data-theme="dark"] .saved-location-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

#sector-cliente[data-theme="dark"] .saved-location-item.active {
  background: rgba(255, 94, 43, 0.14) !important;
  border-color: rgba(255, 94, 43, 0.45) !important;
}

#sector-cliente[data-theme="dark"] .saved-location-type {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-orange, #ff5e2b) !important;
  white-space: nowrap;
  flex-shrink: 0;
}

#sector-cliente[data-theme="dark"] .saved-location-street {
  font-size: 12.5px;
  color: #ffffff !important;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sector-cliente[data-theme="dark"] .saved-location-active-tag {
  font-size: 9px;
  font-weight: 800;
  background: rgba(255, 94, 43, 0.2) !important;
  color: var(--accent-orange, #ff5e2b) !important;
  border: 1px solid rgba(255, 94, 43, 0.4);
  padding: 2px 6px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

#sector-cliente[data-theme="dark"] .saved-location-edit-btn {
  background: rgba(255, 94, 43, 0.12) !important;
  border: 1px solid rgba(255, 94, 43, 0.3) !important;
  color: var(--accent-orange, #ff5e2b) !important;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

#sector-cliente[data-theme="dark"] .saved-location-delete-btn {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
  border-radius: 8px;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

#sector-cliente[data-theme="dark"] .saved-location-edit-btn:hover {
  background: rgba(255, 94, 43, 0.22) !important;
}

#sector-cliente[data-theme="dark"] .saved-location-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
}

/* === PROFILE PANELS LIGHT THEME === */
#sector-cliente[data-theme="light"] #view-account-settings h3,
#sector-cliente[data-theme="light"] #view-account-settings h4 {
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] #view-account-settings .form-label {
  color: #334155 !important;
}

#sector-cliente[data-theme="light"] #view-account-settings .form-input {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] #view-account-settings .form-input::placeholder {
  color: #94a3b8 !important;
}

#sector-cliente[data-theme="light"] #view-account-settings .form-input:focus {
  border-color: #ff5e2b !important;
  box-shadow: 0 0 0 3px rgba(255, 94, 43, 0.12) !important;
}

#sector-cliente[data-theme="light"] #view-account-settings input[type="date"] {
  color-scheme: light !important;
}

#sector-cliente[data-theme="light"] #view-account-settings label {
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] #view-account-settings .btn-outline {
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

#sector-cliente[data-theme="light"] #view-account-settings .btn-outline:hover {
  background: #f1f5f9 !important;
}

/* Profile card sidebar Light */
#sector-cliente[data-theme="light"] .rappi-profile-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

#sector-cliente[data-theme="light"] .rappi-profile-card .rappi-nav-link {
  color: #334155 !important;
}

#sector-cliente[data-theme="light"] .rappi-profile-card .rappi-nav-link.active {
  background: rgba(255, 94, 43, 0.08) !important;
  color: #ff5e2b !important;
}

#sector-cliente[data-theme="light"] .rappi-profile-card .rappi-nav-link:hover {
  background: #f1f5f9 !important;
}

/* Account settings top tab buttons Light */
#sector-cliente[data-theme="light"] #view-account-settings .btn-secondary {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Right content panel Light */
#sector-cliente[data-theme="light"] .rappi-content-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

/* Left drawer Light theme */
#sector-cliente[data-theme="light"] .side-drawer-left {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
}

#sector-cliente[data-theme="light"] .side-drawer-left .rappi-nav-link {
  color: #334155 !important;
}

#sector-cliente[data-theme="light"] .side-drawer-left .rappi-nav-link:hover {
  background: #f1f5f9 !important;
}

#sector-cliente[data-theme="light"] #left-drawer-user-name {
  color: #0f172a !important;
}

/* Right cart drawer Light theme */
#sector-cliente[data-theme="light"] .side-drawer-right {
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
}

#sector-cliente[data-theme="light"] .side-drawer-right h3 {
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] .side-drawer-right span {
  color: #334155 !important;
}

#sector-cliente[data-theme="light"] #profile-dropdown-menu a {
  color: #1e293b !important;
}

#sector-cliente[data-theme="light"] #profile-dropdown-menu a:hover {
  background: #f1f5f9 !important;
}

/* --- Tarjetas de comercios y kioscos (tema claro, contraste alto) --- */
#sector-cliente[data-theme="light"] .rest-card,
#sector-cliente[data-theme="light"] .kiosk-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 14px !important;
}

#sector-cliente[data-theme="light"] .rest-card:hover,
#sector-cliente[data-theme="light"] .kiosk-card:hover {
  border-color: rgba(255, 94, 43, 0.4) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(255, 94, 43, 0.12) !important;
  transform: translateY(-2px);
}

#sector-cliente[data-theme="light"] .rest-banner {
  height: 88px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 14px 14px 0 0 !important;
}

#sector-cliente[data-theme="light"] .rest-details {
  padding: 8px 10px 10px 10px !important;
}

#sector-cliente[data-theme="light"] .rest-name,
#sector-cliente[data-theme="light"] .kiosk-name {
  color: #0f172a !important; /* Deepest solid charcoal black */
  font-weight: 800 !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 3px !important;
}

#sector-cliente[data-theme="light"] .rest-desc,
#sector-cliente[data-theme="light"] .rest-details p,
#sector-cliente[data-theme="light"] .kiosk-details p {
  display: none !important;
}

#sector-cliente[data-theme="light"] .rest-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  color: #475569 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
}

#sector-cliente[data-theme="light"] .rest-meta-rating {
  /* La estrella y su número, en tema claro.
   *
   * Venía de #f59e0b (2,15) y alguien ya lo había subido a #d97706, que da
   * 3,19 — mejor, pero el mínimo para texto es 4,5 y sigue sin llegar. Este
   * ámbar más profundo da 5,02 y se sigue leyendo como dorado. */
  color: #b45309 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

#sector-cliente[data-theme="light"] .rest-meta-rating .star-icon {
  color: #f59e0b !important;
  font-size: 12px !important;
}

#sector-cliente[data-theme="light"] .rest-meta-sep {
  opacity: 0.45 !important;
  font-size: 9px !important;
  color: #64748b !important;
}

#sector-cliente[data-theme="light"] .rest-meta-dist,
#sector-cliente[data-theme="light"] .rest-meta-time {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
}

/* --- Glassmorphism Cards (Light Mode) --- */
#sector-cliente[data-theme="light"] .glass,
#sector-cliente[data-theme="light"] .card-glass {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}

#sector-cliente[data-theme="light"] .card-glass:hover {
  border-color: rgba(255, 94, 43, 0.35) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

#sector-cliente[data-theme="light"] .glass-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* --- Flat Cards & Stat Cards (Light Mode) --- */
#sector-cliente[data-theme="light"] .card-flat,
#sector-cliente[data-theme="light"] .card-stat {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* --- Side Drawers (Light Mode) --- */
#sector-cliente[data-theme="light"] .side-drawer-left {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.08) !important;
}

#sector-cliente[data-theme="light"] .side-drawer-right {
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.08) !important;
}

/* --- Category Cards (Light Mode) --- */
#sector-cliente[data-theme="light"] .category-card {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

#sector-cliente[data-theme="light"] .category-card::before {
  display: none !important;
}

#sector-cliente[data-theme="light"] .category-card:hover {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

#sector-cliente[data-theme="light"] .category-card.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#sector-cliente[data-theme="light"] .category-card-name {
  color: #1e293b !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

#sector-cliente[data-theme="light"] .category-card:hover .category-card-name,
#sector-cliente[data-theme="light"] .category-card.active .category-card-name {
  color: var(--accent-orange, #ff5e2b) !important;
}

/* --- Mandao Account Settings (Light Mode) --- */
#sector-cliente[data-theme="light"] .mandao-profile-card,
#sector-cliente[data-theme="light"] .rappi-profile-card,
#sector-cliente[data-theme="light"] .mandao-content-panel,
#sector-cliente[data-theme="light"] .rappi-content-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] #mandao-user-display-name,
#sector-cliente[data-theme="light"] #rappi-user-display-name {
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] .mandao-nav-link,
#sector-cliente[data-theme="light"] .rappi-nav-link {
  color: #475569 !important;
}

#sector-cliente[data-theme="light"] .mandao-nav-link:hover,
#sector-cliente[data-theme="light"] .mandao-nav-link.active,
#sector-cliente[data-theme="light"] .rappi-nav-link:hover,
#sector-cliente[data-theme="light"] .rappi-nav-link.active {
  background: rgba(255, 94, 43, 0.08) !important;
  color: #ff5e2b !important;
  font-weight: 800 !important;
}

#sector-cliente[data-theme="light"] #view-account-settings h2,
#sector-cliente[data-theme="light"] #view-account-settings h3,
#sector-cliente[data-theme="light"] #view-account-settings h4,
#sector-cliente[data-theme="light"] #subpanel-account-profile label {
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] #view-account-settings input,
#sector-cliente[data-theme="light"] #view-account-settings select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] .rappi-account-container > div:last-child {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

/* --- Search Filter Chips (Light Mode) --- */
#sector-cliente[data-theme="light"] .search-filter-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

#sector-cliente[data-theme="light"] .search-filter-chip:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

#sector-cliente[data-theme="light"] .search-filter-chip.active {
  background: #ff5e2b !important;
  /* Letra oscura sobre el naranja lleno.
   *
   * Acá el fondo es naranja SÓLIDO, así que el criterio es el opuesto al de los
   * chips de fondo tenue: no hay que oscurecer una letra naranja, hay que dejar
   * de usar blanco. Blanco sobre #ff5e2b da 3,05 y el mínimo es 4,5; este
   * marrón da 5,85. Mismo criterio que el globito del carrito y «+ Pedir». */
  color: #2b1000 !important;
  border-color: #ff5e2b !important;
  box-shadow: 0 4px 12px rgba(255, 94, 43, 0.3) !important;
}

/* --- Buttons (Light Mode) --- */
#sector-cliente[data-theme="light"] .btn-secondary {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

#sector-cliente[data-theme="light"] .btn-secondary:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

#sector-cliente[data-theme="light"] .btn-outline {
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* --- Floating Cart Bar (Light Mode) --- */
#sector-cliente[data-theme="light"] .floating-cart-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* --- Modals (Light Mode) --- */
#sector-cliente[data-theme="light"] #dish-modal > div {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}

/* --- Theme Toggle Active State --- */
#sector-cliente[data-theme="light"] .theme-toggle-btn[data-theme-val="light"],
#sector-cliente[data-theme="dark"] .theme-toggle-btn[data-theme-val="dark"] {
  background: #ff5e2b !important;
  color: #ffffff !important;
  border-color: #ff5e2b !important;
}

/* --- Smooth Theme Transition --- */
#sector-cliente[data-theme] {
  transition: background-color 0.3s ease, color 0.3s ease;
}

#sector-cliente[data-theme] .navbar,
#sector-cliente[data-theme] .side-drawer-left,
#sector-cliente[data-theme] .side-drawer-right,
#sector-cliente[data-theme] .rest-card,
#sector-cliente[data-theme] .kiosk-card,
#sector-cliente[data-theme] .card-glass,
#sector-cliente[data-theme] .rappi-profile-card,
#sector-cliente[data-theme] #profile-dropdown-menu {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* --- Night Mode Card Rules --- */
#sector-cliente[data-theme="dark"] .rest-banner {
  height: 88px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 14px 14px 0 0 !important;
}

#sector-cliente[data-theme="dark"] .rest-details {
  padding: 8px 10px 10px 10px !important;
}

#sector-cliente[data-theme="dark"] .rest-name {
  color: #f8fafc !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 3px !important;
}

#sector-cliente[data-theme="dark"] .rest-desc {
  display: none !important;
}

#sector-cliente[data-theme="dark"] .rest-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
}

#sector-cliente[data-theme="dark"] .rest-meta-rating {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

#sector-cliente[data-theme="dark"] .rest-meta-rating .star-icon {
  color: #f59e0b !important;
  font-size: 12px !important;
}

#sector-cliente[data-theme="dark"] .rest-meta-sep {
  opacity: 0.4 !important;
  font-size: 9px !important;
  color: #94a3b8 !important;
}

#sector-cliente[data-theme="dark"] .rest-meta-dist,
#sector-cliente[data-theme="dark"] .rest-meta-time {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
}

/* ============================================
   OPTIMIZACIÓN MÓVIL ÉLITE MAESTRO ULTRA (SOLO SMARTPHONES)
   ============================================ */

@media (max-width: 768px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 1. Navbar Header para Smartphones (#sector-cliente) */
  #sector-cliente .navbar, .navbar {
    padding: 6px 6px !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  #sector-cliente .navbar > div, .navbar > div {
    gap: 4px !important;
  }

  .btn-hamburger-pill {
    width: 32px !important;
    height: 32px !important;
  }

  .btn-hamburger-pill svg {
    width: 15px !important;
    height: 15px !important;
  }

  #sector-cliente .navbar-brand img, .navbar-brand img {
    height: 28px !important;
    max-width: 75px !important;
    object-fit: contain !important;
  }

  #sector-cliente #navbar-location-btn, #navbar-location-btn {
    padding: 0 6px 0 4px !important;
    height: 32px !important;
  }

  #sector-cliente #header-location-text, #header-location-text {
    max-width: 65px !important;
    font-size: 10px !important;
  }

  #sector-cliente #profile-dropdown-trigger, #profile-dropdown-trigger {
    padding: 0 4px !important;
    height: 32px !important;
    width: 32px !important;
    justify-content: center !important;
  }

  #sector-cliente #profile-dropdown-trigger svg:last-child, #profile-dropdown-trigger svg:last-child {
    display: none !important;
  }

  #sector-cliente #client-user-display, #client-user-display {
    display: none !important;
  }

  #sector-cliente .navbar-cart-btn, #navbar-cart-btn, .navbar-cart-btn {
    padding: 0 6px !important;
    height: 32px !important;
    gap: 4px !important;
  }

  #sector-cliente .navbar-cart-btn span:not(#navbar-cart-badge):not(#cart-badge), 
  .navbar-cart-btn span:not(#navbar-cart-badge):not(#cart-badge) {
    display: none !important;
  }

  /* 1.1 Dropdown de Ubicaciones en Celular (Centrado con Backdrop) */
  #location-dropdown-menu {
    position: fixed !important;
    top: 56px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 9999px rgba(0,0,0,0.6) !important;
    z-index: 10500 !important;
    border-radius: 20px !important;
    padding: 16px !important;
  }

  /* 1.2 Modal de Configurar Ubicación en Celular */
  #location-modal {
    width: 92% !important;
    max-width: 92vw !important;
    padding: 18px 14px 22px 14px !important;
    border-radius: 20px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Los dos campos van apilados: al lado quedarían de 140 px cada uno y hay
     que escribir una dirección adentro. Lo que se saca es el margen de abajo,
     que se sumaba al hueco de la grilla y encima sobraba en el último. */
  .location-details-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .location-details-grid .form-group {
    margin-bottom: 0 !important;
  }

  #location-map-wrapper {
    height: 180px !important;
    margin-bottom: 12px !important;
  }

  /* 2. Modal de Autenticación en Celulares (Separación de Botón ✕) */
  #auth-dropdown {
    padding: 38px 16px 20px 16px !important;
    max-width: 92vw !important;
    box-sizing: border-box !important;
  }

  #auth-dropdown > button {
    top: 10px !important;
    right: 12px !important;
    font-size: 18px !important;
    z-index: 50 !important;
  }

  #auth-dropdown .auth-role-tab {
    padding: 6px 4px !important;
    font-size: 10px !important;
  }

  /* 3. Previsualización del Comercio (Burbuja Flotante sin recorte) */
  .mock-dashboard-wrapper, .mockup-wrapper {
    margin-top: 24px !important;
    overflow: visible !important;
  }

  .mock-floating-bubble {
    top: -14px !important;
    right: 10px !important;
    font-size: 9px !important;
    padding: 4px 10px !important;
    z-index: 20 !important;
  }

  /* 4. Hero Banner Slider y Buscador Principal */
  .banner-slider-container {
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 20px 16px 36px 16px !important;
  }

  #explorer-hero-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .banner-slider-container p {
    font-size: 12px !important;
    margin-bottom: 34px !important;
    line-height: 1.4 !important;
  }

  /* Los puntitos del carrusel se fueron a la esquina de arriba, así que los
     36 px que ocupaban abajo quedaron libres: el buscador baja a ocuparlos y
     queda apoyado contra el borde, no flotando en el medio. Su margen de
     abajo pasa a 0 porque es el último: separaba del borde, no de nada. */
  #client-search-wrapper {
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  #client-search-input {
    padding: 10px 16px 10px 42px !important;
    font-size: 12px !important;
    /* Medía 42 px y se toca con el dedo: el mínimo son 44. */
    height: 44px !important;
    margin-bottom: 0 !important;
  }

  #client-search-wrapper svg {
    left: 14px !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Header & Breadcrumbs en vista de menú para móvil */
  .back-nav-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 6px !important;
  }



  /* En el teléfono no hay miga de pan.

     Tenía dos tramos y los dos repetían algo que ya estaba en pantalla:

       - «Eldorado» / «Explorar»  ->  la ciudad está en la barra de arriba y
         «Explorar» lo dice el botón de al lado, a 6 px.
       - El nombre del comercio o de la categoría  ->  aparece completo justo
         debajo, en la portada y en el título.

     Además eran dos píldoras casi del mismo ancho al lado del botón, con 14 px
     de diferencia de alto, y el nombre no entraba: necesitaba 197 px de 191 y
     se cortaba con puntos suspensivos.

     En pantalla grande sigue, que es donde hay lugar y sirve para orientarse. */
  .breadcrumb-pro-bar {
    display: none !important;
  }

  .breadcrumb-active-item {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 130px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  #hero-dots-container {
    bottom: 10px !important;
    right: 14px !important;
    gap: 4px !important;
    z-index: 10 !important;
  }

  /* 5. Tarjetas de comercios y filtros en móvil */
  .rest-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .rest-card, .kiosk-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .rest-banner {
    height: 78px !important;
  }

  .rest-details {
    padding: 6px 7px 8px 7px !important;
  }

  #sector-cliente[data-theme="light"] .rest-name,
  #sector-cliente[data-theme="dark"] .rest-name,
  .rest-name, .kiosk-name {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }

  .rest-meta-row {
    gap: 3px !important;
    font-size: 10px !important;
    margin-top: 1px !important;
  }

  #sector-cliente[data-theme="light"] .rest-meta-dist,
  #sector-cliente[data-theme="light"] .rest-meta-time,
  #sector-cliente[data-theme="dark"] .rest-meta-dist,
  #sector-cliente[data-theme="dark"] .rest-meta-time,
  .rest-meta-dist, .rest-meta-time {
    font-size: 10px !important;
  }

  .filter-chips {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    max-width: 100% !important;
  }
}

@media (max-width: 350px) {
  .rest-list {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================
   SECTOR DE ROLES PORTALES VIP ÉLITE PERFECCIONADO
   ============================================ */

.role-card-elite {
  position: relative !important;
  border-radius: 22px !important;
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: rgba(14, 17, 28, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.role-card-elite:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.role-card-elite.card-theme-orange {
  border-top: 3.5px solid #ff5e2b !important;
}

.role-card-elite.card-theme-cyan {
  border-top: 3.5px solid #00ffd1 !important;
}

.role-card-elite.card-theme-amber {
  border-top: 3.5px solid #ffb703 !important;
}

.portal-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}

/* El cuadradito de cada tarjeta de portal.

   Antes el color de marca iba al 16-18 % sobre fondo casi negro: no daba el
   color, daba un tinte embarrado —bordó, verde sucio, marrón—. Ahora va
   sólido, que es lo que le da identidad a cada tarjeta.

   Y el ícono va OSCURO, no blanco. Medido sobre cada color sólido:
     naranja  blanco 3,05 · oscuro 5,86
     cian     blanco 1,29 · oscuro 13,79   ← el blanco desaparecía
     ámbar    blanco 1,75 · oscuro 10,22   ← el blanco desaparecía
   El mínimo es 3,0. El cian y el ámbar son colores CLAROS: cualquier trazo
   blanco encima se pierde. Era eso lo que rompía el diseño. */
.role-brand-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  color: #0f172a !important;
  flex-shrink: 0 !important;
}

.role-brand-icon.orange-icon {
  background: #ff5e2b !important;
  box-shadow: 0 4px 14px rgba(255, 94, 43, 0.35) !important;
}

.role-brand-icon.cyan-icon {
  background: #00ffd1 !important;
  box-shadow: 0 4px 14px rgba(0, 255, 209, 0.3) !important;
}

.role-brand-icon.amber-icon {
  background: #ffb703 !important;
  box-shadow: 0 4px 14px rgba(255, 183, 3, 0.3) !important;
}

.portal-card-badge {
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.portal-card-badge.badge-orange {
  background: rgba(255, 94, 43, 0.14) !important;
  color: #ff5e2b !important;
  border: 1px solid rgba(255, 94, 43, 0.35) !important;
}

.portal-card-badge.badge-cyan {
  background: rgba(0, 255, 209, 0.12) !important;
  color: #00ffd1 !important;
  border: 1px solid rgba(0, 255, 209, 0.3) !important;
}

.portal-card-badge.badge-amber {
  background: rgba(255, 183, 3, 0.12) !important;
  color: #ffb703 !important;
  border: 1px solid rgba(255, 183, 3, 0.3) !important;
}


.portal-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
}

/* Botones Estilizados Anti-Fatiga Visual (Borde Neón + Cristalero + Texto Blanco) */
.btn-outline-orange {
  background: rgba(255, 94, 43, 0.08) !important;
  border: 1.5px solid #ff5e2b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(255, 94, 43, 0.15) !important;
}

.btn-outline-orange:hover {
  background: rgba(255, 94, 43, 0.18) !important;
  box-shadow: 0 6px 22px rgba(255, 94, 43, 0.35) !important;
  transform: translateY(-2px) !important;
}

.btn-outline-cyan {
  background: rgba(0, 255, 209, 0.08) !important;
  border: 1.5px solid #00ffd1 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 255, 209, 0.15) !important;
}

.btn-outline-cyan:hover {
  background: rgba(0, 255, 209, 0.18) !important;
  box-shadow: 0 6px 22px rgba(0, 255, 209, 0.35) !important;
  transform: translateY(-2px) !important;
}

.btn-outline-amber {
  background: rgba(255, 183, 3, 0.08) !important;
  border: 1.5px solid #ffb703 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(255, 183, 3, 0.15) !important;
}

.btn-outline-amber:hover {
  background: rgba(255, 183, 3, 0.18) !important;
  box-shadow: 0 6px 22px rgba(255, 183, 3, 0.35) !important;
  transform: translateY(-2px) !important;
}

.btn-portal-action:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
}

/* Subtítulo en un solo renglón */
.portal-single-line-subtitle {
  white-space: nowrap !important;
}

/* Ajustes responsivos móviles */
@media (max-width: 900px) {
  .portal-single-line-subtitle {
    white-space: normal !important;
  }
}

@media (max-width: 768px) {
  .portal-header-wrapper {
    margin-top: 24px !important;
    margin-bottom: 20px !important;
    padding: 0 8px !important;
  }

  .portal-hero-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* Las tres tarjetas en el teléfono.

     Medido a 399 x 918: cada una daba 280 px, las tres 840, o sea el 92 % de
     la pantalla. El contenido eran 191 px; los otros 89 eran aire.

     No se saca información: se aprietan los huecos. Título, descripción y
     botón quedan, y el botón sigue por encima de los 44 px. */
  .role-card-elite {
    border-radius: 18px !important;
    padding: 14px 16px !important;
  }

  /* El alto fijo lo pone `.role-card` en index.html, que es otra definición
     del mismo elemento. Sin soltarlo, apretar los huecos no cambia nada. */
  .role-card {
    min-height: 0 !important;
  }

  .portal-card-top {
    margin-bottom: 12px !important;
  }

  .role-brand-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .portal-card-body {
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  .role-card-elite .role-title {
    font-size: 19px !important;
    margin-bottom: 0 !important;
  }

  .role-card-elite .role-desc {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
  }
}

/* ============================================
   ESTILOS DNI ASH SLATE STEEL RECTANGULAR SCANNER
   ============================================ */
.dni-viewport-container {
  position: relative;
  width: 320px;
  height: 202px;
  max-width: 88vw;
  max-height: 56vw;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 35px rgba(148, 163, 184, 0.25);
  border: 1.5px solid rgba(148, 163, 184, 0.4);
}

.dni-rect-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dni-rect-border {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 3;
  stroke-dasharray: 12, 6;
  filter: drop-shadow(0 0 8px rgba(148, 163, 184, 0.6));
  transition: stroke 0.3s ease, filter 0.3s ease;
  animation: dniPulseBorder 2s infinite alternate;
}

.dni-rect-border.success {
  stroke: #cbd5e1 !important;
  stroke-dasharray: none !important;
  filter: drop-shadow(0 0 16px #ffffff) !important;
}

.dni-rect-border.warning {
  stroke: #ff2a85 !important;
  filter: drop-shadow(0 0 14px #ff2a85) !important;
}

@keyframes dniPulseBorder {
  0% { opacity: 0.82; }
  100% { opacity: 1; }
}

.dni-laser-scanner {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  box-shadow: 0 0 12px #ffffff;
  animation: dniLaserScanAnim 2.2s infinite ease-in-out alternate;
  z-index: 5;
}

@keyframes dniLaserScanAnim {
  0% { top: 5%; }
  100% { top: 92%; }
}

/* ============================================================
   ADMIN DASHBOARD — PROFESSIONAL BADGE SYSTEM (NO EMOJIS)
   ============================================================ */

/* Status Badges */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-status-verified {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.badge-status-banned {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.badge-status-suspended {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-status-pending {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.badge-status-google {
  background: rgba(66, 133, 244, 0.12);
  color: #4285f4;
  border: 1px solid rgba(66, 133, 244, 0.25);
}

/* Category Badge (no emoji) */
.badge-category {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0, 255, 209, 0.08);
  color: var(--neon-cyan, #00ffd1);
  border: 1px solid rgba(0, 255, 209, 0.15);
  white-space: nowrap;
}

/* Bulk Action Bar */
.bulk-action-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(244, 63, 94, 0.06);
  border: 1px solid rgba(244, 63, 94, 0.15);
  border-radius: 8px;
  margin-bottom: 12px;
  animation: fadeInUp 0.2s ease;
}

.bulk-action-bar .bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
}

/* Admin KPI Cards */
.admin-kpi-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-kpi-card {
  flex: 1;
  min-width: 120px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-align: center;
}

.admin-kpi-card .kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary, #e2e8f0);
  line-height: 1.2;
  font-family: var(--font-display, 'Outfit', sans-serif);
}

.admin-kpi-card .kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Admin Checkbox */
.admin-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  background: transparent;
  cursor: pointer;
  accent-color: var(--neon-cyan, #00ffd1);
}

.admin-checkbox:checked {
  border-color: var(--neon-cyan, #00ffd1);
}

/* Client ID Badge */
.badge-client-id {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  letter-spacing: 0.5px;
}

/* Fade in animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GLOBAL DATE FILTER & ENTITY KPI SUMMARY CARDS
   ============================================================ */

.admin-date-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-date-filter-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Los campos «Desde/Hasta» viven en su propia caja para poder plegarlos en el
   teléfono sin tocar los botones de período, que son los que más se usan. */
.admin-date-campos {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-date-chips {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}

.admin-date-bar-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-date-bar-nombre {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* La casilla que pliega los campos. Queda fuera de la vista pero alcanzable
   con el teclado. En el escritorio no hace nada: allá los campos entran y se
   fuerzan visibles. */
.admin-date-plegar {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* `label.` para ganarle al `display: inline-flex` de `.date-preset-chip`,
   que se define mas abajo con la misma especificidad. */
label.admin-date-plegar-btn {
  display: none;
}

.admin-date-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 12px;
  height: 38px;
  box-sizing: border-box;
}

.admin-date-input-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-date-input-group input[type="date"] {
  background: transparent;
  border: none;
  color: var(--text-primary, #e2e8f0);
  font-size: 12px;
  font-weight: 700;
  outline: none;
  font-family: inherit;
  cursor: pointer;
}

.date-preset-chip {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.date-preset-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #ffffff);
}

.date-preset-chip.active {
  background: rgba(0, 255, 209, 0.12);
  color: var(--neon-cyan, #00ffd1);
  border-color: rgba(0, 255, 209, 0.3);
  font-weight: 800;
}

/* Entity Summary Cards Row */
.entity-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.entity-kpi-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.entity-kpi-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.entity-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.entity-kpi-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.entity-kpi-main-val {
  font-size: 36px;
  font-weight: 900;
  font-family: var(--font-display, 'Outfit', sans-serif);
  color: var(--text-primary, #ffffff);
  line-height: 1;
  letter-spacing: -0.5px;
  font-feature-settings: "tnum";
}

.entity-kpi-subrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  align-items: center;
}

.kpi-subbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1;
}

.kpi-subbadge.green {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.kpi-subbadge.amber {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.kpi-subbadge.red {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.3);
}

.kpi-subbadge.cyan {
  background: rgba(0, 255, 209, 0.12);
  color: #00ffd1;
  border-color: rgba(0, 255, 209, 0.3);
}



/* ============================================================
   CARRITO Y CHECKOUT
   ============================================================
   Todo con variables del tema. La versión anterior tenía los
   colores escritos a mano —fondo casi negro, texto blanco,
   bordes en blanco translúcido—, así que en tema claro los
   bordes se volvían invisibles y el texto quedaba blanco sobre
   blanco. Acá no hay un solo color literal.
   ============================================================ */

.checkout-encabezado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.checkout-encabezado > :first-child { justify-self: start; }

/* Volver: se lee como una accion, no como un boton pesado */
.checkout-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.checkout-volver:hover {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}
.checkout-volver svg { transition: transform var(--transition-fast); }
.checkout-volver:hover svg { transform: translateX(-3px); }

/* Dónde está parada la persona dentro del proceso */
.checkout-pasos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
}
.checkout-paso { white-space: nowrap; }
.checkout-paso + .checkout-paso::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--border-default);
}
.checkout-paso.hecho { color: var(--text-secondary); }
.checkout-paso.actual { color: var(--accent-orange); }

/* Dos columnas: los datos a la izquierda con ancho acotado, el resumen
   acompañando a la derecha. Una sola columna de mil pixeles hacia que los
   campos se vieran estirados y genericos. */
.checkout-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

.checkout-resumen { position: sticky; top: 90px; }
.checkout-resumen-titulo {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.checkout-tarjeta {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Cada bloque es un paso: qué llevás, a dónde va, cómo pagás. */
.checkout-bloque {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.checkout-bloque-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.checkout-bloque-titulo h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.checkout-bloque-titulo span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
}

.checkout-enlace {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-orange);
}
.checkout-enlace:hover { text-decoration: underline; }

.checkout-etiqueta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 14px 0 6px;
}
.checkout-etiqueta:first-of-type { margin-top: 0; }
.checkout-etiqueta span {
  font-weight: 500;
  color: var(--text-tertiary);
}

/* Los campos heredan el tema en vez de imponer su propio color. */
.checkout-campo {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.checkout-campo::placeholder { color: var(--text-tertiary); }
.checkout-campo:focus {
  outline: 2px solid var(--accent-orange);
  outline-offset: 1px;
  border-color: transparent;
}
#cart-address { cursor: pointer; }

/* Propinas: se reparten el ancho y crecen si el texto es largo. */
.checkout-propinas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.checkout-propinas .tip-chip {
  flex: 1 1 auto;
  min-width: 64px;
  min-height: 40px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.checkout-propinas .tip-chip:hover {
  border-color: var(--accent-orange);
  color: var(--text-primary);
}
/* El estado activo lo define una regla con !important en index.html
   (naranja suave con texto naranja). Funciona bien en ambos temas, así que
   no se duplica acá: dos reglas peleando por lo mismo es cómo se llega a que
   nadie sepa cuál manda. */

/* La cuenta. Los números alineados a la derecha y en ancho fijo
   para que las comas caigan una debajo de otra. */
.checkout-cuenta {
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.checkout-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 5px 0;
}
.checkout-linea span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: 600;
}
.checkout-linea.checkout-total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}
.checkout-linea.checkout-total span:last-child {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-orange);
  letter-spacing: -0.02em;
}

/* Confirmar pedido: el naranja de marca en un solo tono.
   El degradado naranja-rosa es el recurso que usa cualquier plantilla, y por
   eso se leia generico. Un color plano, bien elegido y con una sombra que
   nace del mismo color, se ve mas caro y no compite con nada. */
.checkout-confirmar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
  cursor: pointer;
  color: #ffffff;
  background: var(--accent-orange);
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 18px -4px rgba(255, 94, 43, 0.55);
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--accent-orange) 55%, transparent);
  transition: background var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.checkout-confirmar::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.9;
  transition: transform var(--transition-fast);
}
.checkout-confirmar:hover {
  background: #e04a1c;
  background: color-mix(in srgb, var(--accent-orange) 88%, #000);
  box-shadow: 0 10px 26px -6px rgba(255, 94, 43, 0.65);
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--accent-orange) 65%, transparent);
  transform: translateY(-1px);
}
.checkout-confirmar:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.checkout-confirmar:active { transform: translateY(0); }
.checkout-confirmar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.checkout-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

/* Los productos del carrito */
#cart-items-container { max-height: 260px; overflow-y: auto; }
#cart-items-container .cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
  color: var(--text-primary);
}
#cart-items-container .cart-item:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .checkout-columnas { grid-template-columns: 1fr; }
  .checkout-encabezado { grid-template-columns: 1fr; gap: 12px; }
  .checkout-resumen { position: static; }
}

@media (max-width: 480px) {
  .checkout-bloque, .checkout-cuenta { padding: 16px; }
  .checkout-propinas .tip-chip { min-width: 56px; font-size: 12px; }
  .checkout-pasos { display: none; }
}

/* Cada producto dentro del carrito */
#cart-items-container .cart-item-nombre {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
#cart-items-container .cart-item-nombre strong {
  color: var(--accent-orange);
  margin-right: 4px;
}
#cart-items-container .cart-item-derecha {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#cart-items-container .cart-item-precio {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-primary);
}
#cart-items-container .cart-item-quitar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
#cart-items-container .cart-item-quitar:hover {
  color: #ffffff;
  background: var(--neon-pink, #ff2a85);
  border-color: var(--neon-pink, #ff2a85);
}

/* ============================================================
   BOTONES DE ACCIÓN DEL PEDIDO
   ============================================================
   El gradiente naranja-rosa se usaba en todos por igual: agregar
   un producto pesaba lo mismo que confirmar un pedido de $12.890.
   Cuando todo grita, nada se escucha.

   Jerarquía: el gradiente queda SOLO para confirmar el pedido,
   que es la acción irreversible. Agregar al carrito pasa a naranja
   sólido, y las acciones secundarias a contorno.
   ============================================================ */

/* Acción principal: naranja sólido, sin degradado */
.btn-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: var(--font-sans);
  cursor: pointer;
  color: #ffffff;
  background: var(--accent-orange-boton, #c73f10);
  border: 1px solid var(--accent-orange-boton, #c73f10);
  min-height: 48px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.btn-accion:hover {
  background: var(--accent-orange-dark, #e04a1c);
  border-color: var(--accent-orange-dark, #e04a1c);
  transform: translateY(-1px);
}
.btn-accion:active { transform: translateY(0); }

/* Acción secundaria: mismo tamaño, solo contorno */
.btn-accion-suave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: var(--font-sans);
  cursor: pointer;
  color: var(--accent-orange);
  background: transparent;
  border: 1.5px solid var(--accent-orange);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.btn-accion-suave:hover {
  background: rgba(255, 94, 43, 0.10);
  background: color-mix(in srgb, var(--accent-orange) 10%, transparent);
}

/* Los dos botones del producto, uno al lado del otro */
.acciones-producto {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
  margin-top: 16px;
}
.acciones-producto .precio-en-boton {
  padding-left: 9px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 700;
  opacity: 0.95;
}
@media (max-width: 420px) {
  .acciones-producto { grid-template-columns: 1fr; }
}

/* ============================================================
   FOTO DEL PRODUCTO
   ============================================================
   Cuando el comercio todavía no le sacó foto, se muestra un
   marcador con la inicial. Antes se rellenaba con una foto de
   ensalada de un banco de imágenes: una heladería mostraba
   ensaladas, prometiéndole al cliente algo distinto de lo que
   iba a recibir.
   ============================================================ */
.foto-producto {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
  background: var(--bg-product-image, var(--bg-card-subtle));
}

.foto-producto--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card-subtle);
  border: 1px dashed var(--border-default);
  /* El marcador es CUADRADO y centrado.
     Con `width: 100%` se estiraba a lo ancho de la tarjeta y a lo alto del
     cartel: una letra dentro de un rectángulo deformado. Una foto de
     producto no tiene esa forma, así que el hueco tampoco. */
  width: auto;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
}
.foto-producto--vacia span {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--text-tertiary);
  opacity: 0.55;
  user-select: none;
}

/* La miniatura del cajón lateral usa el mismo marcador, más chico */
.miniatura-producto {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}
.miniatura-producto .foto-producto { height: 48px !important; }
.miniatura-producto .foto-producto--vacia span { font-size: 18px; }

/* ============================================================
   PANEL DEL MANDADERO
   ============================================================
   Se usa en la calle: con sol, con una mano, en movimiento.
   Por eso el texto es grande, el contraste alto y las áreas
   tocables no bajan de 48px. La dirección es lo único que
   importa leer de un vistazo.
   ============================================================ */

.rider-vacio {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.rider-vacio p { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.rider-vacio span { font-size: 14px; color: var(--text-tertiary); }

.oferta-viaje,
.viaje-activo {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
}
.viaje-activo { border-color: var(--accent-orange); border-width: 2px; }

.oferta-viaje header,
.viaje-activo header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.oferta-comercio,
.viaje-estado {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}
.viaje-estado {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-orange);
}

.oferta-ganancia,
.viaje-ganancia {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-orange);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La dirección: el dato que se lee en movimiento. Grande y con contraste. */
.oferta-destino {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-primary);
  font-weight: 600;
}

.oferta-adelanto,
.oferta-pagado {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 10px;
}
.oferta-adelanto {
  color: var(--text-primary);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-default);
}
.oferta-pagado {
  color: var(--text-secondary);
  background: var(--bg-card-subtle);
}

.viaje-punto {
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
}
.viaje-rotulo {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.viaje-punto strong {
  display: block;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-primary);
  font-weight: 700;
}
.viaje-cliente {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Áreas tocables generosas: se aprietan con una mano y a veces con guantes */
.oferta-tomar,
.viaje-accion,
.viaje-ruta,
.viaje-llamar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: 14px;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.oferta-tomar,
.viaje-accion {
  color: #fff;
  background: var(--accent-orange);
  border: none;
}
.oferta-tomar:hover,
.viaje-accion:hover { background: #e04a1c; }
.oferta-tomar:disabled,
.viaje-accion:disabled { opacity: .6; cursor: not-allowed; }

.viaje-llamar {
  color: var(--accent-orange);
  background: transparent;
  border: 2px solid var(--accent-orange);
}

/* Abrir la navegación es lo primero que hace el mandadero cuando toma un
   viaje, así que va en azul y lleno: se distingue del naranja de «ya lo
   retiré» de un vistazo, sin tener que leer. Con el teléfono en el manubrio y
   apuro, dos botones naranjas iguales se aprietan mal. */
.viaje-ruta {
  color: #fff;
  background: #1d6fe0;
  border: none;
  gap: 8px;
}
.viaje-ruta:hover { background: #1659b8; }

/* ==========================================================================
   ACCESIBILIDAD DE BASE
   ==========================================================================
   Todo lo de acá abajo vale para las cinco pantallas. Se agregó al final a
   propósito: no cambia ningún color ni ningún tamaño de lo que ya existe,
   solo agrega lo que faltaba.
   ========================================================================== */

/* ---------- Dónde está parado el teclado ----------
   Antes solo tres botones del mandadero mostraban el foco. En el resto del
   sitio, quien navega con Tab —por costumbre, por una mano ocupada, o porque
   no puede usar el mouse— avanzaba a ciegas: nada indicaba dónde estaba
   parado.

   Se usa :focus-visible y no :focus para que el recuadro aparezca al navegar
   con teclado pero no al hacer clic con el mouse, que es lo que hacía que
   estos contornos se vieran mal y terminaran borrándose. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--accent-orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* Sobre fondo naranja el contorno naranja no se ve: ahí va blanco. */
.btn-primary:focus-visible,
.oferta-tomar:focus-visible,
.viaje-accion:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 5px rgba(255, 94, 43, 0.55);
}

/* Nota: la aplicación del mandadero no carga este archivo —tiene su propio
   diseño, con otros nombres de variables—, así que las mismas reglas de
   accesibilidad están repetidas dentro de mandadero.html. Si tocás una, tocá
   la otra. */

/* ============================================================
   MAPA DEL SEGUIMIENTO — repartidor sin señal
   ============================================================

   Cuando se pierde la señal el muñequito NO desaparece: se queda en su última
   posición, apagado y con un anillo que late. Que se esfume es peor —parece
   que el pedido se evaporó— y encima esconde el último dato útil, que es por
   dónde andaba. El latido y el texto de abajo aclaran que esa posición es de
   hace un rato, no de ahora. */

/* El muñeco de Mandao sobre el mapa. */
.marcador-repartidor {
  position: relative;
}

.repartidor-dibujo {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  height: 46px;
  width: auto;
  /* La sombra propia lo despega del mapa y le da volumen. */
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  user-select: none;
}

/* La manchita del piso: es lo que lo apoya en la calle. Sin esto el muñeco
   parece pegado sobre la pantalla y no sobre el mapa. */
.repartidor-sombra {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  filter: blur(2.5px);
}

/* ==========================================================================
   SEGUIMIENTO DEL PEDIDO
   ==========================================================================
   Todo lo de acá abajo se anima con transform y opacity, que son las dos
   cosas que el teléfono dibuja en la placa de video sin repintar la página.
   Animar `width`, `top` o `box-shadow` obliga a recalcular el diseño en cada
   cuadro y en un teléfono de gama media se ve a los saltos.

   No hay ninguna librería de animación. Todo lo que se pidió —el estado que
   late, la línea que se llena, el tilde que se dibuja— sale de CSS. Una
   librería serían cientos de kilobytes bajados con datos móviles por alguien
   que está esperando la comida, y encima con animaciones de plantilla que usan
   otras cien apps.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA CHAPA DE ESTADO, VIVA
   -------------------------------------------------------------------------- */

.estado-vivo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--success-text, #34d399);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.30);
}

.estado-vivo__punto {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* El halo que respira. Late el ANILLO de afuera, no el punto: si latiera el
   punto, el texto de al lado parecería moverse. */
.estado-vivo__punto::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  animation: latidoDelEstado 2.4s ease-in-out infinite;
}

@keyframes latidoDelEstado {
  0%, 100% { transform: scale(0.7); opacity: 0.5; }
  50%      { transform: scale(1.25); opacity: 0; }
}

/* Un pedido que ya no se mueve no tiene por qué seguir latiendo. */
.estado-vivo.quieto .estado-vivo__punto::after { animation: none; opacity: 0; }

/* Sin señal del repartidor: ámbar, y sigue latiendo porque se está
   reintentando de verdad. */
.estado-vivo.reconectando {
  color: var(--accent-amber, #fbbf24);
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.30);
}

/* Todavía no salió: naranja de la marca, quieto. */
.estado-vivo.esperando {
  color: var(--accent-orange);
  background: rgba(255, 94, 43, 0.12);
  border-color: rgba(255, 94, 43, 0.30);
}

/* Cancelado: gris. No se pinta de rojo a propósito — el rojo dice «algo salió
   mal» y muchas cancelaciones las pide el propio cliente. */
.estado-vivo.cancelado {
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-color: var(--border-default);
}

/* Recorrido cumplido: la línea de los pasos pasa del naranja de la marca al
   verde, para que se lea igual que los cuatro puntos. */
.pasos-pedido__avance.cumplido {
  background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
}

/* La salida de la pantalla de seguimiento, con el pedido ya terminado. */
.volver-al-inicio {
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: var(--space-lg);
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.volver-al-inicio:hover {
  color: var(--text-primary);
  border-color: var(--accent-orange);
}

/* --------------------------------------------------------------------------
   LOS CUATRO PASOS
   -------------------------------------------------------------------------- */

.pasos-pedido {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: var(--space-xl) 0 var(--space-lg);
}

/* El riel gris de fondo. Arranca y termina en el centro del primer y del
   último punto, no en el borde de la caja: si no, sobresale por los costados. */
.pasos-pedido__riel {
  position: absolute;
  top: 21px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  border-radius: 3px;
  background: var(--bg-elevated);
  overflow: hidden;
}

/* Lo recorrido. Se estira con scaleX y no con width justamente para no
   recalcular el diseño en cada cuadro. */
.pasos-pedido__avance {
  height: 100%;
  border-radius: 3px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.paso {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.paso__punto {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-default);
  color: var(--text-tertiary);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.paso__punto svg { width: 20px; height: 20px; }

.paso__nombre {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
  text-align: center;
  transition: color 0.3s ease;
}

/* Los pasos ya cumplidos. */
.paso.done .paso__punto {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.45);
  color: #34d399;
}
.paso.done .paso__nombre { color: var(--text-secondary); }

/* El paso actual: relleno con el degradado de la marca y un halo que respira
   al mismo ritmo que la chapa de estado, para que se lean como una sola cosa. */
.paso.active .paso__punto {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
}
.paso.active .paso__nombre {
  color: var(--text-primary);
  font-weight: 800;
}

/* El halo cuelga del PASO y no del punto: adentro del punto quedaría pintado
   encima del ícono —un ::before es hijo, se dibuja arriba del fondo del padre—
   y le lavaría el color. Acá queda por detrás, centrado con el punto. */
.paso.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border-radius: 50%;
  background: var(--accent-orange);
  opacity: 0.35;
  animation: latidoDelEstado 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   CUÁNTO FALTA
   -------------------------------------------------------------------------- */

.eta {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.eta__reloj {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 94, 43, 0.13);
  color: var(--accent-orange);
}
.eta__reloj svg { width: 20px; height: 20px; }

.eta__cuerpo { min-width: 0; }

.eta__numero {
  font-family: var(--font-display, inherit);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}

.eta__nota {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   EL MAPA
   -------------------------------------------------------------------------- */

/* Más alto que antes y calculado sobre la pantalla, no en píxeles fijos: es lo
   que la persona mira todo el rato, y en un teléfono alto tiene que aprovechar
   el lugar. El tope está para que en una computadora no ocupe media pantalla. */
.mapa-seguimiento {
  position: relative;
  height: clamp(300px, 46vh, 460px);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  overflow: hidden;
  z-index: 10;
}

.mapa-seguimiento #tracking-map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   LA LLEGADA
   -------------------------------------------------------------------------- */

/* El verde va oscuro y no el `--success` del sistema, que es un verde neón
   (#39ff14). Ese verde sirve para un puntito de 8 píxeles; en una pantalla
   entera vibra y cansa la vista en dos segundos. */
.llegada {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 26px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(165deg, #0f7a52 0%, #075e45 55%, #04463a 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.llegada.visible { display: flex; opacity: 1; }

/* La salida. El verde se agranda mientras se desvanece, como si se abriera
   hacia quien mira, y atrás aparece el pedido terminado.

   Se anima con transform y opacity —las dos cosas que el teléfono dibuja en la
   placa de video— así que sale parejo hasta en un equipo modesto. */
.llegada.saliendo {
  animation: disolverLaLlegada 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes disolverLaLlegada {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.14); }
}

/* El tilde se va último y crece un poco más que el fondo: el ojo lo sigue y
   la transición tiene a dónde mirar mientras el verde desaparece. */
.llegada.saliendo .llegada__marca {
  animation: despedirElTilde 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes despedirElTilde {
  0%   { opacity: 1; transform: scale(1); }
  45%  { opacity: 1; transform: scale(1.16); }
  100% { opacity: 0; transform: scale(1.34); }
}

/* Una cancelación no se festeja. Misma pantalla, gris en vez de verde y sin
   ondas: tirarle colores a alguien al que se le cayó el pedido sería de mal
   gusto. El tilde igual se dibuja, porque marca que el trámite terminó. */
.llegada.sin-festejo {
  background: linear-gradient(165deg, #2b3040 0%, #1b1f2c 55%, #12151f 100%);
}
.llegada.sin-festejo .llegada__onda { display: none; }
.llegada.sin-festejo .llegada__boton { color: #1b1f2c; }

/* El video, como banda al ancho de la pantalla.
   `contain` y no `cover`: es 16:9 y el teléfono es mucho más alto, así que
   llenar la pantalla recortaría casi todo el ancho y dejaría al personaje
   cortado por la mitad. Como banda se ve entero, y cuando el video termina en
   verde plano el borde desaparece contra el fondo del mismo color. */
.llegada__pantalla {
  position: relative;
  display: none;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  margin-bottom: 26px;
}

/* El padre saca su alto de un `aspect-ratio`, y un alto en porcentaje contra
   eso lo resuelve Chrome pero no Safari: ahí cae en `auto` y el video crece
   hasta su tamaño natural. `inset` no depende de eso. */
.llegada__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

/* El difuminado del borde: una sombra hacia adentro, del mismo verde del
   fondo, que desvanece los cuatro lados de la banda.

   Existe porque el verde con el que termina cada video no es perfectamente
   plano —el de pago tiene un degradado suave— y además el navegador lo pinta
   un poco distinto de como sale del archivo. Sin esto se ve el rectángulo del
   video recortado contra el fondo. Con esto, aunque los verdes no coincidan
   exactamente, el borde desaparece.

   El color lo pone el JavaScript, medido del último cuadro de cada video. */
.llegada__pantalla::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 24px 16px var(--verde-festejo, transparent);
}

.llegada.con-video .llegada__pantalla { display: block; }
.llegada.con-video .llegada__marca { display: none; }

.llegada__marca {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  margin-bottom: 26px;
}

/* Las ondas que salen del sello. Son dos y salen desfasadas, para que se lea
   como algo que se expande y no como un parpadeo. */
.llegada__onda {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
}

.llegada.visible .llegada__onda {
  animation: ondaDeLlegada 2.6s ease-out 0.45s infinite;
}
.llegada.visible .llegada__onda--2 { animation-delay: 1.3s; }

@keyframes ondaDeLlegada {
  0%   { transform: scale(0.65); opacity: 0.65; }
  100% { transform: scale(1.45); opacity: 0; }
}

.llegada__sello { width: 148px; height: 148px; overflow: visible; }

.llegada__aro,
.llegada__tilde {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El truco de siempre para que un trazo se dibuje solo: se lo recorta con
   `stroke-dasharray` del largo total y se va soltando el `dashoffset`. */
.llegada__aro {
  stroke-width: 5;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}

.llegada__tilde {
  stroke-width: 8;
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
}

.llegada.visible .llegada__aro {
  animation: dibujarTrazo 0.65s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.llegada.visible .llegada__tilde {
  animation: dibujarTrazo 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}

@keyframes dibujarTrazo { to { stroke-dashoffset: 0; } }

.llegada__titulo {
  margin: 0 0 10px;
  font-family: var(--font-display, inherit);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #ffffff;
}

.llegada__texto {
  margin: 0 0 34px;
  max-width: 320px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

/* El título, el texto y el botón entran DESPUÉS: primero se mira lo que pasa y
   recién después se lee. Con video, cuando el video termina; sin video, apenas
   se dibuja el tilde.

   Arrancan invisibles y los trae la animación. Ojo con eso: si alguien saca la
   animación sin devolver la opacidad, los textos no aparecen nunca — por eso
   el bloque de movimiento reducido, más abajo, los pone visibles a mano. */
.llegada__titulo,
.llegada__texto,
.llegada__boton { opacity: 0; }

.llegada.texto-listo .llegada__titulo,
.llegada.texto-listo .llegada__texto,
.llegada.texto-listo .llegada__boton {
  animation: subirYAparecer 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.llegada.texto-listo .llegada__titulo { animation-delay: 0.05s; }
.llegada.texto-listo .llegada__texto  { animation-delay: 0.15s; }
.llegada.texto-listo .llegada__boton  { animation-delay: 0.25s; }

@keyframes subirYAparecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.llegada__boton {
  min-width: 210px;
  min-height: 52px;
  padding: 15px 34px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  color: #075e45;
  background: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}
.llegada__boton:hover { transform: translateY(-1px); filter: brightness(0.97); }

/* --------------------------------------------------------------------------
   QUIEN PIDIÓ MENOS MOVIMIENTO, RECIBE MENOS MOVIMIENTO
   --------------------------------------------------------------------------
   No es un detalle de cortesía: hay gente a la que el movimiento en pantalla
   le da mareo o le dispara migraña, y lo deja configurado en el teléfono. Se
   respeta esa decisión. Todo se sigue viendo y entendiendo igual, sin bailar. */
@media (prefers-reduced-motion: reduce) {
  .estado-vivo__punto::after,
  .paso.active::before,
  .llegada.visible .llegada__onda {
    animation: none;
  }
  .pasos-pedido__avance { transition: none; }
  .llegada.visible .llegada__aro,
  .llegada.visible .llegada__tilde {
    animation: none;
    stroke-dashoffset: 0;
  }
  /* Sin animación hay que devolver la opacidad a mano, o los textos que
     arrancan invisibles no aparecerían nunca. */
  .llegada.texto-listo .llegada__titulo,
  .llegada.texto-listo .llegada__texto,
  .llegada.texto-listo .llegada__boton {
    animation: none;
    opacity: 1;
  }
  /* La salida se vuelve un desvanecido simple, sin el crecimiento. */
  .llegada.saliendo { animation: apagarLaLlegada 0.3s linear forwards; }
  .llegada.saliendo .llegada__marca { animation: none; }
}

@keyframes apagarLaLlegada { to { opacity: 0; } }

/* El comercio y el domicilio sobre el mapa. Mismo tratamiento que el
   repartidor: el dibujo con su sombra propia, apoyado sobre la calle. */
.marcador-comercio,
.marcador-domicilio {
  position: relative;
}

.comercio-dibujo,
.domicilio-dibujo {
  position: absolute;
  bottom: var(--piso-local, 8px);
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.42));
  pointer-events: none;
  user-select: none;
}

/* El local va más alto que la casa a propósito: el cartel se lleva el 40% de
   su altura, así que al mismo tamaño el logo quedaría ilegible. */
.marcador-comercio {
  /* Todo lo del cartel se calcula a partir de estas dos medidas. La proporción
     0.7207 es la del dibujo (1355 x 1880 px), así que el ancho sale solo y no
     hay que tocarlo si algún día se cambia el alto. */
  --alto-local: 68px;
  --ancho-local: calc(var(--alto-local) * 0.7207);
  --piso-local: 8px;
}
.comercio-dibujo  { height: var(--alto-local); }
.domicilio-dibujo { height: 52px; }

/* El logo del comercio, adentro del círculo blanco del cartel.
   Las medidas salen de medir el dibujo; ver puestoDelComercio() en client.js.
   El 46% va sobre el ANCHO DEL DIBUJO, no sobre el del marcador: son distintos
   —el marcador es cuadrado y el dibujo es angosto— y confundirlos hacía que el
   logo saliera más grande que el círculo y se montara sobre el aro naranja. */
.comercio-cartel {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--alto-local) - var(--piso-local) + var(--alto-local) * 0.262);
  transform: translate(-50%, -50%);
  width: calc(var(--ancho-local) * 0.46);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}

.comercio-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Sin logo cargado queda el emoji del rubro, que es lo que el comercio
   siempre tiene. Un cartel vacío se vería como un error. */
.comercio-emoji {
  font-size: 15px;
  line-height: 1;
}

.marcador-sin-senal {
  opacity: 0.55;
  filter: grayscale(0.5);
}

.marcador-sin-senal::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent-orange);
  animation: latidoReconectando 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes latidoReconectando {
  0%   { transform: scale(0.85); opacity: 0.9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ============================================================
   CARTEL DE AVISO / CONFIRMACIÓN
   ============================================================

   Reemplaza los recuadros grises del navegador (`alert`, `confirm`), que
   rompen el diseño, se leen mal en el teléfono y congelan la página. */

.mandao-dialogo-fondo {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.mandao-dialogo-fondo.visible {
  opacity: 1;
}

/* La tarjeta usa la misma receta que el resto de las superficies de Mandao
   —vidrio, borde naranja tenue, esquinas grandes— en vez de un rectángulo gris
   con borde fino, que se veía como el cartel de cualquier página. Todo sale de
   las variables del sistema, así que el tema claro funciona solo. */
.mandao-dialogo {
  position: relative;
  width: 100%;
  max-width: 400px;
  /* La tarjeta va OPACA, no de vidrio.
     Con `--bg-card-glass` quedaba translúcida sobre el velo negro del fondo, y
     en el tema claro eso bajaba la tarjeta de blanco a gris 217. Medido: el
     cuerpo y el botón de salida daban 4,36 de contraste contra un mínimo de
     4,5. Opaca dan 6,1. El aire premium lo ponen el degradado de arriba, el
     borde naranja y la sombra, no la transparencia. */
  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 24px 22px 22px;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}

/* Una pincelada de color arriba de todo. Es lo que hace que se lea como algo
   de Mandao y no como una ventana del navegador. */
.mandao-dialogo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

/* El dibujito del tema va DENTRO del título, pegado a la última palabra.
   Antes era un emoji dentro de una pastilla redonda arriba de todo: ocupaba
   mucho, empujaba el texto hacia abajo y se veía de plantilla. Un vector fino
   en naranja, del alto de la letra, acompaña el título en vez de competirle.

   Es opcional: los avisos que no pasan `icono` se ven igual que siempre. */
.mandao-dialogo__pin {
  display: inline-block;
  vertical-align: -0.14em;
  margin-left: 7px;
  color: var(--accent-orange);
}

.mandao-dialogo__pin svg {
  display: block;
}

.mandao-dialogo-fondo.visible .mandao-dialogo {
  transform: translateY(0) scale(1);
}

.mandao-dialogo__titulo {
  margin: 0 0 9px;
  font-family: var(--font-display, inherit);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.25;
}

.mandao-dialogo__cuerpo {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.mandao-dialogo__detalle {
  margin: 14px 0 0;
  padding: 12px 14px;
  list-style: none;
  background: var(--bg-elevated);
  /* La barrita naranja de la izquierda lo separa del cuerpo sin necesidad de
     otra caja con borde. */
  border-left: 3px solid var(--accent-orange);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  /* Una lista larga scrollea adentro en vez de empujar los botones fuera de
     la pantalla, que es como se pierde el botón de aceptar en un teléfono. */
  max-height: 190px;
  overflow-y: auto;
}

/* El título de cada grupo («No están disponibles», «Cambiaron de precio»).
   Sin separarlos, la lista se leía corrida y no se entendía qué era cada cosa. */
.mandao-dialogo__detalle .es-titulo {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 12px;
}

.mandao-dialogo__detalle .es-titulo:first-child {
  margin-top: 0;
}

.mandao-dialogo__detalle .es-item {
  position: relative;
  padding-left: 14px;
  margin-top: 4px;
}

.mandao-dialogo__detalle .es-item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-orange);
}

.mandao-dialogo__botones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* Los botones del cartel se visten acá y no con las clases generales.
   Con `btn btn-sm` quedaban dos pastillas iguales del tamaño de un botón de
   formulario: nada decía cuál era la acción recomendada, y en un teléfono
   eran chicas para el pulgar. */
.mandao-dialogo__botones .btn {
  min-height: 48px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

/* El principal lleva el degradado de la marca: es el que conviene apretar. */
.mandao-dialogo__botones .btn-primary {
  background: var(--gradient-brand);
  border: none;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(255, 94, 43, 0.32);
}
.mandao-dialogo__botones .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* La salida va en gris y no en naranja. Antes eran dos botones naranjas
   compitiendo y la vista no sabía dónde ir primero. */
.mandao-dialogo__botones .btn-outline {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  box-shadow: none;
}
.mandao-dialogo__botones .btn-outline:hover {
  border-color: var(--border-strong, var(--border-default));
  color: var(--text-primary);
  background: var(--bg-elevated);
}

@media (max-width: 420px) {
  .mandao-dialogo__botones {
    flex-direction: column-reverse;
  }
  .mandao-dialogo__botones .btn {
    width: 100%;
  }
}

/* ============================================================
   HISTORIAL DE PEDIDOS DEL CLIENTE
   ============================================================

   Antes esto se dibujaba con estilos escritos dentro de cada etiqueta, con
   colores fijos como #ffffff. En el tema claro quedaba blanco sobre blanco.
   Acá se usan las variables del sistema, así que los dos temas funcionan solos.

   La jerarquía es a propósito: lo primero que se lee es el COMERCIO, porque es
   lo que la persona recuerda de su pedido —no un número de orden—. */

.ordenes-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ordenes-cargando,
.ordenes-vacio {
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
  padding: 28px 16px;
  margin: 0;
}

.ordenes-vacio strong {
  display: block;
  color: var(--text-primary);
  font-size: 15px;
  margin-bottom: 6px;
}

.orden-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.orden-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}

.orden-datos {
  min-width: 0;
  flex: 1 1 220px;
}

.orden-comercio {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  /* Un nombre largo se recorta en vez de romper la tarjeta. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orden-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.orden-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.orden-total {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  /* Los precios en columna: alineados, sin bailar por el ancho de cada cifra. */
  font-variant-numeric: tabular-nums;
}

/* ---------- Estado del pedido ----------
   El color dice de un vistazo si hay algo que esperar o si ya terminó. Antes
   todos los estados se pintaban de verde, incluso los cancelados. */

.orden-estado {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}

.orden-estado--curso {
  color: var(--accent-amber);
  background: rgba(255, 183, 3, 0.12);
  border-color: rgba(255, 183, 3, 0.3);
}

.orden-estado--camino {
  color: var(--accent-cyan);
  background: rgba(0, 255, 209, 0.1);
  border-color: rgba(0, 255, 209, 0.28);
}

.orden-estado--entregado {
  color: var(--neon-green);
  background: rgba(57, 255, 20, 0.1);
  border-color: rgba(57, 255, 20, 0.25);
}

.orden-estado--cancelado {
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  border-color: var(--border-default);
}

/* Un pedido sin pagar no es un detalle menor: se avisa, no se esconde. */
.orden-impago {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-orange);
  margin-left: 6px;
}

/* En teléfonos la tarjeta se apila y los botones ocupan el ancho: son más
   fáciles de tocar que dos botones chiquitos uno al lado del otro. */
@media (max-width: 520px) {
  .orden-card {
    flex-direction: column;
    align-items: stretch;
  }

  .orden-derecha {
    justify-content: space-between;
  }
}

/* ---------- Movimiento ----------
   Quien pidió menos animaciones en su teléfono lo pidió por algo: mareos,
   migrañas, o simplemente para que la batería rinda. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL BOTÓN DE VOLVER — UNO SOLO
   ══════════════════════════════════════════════════════════════════════════

   Cada botón sigue yendo a un lado distinto —«Volver a Explorar», «Volver a
   Ajustes»— y eso está bien: el texto dice el destino. Lo que NO puede cambiar
   es cómo se ven, y hasta el 21/8 cambiaba en todos lados.

   Había CUATRO clases para el mismo gesto (`btn-pro-back`, `btn`,
   `btn btn-secondary`, `btn-glass-back`), y encima `.btn-pro-back` estaba
   escrita **tres veces** en esta misma hoja, cada una pisando a la anterior:

     1ª  13 px, fondo naranja suave, con un círculo al lado
     2ª  12 px, fondo elevado, con SVG
     3ª  11 px, más chico y apretado   <- ésta era la que ganaba

   Por eso el dueño veía «letra genérica» en unos lados y no en otros: la
   tercera dejaba el texto en 11 px. Y `.btn-glass-back` directamente no estaba
   definida en ninguna parte, así que heredaba lo que encontrara.

   Acá va UNA definición. Si mañana hay que cambiar el botón de volver, se
   cambia acá y cambia en todos lados.
   ══════════════════════════════════════════════════════════════════════════ */

.btn-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* 44 px es la medida mínima para que un dedo lo acierte sin pelear. */
  min-height: 44px;
  padding: 0 18px;

  border-radius: 9999px;
  background: var(--bg-elevated, #ffffff);
  border: 1.5px solid var(--border-default, #cbd5e1);

  /* La tipografía de display, la misma de los títulos. Era justamente lo que
     faltaba: con la fuente del sistema el botón se veía de cualquier página. */
  font-family: var(--font-display, 'Outfit', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #0f172a);

  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Ocultarlo es cosa de esta clase, no del código.

   Antes `js/client.js` le escribía `display: block !important` directo al
   elemento desde cinco lugares. Un estilo escrito así le gana a cualquier hoja
   de estilos, y al forzarlo a `block` el `align-items: center` de arriba dejaba
   de tener efecto —esa propiedad sólo funciona en `flex`—, con lo cual la
   flecha caía sobre la línea base del texto y quedaba 3 px más arriba.

   Ahora el código sólo pone o saca `.oculto`, y el `inline-flex` no se toca. */
.btn-volver.oculto {
  display: none;
}

.btn-volver:hover {
  background: rgba(255, 94, 43, 0.08);
  border-color: var(--accent-orange, #ff5e2b);
  transform: translateX(-2px);
}

/* La flecha es un VECTOR, no el carácter «←».
   El carácter cambia de forma según la tipografía que tenga cada aparato —en
   algunos ni siquiera existe y sale un cuadradito—. Un vector se ve igual en
   todos. */
.btn-volver svg,
.btn-volver .flecha {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--accent-orange, #ff5e2b);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.btn-volver:hover svg,
.btn-volver:hover .flecha {
  transform: translateX(-3px);
}

/* En el teléfono se achica el relleno, nunca la altura ni la letra: el dedo y
   la vista necesitan lo mismo en una pantalla chica que en una grande. */
@media (max-width: 480px) {
  .btn-volver {
    padding: 0 14px;
    gap: 6px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOS ÍCONOS DEL BUSCADOR — alineación
   ══════════════════════════════════════════════════════════════════════════
   Los vectores que reemplazaron a los emojis (ver js/client.js). Sólo hace
   falta que no deformen el renglón: el color y el tamaño ya los trae cada uno.

   El `flex-shrink: 0` importa: sin él, en un nombre de comercio largo el
   navegador achica el ícono antes que el texto y queda un dibujo aplastado.
   ══════════════════════════════════════════════════════════════════════════ */

.search-segment-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.search-segment-tab svg,
.search-section-title svg,
.search-product-comercio svg {
  flex-shrink: 0;
}

/* El título de sección lleva el ícono en el naranja legible, no en el de
   relleno: es texto chico sobre fondo claro. Ver el bloque del tono naranja. */
.search-section-title svg {
  color: var(--accent-orange-texto, #a83208);
}

/* En la línea de cada producto el ícono acompaña, no encabeza: va del color
   del texto que lo rodea para no robarle atención al nombre. */
.search-product-comercio {
  gap: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOS TÍTULOS DE SECCIÓN
   ══════════════════════════════════════════════════════════════════════════

   «Nuestros Productos», «Comercios», «Productos». Eran texto del mismo peso
   que todo lo demás, sin nada que los separara de la lista que encabezan: el
   ojo no encontraba dónde empieza una sección y termina la otra.

   Lo que se agrega es UNA cosa, no un adorno: **una barrita de acento a la
   izquierda**. Es el mismo recurso que ya usa el panel del comercio, así que
   no se inventa un lenguaje nuevo — se usa el que la casa ya tiene.

   Con eso alcanza. Un título con una marca al lado se lee como encabezado sin
   necesidad de agrandarlo ni de ponerle una línea debajo que sume ruido.
   ══════════════════════════════════════════════════════════════════════════ */

.section-title-clean,
.search-section-title {
  position: relative;
  padding-left: 14px;
}

.section-title-clean::before,
.search-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  /* Centrada respecto al texto, no al alto de la caja: si el título salta a dos
     renglones, la barrita acompaña al primero y no queda flotando. */
  top: 0.18em;
  height: 0.82em;
  width: 4px;
  border-radius: 9999px;
  background: var(--accent-orange, #ff5e2b);
}

/* «Nuestros Productos» encabeza toda la carta de un comercio: pesa más que las
   secciones del buscador, y el tamaño lo tiene que decir. */
.section-title-clean {
  font-size: 24px;
  letter-spacing: -0.4px;
}

@media (max-width: 480px) {
  .section-title-clean { font-size: 21px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL MISMO PROBLEMA, EN EL RESTO DE LAS PANTALLAS
   ══════════════════════════════════════════════════════════════════════════

   Al arreglar el perfil del comercio quedó claro que el naranja de marca como
   TEXTO no llega al mínimo sobre fondo claro. Barriendo la portada, el
   explorador y el buscador aparecieron los mismos casos, y entre ellos los dos
   que más importan comercialmente:

     el precio del producto     3,05   (era naranja de relleno)
     el botón «+ Pedir»         3,05   (blanco sobre naranja)
     el chip de filtro activo   2,32
     la estrella de valoración  2,15   (ámbar #f59e0b)

   El mínimo es 4,5. Se corrigen con los mismos dos criterios que ya se usaron:
   para escribir en naranja va el tono oscuro; para escribir SOBRE naranja va
   letra oscura, no blanca.
   ══════════════════════════════════════════════════════════════════════════ */

/* La estrella de valoración se dibuja con `color: var(--accent-amber)` escrito
 * EN LA LÍNEA del HTML, así que ninguna regla de clase la alcanza: hay que
 * corregir la variable misma.
 *
 * Se comprobó antes de tocarla: `--accent-amber` **no se usa como fondo en
 * ningún lado** —cero coincidencias en el CSS, el HTML y el JavaScript—, sólo
 * para texto e íconos. Así que oscurecerla en tema claro no rompe ningún
 * relleno.
 *
 * #ffb703 sobre blanco da 2,15. #b45309 da 5,02. En tema oscuro el ámbar
 * original ya contrasta de sobra contra el negro, así que ahí se queda. */
:root[data-theme="light"] {
  --accent-amber: #b45309;
}

/* El precio del producto en los resultados de búsqueda. */
.search-product-price {
  color: var(--accent-orange-texto, #a83208) !important;
}

/* El chip de segmento activo —«Todos», «Comercios», «Productos»—. */
/* Los chips de fondo TENUE llevan la letra en naranja oscuro.
 * (Los de fondo naranja sólido son el caso opuesto: ver más arriba, llevan
 *  letra oscura sobre el naranja.) */
.search-segment-tab.active,
.cat-filter-chip.active,
.merchant-cat-tab.active {
  color: var(--accent-orange-texto, #a83208) !important;
}

/* La estrella y su número. */
.star-icon,
.rating-value,
[class*="rating"] .star-icon {
  color: var(--accent-amber-texto, #b45309) !important;
}

/* Los botones de fondo naranja llevan letra oscura, no blanca.
 *
 * Blanco sobre #ff5e2b da 3,05; el marrón oscuro da 5,85. Es el mismo criterio
 * que ya se aplicó al globito del carrito, y además se lee más nítido. */
.search-product-add-btn,
.search-product-add-btn span {
  color: #2b1000 !important;
}

/* El asterisco de la estrella hereda del contenedor: sin esto se queda con el
   ámbar claro de la regla de base y el número se lee pero el símbolo no. */
#sector-cliente[data-theme="light"] .rest-meta-rating *,
#sector-cliente[data-theme="light"] .star-icon {
  color: inherit !important;
}

/* El símbolo ★ de la valoración.
 *
 * Está en `.star-icon`, sin estilo en línea, pero NO siempre cuelga de
 * `#sector-cliente`: aparece en la portada, en el explorador y en el buscador,
 * y cada uno vive en su propio sector. Por eso las reglas que empezaban por
 * `#sector-cliente` lo alcanzaban a veces sí y a veces no —era exactamente el
 * caso que quedaba en tres de las cuatro pantallas—.
 *
 * Se ata al tema desde la raíz, que es lo único común a todas.
 *
 * #f59e0b sobre blanco da 2,15; el mínimo es 4,5. Este ámbar da 5,02 y se
 * sigue leyendo como dorado. En tema oscuro no se toca: ahí el claro contrasta
 * de sobra contra el negro. */
:root[data-theme="light"] .star-icon,
body[data-theme="light"] .star-icon {
  color: #b45309 !important;
}

/* PERO NO sobre la foto de portada.
 *
 * Ahí el fondo es un degradado oscuro que no cambia con el tema, así que
 * oscurecer la estrella la vuelve ilegible por el otro lado: es el mismo error
 * que tenía el nombre del comercio, sólo que al revés. Se detectó midiendo
 * después del cambio —la estrella del perfil bajó a 3,85— y no leyendo.
 *
 * Sobre la foto vale el ámbar claro, que contra el negro contrasta de sobra. */
#menu-bio-cover .star-icon,
#menu-bio-cover #menu-rest-rating,
:root[data-theme="light"] #menu-bio-cover .star-icon,
body[data-theme="light"] #menu-bio-cover .star-icon {
  color: #ffb703 !important;
}

/* ══════════════════════════════════════════════════════════════════
   LOS PARES DE CAMPOS DE LAS VENTANAS DEL CATÁLOGO
   ══════════════════════════════════════════════════════════════════
   El 1/9/2026 el dueño mostró el formulario de «Nuevo producto» en el
   teléfono: el desplegable de Categoría decía «Elegí una secció», cortado.

   Medido a 393 px de ancho:

     el desplegable                    145 px
     lo que queda para el texto        103 px  (sacando padding y la flecha)
     lo que necesita «Elegí una sección» 115 px

   Faltaban 12 px. En la computadora el mismo desplegable mide 280 y entra
   de sobra, por eso ahí se veía bien.

   La causa era que la fila «Precio | Categoría» estaba clavada en dos
   columnas —`grid-template-columns: 1fr 1fr` en el código de la ventana— sin
   ningún corte para pantalla chica. Achicar la letra hubiera sido tapar el
   síntoma: los nombres de sección de un comercio pueden ser más largos que
   «Elegí una sección».

   Va acá y no en comercio.html porque esta ventana también se abre desde
   index.html, y las dos páginas cargan esta hoja.
   ══════════════════════════════════════════════════════════════════ */
.par-del-formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 560px) {
  /* De a uno. Con el ancho entero, al desplegable le quedan 307 px para un
     texto que necesita 115: entra el placeholder y entran los nombres de
     sección largos que cargue el comercio. */
  .par-del-formulario { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   NAVBAR CLIENTE — RESPONSIVA, DESCONGESTIONADA Y STICKY
   ========================================================================== */
.client-navbar-main {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--bg-header, rgba(13, 16, 23, 0.94)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  padding: 10px 24px !important;
  height: auto !important;
  display: block !important;
  width: 100% !important;
}

[data-theme="light"] .client-navbar-main {
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.client-nav-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.client-nav-left-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  order: 1;
}

.client-nav-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.client-nav-spacer {
  flex: 1;
  order: 3;
}

.client-nav-location-container {
  position: relative;
  order: 2;
}

.client-nav-location-btn {
  height: 38px;
  padding: 0 14px 0 10px;
  border-radius: 9999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.client-nav-location-btn:hover {
  background: rgba(255, 94, 43, 0.08);
  border-color: var(--accent-orange);
}

.client-nav-location-pin {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 94, 43, 0.15);
  border: 1px solid rgba(255, 94, 43, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.client-nav-location-label-prefix {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  display: none;
}

.client-nav-location-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  order: 4;
}

.client-nav-profile-btn {
  height: 38px;
  padding: 0 14px 0 4px;
  border-radius: 9999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.client-nav-profile-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   DISPOSITIVOS MÓVILES (≤ 768px): BARRA SUPERIOR DESCONGESTIONADA
   - Logo oculto en barra superior (se conserva únicamente en menú lateral)
   - Dirección a la izquierda en cápsula ovalada idéntica a escritorio
   - Espacio flexible central y acciones compactas a la derecha
   ============================================================ */
@media (max-width: 768px) {
  .client-navbar-main {
    padding: 6px 12px !important;
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  .client-nav-top-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* 1. IZQUIERDA: Menú hamburguesa (Logo oculto en cabecera móvil; vive en menú lateral) */
  .client-nav-left-brand {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .client-navbar-main .btn-hamburger-pill {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--bg-elevated, rgba(255, 255, 255, 0.05)) !important;
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12)) !important;
    flex-shrink: 0 !important;
  }

  .client-navbar-main .btn-hamburger-pill svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* Ocultar el logo de la barra superior en móvil */
  .client-nav-logo-img,
  .client-nav-left-brand .navbar-brand {
    display: none !important;
  }

  /* 2. IZQUIERDA INMEDIATA: Dirección en cápsula ovalada idéntica a escritorio (Captura 3) */
  .client-nav-location-container {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 175px !important;
    margin: 0 0 0 2px !important;
    position: relative !important;
  }

  .client-nav-location-btn {
    width: auto !important;
    max-width: 100% !important;
    height: 34px !important;
    padding: 0 10px 0 6px !important;
    border-radius: 9999px !important;
    background: var(--bg-elevated, rgba(255, 255, 255, 0.05)) !important;
    border: 1px solid rgba(255, 94, 43, 0.35) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .client-nav-location-btn:active {
    transform: scale(0.97) !important;
    opacity: 0.85 !important;
  }

  #sector-cliente[data-theme="light"] .client-nav-location-btn,
  #sector-cliente[data-theme="light"] #navbar-location-btn {
    background: #ffffff !important;
    border: 1px solid rgba(255, 94, 43, 0.35) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  }

  .client-nav-location-pin {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(255, 94, 43, 0.15) !important;
    border: 1px solid rgba(255, 94, 43, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .client-nav-location-pin svg {
    width: 12px !important;
    height: 12px !important;
    color: var(--accent-orange, #ff5e2b) !important;
  }

  /* Ocultar el prefijo 'Entregar en:' para dejar solo el texto de la calle */
  .client-nav-location-label-prefix {
    display: none !important;
  }

  .client-nav-location-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 105px !important;
    flex: 0 1 auto !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .client-nav-location-chevron {
    width: 11px !important;
    height: 11px !important;
    color: var(--text-tertiary, #8a99ad) !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    margin-left: 1px !important;
  }

  /* 3. CENTRO: Espaciador flexible para dar holgura y no apretar */
  .client-nav-spacer {
    order: 3 !important;
    display: block !important;
    flex: 1 !important;
    min-width: 8px !important;
  }

  /* 4. DERECHA: Acciones compactas (Campanita, Perfil, Carrito) */
  .client-nav-actions {
    order: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .mandao-notif-bell {
    width: 32px !important;
    height: 32px !important;
  }

  .mandao-notif-badge {
    min-width: 15px !important;
    height: 15px !important;
    font-size: 9px !important;
    padding: 0 3px !important;
    top: -2px !important;
    right: -2px !important;
  }

  /* Perfil: avatar circular */
  .client-nav-user-text,
  .client-nav-user-chevron {
    display: none !important;
  }

  .client-nav-profile-btn {
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  #navbar-avatar-badge {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }

  /* Carrito: cápsula compacta [🛒 badge] */
  .client-nav-cart-text {
    display: none !important;
  }

  .client-nav-cart-btn {
    padding: 0 8px !important;
    height: 32px !important;
    border-radius: 9999px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .client-nav-cart-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  #navbar-cart-badge {
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 1px 5px !important;
    min-width: 17px !important;
  }

  /* Dropdown flotante de direcciones centrado debajo de la barra */
  #location-dropdown-menu {
    position: fixed !important;
    top: 52px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 18px !important;
    z-index: 10001 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
  }
}

/* Pantallas extra pequeñas (≤ 360px) */
@media (max-width: 360px) {
  .client-navbar-main {
    padding: 5px 6px !important;
  }

  .client-nav-top-row {
    gap: 3px !important;
  }

  .client-nav-left-brand {
    gap: 4px !important;
  }

  .client-nav-logo-img,
  .client-nav-left-brand .navbar-brand {
    display: none !important;
  }

  .client-nav-location-container {
    max-width: 130px !important;
  }

  .client-nav-location-label {
    max-width: 70px !important;
    font-size: 10.5px !important;
  }

  .client-nav-actions {
    gap: 3px !important;
  }
}