/*
 * design-system.css — sistema de diseño global de VoltGo.
 *
 * Inspirado en el lenguaje visual "Liquid Glass" de iOS 26 / macOS 26
 * Tahoe (esquinas muy redondeadas, superficies de vidrio esmerilado
 * con blur+saturate, sombras suaves, animaciones con resorte, botones
 * sin bordes duros, modales centrados). La idea es que TODA la app use
 * estas clases (.btn, .field, .input, .card, .vui-modal, .vui-sheet,
 * .vui-toast...) en vez de reinventar estilos en cada vista nueva —
 * así, cuando agreguemos módulos (envíos, panel admin, app del
 * conductor), solo hay que tocar este archivo para que el cambio se
 * vea en todos lados.
 *
 * Modo oscuro persistente: planeado para más adelante (pendiente,
 * según lo acordado) — las variables de color ya están centralizadas
 * aquí para que ese cambio, cuando llegue, sea también global.
 *
 * Este archivo NO depende de Tailwind — funciona igual con o sin el
 * build de Tailwind corrido, así que cárgalo siempre después de
 * app.css.
 */

:root {
  /* Radios (un poco más redondeados que la v1 — más cerca de la
     "squircle" continua de iOS 26) */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 999px;

  /* Sombras (suaves, tipo iOS) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.18);

  /* "Liquid Glass" — vidrio esmerilado usado en header, modales,
     toasts y tarjetas flotantes, imitando los widgets/notificaciones
     de iOS 26 / macOS 26 Tahoe. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(20px) saturate(1.7);

  /* Curvas de animación */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 340ms;

  /* Color de marca (mismo azul muestreado del logo, ver tailwind.config.js) */
  --brand-50: #f1f5fd;
  --brand-100: #e4ecfc;
  --brand-200: #c4d5f8;
  --brand-300: #92b2f2;
  --brand-400: #5285ea;
  --brand-500: #1b5fe4;
  --brand-600: #164cb6;
  --brand-700: #113d92;
  --brand-800: #0e3176;
  --brand-900: #0b265b;

  /* Semánticos */
  --success-bg: #eafaf0;
  --success-fg: #0d7a3f;
  --success-solid: #22c55e;
  --danger-bg: #fdecec;
  --danger-fg: #c81e3a;
  --danger-solid: #ef4444;
  --warning-bg: #fff6e5;
  --warning-fg: #9a5b00;
  --warning-solid: #f59e0b;
  --info-bg: var(--brand-50);
  --info-fg: var(--brand-700);
  --info-solid: var(--brand-600);

  /* Superficie / fondo — el fondo va un poco más oscuro que la tarjeta
     blanca para que el header (blanco) y las tarjetas se distingan. */
  --bg-page: #e9edf3;
  --bg-surface: #ffffff;
  --bg-fill: #eef1f6;
  --bg-fill-hover: #e4e9f0;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --hairline: rgba(15, 23, 42, 0.08);

  /* Relleno de inputs: uno para los editables y otro, deliberadamente
     distinto (no solo más opaco/transparente), para los deshabilitados
     — así se distinguen a simple vista sin depender de :hover, que en
     móvil no existe. Ver .input / .input:disabled más abajo. */
  --input-bg: #eef2fb;
  --input-bg-hover: #e3eafa;
  --input-disabled-bg: #e6e9f0;
}

body.theme-dark {
  color-scheme: dark;
  --glass-bg: rgba(15, 23, 42, 0.68);
  --glass-bg-strong: rgba(15, 23, 42, 0.86);
  --glass-border: rgba(148, 163, 184, 0.24);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.52);
  --success-bg: rgba(34, 197, 94, 0.14);
  --success-fg: #86efac;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --danger-fg: #fca5a5;
  --warning-bg: rgba(245, 158, 11, 0.16);
  --warning-fg: #fcd34d;
  --info-bg: rgba(59, 130, 246, 0.16);
  --info-fg: #93c5fd;
  --bg-page: #0b1120;
  --bg-surface: #111827;
  --bg-fill: #1f2937;
  --bg-fill-hover: #263244;
  --text-primary: #f8fafc;
  --text-secondary: #a7b3c5;
  --text-muted: #94a3b8;
  --hairline: rgba(148, 163, 184, 0.22);
  --input-bg: #182235;
  --input-bg-hover: #202b3f;
  --input-disabled-bg: #111827;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
}

body.theme-dark .bg-white,
body.theme-dark .bg-slate-50,
body.theme-dark .bg-slate-100,
body.theme-dark .bg-gray-50,
body.theme-dark .bg-gray-100 { background-color: var(--bg-surface) !important; }
body.theme-dark .bg-slate-200,
body.theme-dark .bg-gray-200 { background-color: var(--bg-fill) !important; }
body.theme-dark .text-slate-900,
body.theme-dark .text-slate-800,
body.theme-dark .text-gray-900,
body.theme-dark .text-gray-800 { color: var(--text-primary) !important; }
body.theme-dark .text-slate-700,
body.theme-dark .text-slate-600,
body.theme-dark .text-slate-500,
body.theme-dark .text-gray-700,
body.theme-dark .text-gray-600,
body.theme-dark .text-gray-500 { color: var(--text-secondary) !important; }
body.theme-dark .text-slate-400,
body.theme-dark .text-gray-400 { color: var(--text-muted) !important; }
body.theme-dark .border-slate-100,
body.theme-dark .border-slate-200,
body.theme-dark .border-slate-300,
body.theme-dark .border-gray-100,
body.theme-dark .border-gray-200,
body.theme-dark .border-gray-300 { border-color: var(--hairline) !important; }

.leaflet-tile.volt-map-contrast-soft {
  filter: contrast(1.15) saturate(1.10) brightness(0.95);
}
.leaflet-tile.volt-map-contrast-strong {
  filter: contrast(1.28) saturate(1.16) brightness(0.90);
}

/* Evita el gesto nativo de "pull to refresh" (arrastrar hacia abajo desde
   arriba recarga la página completa) tanto en el WebView de la app de
   Android como en Chrome/Safari mobile — ver reporte: "deshabilitar el
   gesto nativo... para evitar recargas accidentales". Arreglo puramente
   CSS, sin tocar nada del proyecto APK (voltgo-apk carga esta misma web
   vía Capacitor, así que le llega automáticamente sin recompilar).
   overscroll-behavior-y:contain permite el scroll normal de la página
   pero bloquea que el "rebote" en los extremos se propague al navegador
   (que es justo lo que dispara el refresh). No se usa "none" a propósito
   porque también bloquearía el rebote visual dentro de sheets/modales que
   sí lo necesitan (VoltUI.sheet ya maneja su propio scroll interno). */
html, body {
  overscroll-behavior-y: contain;
}

/* Regla global de defensa — BUG REAL que estuvo causando que varios
   avisos/banners "nunca desaparecieran" sin importar qué tan bien
   estuviera la lógica de JS (ver reportes: "el banner de entrega en
   curso aún aparece" y "el mensaje de ubicación jamás desapareció").
   No era un bug de lógica — era CSS: casi cualquier elemento con el
   atributo `hidden` en este archivo también tiene una clase que fija
   `display` (.alert, .active-delivery-banner, etc.), y una regla de
   autor con `display` en el mismo elemento le GANA a la hoja de
   estilos por defecto del navegador (`[hidden] { display: none }`) sin
   importar la especificidad — así que `elemento.hidden = true` desde
   JS quedaba completamente ignorado visualmente. Esta regla, con
   !important, se asegura de que `hidden` SIEMPRE gane sin importar qué
   otra clase tenga el elemento — es el arreglo correcto y definitivo
   para esta clase entera de bug, no solo para un elemento a la vez. */
[hidden] {
  display: none !important;
}

/* Barra global de carga — aparece arriba de toda la app durante
   navegaciones internas, envíos de formularios y peticiones AJAX
   iniciadas por una acción real del usuario. Es deliberadamente fina
   para informar sin tapar botones flotantes, mapas o sheets. */
.vg-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.vg-page-loader::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  min-width: 120px;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300), var(--brand-600));
  box-shadow: 0 0 16px rgba(27, 95, 228, .42);
  animation: vg-page-loader-slide 1.05s ease-in-out infinite;
}
.vg-page-loader.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes vg-page-loader-slide {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(95vw); }
  100% { transform: translateX(110vw); }
}

/* Superficie de vidrio reutilizable — header, barras flotantes,
   tarjetas tipo "widget". Se degrada con elegancia a un blanco casi
   sólido en navegadores sin soporte de backdrop-filter. */
.glass {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* ───────────────────────── Header (vidrio) ───────────────────────── */

.app-header {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 var(--hairline), 0 8px 24px rgba(15, 23, 42, 0.05);
}
.app-header .btn-plain, .app-header .btn-primary.btn-sm { border-radius: var(--radius-full); }
.app-header-logo { height: 30px; width: auto; transition: transform var(--dur-fast) var(--ease-out); }
.app-header-logo:active { transform: scale(0.95); }

/* ─────────────────── Sin topbar: botones flotantes sueltos ───────────────────
   El sistema ya no tiene una barra superior de ancho completo — cuando hay
   sesión, el logo y la campana de notificaciones son botones circulares de
   vidrio, flotando sueltos arriba (igual que la barra inferior), en vez de
   vivir dentro de un <header>. */
body.no-topbar main { padding-top: 30px; }

.floating-icon-btn {
  position: fixed;
  top: 14px;
  top: max(14px, env(safe-area-inset-top));
  z-index: 45;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.floating-icon-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.16),
    0 2px 4px rgba(15, 23, 42, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.floating-icon-btn:active { transform: scale(0.95); }
.floating-icon-btn svg {
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.16));
}
.floating-icon-btn-logo { left: 14px; left: max(14px, env(safe-area-inset-left)); }
.floating-icon-btn-bell { right: 14px; right: max(14px, env(safe-area-inset-right)); }
/* Ajustes — junto a la campanita (ver reporte: "de momento este icono lo
   vamos a agregar al par del icono de campanita"). */
.floating-icon-btn-settings { right: 66px; right: max(66px, calc(env(safe-area-inset-right) + 52px)); }
/* Ayuda — posición seteada inline según el rol (cliente: 118px, driver: 170px). */
/* Contador de no-leídas sobre la campana — mismo estilo que
   .bottom-nav-badge, reposicionado para el botón circular flotante (ver
   NotificationController::list(), reemplaza la campana "demo"). */
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--danger-fg, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-page, #fff);
}

/* Botón "scooter activo" del conductor — variante en forma de píldora
   (icono + nombre del scooter) en vez del círculo simple, para que el
   nombre quepa. Vive a la izquierda de la campana de notificaciones. */
.floating-icon-btn-vehicle {
  width: auto;
  max-width: 42vw;
  padding: 0 14px 0 12px;
  gap: 6px;
  border-radius: var(--radius-full);
  /* 170px — movido a la izquierda del botón de ayuda (118px) para que
     no lo tape. Antes estaba en 118px y tapaba el botón de ayuda que
     estaba a 170px. Orden actual: campana (14) → ajustes (66) → ayuda
     (118) → scooter (170). */
  right: 170px;
  right: max(170px, calc(env(safe-area-inset-right) + 156px));
}
.floating-icon-btn-vehicle span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floating-icon-btn-vehicle-warning { color: var(--warning-fg); }
.floating-icon-btn-vehicle-warning span { color: var(--warning-fg); }

.vehicle-switch-menu {
  position: fixed;
  top: 64px;
  top: max(64px, calc(env(safe-area-inset-top) + 50px));
  right: 14px;
  right: max(14px, env(safe-area-inset-right));
  z-index: 46;
  width: 240px;
  max-width: 80vw;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.vehicle-switch-menu.vui-visible { opacity: 1; transform: translateY(0) scale(1); }
.vehicle-switch-menu-title { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; padding: 4px 8px 8px; }
.vehicle-switch-menu-empty { font-size: 0.8rem; color: var(--text-secondary); padding: 4px 8px 10px; }
.vehicle-switch-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.vehicle-switch-menu-item:hover { background: var(--bg-fill-hover); }
.vehicle-switch-menu-item.is-active { color: var(--brand-600); }

/* Banner flotante "Entrega activa" — pegado justo arriba de la barra
   inferior, visible en TODAS las páginas del conductor mientras tiene una
   entrega en curso (ver driver-orders-sheet.php, que lo muestra/oculta con
   el mismo polling de ofertas). Ancho de píldora en vez de círculo porque
   necesita llevar texto ("Tienes una entrega en curso"), no solo un ícono. */
.active-delivery-banner {
  position: fixed;
  left: 50%;
  bottom: 124px;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 110px);
  transform: translateX(-50%);
  z-index: 58;
  width: min(92vw, 440px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
  color: #7c2d12;
  border: 1px solid rgba(251, 146, 60, .36);
  box-shadow: 0 18px 40px rgba(124, 45, 18, .16), 0 4px 14px rgba(15, 23, 42, .08);
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.active-delivery-banner svg:first-child {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: var(--radius-full);
  background: #ffedd5;
  color: #c2410c;
  flex-shrink: 0;
}
.active-delivery-banner:hover { transform: translateX(-50%) scale(1.02); }
.active-delivery-banner:active { transform: translateX(-50%) scale(0.98); }
.active-delivery-banner span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-delivery-banner svg:last-child { flex-shrink: 0; }
/* Sin barra inferior (poco probable en el conductor, pero por si acaso) queda más abajo, igual que el FAB. */
body:not(.has-bottom-nav) .active-delivery-banner { bottom: 20px; bottom: max(20px, env(safe-area-inset-bottom)); }

/* ─────────────────── Botón flotante de acción (FAB) ───────────────────
   Círculo del color de marca con un "+", estilo iOS 26 — abre el sheet
   de "agregar" en las pantallas de listas (direcciones, scooters, puntos
   de carga, etc.). Se posiciona pegado a la barra inferior. */
.fab {
  position: fixed;
  right: 20px;
  right: max(20px, env(safe-area-inset-right));
  bottom: 96px;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 82px);
  z-index: 49;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: var(--brand-600);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(22, 76, 182, 0.4);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.fab:hover { background: var(--brand-700); transform: scale(1.05); }
.fab:active { transform: scale(0.95); }
.fab svg { width: 26px; height: 26px; }
/* Sin barra inferior (páginas de admin/lista sin nav, poco probable pero por si acaso) queda más abajo. */
body:not(.has-bottom-nav) .fab { bottom: 20px; bottom: max(20px, env(safe-area-inset-bottom)); }

.support-active-ticket-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.66);
  background: var(--brand-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .34), 0 4px 10px rgba(15, 23, 42, .14);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.support-active-ticket-fab:hover {
  background: var(--brand-700);
  transform: translateY(-2px);
}
.support-active-ticket-fab:active { transform: scale(.96); }
.support-active-ticket-fab svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .support-active-ticket-fab {
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

.support-break-lock {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(226, 232, 240, .78);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.support-break-card {
  width: min(100%, 420px);
  border-radius: 26px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22), 0 8px 24px rgba(37, 99, 235, .12);
  padding: 28px;
  text-align: center;
  color: var(--text-primary);
}
.support-break-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--brand-700);
  background: linear-gradient(135deg, var(--brand-50), #fff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}
.support-break-card h2 {
  margin: 0 0 8px;
  font-size: 1.28rem;
  font-weight: 800;
}
.support-break-card p {
  margin: 0 auto 18px;
  max-width: 34rem;
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.5;
}
.support-break-timer {
  width: fit-content;
  min-width: 170px;
  margin: 0 auto 18px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-fill);
  color: var(--brand-700);
  font-size: 1.45rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ─────────────────── Barra inferior flotante (bottom nav) ───────────────────
   Reemplaza los enlaces de navegación que antes vivían en el header — el
   patrón viene de apps de entregas tipo Uber Eats: header arriba minimal
   (logo + notificaciones), navegación principal como una barra flotante
   de vidrio pegada abajo, con un botón central destacado para la acción
   primaria de cada rol (crear envío / vehículos / verificaciones). */
body.has-bottom-nav main { padding-bottom: 104px; }

/* Antes todos los íconos vivían adentro de UNA sola barra compartida
   (fondo blanco, esquinas redondeadas, todo un bloque). Ahora el
   contenedor es transparente y CADA ícono flota por su cuenta, con su
   propio fondo blanco/redondeo — se ve como iconos independientes en
   vez de un bloque único (ver reporte: "todo el bloque transparente y
   los que tendrán fondo blanco y redondeo será cada icono para que
   aparezca que cada uno está flotando sin depender de los otros"). El
   primario (centro) sigue siendo más grande y resaltado. */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  /* Admin ya llega a 7-8 ítems (se agregó "Auditoría", ver reporte:
     "necesitamos poder acceder desde ahí a auditoría") — en vez de
     encoger cada ítem hasta que el texto no quepa, dejamos que la barra
     se deslice horizontalmente (mismo criterio "más deslizante para
     móvil" que ya se aplicó en otras pantallas esta sesión) y ocultamos
     la barra de scroll nativa para que no se vea como una barra de
     desplazamiento de escritorio. padding-top le da espacio al botón
     primario (que sube con translateY(-14px), más su sombra) para que
     no se recorte al activarse el scroll. */
  padding: 54px 8px 12px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  background: none;
  border: none;
  box-shadow: none;
  max-width: calc(100% - 20px);
}
.bottom-nav::-webkit-scrollbar { display: none; }

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  padding: 6px 4px 5px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.bottom-nav-item:hover {
  background: var(--bg-fill);
  color: var(--text-primary);
  box-shadow:
    0 7px 18px rgba(15, 23, 42, 0.15),
    0 2px 4px rgba(15, 23, 42, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.bottom-nav-item:active { transform: scale(0.95); }
.bottom-nav-item.is-active { color: var(--brand-600); }
.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18));
}

.bottom-nav-item-primary {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--brand-600);
  color: #fff;
  margin: 0 2px;
  transform: translateY(-14px);
  box-shadow:
    0 10px 22px rgba(22, 76, 182, 0.34),
    0 2px 5px rgba(15, 23, 42, 0.14);
}
.bottom-nav-item-primary:hover { background: var(--brand-700); color: #fff; }
.bottom-nav-item-primary svg { width: 23px; height: 23px; }
.bottom-nav-item-primary span { display: none; }

/* Tooltip flotante al hacer hover — reemplaza las etiquetas de texto que
   antes vivían siempre visibles debajo de cada ícono (ver reporte:
   "elimines todos los etiquetas de los iconos del footer... agregues
   algún tooltip o algo que al hacer hover sobre eso aparezca esa
   etiqueta pero flotante sin afectar el diseño del footer"). Con
   position:absolute el texto no le agrega alto a la barra — solo
   aparece flotando arriba del ícono mientras dura el hover/foco por
   teclado, y no bloquea clics (pointer-events:none). */
.bottom-nav-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 60;
}
.bottom-nav-item[data-tooltip]:hover::after,
.bottom-nav-item[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Contador de pedidos entrantes sin responder sobre el botón primario
   ("Pedidos" del conductor) — oculto por defecto (atributo `hidden`),
   lo muestra/actualiza el polling de driver-orders-sheet.php. */
.bottom-nav-item { position: relative; }
.bottom-nav-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--danger-fg, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-page, #fff);
}

@media (max-width: 420px) {
  .bottom-nav { gap: 8px; padding-left: 6px; padding-right: 6px; }
  .bottom-nav-item { width: 48px; height: 48px; font-size: 10px; }
  .bottom-nav-item-primary { width: 52px; height: 52px; }
}

/* ───────────────────────── Botones ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 13px 20px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: 0.85rem; border-radius: var(--radius-sm); }
.btn-pill { border-radius: var(--radius-full); }
.btn-icon { padding: 10px; border-radius: var(--radius-full); }

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 1px 2px rgba(17, 61, 146, 0.15), 0 4px 12px rgba(22, 76, 182, 0.22);
}
.btn-primary:hover { background: var(--brand-700); }

.btn-secondary,
.btn-tinted {
  background: var(--brand-100);
  color: var(--brand-700);
}
.btn-secondary:hover,
.btn-tinted:hover { background: var(--brand-200); }

.btn-plain {
  background: transparent;
  color: var(--brand-700);
}
.btn-plain:hover { background: var(--bg-fill); }

.btn-danger {
  background: var(--danger-solid);
  color: #fff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}
.btn-danger:hover { background: #dc2626; }

.btn-danger-tinted {
  background: var(--danger-bg);
  color: var(--danger-fg);
}
.btn-danger-tinted:hover { background: #fbd9d9; }

/* ───────────────────────── Formularios ───────────────────────── */

.field { margin-bottom: 18px; }

.label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 7px;
}

.input,
select.input {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* evita el zoom automático de iOS al enfocar */
  color: var(--text-primary);
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 13px 15px;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder { color: #94a3b8; }
.input:hover {
  background: #fff;
  border-color: rgba(37, 99, 235, .35);
}
.input:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.input.input-error {
  border-color: var(--danger-solid);
  background: var(--danger-bg);
}
/* Deshabilitado: antes solo bajaba la opacidad, y sobre una tarjeta
   blanca eso lo aclaraba hacia el blanco en vez de oscurecerlo — el
   resultado se confundía con un input editable normal (el único aviso
   real era el cursor "no permitido" del navegador, que en móvil no
   existe). Ahora usa un relleno plano y más apagado, texto secundario,
   y un candado siempre visible (no solo al pasar el mouse). */
.input:disabled {
  opacity: 1;
  background-color: #eef2f7;
  border-color: transparent;
  color: var(--text-secondary);
  cursor: not-allowed;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
body.theme-dark .input,
body.theme-dark select.input,
body.theme-dark textarea.input {
  background: var(--input-bg) !important;
  border-color: rgba(148, 163, 184, .34) !important;
  color: var(--text-primary) !important;
}
body.theme-dark .input::placeholder { color: #74839a; }
body.theme-dark .input:hover {
  background: var(--input-bg-hover) !important;
  border-color: rgba(96, 165, 250, .45) !important;
}
body.theme-dark .input:focus {
  background: var(--input-bg-hover) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .18) !important;
}
body.theme-dark .input:disabled {
  background-color: var(--input-disabled-bg) !important;
  color: var(--text-muted) !important;
}
.field-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 7px 0 16px;
  line-height: 1.4;
}

/* Modificador para cuando .field-hint va como texto de ayuda pegado
   directamente debajo de un .input (sin el margen negativo pensado
   para el layout de label+input+hint por defecto) — evita que el hint
   quede visualmente pegado al borde del input. Aplicar junto a
   .field-hint: class="field-hint field-hint-spaced". */
.field-hint-spaced {
  margin-top: 7px;
}

/* Modificador de advertencia para un .field-hint (ej. longitud de
   teléfono inválida para el país seleccionado en el registro — ver
   register.php / App\Core\PhoneValidator). */
.field-hint-danger {
  color: var(--danger-600, #dc2626);
}

/* Grilla de 2 columnas para campos cortos (ej. valores numéricos) que
   no ameritan una fila completa cada uno. Colapsa a 1 columna en
   pantallas angostas. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 20px;
}
.field-grid .field { margin-bottom: 0; }
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* Fila "plana" para listas dentro de una tarjeta (ej. cada tipo de
   documento KYC dentro de la tarjeta de Documentos) — evita el look de
   "tarjeta dentro de tarjeta" (doble borde/sombra) usando solo un
   fondo tenue, como una fila de lista agrupada de iOS. */
.doc-row {
  background: var(--bg-fill);
  border-radius: var(--radius-md);
  padding: 14px;
}

/* Dentro de una fila plana (.doc-row) el input por defecto usa el
   mismo fondo que la fila (var(--bg-fill)) y se vuelve invisible — le
   damos un fondo sólido propio para que se distinga como un campo
   editable en vez de fundirse con el contenedor. */
.doc-row .input {
  background: var(--bg-surface);
  border-color: var(--hairline);
}
.doc-row .input:hover { background: var(--bg-surface); border-color: var(--brand-300, var(--brand-400)); }

/* Acordeón de auditoría admin — agrupa todos los eventos de un mismo
   envío (ver admin/partials/audit-results.php y reporte: "agrupa todos
   los eventos que pertenezcan al mismo pedido dentro de un acordeón
   colapsable"). Reusa la paleta de .notif-group pero con su propio
   nombre porque vive en /admin/auditoria, no en el sheet de
   notificaciones. */
.audit-order-group {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-fill);
  overflow: hidden;
}
.audit-order-group-danger { border-color: rgba(220, 38, 38, 0.35); }
.audit-order-group-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.audit-order-group-summary::-webkit-details-marker { display: none; }
.audit-order-group-summary span { min-width: 0; display: grid; gap: 2px; }
.audit-order-group-summary strong { font-size: .86rem; color: var(--text-primary); }
.audit-order-group-summary small { font-size: .72rem; color: var(--text-secondary); }
.audit-order-group-summary em {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  background: #dc2626;
  color: #fff;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
}
.audit-order-group-items { padding: 0 10px 10px; }

/* Miniaturas de documentos KYC (admin): la etiqueta ya no es un texto
   suelto, es una fila con icono; la foto es clickeable (abre a tamaño
   completo en pestaña nueva) con una lupa que aparece al pasar el
   mouse, para que sea obvio que se puede ampliar. */
.doc-photo-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.doc-photo-frame {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-fill);
}

.doc-photo-frame img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.doc-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.doc-photo-zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.doc-photo-frame:hover .doc-photo-zoom { opacity: 1; }

.rotate-180 { display: inline-flex; transform: rotate(180deg); }

.btn.is-disabled { opacity: 0.4; pointer-events: none; }

/* Tarjeta de conductor en la cola de verificación KYC (admin), como
   acordeón: el resumen (nombre, estado) siempre visible, el detalle
   (documentos + datos + acciones) se abre/cierra tocándolo. Con
   muchas solicitudes pendientes esto evita mostrar todo de golpe para
   cada una — solo una fila compacta por conductor hasta que se toca. */
.driver-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: var(--radius-lg);
}

.driver-card-summary:hover { background: var(--bg-fill); }

.driver-card-summary-name {
  font-weight: 600;
  color: var(--text-primary);
}

.driver-card-summary-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.driver-card-summary-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.driver-card-chevron {
  display: inline-flex;
  color: var(--text-secondary);
  transition: transform 0.25s ease;
}

.driver-card-summary.is-open .driver-card-chevron { transform: rotate(180deg); }

.driver-card-body {
  display: grid;
  /* minmax(0, 0fr), no un simple "0fr": una pista con fr sola todavía
     usa "auto" como tamaño mínimo implícito, así que sin el minmax(0, …)
     el acordeón nunca llega a colapsar del todo — se queda con una
     rendija mostrando el borde de lo que tiene adentro (justo el bug
     que se veía: los títulos de los documentos se asomaban debajo del
     resumen aunque estuviera "cerrado"). */
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.driver-card-body.is-open { grid-template-rows: minmax(0, 1fr); }

.driver-card-body-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 20px 20px;
}

/* Sección colapsable reutilizable para agrupar bloques de campos
   dentro de una tarjeta (ej. cada grupo de ajustes en /admin/ajustes).
   Pensada como <details class="settings-section"><summary
   class="settings-section-header">Título</summary><div
   class="settings-section-body">...campos...</div></details> — usa
   <details>/<summary> nativos (sin JS) para que agregar un bloque
   nuevo sea solo repetir esta misma estructura con otro título. */
.settings-section {
  border-top: 1px solid var(--hairline);
  padding: 4px 0;
}
.settings-section:first-of-type { border-top: none; padding-top: 0; }

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.settings-section-header::-webkit-details-marker { display: none; }
.settings-section-header::marker { content: ''; }
.settings-section-header:hover { color: var(--brand-700); }

.settings-section-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.25s ease;
}
.settings-section[open] .settings-section-chevron { transform: rotate(180deg); }

.settings-section-body {
  padding: 4px 2px 18px;
}

.settings-logout-form {
  padding-top: 4px;
}

select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

/* Layout de dos columnas para pantallas con espacio de sobra (ej. el
   perfil de conductor: formulario + documentos KYC lado a lado en
   escritorio). En móvil siempre es una sola columna apilada. */
.two-col {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  .two-col {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
  }
  .two-col > .card {
    padding: 24px;
  }
}

/* Input de archivo con la misma piel que el resto del sistema — el
   <input type="file"> nativo se queda pero invisible; lo que se ve es
   el botón + el nombre del archivo elegido (actualizado por
   VoltUI.initFileInputs() en ui.js). */
.file-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  overflow: hidden;
}
.file-field-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.file-field-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  background: var(--brand-100);
  color: var(--brand-700);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.file-field:active .file-field-button { transform: scale(0.96); }
.file-field:hover .file-field-button { background: var(--brand-200); }
.file-field-name {
  flex: 1 1 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  pointer-events: none;
}

.rich-message-editor-content {
  min-height: 190px;
  padding: 14px;
  outline: none;
  color: var(--text-primary);
  background: var(--bg-surface);
  line-height: 1.55;
  white-space: normal;
}
.rich-message-editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
.rich-message-editor-content p { margin: 0 0 12px; }
.rich-message-editor-content p:last-child { margin-bottom: 0; }
.rich-message-editor-content ul,
.rich-message-editor-content ol { margin: 0 0 12px; padding-left: 22px; }
.rich-message-editor-content a { color: var(--brand-600); text-decoration: underline; }
body.theme-dark .rich-message-editor-content { color: var(--text-primary) !important; }

/* Confirmación de foto tomada con la cámara (documentos KYC del
   conductor) — antes solo cambiaba el texto plano, lo que no dejaba claro
   que sí se adjuntó (ver reporte: "hay que agregar un check verde o algo
   así para que signifique que ya se tomó la foto correctamente"). */
.camera-doc-confirmed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success-fg);
  font-weight: 600;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 18px;
  cursor: pointer;
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 0 !important;
  border-radius: var(--radius-full);
  border: 1px solid rgba(148, 163, 184, .55);
  background: #e2e8f0;
  position: relative;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
  transition: transform var(--dur-fast) var(--ease-out);
}
input[type="checkbox"]:checked {
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: 0 8px 18px rgba(22, 76, 182, .18);
}
input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}
input[type="checkbox"].is-danger,
input[type="checkbox"][data-tone="danger"] {
  background: #fee2e2;
  border-color: rgba(248, 113, 113, .55);
}

/* ───────────────────────── Mapas (Fase 2) ───────────────────────── */

.map-container {
  width: 100%;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  margin-bottom: 16px;
  background: var(--bg-fill);
  /* Leaflet trae sus propios controles (zoom, atribución) con z-index
     hasta 1000 en su CSS interno — sin esto, esos controles "se salen"
     por encima de la barra inferior flotante (z-index: 50) aunque en el
     DOM el mapa esté antes. `isolation: isolate` crea un contexto de
     apilamiento propio para el mapa, así sus z-index internos quedan
     contenidos aquí adentro y no compiten con el resto de la página. */
  position: relative;
  isolation: isolate;
  z-index: 1;
}
/* Leaflet trae sus propios estilos de botones/atribución — solo se
   ajusta el radio de las esquinas para que combine con el resto del
   sistema de diseño. */
.map-container .leaflet-container { border-radius: var(--radius-lg); font-family: inherit; }

/* Envoltorio de una tarjeta que solo contiene un mapa (driver-active.php,
   tracking.php) — permite superponer el chip de autonomía DIRECTO sobre
   el mapa, como un widget tipo HUD en vez de texto aparte debajo (ver
   reporte: "debería ser algo flotante que aparezca sobre el mapa"). El
   chip va FUERA de `.map-container` (que tiene su propio
   `isolation: isolate` para contener los controles internos de Leaflet)
   para no tener que pelear con ese z-index interno — como hermano dentro
   de este wrapper, con z-index propio, queda por encima de TODO el mapa
   aislado sin más esfuerzo. El botón "mi ubicación" NO va aquí — reutiliza
   el control de Leaflet que ya existía en map.js (VoltMap.addLocateControl,
   antes solo para las pantallas armadas con VoltMap.create()), que ya
   resuelve su propio posicionamiento/z-index como control nativo del mapa. */
.map-card-wrap { position: relative; }

/* Par de anillos flotantes tipo HUD sobre el mapa — autonomía del scooter
   en vivo (driver-active.php): uno de km disponibles, otro de % de carga
   aprox. Reemplaza un primer intento con texto plano (el conductor pidió
   algo más directo: "un círculo que tenga 45km y otro de 100%", ver
   reporte). Cada `.hud-ring` es un <svg> con dos <circle> superpuestos
   (fondo tenue + progreso, animado por JS vía stroke-dashoffset — ver
   setRingProgress() en driver-active.php) y el número centrado encima.
   Abajo a la izquierda a propósito — Leaflet ya ocupa arriba-izquierda
   (control de zoom +/-) y arriba-derecha (nuestro botón "mi ubicación",
   ver VoltMap.addLocateControl); abajo-derecha es la atribución de
   OpenStreetMap. Abajo-izquierda es la única esquina libre (ver reporte:
   "los controles de zoom... justo arriba de eso se colocaron los
   botones... y a la derecha superior tampoco se puede"). */
/* Anillos de autonomía/carga del conductor; en la vista activa viven sobre
   el mapa porque son datos de vistazo rápido. */
.map-hud-rings {
  display: flex;
  gap: 10px;
}
.map-hud-rings.is-map-hud {
  position: fixed;
  right: 16px;
  bottom: calc(var(--trip-peek-height, 176px) + env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 35;
}
@media (max-width: 520px) {
  .map-hud-rings.is-map-hud {
    right: 12px;
    bottom: calc(var(--trip-peek-height, 176px) + env(safe-area-inset-bottom, 0px) + 10px);
    gap: 7px;
  }
  .map-hud-rings.is-map-hud .hud-ring {
    width: 48px;
    height: 48px;
  }
}

/* Mismos anillos de autonomía/carga, pero flotando sobre el mapa (más
   chico, no de pantalla completa) del sheet "Pedidos cercanos" del
   conductor — antes esta info vivía como un bloque de texto arriba de la
   lista, pero ya había demasiados bloques apilados (mapa, anuncio, clima,
   reportar incidencia, pedidos) y dejaba los pedidos disponibles hasta
   abajo, difíciles de ver (ver reporte: "vamos a eliminar este bloque y
   la carga y autonomía la vamos a mostrar en el mapa como botones
   flotantes... no quiero que sean un bloque más"). A diferencia de
   .is-map-hud (position:fixed, pensado para el mapa de pantalla completa
   de driver-active.php), acá el mapa NO es de pantalla completa —
   position:absolute dentro de .orders-map-wrap (ver sheetHtml()). */
.orders-map-wrap { position: relative; }
.map-hud-rings.is-orders-hud {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 20;
}
.map-hud-rings.is-orders-hud .hud-ring {
  width: 48px;
  height: 48px;
}
.hud-ring {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}
.hud-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hud-ring-bg {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 4;
}
.hud-ring-fg {
  fill: none;
  stroke: var(--brand-600);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-base) var(--ease-out);
}
.hud-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--text-primary);
  pointer-events: none;
}
.hud-ring-value span { font-size: 0.78rem; font-weight: 700; }
.hud-ring-value small { font-size: 0.55rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }

.map-search-wrap { position: relative; margin-bottom: 12px; }

.map-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--hairline);
  max-height: 220px;
  overflow-y: auto;
  z-index: 30;
}

.map-search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}
.map-search-result:hover { background: var(--bg-fill); }
.map-search-result + .map-search-result { border-top: 1px solid var(--hairline); }

.map-locate-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,0.25);
  margin: 8px;
}
.map-locate-btn svg { width: 18px; height: 18px; }
.map-locate-btn:hover { background: var(--bg-fill); }
.map-locate-btn.is-loading { opacity: 0.5; cursor: wait; }
.map-locate-btn:disabled { cursor: not-allowed; }

.map-editor-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }

/* Ícono de marcador propio (ej. rayo de puntos de carga) vía L.divIcon —
   círculo de color de marca con el ícono en blanco adentro, mismo trato
   visual que el resto de badges del sistema. */
.map-custom-icon { background: none; border: none; }
.cp-marker-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 7px rgba(22, 76, 182, .52));
  animation: cp-energy-flash 1.18s ease-in-out infinite;
}
.cp-marker-icon svg { width: 34px; height: 34px; stroke-width: 2.85; }
@keyframes cp-energy-flash {
  0%, 100% { opacity: .82; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.14); }
}
/* Variante para el punto de carga marcado como "Mi casa" (type='home') —
   se distingue con ícono de casa y un color propio para que el conductor
   la reconozca de un vistazo entre sus otros puntos de carga (ver
   reporte: "el punto de retorno debería aparecer con un ícono de casa").
   Sigue siendo un punto de carga más (ver ChargingPoint) — el campo fijo
   de "punto de retorno" se descartó hace tiempo (ver DriverProfile) a
   favor de esta lista, con "Mi casa" como una opción más entre varias. */
.cp-marker-icon-home { background: #7c3aed; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45), 0 0 0 3px #fff; }
.cp-marker-icon.cp-marker-icon-small { width: 26px; height: 26px; }
.cp-marker-icon.cp-marker-icon-small svg { width: 13px; height: 13px; }

/* Marcadores del sheet "Pedidos" del conductor (driver-orders-sheet.php)
   — un ícono de paquete por cada oferta cercana (color de aviso, para
   distinguirlos de un punto de carga/dirección) y un punto propio para
   la posición del conductor. */
.order-marker-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--warning-fg, #b45309);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.45), 0 0 0 3px #fff;
}
.order-marker-icon.is-search-pickup::before,
.order-marker-icon-radar::before,
.order-marker-icon-radar::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: var(--radius-full);
  border: 2.5px solid rgba(22, 76, 182, .55);
  animation: marker-radar 1.55s ease-out infinite;
  pointer-events: none;
}
.order-marker-icon.is-search-pickup::before {
  border-color: rgba(22, 163, 74, .62);
}
.order-marker-icon-radar::after {
  animation-delay: .55s;
}
@keyframes marker-radar {
  0% { opacity: .95; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.75); }
}
.order-marker-icon svg { width: 15px; height: 15px; }
/* Punto de ENTREGA de la oferta actualmente seleccionada (ver
   selectOffer() en driver-orders-sheet.php) — más pequeño y en el color
   de marca (no de aviso) para distinguirlo del punto de recolección;
   solo se dibuja uno a la vez, junto con la línea recta entre ambos. */
.order-marker-icon-dropoff {
  width: 24px;
  height: 24px;
  background: var(--brand-600);
  box-shadow: 0 2px 8px rgba(22, 76, 182, 0.45), 0 0 0 3px #fff;
}
/* Marcador del CONDUCTOR en el mapa de seguimiento del cliente
   (tracking.php) — verde (color de éxito) para distinguirlo de los
   puntos fijos de recolección/entrega; se mueve en vivo con la posición
   que reporta driver-orders-sheet.php (ver reporte: "ver al conductor en
   tiempo real acercándose, mostrar un ícono de scooter"). */
.order-marker-icon-driver {
  width: 28px;
  height: 28px;
  /* Antes tenía fondo verde — la marca del scooter (voltgo-rider-mark.png)
     es de líneas azules sobre transparente, así que casi no se distinguía
     encima del verde (ver reporte: "casi no se ve la figura"). Fondo
     blanco para que resalte; el verde se queda como anillo/sombra para
     seguir distinguiéndolo de los puntos fijos de recolección/entrega. */
  background: #ffffff;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.45), 0 0 0 3px var(--success-fg, #16a34a);
}
.order-marker-icon-driver svg { width: 14px; height: 14px; }
.order-marker-icon-driver img { width: 100%; height: 100%; object-fit: contain; }
.order-marker-icon-dropoff svg { width: 12px; height: 12px; }
/* "Radar" de conductores candidatos mientras el cliente busca conductor
   (tracking.php, ver reporte: "quiero que en el mapa aparezcan los
   drivers disponibles"). Mismo ícono del scooter que el conductor ya
   asignado, pero más chico y en gris neutro (no verde) para no
   confundirse con un conductor real ya asignado al envío. */
.order-marker-icon-radar {
  position: relative;
  width: 22px;
  height: 22px;
  background: #ffffff;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.35), 0 0 0 2px var(--slate-400, #94a3b8);
}
.order-marker-icon-radar img { width: 100%; height: 100%; object-fit: contain; }
.leaflet-radar-ring {
  stroke-dasharray: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-radar-ping 2.2s ease-out infinite;
}
.leaflet-radar-ring.is-radar-mid { animation-delay: .22s; }
.leaflet-radar-ring.is-radar-outer { animation-delay: .44s; }
.leaflet-fixed-limit-ring {
  stroke: var(--brand-600, #164cb6);
  stroke-width: 2;
  stroke-opacity: .72;
  fill: transparent;
  filter: drop-shadow(0 0 4px rgba(22, 76, 182, .18));
}
body.theme-dark .leaflet-fixed-limit-ring {
  stroke: #60a5fa;
  stroke-width: 2.75;
  stroke-opacity: .9;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, .42));
}
@keyframes map-radar-ping {
  0% { stroke-opacity: .62; transform: scale(.18); }
  70% { stroke-opacity: .18; }
  100% { stroke-opacity: 0; transform: scale(1); }
}
.driver-position-icon {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--brand-600);
  box-shadow: 0 0 0 4px rgba(22, 76, 182, 0.25), 0 0 0 2px #fff;
}

/* Punto de retorno del conductor (ver DriverProfile::setReturnPoint(),
   reporte "Siempre volver a punto de retorno") — a propósito NO reusa
   .cp-marker-icon-home (morado, ver arriba): ese ícono ya está tomado
   por los puntos de carga marcados como "Mi casa" y mostrarlos igual
   confundiría los dos conceptos en el mismo mapa. Ícono de bandera en
   verde azulado en vez de casa. */
.rp-marker-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: #0d9488;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.45), 0 0 0 3px #fff;
}
.rp-marker-icon svg { width: 15px; height: 15px; }

/* Punto de destino de la ruta personalizada del conductor (ver reporte,
   Bug B: "no aparece el ícono de bandera para marcar el destino") — misma
   forma que .rp-marker-icon pero en azul, a juego con la línea punteada
   que traza la ruta (ver Bug C: "ponerla del mismo color de la línea azul
   pero un poco más suave"). Los dos íconos son mutuamente excluyentes en
   un mismo mapa: el de retorno solo existe en modo ruta libre y este solo
   en modo ruta personalizada (ver Shipment::findNearbyAvailableDrivers()
   y DriverController::connect()). */
.rd-marker-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: #2f6fe0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(47, 111, 224, 0.45), 0 0 0 3px #fff;
}
.rd-marker-icon svg { width: 15px; height: 15px; }

/* Resalte momentáneo de la tarjeta de una oferta cuando el conductor
   llega ahí desde un clic en la notificación o en el marcador del mapa. */
.doc-row.is-focused-order {
  outline: 2px solid var(--brand-500, var(--brand-600));
  outline-offset: 2px;
  transition: outline-color var(--dur-base) var(--ease-out);
}

/* Estado persistente (no momentáneo) de "esta es la oferta que se ve
   ahora mismo en el mapa" — varias ofertas pueden estar en la lista a la
   vez, pero solo una muestra su ruta A→B en el mapa (ver reporte: "si hay
   otras cuál aparecerá en el mapa, deberíamos elegir una"). */
.doc-row.is-selected-order {
  border: 1px solid var(--brand-400, var(--brand-500));
  background: var(--brand-50, rgba(22, 76, 182, 0.06));
}

/* Etiqueta permanente arriba del marcador (nombre del punto de carga) —
   reemplaza el globo gris por defecto de Leaflet por una pastilla que
   combina con el resto de la UI. */
.map-marker-label {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
}
.map-marker-label::before { border-top-color: var(--hairline) !important; }
.is-close-routing .map-marker-label {
  opacity: .62;
  transform: scale(.9);
  transform-origin: bottom center;
}
.is-close-routing .incident-marker-icon {
  opacity: .42;
  transform: scale(.86);
}

/* ───────────────────────── Pantalla de envío en curso: mapa de fondo ─────────────────────────
 * Rediseño mobile-first (ver reporte: "el mapa ya no será un cuadro fijo
 * arriba, si no que será el fondo... para todo lo demás que se dibuje
 * sobre él aparezca encima"). El mapa ocupa TODA la pantalla
 * (position:fixed) y el resto (tarjeta de estado, código, panel
 * inferior) flota encima con sus propios z-index — mismo criterio de
 * `isolation:isolate` que ya usa .map-container para contener los
 * controles internos de Leaflet (que traen z-index hasta 1000 en su CSS
 * propio) sin que se salgan por encima de los botones flotantes
 * (z-index 45) o la barra inferior (z-index 50). Usado en
 * driver-active.php y tracking.php. */
.trip-map-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  background: var(--bg-fill);
}
.trip-map-layer .leaflet-container { font-family: inherit; }
/* Los controles nativos de Leaflet (zoom, "mi ubicación") arrancan en la
   esquina superior izquierda — sin este corrimiento quedarían debajo de
   la tarjeta flotante de estado/código de arriba. */
.trip-map-layer .leaflet-top { top: 210px; }

/* Columna fija arriba del mapa: tarjeta de estado (wizard + ETA) y,
   debajo, la del código — apiladas con espacio entre ellas en vez de
   cada una position:fixed por separado (que obligaría a calcular a mano
   dónde termina la primera para no tapar la segunda con la otra).
   Tamaños reducidos (gap/padding/fuente) — ver reporte: "disminuye
   levemente el tamaño de todo para que no se sature". */
.trip-floating-stack {
  position: fixed;
  top: 62px;
  top: max(62px, calc(env(safe-area-inset-top) + 48px));
  left: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trip-floating-card {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 11px 13px;
}
/* Ícono del scooter (favicon del proyecto) en la tarjeta de estado — ver
   reporte: "vemos un ícono de una motoneta, en nuestro caso usaremos el
   ícono del scooter que es el favicon". */
.trip-status-scooter-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--brand-50, rgba(22, 76, 182, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.trip-status-scooter-icon img { width: 16px; height: 16px; object-fit: contain; }
/* Tarjeta de código flotante (recolección/entrega) — texto adaptado según
   rol/fase (ver driver-active.php/tracking.php). SIEMPRE debajo de la
   tarjeta de estado (wizard) y SIEMPRE arriba del panel deslizable — ver
   reporte: "el código... tiene que estar arriba del bloque del
   deslizante" — ambas viven en .trip-floating-stack, fuera y por encima
   de .trip-sheet-drawer, así que el panel jamás las tapa (ver
   syncSheetGeometry() en driver-active.php/tracking.php, que calcula la
   altura máxima del panel para que se detenga justo debajo de esta
   columna). */
.trip-floating-code {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.trip-floating-code-digits { display: flex; gap: 3px; flex-shrink: 0; }
.trip-floating-code-digit {
  width: 21px;
  height: 26px;
  border-radius: var(--radius-sm, 6px);
  background: var(--brand-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.trip-floating-code-text { min-width: 0; }
.trip-floating-code-title { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1px; }
.trip-floating-code-desc { font-size: 0.68rem; color: var(--text-secondary); margin: 0; line-height: 1.25; }
.trip-sheet-status-card {
  text-align: center;
  padding: 0 8px 8px;
}
.trip-sheet-status-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.trip-sheet-status-title {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.15;
  font-weight: 800;
  color: var(--text-primary);
}
.trip-sheet-status-eta {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.trip-route-state {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-radius: var(--radius-full);
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--success-fg);
  background: var(--success-bg);
}
.trip-route-state.is-soft-late {
  color: var(--warning-fg);
  background: var(--warning-bg);
}
.trip-route-state.is-late {
  color: var(--danger-fg);
  background: var(--danger-bg);
}
.trip-sheet-status-note {
  margin: 3px 0 0;
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.trip-sheet-status-price {
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50, #eff6ff);
  border: 1px solid rgba(37, 99, 235, 0.14);
}
.trip-sheet-status-card .trip-progress {
  margin: 9px 0 0;
}
/* Rediseño del PIN pedido por el usuario: contenedor BLANCO (antes
   gradiente azul) con cada dígito en su propia casilla de fondo azul y
   texto blanco — mismo criterio en el sheet principal y en el sheet de
   "Detalles del envío" (ver .trip-detail-code-row más abajo). */
.trip-inline-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.trip-inline-code .trip-floating-code-title {
  color: var(--text-primary);
}
.trip-inline-code .trip-floating-code-desc {
  color: var(--text-secondary);
}
.trip-inline-code .trip-floating-code-digit {
  background: var(--brand-600);
  color: #fff;
  border: 1px solid var(--brand-600);
  min-width: 27px;
  width: 27px;
  height: 32px;
  font-size: 1rem;
}
.trip-sheet-float-row {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* Panel inferior PERSISTENTE (VoltUI.initDragSheet(), ver ui.js) —
   colapsado muestra solo la fila "peek" (conductor/cliente + dirección),
   expandido muestra todo lo demás (acciones, detalles, compartir viaje,
   S.O.S....).
   IMPORTANTE — la altura NO es un porcentaje fijo de la pantalla: el
   propio JS de cada vista (syncSheetGeometry(), ver driver-active.php/
   tracking.php) mide dónde termina .trip-floating-stack (el wizard) y
   fija --sheet-total-height a lo que quede libre debajo de esa columna,
   MENOS un margen. Así, expandido al máximo, el panel nunca sube más
   allá del mapa — nunca tapa el wizard (ver reporte: "la altura máxima
   del deslizante tiene que permitir ver el wizard y el código, es decir
   solo cubrir el mapa"). 82vh es solo el valor de respaldo antes de que
   corra el JS.

   .trip-sheet-drawer (este contenedor) es el que arrastra/traslada —
   overflow:visible a propósito, para que .trip-sheet-float-code (el
   código, ver más abajo) pueda "colgar" JUSTO ARRIBA del panel visual
   sin que se recorte, y viaje pegado a él tanto colapsado como
   expandido (es un simple hijo position:absolute con bottom:100%, así
   que el transform del contenedor lo mueve junto con todo lo demás sin
   JS extra). La parte redondeada/con fondo/sombra vive aparte, en
   .trip-sheet-panel (inset:0, ocupa todo el contenedor). */
.trip-sheet-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sheet-total-height, 82vh);
  z-index: 30;
  transform: translateY(calc(100% - var(--peek-height, 148px)));
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), height 0.2s ease-out;
  overflow: visible;
}
.trip-sheet-drawer.is-expanded { transform: translateY(0); }
/* Tercer estado "media pantalla" (5.2, imagen 1: "para el cliente
   arranca a media pantalla") — opt-in vía VoltUI.initDragSheet({
   enableHalf: true }), ver ui.js. translateY(50%) usa el alto propio
   del contenedor (que ya está acotado al espacio libre real vía
   --sheet-total-height), así que "mitad" siempre queda proporcional sin
   necesitar más JS. */
.trip-sheet-drawer.is-half { transform: translateY(50%); }
.trip-sheet-drawer.is-dragging { transition: none; }
.trip-sheet-panel {
  position: absolute;
  inset: 0;
  background: var(--bg-page);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* El código, colgado justo arriba del panel — ancho de contenido
   (nunca estirado edge-to-edge, que se veía "vacío" con mucho espacio
   en blanco a la derecha — ver reporte: "ese bloque de código se ve
   mal, algo vacío y estirado") y centrado horizontalmente, como una
   píldora compacta. */
.trip-sheet-handle {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  /* Área de arrastre/toque más grande — antes solo 18px de alto en
     total (10px+4px de padding + 4px de la barrita), difícil de agarrar
     con el dedo (ver reporte: "no sé cómo arreglarlo para que el área
     de deslizar sea mayor"). El indicador ya no es una barrita fija —
     ahora es un triángulo que apunta hacia arriba (invita a "desliza
     para abrir") y se invierte apuntando hacia abajo cuando el panel ya
     está expandido ("desliza para cerrar"), ver .trip-sheet-handle span
     más abajo. */
  padding: 16px 0 12px;
  cursor: grab;
  touch-action: none;
}
/* Triángulo en vez de la barrita plana de antes — apunta hacia ARRIBA
   cuando el panel está colapsado (invita a deslizar hacia arriba para
   abrirlo) y se invierte hacia ABAJO cuando ya está expandido (invita a
   deslizar hacia abajo para cerrarlo) — ver reporte: "hay que hacer que
   cuando esté oculto sea como un triángulo indicando dirección para
   arriba y cuando esté mostrado el triángulo sea invertido indicando
   que se oculta al deslizar para abajo". VoltUI.initDragSheet() ya le
   pone/quita la clase .is-expanded al contenedor (.trip-sheet-drawer)
   al abrir/cerrar. */
.trip-sheet-handle span {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--text-secondary);
  transition: transform 0.25s ease;
}
.trip-sheet-drawer.is-expanded .trip-sheet-handle span {
  transform: rotate(180deg);
}
.trip-sheet-peek {
  flex-shrink: 0;
  padding: 2px 14px 12px;
  touch-action: none;
}
.trip-status-summary {
  display: grid;
  gap: 6px;
  padding: 4px 2px 2px;
}
@media (max-width: 520px) {
  .trip-sheet-status-title {
    font-size: 1.12rem;
  }
  .trip-sheet-status-eta {
    font-size: 0.88rem;
  }
}
.trip-sheet-body {
  flex: 1;
  /* Solo se puede hacer scroll con el panel COMPLETAMENTE expandido —
     así, en el estado "media pantalla" del cliente (.is-half, ver
     arriba), el contenido del final (el módulo de anuncios, 5.2 imagen
     2) queda fuera de alcance hasta subir del todo, tal como pidió el
     usuario: "los anuncios no se verán en la altura media... si lo sube
     o hace scroll ahí sí se subirá completo y podrá ver los anuncios". */
  overflow-y: hidden;
  padding: 2px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  /* Antes 10px — el usuario reportó que los bloques se sentían
     "colapsados" visualmente uno contra otro (ver reporte: "incrementar
     el margen inferior entre los bloques informativos"). */
  gap: 16px;
}
.trip-sheet-drawer.is-expanded .trip-sheet-body {
  overflow-y: auto;
}
/* Dentro del panel, las tarjetas se ven planas (ya no hace falta el
   borde/sombra de .card — el panel entero ya tiene su propia sombra) y
   con menos relleno que el resto de la app — ver reporte: "disminuye
   levemente el tamaño de todo para que no se sature". */
.trip-sheet-body .card { box-shadow: none; border: 1px solid var(--hairline); padding: 18px !important; }

/* ───────────────────────── Tarjetas ───────────────────────── */

.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}
body.theme-dark .card {
  background: var(--bg-surface) !important;
  border-color: var(--hairline) !important;
  box-shadow: var(--shadow-sm);
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.pill-badge-success { background: var(--success-bg); color: var(--success-fg); }
.pill-badge-danger { background: var(--danger-bg); color: var(--danger-fg); }
.pill-badge-warning { background: var(--warning-bg); color: var(--warning-fg); }
.pill-badge-info { background: var(--info-bg); color: var(--info-fg); }
.pill-badge-neutral { background: var(--bg-fill); color: var(--text-muted, var(--text-secondary, #64748b)); }

.ticket-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ticket-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: var(--brand-700, #1d4ed8);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-dark .ticket-attachment-chip,
body.theme-dark .audit-meta-item {
  background: rgba(30, 41, 59, 0.7);
  border-color: var(--hairline);
}

.audit-meta-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.audit-meta-item {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.45);
  font-size: 0.76rem;
  line-height: 1.35;
}
.audit-meta-item span {
  color: var(--text-secondary);
  font-weight: 600;
}
.audit-meta-item strong {
  color: var(--text-primary);
  font-weight: 500;
  word-break: break-word;
}
@media (max-width: 560px) {
  .audit-meta-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.support-tabs,
.module-tabs,
.settings-tabs,
.notif-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  width: 100%;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-fill);
}
.support-tabs { margin-top: 18px; }
.support-tab,
.module-tab,
.settings-tab,
.notif-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.support-tab.is-active,
.module-tab.is-active,
.settings-tab.is-active,
.notif-tab.is-active {
  background: var(--bg-surface);
  color: var(--brand-700);
  box-shadow: var(--shadow-sm);
}
.support-tab:hover,
.module-tab:hover,
.settings-tab:hover,
.notif-tab:hover {
  color: var(--brand-700);
}
body.theme-dark .support-tab.is-active,
body.theme-dark .module-tab.is-active,
body.theme-dark .settings-tab.is-active,
body.theme-dark .notif-tab.is-active {
  background: #1e293b;
  color: #93c5fd;
}
@media (max-width: 520px) {
  .support-tabs,
  .module-tabs,
  .settings-tabs,
  .notif-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  font-weight: 800;
  box-shadow: none;
}

.module-tabs {
  display: inline-flex;
}

@media (max-width: 520px) {
  .module-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 640px) {
  .settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-country-card {
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-fill);
}

.settings-country-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.settings-country-card-header span {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ───────────────────────── Alertas inline ───────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-md);
  padding: 13px 15px;
  font-size: 0.9rem;
}
.alert svg { flex-shrink: 0; margin-top: 1px; width: 18px; height: 18px; }
.alert-success { background: var(--success-bg); color: var(--success-fg); }
.alert-danger { background: var(--danger-bg); color: var(--danger-fg); }
.alert-warning { background: var(--warning-bg); color: var(--warning-fg); }
.alert-info { background: var(--info-bg); color: var(--info-fg); }

/* ───────────────────────── Modales ─────────────────────────
 * Estilo "alerta" de iOS 26: centrado en pantalla (en móvil y en
 * escritorio por igual — no es un bottom-sheet), superficie de
 * vidrio esmerilado, aparece con una animación de resorte desde el
 * centro. Para flujos que necesitan más espacio (un formulario
 * completo, no una confirmación) usa `.vui-sheet` en vez de esto. */

.vui-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1200;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.vui-backdrop.vui-visible { opacity: 1; }
body.theme-dark .vui-backdrop {
  background: rgba(0, 0, 0, 0.58);
}

.vui-modal {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg);
  transform: scale(0.88);
  transition: transform var(--dur-slow) var(--ease-spring);
  text-align: center;
}
.vui-backdrop.vui-visible .vui-modal { transform: scale(1); }
body.theme-dark .vui-modal {
  background: var(--bg-surface);
  border-color: var(--hairline);
  color: var(--text-primary);
}

.vui-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.vui-modal-icon svg { width: 22px; height: 22px; }

.vui-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.vui-modal-message { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 20px; line-height: 1.5; white-space: pre-wrap; }
.vui-modal .input { text-align: left; }
.vui-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.vui-modal-actions.vui-actions-row { flex-direction: row; }
.vui-modal-actions.vui-actions-row .btn { flex: 1; }

/* ───────────────────────── Sheets (página dentro de página) ─────────────────────────
 * Imita el patrón de iOS 26 donde un formulario completo (ej. "New
 * Reminder") cubre la pantalla como una página nueva, con un botón
 * "X" circular para cerrarla y una acción principal a la derecha.
 * Pensado para flujos futuros (crear envío, editar vehículo, etc.)
 * que necesitan más espacio que un modal de confirmación. */

.vui-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.vui-sheet-backdrop.vui-visible { opacity: 1; }
.vui-sheet-backdrop.vui-closing {
  transition-duration: 520ms;
}

/* En móvil se comporta como una "página" que sube desde abajo pero
   deja asomado el header de atrás (como el "New Reminder" de iOS 26:
   nunca tapa completamente la pantalla) — esquinas superiores
   redondeadas y una sombra propia, no ocupa el 100% del alto. */
.vui-sheet {
  width: 100%;
  height: calc(100% - 54px);
  max-width: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: none;
  transform: translateY(100%);
  transition: transform 360ms var(--ease-spring);
  overflow: visible;
  will-change: transform;
}
.vui-sheet-backdrop.vui-visible .vui-sheet { transform: translateY(0); }
.vui-sheet-backdrop.vui-closing .vui-sheet {
  transition-duration: 620ms;
  transition-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
}

/* Barrita para deslizar el sheet hacia abajo y cerrarlo — ver
   ui.js: sheet() ya escucha el arrastre desde aquí (o desde el header)
   con pointerdown/pointermove/pointerup (ver reporte: "necesito que
   agreguemos esto a varios elementos... el modal sheet... habrá que
   agregarle algo para deslizarlo hacia abajo para cerrarlo"). */
.vui-sheet-drag-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  padding: 0;
  cursor: grab;
  touch-action: none;
}
.vui-sheet-drag-handle span {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--hairline);
}

.vui-sheet-header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 16px 14px;
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
body.theme-dark .vui-sheet-header {
  background: rgba(17, 24, 39, .96);
  border-color: var(--hairline);
}
.vui-sheet-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.vui-sheet-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-fill);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.vui-sheet-close:hover { background: var(--bg-fill-hover); }
.vui-sheet-close svg { width: 16px; height: 16px; }
.vui-sheet-primary { flex-shrink: 0; }
.vui-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
body.theme-dark .vui-sheet-body {
  background: var(--bg-surface);
  border-color: var(--hairline);
}
@media (max-width: 719px) {
  .vui-sheet {
    gap: 12px;
  }
  .vui-sheet-header {
    border-radius: var(--radius-xl);
    border-bottom-color: rgba(226, 232, 240, .9);
  }
  .vui-sheet-body {
    border-top: 1px solid rgba(226, 232, 240, .86);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: none;
    margin-top: 0;
  }
  .vui-sheet-header + .vui-sheet-body { margin-top: 0; }
}
.vui-sheet-body .input,
.vui-sheet-body select.input,
.vui-sheet-body textarea.input {
  background: #f8fafc;
  border-color: rgba(203, 213, 225, .86);
}
body.theme-dark .vui-sheet-body .input,
body.theme-dark .vui-sheet-body select.input,
body.theme-dark .vui-sheet-body textarea.input {
  background: var(--input-bg) !important;
  border-color: rgba(148, 163, 184, .34) !important;
}
.vui-sheet-body .card,
.vui-sheet-body .doc-row,
.vui-sheet-body .metric-card,
.vui-sheet-body .vehicle-option-card {
  background: #f8fafc;
  border: 1px solid rgba(203, 213, 225, .72);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}
body.theme-dark .vui-sheet-body .card,
body.theme-dark .vui-sheet-body .doc-row,
body.theme-dark .vui-sheet-body .metric-card,
body.theme-dark .vui-sheet-body .vehicle-option-card {
  background: var(--bg-fill) !important;
  border-color: var(--hairline) !important;
  box-shadow: none;
}
.vui-sheet-body .card .card,
.vui-sheet-body .doc-row .card {
  background: #fff;
  box-shadow: none;
}
body.theme-dark .vui-sheet-body .card .card,
body.theme-dark .vui-sheet-body .doc-row .card {
  background: #182235 !important;
}
.vui-sheet-map .vui-sheet-body {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.vui-sheet-map .vui-sheet-body > * { min-width: 0; max-width: 100%; }
.vui-sheet-map .map-container {
  min-height: 320px;
}

/* Las filas de importes de los sheets heredan el color de la superficie.
   Declararlo evita que textos sin utility propia se fundan con el fondo
   oscuro, especialmente en la cotización de devolución. */
.vui-sheet-body .doc-row { color: var(--text-primary); }
.vui-sheet-body .doc-row .text-slate-500 { color: var(--text-secondary) !important; }

body.theme-dark .shipment-weather-warning {
  background: rgba(37, 99, 235, .18);
  color: #bfdbfe;
  border: 1px solid rgba(96, 165, 250, .34);
}

/* Chat de un envío (VoltUI.openChat(), ver ui.js) — el body del sheet
   normal es un solo bloque que se desplaza entero; el chat necesita que
   SOLO la lista de mensajes se desplace y la fila de escribir se quede
   fija abajo, así que este modificador lo vuelve una columna flex sin
   el padding por defecto (el padding se mueve a los hijos). */
.vui-sheet-chat .vui-sheet-body { display: flex; flex-direction: column; padding: 0; margin-top: 0; overflow: hidden; }

/* Sheet de reseña post-viaje (VoltUI.openRatingSheet(), ver ui.js) —
   estrellas grandes tocables + textarea de comentario opcional. */
.vui-rating-subtitle { margin: 0 0 18px; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.4; }
.vui-rating-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.vui-rating-star { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; background: none; color: var(--border-strong, #d1d5db); cursor: pointer; transition: color 0.12s, transform 0.08s; }
.vui-rating-star:active { transform: scale(0.9); }
.vui-rating-star svg { width: 30px; height: 30px; fill: currentColor; stroke: currentColor; }
.vui-rating-star.is-filled { color: #f59e0b; }
.vui-rating-comment { width: 100%; resize: vertical; min-height: 84px; font-family: inherit; }
/* Aviso fijo arriba del hilo — no compartir datos de pago/sensibles, y
   que la conversación puede guardarse para auditorías (ver reporte). */
.chat-safety-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; font-size: 0.76rem; line-height: 1.35; color: var(--warning-fg, #b45309); background: var(--warning-bg, #fffbeb); border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.chat-safety-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.chat-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
/* Mensajes prearmados (un clic los manda tal cual, sin escribir) — ver
   ui.js CHAT_QUICK_REPLIES / reporte: "mensajes por defecto... para que
   solo lo clickeen y ya se envíe". */
.chat-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; flex-shrink: 0; }
.chat-quick-replies .btn { white-space: nowrap; }
/* VoltChat — opciones del bot de ayuda (botones clicables bajo el chat) */
.help-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.help-entry-actions .btn {
  min-height: 44px;
  margin-top: 0;
}
@media (min-width: 720px) {
  .help-entry-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
.help-options { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 12px; flex-shrink: 0; }
.help-option-btn {
  text-align: left;
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
  background: var(--bg-fill);
  border: 1px solid var(--brand-500, #2563eb);
  color: var(--brand-600, #1d4ed8);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.help-option-btn:hover {
  background: var(--brand-50, #eff6ff);
  border-color: var(--brand-600, #1d4ed8);
}
.help-option-btn:active {
  transform: scale(0.98);
}
.help-option-btn::after {
  content: '→';
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-500, #3b82f6);
  margin-left: 8px;
  flex-shrink: 0;
}
/* (enlace "Ver mis tickets" movido al header del sheet como botón primary) */
.chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--bg-fill); align-self: flex-start; }
.chat-bubble-mine { background: var(--brand-600); color: #fff; align-self: flex-end; }
.chat-bubble-text { font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.chat-bubble-time { font-size: 0.65rem; opacity: 0.65; margin-top: 3px; text-align: right; }
.ticket-join-event { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(220px, 100%); margin: 10px auto 14px; text-align: center; color: var(--text-muted); }
.ticket-join-avatar { width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border-subtle); color: var(--brand-600); box-shadow: var(--shadow-sm); overflow: hidden; }
.ticket-join-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket-join-name { font-weight: 800; color: var(--text-main); font-size: 0.92rem; line-height: 1.15; }
.ticket-join-text { font-size: 0.82rem; line-height: 1.2; }
.ticket-join-time { font-size: 0.72rem; line-height: 1.2; color: var(--text-soft); }
.chat-input-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline); background: var(--bg-page); flex-shrink: 0; }
.chat-input-row .input { flex: 1; }
.chat-input-row button { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }
.chat-input-row button svg { width: 18px; height: 18px; }

/* Lista de notificaciones dentro del sheet de la campanita (ver
   layouts/app.php, notif-bell-btn) — una tarjetita por notificación,
   con un punto de color a la izquierda mientras sigue sin leerse. */
.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-fill);
  margin-bottom: 2px;
}
.notif-tab {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: .84rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.notif-tab.is-active {
  background: var(--bg-surface);
  color: var(--brand-700);
  box-shadow: var(--shadow-sm);
}
.notif-tab em {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: rgba(22, 76, 182, .12);
  color: var(--brand-700);
  font-size: .68rem;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-tab.is-active em { background: rgba(22, 76, 182, .12); color: var(--brand-700); }
.notif-tab-panel { display: none; flex-direction: column; gap: 8px; }
.notif-tab-panel.is-active { display: flex; }
.notif-item {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-fill);
  text-decoration: none;
  color: inherit;
  position: relative;
  padding-left: 22px;
}
.notif-item:hover { background: var(--bg-fill-hover); }
.notif-item-unread::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-600);
}
.notif-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.notif-item-body { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; white-space: pre-wrap; }
.notif-item-body-rich { white-space: normal; line-height: 1.5; }
.notif-item-body-rich p,
.notif-item-body-rich div,
.notif-item-body-rich blockquote { margin: 0 0 6px; }
.notif-item-body-rich ul,
.notif-item-body-rich ol { margin: 4px 0 6px; padding-left: 20px; }
.notif-item-body-rich a { color: var(--brand-600); text-decoration: underline; }
.notif-item-time { font-size: 0.7rem; color: var(--text-tertiary, #94a3b8); margin-top: 4px; }
.notif-group {
  border-radius: var(--radius-md);
  background: var(--bg-fill);
  overflow: hidden;
}
.notif-group-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.notif-group-summary::-webkit-details-marker { display: none; }
.notif-group-summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.notif-group-summary strong {
  font-size: .86rem;
  color: var(--text-primary);
}
.notif-group-summary small {
  font-size: .72rem;
  color: var(--text-secondary);
}
.notif-group-summary em {
  flex-shrink: 0;
  padding: 4px 7px;
  border-radius: var(--radius-full);
  background: var(--brand-600);
  color: #fff;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
}
.notif-group-items {
  display: grid;
  gap: 6px;
  padding: 0 8px 8px;
}
/* Botón "Ver más" dentro de un grupo con más de 5 movimientos — límite
   pedido por el usuario para el sheet de notificaciones (máx. 25
   grupos/notificaciones, máx. 5 movimientos visibles por grupo). Es un
   <details> anidado estilizado como botón discreto, no como otro grupo. */
.notif-group-more { margin-top: 2px; }
.notif-group-more-summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 8px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--brand-600);
  text-align: center;
}
.notif-group-more-summary::-webkit-details-marker { display: none; }
.notif-item-nested {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .04);
  border-radius: var(--radius-sm);
  padding-top: 10px;
  padding-bottom: 10px;
}
.notif-group-unread {
  box-shadow: inset 3px 0 0 var(--brand-600);
}
.wallet-proof-preview {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(203,213,225,.72);
  background: #f8fafc;
}
.wallet-proof-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #fff;
}
@media (max-width: 640px) {
  .notif-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .vui-sheet-backdrop { align-items: center; padding: 40px; }
  .vui-sheet {
    max-width: 560px;
    height: auto;
    max-height: calc(100vh - 80px);
    border-radius: var(--radius-xl);
    box-shadow: none;
    transform: translateY(calc(100vh + 40px));
  }
  .vui-sheet-backdrop.vui-visible .vui-sheet { transform: translateY(0); }
  .vui-sheet-backdrop.vui-closing .vui-sheet {
    transition-duration: 620ms;
    transition-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
  }
  .vui-sheet-header { border-radius: var(--radius-xl); }

  /* Sheet "Pedidos" del conductor (mapa arriba + lista de ofertas abajo)
     — en PC el sheet normal (.vui-sheet de arriba) se encoge al alto de
     su contenido (height: auto), lo que dejaba el mapa chico y
     apretado. Este modificador SOLO afecta ese sheet (pasado como
     opts.className a VoltUI.sheet) para que en escritorio ocupe casi
     todo el alto disponible, con el mapa arriba y la lista de pedidos
     abajo con su propio scroll — en móvil no se toca nada, ya usa
     casi toda la pantalla por el .vui-sheet de base. */
  .sheet-orders {
    width: 640px;
    max-width: 92vw;
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
  }
  .sheet-orders .vui-sheet-body { display: flex; flex-direction: column; height: 100%; padding-bottom: 20px; }
}

.orders-sheet-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* .orders-map-wrap (no .orders-sheet-map directamente) es el hijo flex
   real de .orders-sheet-layout desde que se agregó para poder posicionar
   los anillos de carga/autonomía flotantes encima del mapa (ver
   vehicleSummaryRingsHtml() / .map-hud-rings.is-orders-hud) — el
   flex-shrink:0/margin que antes vivía en .orders-sheet-map se movió acá
   para que el mapa no se encoja dentro del layout flex. */
.orders-map-wrap { flex-shrink: 0; margin-bottom: 16px; height: 280px; }
.orders-sheet-map { height: 100%; }

.safety-tips-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 4px 4px 8px;
}
.safety-tips-icon { color: var(--brand-600, #164cb6); }
.safety-tips-text {
  font-size: 0.95rem;
  color: var(--text-strong, #0f172a);
  min-height: 3.2em;
}

.doc-preview-sheet {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}
.doc-preview-sheet img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 180px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  object-fit: contain;
  background: var(--bg-surface);
}
.vui-sheet-camera .vui-sheet-body {
  padding-top: 12px;
}
.kyc-camera-sheet {
  display: grid;
  gap: 12px;
}
.kyc-camera-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0f172a;
  aspect-ratio: 3 / 4;
}
.kyc-camera-stage video,
.kyc-camera-stage canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kyc-camera-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.kyc-camera-guide::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 999px rgba(15,23,42,.28);
}
.kyc-camera-guide.is-document::before {
  width: 82%;
  aspect-ratio: 1.58 / 1;
  border-radius: 14px;
}
.kyc-camera-guide.is-selfie::before {
  width: 62%;
  aspect-ratio: 1 / 1.28;
  border-radius: 999px;
}
@media (min-width: 768px) {
  .kyc-camera-stage {
    aspect-ratio: 4 / 3;
    max-height: 58vh;
  }
  .kyc-camera-guide.is-document::before {
    width: 72%;
  }
  .kyc-camera-guide.is-selfie::before {
    width: 38%;
  }
}
.inline-attachment-frame {
  width: 100%;
  height: min(72vh, 720px);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
  .vui-sheet-doc-preview {
    width: min(760px, 92vw);
  }
}
.orders-sheet-list-wrap { flex: 1; min-height: 120px; }
@media (min-width: 640px) {
  .orders-map-wrap { height: 45%; }
  .orders-sheet-list-wrap { flex: 1; overflow-y: auto; min-height: 0; }
}

/* Franja de carga/autonomía arriba de la lista de "Pedidos cercanos" —
   antes esta info solo se veía dentro de un viaje en curso (ver
   driver-orders-sheet.php: vehicleSummaryHtml()). */
.orders-vehicle-summary {
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--info-bg);
  border: 1px solid transparent;
}
.orders-vehicle-summary.is-mid { background: var(--warning-bg); }
.orders-vehicle-summary.is-low { background: var(--danger-bg); }
.orders-vehicle-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.orders-vehicle-summary-charge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--info-fg);
}
.orders-vehicle-summary.is-mid .orders-vehicle-summary-charge { color: var(--warning-fg); }
.orders-vehicle-summary.is-low .orders-vehicle-summary-charge { color: var(--danger-fg); }
.orders-vehicle-summary-charge svg { width: 16px; height: 16px; }
.orders-vehicle-summary-range {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}
.orders-vehicle-summary-hint {
  font-size: 0.72rem;
  color: var(--text-muted, var(--text-secondary, #64748b));
  margin: 4px 0 0;
}

/* Tarjeta de clima junto a la franja de carga/autonomía (ver
   ShipmentController::driverWeatherSnapshot() / WeatherCache::describe()
   y driver-orders-sheet.php: weatherBadgeHtml()). Se muestra siempre —
   ícono coloreado según la condición (dorado para sol, azul para
   lluvia, morado para tormenta, etc. — el color viene del servidor) +
   etiqueta + temperatura arriba, estadísticas (prob. de lluvia, humedad,
   viento, rango de 5km) abajo en gris chico. */
.orders-weather-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-fill, #f1f5f9);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.orders-weather-card-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #334155);
}
.orders-weather-card-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.orders-weather-card-icon svg { width: 18px; height: 18px; }
.orders-weather-card-stats {
  font-size: 0.7rem;
  color: var(--text-muted, #64748b);
  padding-left: 26px;
}

/* Marcadores de incidencias reportadas por conductores en el mapa (tipo
   Waze — ver App\Models\RoadIncident). Sin confirmar (un solo reporte)
   se ven más apagados/con borde punteado; verificadas (2+ reportes)
   resaltan más — así el propio mapa ya sugiere qué tan confiable es
   cada punto sin tener que abrir nada. */
.incident-marker-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--danger-fg, #b91c1c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.4), 0 0 0 2px #fff;
}
.incident-marker-icon svg { width: 14px; height: 14px; }
.incident-marker-icon.is-unverified {
  background: var(--bg-fill);
  color: var(--text-muted, #64748b);
  border: 2px dashed var(--danger-fg, #b91c1c);
  box-shadow: none;
}
.incident-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.incident-type-card {
  min-height: 104px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  padding: 12px 8px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.incident-type-card:hover,
.incident-type-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .3);
  box-shadow: 0 14px 28px rgba(22, 76, 182, .1);
}
.incident-type-card:disabled {
  opacity: .58;
  cursor: wait;
}
.incident-type-card-icon .incident-marker-icon {
  position: static;
  margin: 0 auto;
}
.incident-placement-stack {
  position: relative;
  width: 82px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.incident-placement-pin {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--danger-fg, #b91c1c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(185, 28, 28, .35), 0 0 0 3px #fff;
}
.incident-placement-pin svg {
  width: 17px;
  height: 17px;
}
.incident-placement-pin-actions {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.incident-placement-action {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-full);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .24), 0 0 0 3px #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.incident-placement-action:hover,
.incident-placement-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .28), 0 0 0 3px #fff;
}
.incident-placement-action:disabled {
  opacity: .7;
  cursor: wait;
}
.incident-placement-action.is-cancel {
  background: #ef4444;
}
.incident-placement-action.is-confirm {
  background: #16a34a;
}

/* ───────────────────────── Notificaciones (toasts) ───────────────────────── */

.vui-toast-region {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1100;
  pointer-events: none;
}

.vui-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 13px 14px;
  transform: translateY(-24px) scale(0.92);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
}
.vui-toast.vui-visible { transform: translateY(0) scale(1); opacity: 1; }
.vui-toast.vui-leaving { transform: translateY(-16px) scale(0.94); opacity: 0; }
.vui-toast-clickable { cursor: pointer; }
.vui-toast-clickable:hover { border-color: var(--brand-300, var(--brand-400)); }

.vui-toast-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vui-toast-icon svg { width: 15px; height: 15px; }

.vui-toast-body { flex: 1; min-width: 0; }
.vui-toast-title { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.vui-toast-message { font-size: 0.82rem; color: var(--text-secondary); margin: 2px 0 0; line-height: 1.4; }

.vui-toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.vui-toast-close:hover { background: var(--bg-fill); }
.vui-toast-close svg { width: 13px; height: 13px; }

.vui-toast-success .vui-toast-icon { background: var(--success-bg); color: var(--success-fg); }
.vui-toast-danger .vui-toast-icon { background: var(--danger-bg); color: var(--danger-fg); }
.vui-toast-warning .vui-toast-icon { background: var(--warning-bg); color: var(--warning-fg); }
.vui-toast-info .vui-toast-icon { background: var(--info-bg); color: var(--info-fg); }

/* ───────────────────────── Utilidades responsive ───────────────────────── */

.hide-on-xs { display: none; }
@media (min-width: 420px) {
  .hide-on-xs { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .input, .vui-backdrop, .vui-modal, .vui-toast { transition: none !important; }
}

/* ───────────────────────── Flujo de envíos (Fase 3, vistas de demostración) ─────────────────────────
   Componentes visuales tipo Uber Eats para el seguimiento de un envío: la
   idea es que estas vistas queden ya armadas visualmente ahora (con datos
   de ejemplo) y que la Fase 3 solo tenga que conectarlas a datos reales. */

.trip-progress {
  display: flex;
  gap: 6px;
  margin: 14px 0;
}
.trip-progress-step {
  flex: 1;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--bg-fill);
}
.trip-progress-step.is-done { background: var(--brand-600); }

.pin-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--brand-600);
  color: #fff;
}
.pin-box-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
}
.pin-box-digits { display: flex; gap: 6px; }
.pin-box-digit {
  width: 30px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.18);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

/* Modal de "confirmar entrega" del conductor — PIN de 4 dígitos como
   4 inputs separados (autoavanza al escribir, acepta pegar el código
   completo) en vez de un solo input de texto — ver
   driver-active.php::openDeliveryPinModal(). */
.pin-input-digits { display: flex; gap: 10px; justify-content: center; }
.pin-input-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0;
}

/* Foto de respaldo opcional al confirmar entrega, tomada con la
   cámara integrada de la propia app (getUserMedia), no la app de
   cámara nativa del teléfono — ver openDeliveryPinModal(). */
.delivery-photo-video {
  width: 100%;
  max-height: 260px;
  border-radius: var(--radius-md);
  background: #000;
  object-fit: cover;
}
.delivery-photo-preview {
  width: 100%;
  max-height: 260px;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.delivery-photo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, .68fr);
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 16px;
}
.delivery-photo-actions .btn {
  min-height: 44px;
}
.delivery-confirm-slide {
  margin-top: 18px;
}

.trip-driver-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
/* Toda la tarjeta (menos los botones de contacto, que detienen la
   propagación) abre el perfil público al hacer clic — ver reporte:
   "poder ver el perfil público del cliente/conductor". */
.trip-driver-card.is-clickable { cursor: pointer; }
.trip-driver-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-fill);
}
.trip-driver-info { flex: 1; min-width: 0; }
.trip-driver-name { font-weight: 700; color: var(--text-primary); font-size: 0.98rem; }
.trip-driver-meta { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }
.trip-driver-actions { display: flex; gap: 8px; flex-shrink: 0; }
.trip-driver-actions .btn { width: 42px; height: 42px; padding: 0; border-radius: var(--radius-full); }

.trip-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
.trip-detail-row:last-child { border-bottom: none; }
.trip-detail-label { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 3px; }

/* Timeline conector pedido por el usuario ("línea conectora vertical
   estilo wizard/timeline que enlace visualmente el Punto A con el Punto
   B") — envuelve las dos filas de dirección (recolección/entrega) con
   un punto sólido en cada extremo y una línea vertical entre ambos, sin
   tocar el resto de .trip-detail-row (pago, opción de entrega, etc.). */
.trip-address-timeline {
  position: relative;
  padding-left: 22px;
}
.trip-address-timeline .trip-detail-row {
  position: relative;
  border-bottom: none;
  padding: 4px 0 20px;
}
.trip-address-timeline .trip-detail-row:last-child { padding-bottom: 13px; border-bottom: 1px solid var(--hairline); }
.trip-address-timeline .trip-detail-row::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand-600);
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--brand-600);
}
.trip-address-timeline .trip-detail-row:last-child::before {
  background: #16a34a;
  box-shadow: 0 0 0 1px #16a34a;
}
.trip-address-timeline .trip-detail-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -18px;
  top: 15px;
  bottom: -14px;
  width: 2px;
  background: var(--hairline);
}
.trip-address-timeline .trip-detail-row.is-not-address {
  margin-left: -22px;
  padding-left: 0;
}
.trip-address-timeline .trip-detail-row.is-not-address::before,
.trip-address-timeline .trip-detail-row.is-not-address::after {
  display: none;
}

/* Recargo por espera (punto 4 del reporte) — mismo componente, dos
   colores: verde del lado del conductor, rojo del lado del cliente
   (ver .is-driver/.is-client más abajo, aplicadas por la vista). */
.trip-wait-surcharge-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 4px;
}
.trip-wait-surcharge-badge.is-client { color: #dc2626; }
.trip-wait-surcharge-badge.is-driver { color: #16a34a; }
.trip-detail-value { font-size: 0.92rem; color: var(--text-primary); font-weight: 500; }

#shipment-details-mount > .card + .card,
#shipment-details-mount > .card + button,
#shipment-details-mount > button + .card {
  margin-top: 14px;
}
#shipment-details-mount .btn-danger-soft,
.btn-danger-soft {
  color: #b42318;
  background: #fff5f5;
  border: 1px solid rgba(220, 38, 38, .24);
}
#shipment-details-mount .btn-danger-soft:hover,
.btn-danger-soft:hover {
  color: #991b1b;
  background: #fee2e2;
}

.slide-action {
  --slide-progress: 0;
  position: relative;
  padding: 0;
  min-height: 56px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #eef4ff;
  color: var(--brand-700);
  border: 1px solid rgba(37, 99, 235, .14);
  box-shadow: none;
  touch-action: none;
  user-select: none;
}
.slide-action:not(:disabled):hover {
  background: #eef4ff;
  color: var(--brand-700);
  border-color: rgba(37, 99, 235, .22);
}
.slide-action:disabled {
  opacity: .58;
  cursor: not-allowed;
}
.slide-action.is-loading .slide-action-label {
  opacity: 0;
}
.slide-action-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 0 18px 0 64px;
}
.slide-action-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc((100% - 2px) * var(--slide-progress));
  min-width: 0;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  border-radius: inherit;
  opacity: .9;
  transition: width .18s ease;
}
.slide-action.is-dragging .slide-action-fill { transition: none; }
.slide-action-label {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-weight: 800;
  font-size: .98rem;
  color: var(--brand-700);
  line-height: 1.2;
  text-shadow: none;
  transition: color .18s ease, text-shadow .18s ease;
}
.slide-action.is-covering-label .slide-action-label,
.slide-action.is-ready .slide-action-label,
.slide-action.is-complete .slide-action-label {
  color: #fff;
  text-shadow: 0 1px 2px rgba(15, 23, 42, .24);
}
.slide-action-knob {
  position: absolute;
  z-index: 2;
  left: 3px;
  top: 3px;
  width: 58px;
  height: calc(100% - 6px);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--brand-600);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .2), 0 0 0 3px rgba(22, 76, 182, .12);
  transform: translateX(calc(var(--slide-max, 0px) * var(--slide-progress)));
  transition: transform .18s ease, color .18s ease, box-shadow .18s ease;
}
.slide-action-knob::after {
  content: none;
}
.slide-action-knob img {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  margin: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.slide-action.is-dragging .slide-action-knob { transition: none; }
.slide-action.is-complete .slide-action-knob {
  color: #16a34a;
  animation: slide-action-success .45s ease both;
  box-shadow: 0 12px 24px rgba(22, 163, 74, .22), 0 0 0 5px rgba(22, 163, 74, .16);
}
.slide-action-spinner {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: var(--radius-full);
  border: 3px solid rgba(22, 76, 182, .18);
  border-top-color: var(--brand-600);
  animation: spin .8s linear infinite;
  opacity: 0;
  pointer-events: none;
}
.slide-action.is-loading .slide-action-spinner {
  opacity: 1;
}
@keyframes slide-action-success {
  0% { transform: translateX(calc(var(--slide-max, 0px) * var(--slide-progress))) scale(1); }
  45% { transform: translateX(calc(var(--slide-max, 0px) * var(--slide-progress))) scale(1.12); }
  100% { transform: translateX(calc(var(--slide-max, 0px) * var(--slide-progress))) scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.order-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.order-item-row:last-child { border-bottom: none; }
.order-item-qty {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--bg-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.receipt-row.is-total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  border-top: 1px solid var(--hairline);
  margin-top: 6px;
  padding-top: 14px;
}
.receipt-row.is-discount { color: var(--success-fg); }
.receipt-route-timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 2px 0 14px;
}
.receipt-route-timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--brand-600), #16a34a);
  opacity: .38;
}
.receipt-route-point {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}
.receipt-route-dot {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand-600);
  box-shadow: 0 0 0 5px #eff6ff;
  z-index: 1;
}
.receipt-route-point.is-dropoff .receipt-route-dot {
  background: #16a34a;
  box-shadow: 0 0 0 5px #dcfce7;
}
.receipt-proof-card {
  overflow: hidden;
}
.receipt-proof-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0f172a;
  min-height: 190px;
  text-decoration: none;
}
.receipt-proof-frame img {
  display: block;
  width: 100%;
  max-height: 360px;
  min-height: 190px;
  object-fit: cover;
}
.receipt-proof-frame span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.94);
  color: var(--brand-700);
  font-size: .82rem;
  font-weight: 800;
}
.receipt-proof-sheet img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: #0f172a;
}

.route-line {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-right: 46px;
}
.route-line-item {
  display: flex;
  gap: 12px;
  padding-bottom: 22px;
  position: relative;
}
.route-line-item:last-child { padding-bottom: 0; }
.route-line-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 2.5px solid var(--brand-600);
  background: #fff;
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
  z-index: 1;
}
.route-line-item:last-child .route-line-dot { border-radius: var(--radius-sm); background: var(--brand-600); }
.route-line-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5.5px;
  top: 16px;
  bottom: -6px;
  width: 2px;
  background: var(--hairline);
}
.route-line-text { flex: 1; min-width: 0; padding-top: 0; }
.route-line-title { font-weight: 600; color: var(--text-primary); font-size: 0.92rem; }
.route-line-sub { font-size: 0.8rem; color: var(--text-secondary); margin-top: 1px; }
.route-swap-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(22, 76, 182, 0.18);
  background: #eff6ff;
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  box-shadow: var(--shadow-sm);
  z-index: 2;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.route-swap-btn:hover:not(:disabled) { transform: translateY(calc(-50% - 1px)); background: #dbeafe; }
.route-swap-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.route-edit-btn {
  width: 40px;
  height: 38px;
  padding: 0 !important;
  flex-shrink: 0;
}
.route-reference-marker {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--brand-700);
  border: 2px solid rgba(22, 76, 182, .42);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-visit-card p { white-space: pre-wrap; }

.vehicle-option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--hairline);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.price-tier-premium-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(217, 119, 6, .32);
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 45%, #fffbeb 100%);
}
.price-tier-premium-card::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -35%;
  width: 26%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
  animation: premium-sheen 3s ease-in-out infinite;
  pointer-events: none;
}
.price-tier-premium-card.is-selected {
  border-color: #d97706;
  box-shadow: 0 12px 26px rgba(217, 119, 6, .18);
}
.vehicle-option-card:hover { background: var(--bg-fill); }
.vehicle-option-card.is-selected { border-color: var(--brand-600); background: var(--brand-50); }
.vehicle-option-check {
  opacity: 0;
  color: var(--brand-600);
  flex-shrink: 0;
}
.vehicle-option-card.is-selected .vehicle-option-check { opacity: 1; }
.vehicle-option-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-600);
  flex-shrink: 0;
}
.payment-method-panel {
  display: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: var(--bg-fill);
}
.payment-method-panel.is-open {
  display: grid;
  gap: 12px;
}
.payment-payer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.payment-split-summary {
  display: grid;
  gap: 8px;
}
.payment-split-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .875rem;
}
.payment-split-summary strong {
  font-weight: 700;
  color: var(--text-secondary);
}
.payment-split-toggle {
  margin: 0;
  padding: 10px;
  border-radius: var(--radius-md);
  background: #fff;
}
.fragile-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-size: .88rem;
}
.vehicle-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vehicle-option-grid .vehicle-option-card {
  margin-bottom: 0 !important;
  background: #fff;
}
.address-type-grid,
.saved-address-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.saved-address-grid {
  display: flex;
  grid-template-columns: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* El contenido aprovecha mejor teléfonos estrechos sin alterar el ancho ni
   los márgenes de escritorio configurados para .max-w-5xl. */
@media (max-width: 719px) {
  main > .max-w-5xl {
    width: 100%;
    max-width: 100%;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: 16px;
  }
}

/* p-6 en tarjetas equivale a 24px; el diseño operativo usa 16px tanto en
   escritorio como en móvil para que los módulos no se sientan inflados. */
.card.p-6 { padding: 1rem !important; }

.audit-timeline-layout { display:grid; gap:12px; }
.audit-timeline-map { width:100%; height:280px; border-radius:8px; overflow:hidden; background:var(--bg-fill); }
.audit-timeline-addresses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.audit-timeline-addresses > div { display:flex; gap:9px; align-items:flex-start; min-width:0; padding:10px; border:1px solid var(--hairline); border-radius:8px; background:var(--bg-fill); }
.audit-timeline-addresses svg { flex:0 0 auto; color:var(--brand-600); }
.audit-timeline-addresses span { min-width:0; display:grid; gap:2px; }
.audit-timeline-addresses small { color:var(--text-secondary); font-size:11px; }
.audit-timeline-addresses strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.audit-timeline-content { display:grid; gap:12px; min-width:0; }
.audit-timeline-steps { position:relative; display:flex; gap:8px; min-width:0; overflow-x:auto; overflow-y:hidden; padding:2px 2px 9px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.audit-timeline-step { position:relative; display:grid; justify-items:center; align-content:start; gap:6px; flex:0 0 min(180px,62vw); min-height:82px; border:0; background:transparent; color:var(--text-primary); text-align:center; padding:6px 8px; cursor:pointer; scroll-snap-align:center; }
.audit-timeline-step:not(:last-child)::after { content:""; position:absolute; left:50%; right:calc(-50% - 8px); top:19px; height:2px; background:var(--hairline); z-index:0; }
.audit-timeline-step:hover,.audit-timeline-step.is-active { background:var(--brand-50); border-radius:8px; }
.audit-timeline-node { position:relative; z-index:1; display:grid; place-items:center; width:28px; height:28px; border:2px solid var(--hairline); border-radius:50%; background:var(--bg-surface); color:var(--text-secondary); font-size:11px; font-weight:800; }
.audit-timeline-step.is-active .audit-timeline-node { border-color:var(--brand-600); background:var(--brand-600); color:#fff; }
.audit-timeline-step span:last-child { position:relative; z-index:1; min-width:0; display:grid; gap:2px; }
.audit-timeline-step strong { font-size:12px; line-height:1.3; }
.audit-timeline-step small { color:var(--text-secondary); font-size:10px; }
.audit-timeline-detail { min-height:150px; padding:14px; border:1px solid var(--hairline); border-radius:8px; background:var(--bg-surface); }
.audit-timeline-evidence { display:grid; gap:7px; margin-top:12px; }
.audit-timeline-evidence > span { color:var(--text-secondary); font-size:11px; font-weight:700; }
.audit-timeline-evidence img { display:block; width:100%; max-height:360px; object-fit:contain; border-radius:8px; background:var(--bg-fill); border:1px solid var(--hairline); }
.audit-action-marker { display:grid; place-items:center; width:32px; height:32px; border:3px solid #fff; border-radius:50%; background:#2563eb; color:#fff; box-shadow:0 3px 10px rgba(15,23,42,.3); font-size:12px; font-weight:800; }
body.theme-dark .audit-timeline-addresses > div,
body.theme-dark .audit-timeline-detail { background:var(--bg-fill); border-color:rgba(148,163,184,.28); }
body.theme-dark .audit-timeline-addresses strong,
body.theme-dark .audit-timeline-detail strong { color:var(--text-primary); }
body.theme-dark .audit-timeline-step:hover,
body.theme-dark .audit-timeline-step.is-active { background:rgba(37,99,235,.22); color:#f8fafc; }
body.theme-dark .audit-timeline-step.is-active small { color:#bfdbfe; }
.audit-action-marker { width:38px; height:38px; border-width:4px; background:#dc2626; box-shadow:0 0 0 5px rgba(220,38,38,.22),0 5px 16px rgba(15,23,42,.42); font-size:13px; animation:audit-marker-pulse 1.7s ease-out infinite; }
@keyframes audit-marker-pulse { 0%,100% { box-shadow:0 0 0 4px rgba(220,38,38,.22),0 5px 16px rgba(15,23,42,.42); } 50% { box-shadow:0 0 0 11px rgba(220,38,38,0),0 5px 16px rgba(15,23,42,.42); } }
@media (max-width:719px) {
  .audit-timeline-map { height:235px; }
  .audit-timeline-addresses { grid-template-columns:1fr; }
}

body.theme-dark .ticket-admin-tools,
body.theme-dark .ticket-context-card,
body.theme-dark .ticket-context-grid > div,
body.theme-dark .ticket-related-list,
body.theme-dark .ticket-satisfaction-form {
  background:var(--bg-fill);
  border-color:rgba(148,163,184,.25);
}
body.theme-dark .ticket-admin-meta span,
body.theme-dark .quick-reply-chip {
  background:rgba(37,99,235,.2);
  border-color:rgba(96,165,250,.38);
  color:#bfdbfe;
}
body.theme-dark .quick-reply-chip:hover { background:rgba(37,99,235,.32); color:#eff6ff; }
body.theme-dark .ticket-attachment-chip { color:#bfdbfe; }
body.theme-dark .file-field-button { background:rgba(37,99,235,.24); color:#dbeafe; }
body.theme-dark .file-field:hover .file-field-button { background:rgba(37,99,235,.34); }
body.theme-dark .file-field-name { color:var(--text-secondary); }
body.theme-dark .ticket-related-list button { color:#bfdbfe; }
body.theme-dark .admin-table td { color:var(--text-secondary); }
body.theme-dark .admin-table td strong,
body.theme-dark .admin-table td a:not(.btn) { color:var(--text-primary); }
body.theme-dark .ticket-satisfaction-note {
  background:rgba(245,158,11,.14);
  border-color:rgba(251,191,36,.32);
  color:#fde68a;
}
body.theme-dark .ticket-satisfaction-note p { color:#fcd34d; }
body.theme-dark .operator-time-breakdown span,
body.theme-dark .support-action-user {
  background:var(--bg-fill);
  border-color:var(--hairline);
  color:var(--text-primary);
}
.address-type-card,
.saved-address-card {
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px 8px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.address-type-card {
  min-height: 82px;
  font-weight: 800;
}
.saved-address-card {
  flex: 0 0 clamp(142px, 42vw, 184px);
  min-height: 72px;
  padding: 9px 8px;
  gap: 4px;
  text-decoration: none;
  scroll-snap-align: start;
}
.address-type-card:hover,
.saved-address-card:hover,
.address-type-card.is-selected,
.saved-address-card.is-selected {
  border-color: rgba(37, 99, 235, .45);
  background: #eff6ff;
  box-shadow: 0 12px 24px rgba(22, 76, 182, .12);
}
.address-type-card svg,
.saved-address-card svg {
  width: 18px;
  height: 18px;
  color: var(--brand-600);
}
.saved-address-card strong,
.saved-address-card span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-address-card strong { font-size: .86rem; }
.saved-address-card span { font-size: .74rem; color: var(--text-secondary); }
.toggle-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  font-size: .88rem;
  font-weight: 700;
}
.toggle-line input { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 380px) {
  .address-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.settings-list { display: flex; flex-direction: column; }
.settings-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-primary);
  text-decoration: none;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.settings-list-item:last-child { border-bottom: none; }
.settings-list-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.settings-list-item-label { flex: 1; font-size: 0.92rem; font-weight: 500; }
.settings-list-item-chevron { color: var(--text-secondary); flex-shrink: 0; transform: rotate(-90deg); }

/* ─────────────────── Encabezado de perfil (estilo Uber) ───────────────────
   Tarjeta grande de foto + nombre + calificación arriba del todo en las
   pantallas de perfil (cliente/comercio y conductor) — antes eran solo
   campos de formulario sin ninguna jerarquía visual (ver reporte: "el
   perfil de cliente/driver está muy básico... lo ideal es que sea similar
   a [Uber] para que sea familiar"). Reutiliza .settings-list/-item (ya
   existía, ver receipt.php) para los accesos rápidos debajo. */
.profile-header-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.profile-header-avatar {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-full);
  background: var(--bg-fill);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid var(--hairline);
}
.profile-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-header-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-header-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 2px;
}
.profile-header-rating svg { color: var(--warning-solid); width: 14px; height: 14px; }

.profile-account-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profile-account-type-card {
  min-height: 92px;
  border: 1px solid rgba(203, 213, 225, .95);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-primary);
  padding: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.profile-account-type-card span:last-child {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.35;
}
.profile-account-type-card.is-selected {
  border-color: rgba(22, 76, 182, .45);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px rgba(22, 76, 182, .18);
}
.profile-account-type-card.is-selected span:first-child { color: var(--brand-700); }

@media (max-width: 380px) {
  .profile-account-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.profile-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.profile-shortcut-card {
  min-height: 112px;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-weight: 800;
  color: var(--text-primary);
  text-decoration: none;
  padding: 16px 10px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.profile-main-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.profile-main-column {
  display: grid;
  gap: 16px;
  align-content: start;
}
.profile-main-column > .max-w-md {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0 !important;
}
.profile-docs-card {
  border-color: rgba(37, 99, 235, .18);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.achievements-list {
  display: grid;
  gap: 12px;
}
.achievement-progress-row.is-complete .achievement-progress-bar > div {
  background: #16a34a !important;
}
.achievement-complete-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #dcfce7;
  color: #15803d;
  flex-shrink: 0;
}
.achievement-progress-help {
  margin-top: 6px;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--text-secondary);
}
.achievements-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--brand-700);
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
}
.text-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--brand-700);
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.text-link:hover { color: var(--brand-800); text-decoration: underline; }
.text-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }
.local-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: .86rem;
  font-weight: 700;
}
.payout-pending-head {
  display: grid;
  gap: 16px;
  align-items: center;
}
.payout-pending-amount {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}
.payout-pending-amount strong {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--text-primary);
}
.payout-pending-amount span {
  color: var(--text-secondary);
  font-size: .9rem;
  overflow-wrap: anywhere;
}
.payout-period-deliveries {
  display: grid;
  gap: 10px;
}
.payout-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.payout-proof-frame img {
  max-height: 300px;
}
@media (min-width: 900px) {
  .profile-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .payout-pending-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .payout-pending-amount {
    justify-items: end;
    text-align: right;
  }
  .payout-period-deliveries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 899px) {
  .payout-pending-head {
    align-items: stretch;
    text-align: center;
  }
  .payout-pending-amount {
    justify-items: center;
    text-align: center;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: #f8fafc;
    border: 1px solid rgba(203, 213, 225, .72);
  }
}
.profile-shortcut-card:hover,
.profile-shortcut-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .28);
  box-shadow: 0 16px 30px rgba(22, 76, 182, .12), inset 0 1px 0 rgba(255,255,255,.9);
}
.profile-shortcut-card .settings-list-item-icon {
  margin: 0;
  width: 38px;
  height: 38px;
  background: #eef4ff;
  color: var(--brand-600);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.profile-shortcut-card {
  width: 100%;
  border: 1px solid var(--hairline);
  cursor: pointer;
  font: inherit;
}
.sheet-profile-edit .vui-sheet-body > .card,
.sheet-profile-edit #client-profile-editor-source,
.sheet-profile-edit .vui-sheet-body [data-driver-contact-editor],
.sheet-profile-edit .vui-sheet-body [data-driver-docs-editor] {
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.sheet-profile-edit .vui-sheet-body {
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
.sheet-profile-edit form > .btn[type="submit"],
.sheet-profile-edit #upload-all-docs {
  display: none;
}
.vui-sheet-primary.is-danger {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 6px 14px rgba(220, 38, 38, .22);
}
.vui-sheet-primary.is-danger:hover { background: #b91c1c; }
.deactivation-code-box {
  display: flex;
  justify-content: center;
  padding: 14px 16px;
  margin: 0 0 12px;
  border-radius: var(--radius-lg);
  background: #fff7ed;
  border: 1px solid rgba(234, 88, 12, .22);
  color: #9a3412;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: .16em;
  user-select: none;
  -webkit-user-select: none;
}
.deactivation-code-box span {
  pointer-events: none;
}
.deactivation-code-inputs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.deactivation-code-inputs input {
  height: 48px;
  border: 1.5px solid rgba(148, 163, 184, .72);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
  background: #f8fafc;
  color: var(--text-primary);
}
.deactivation-code-inputs input:focus {
  outline: 2px solid rgba(22, 76, 182, .22);
  border-color: rgba(22, 76, 182, .45);
  background: #fff;
}

/* Fila de conectar/desconectar del inicio del conductor — TODO el
   <button> es la fila completa (ícono + texto de estado + switch visual
   a la derecha), no solo el switch, para que siga siendo grande y fácil
   de tocar (ver reporte original: "un switch de on/off... en el centro y
   en algo grande"). Antes era un botón de un solo color que NO se veía
   como un switch (ver reporte: "quiero un switch moderno tipo on/off no
   un botón simple") — ahora .ui-switch (pista + perilla) es el que
   realmente parece un interruptor; el resto de la fila solo cambia de
   color de acento (rojo apagado / azul de marca conectado, ver reporte
   original: "se pinta de color primario del sistema al estar activo y se
   cambia de color al estar desconectado puede ser color rojo"). */
.driver-connect-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(239, 68, 68, .18);
  border-left: 4px solid var(--danger-solid);
  background: linear-gradient(90deg, rgba(254, 242, 242, .78), rgba(255,255,255,.9));
  cursor: pointer;
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.driver-connect-row[data-online="1"] {
  border-color: rgba(22, 76, 182, .18);
  border-left-color: var(--brand-600);
  background: linear-gradient(90deg, rgba(239,246,255,.85), rgba(255,255,255,.9));
}
.driver-connect-row:active { transform: scale(0.99); }
.driver-connect-row:disabled { opacity: 0.6; cursor: not-allowed; }
.driver-connect-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger-bg);
  color: var(--danger-fg);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.driver-connect-row[data-online="1"] .driver-connect-icon {
  background: var(--info-bg);
  color: var(--brand-700);
}
.driver-connect-text { flex: 1; min-width: 0; }
.driver-connect-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.driver-connect-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Switch moderno reutilizable (pista + perilla) — usado aquí y en el
   toggle de nombres del panel de monitoreo (ver admin/monitor.php). */
.ui-switch {
  flex-shrink: 0;
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--danger-solid);
  transition: background var(--dur-base) var(--ease-out);
}
.driver-connect-row[data-online="1"] .ui-switch,
.ui-switch.is-on {
  background: var(--brand-600);
}
.ui-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  transition: transform var(--dur-base) var(--ease-out);
}
.driver-connect-row[data-online="1"] .ui-switch-thumb,
.ui-switch.is-on .ui-switch-thumb {
  transform: translateX(22px);
}

/* Tarjetas pequeñas de métricas del dashboard (inicio de cada rol) —
   antes usaban "grid grid-cols-2 gap-3", una clase que nunca existió en
   este app.css a mano (ver comentario al inicio del archivo — sustituto
   manual de Tailwind mientras no se compila el real), así que las
   tarjetas SIEMPRE caían en una sola columna de ancho completo, una
   debajo de otra, incluso en pantallas grandes (ver reporte: "las cards
   de métricas súper horribles ocupando todo el ancho en pantallas
   grandes una abajo de otra todo feo"). auto-fit con minmax deja que
   quepan varias tarjetas pequeñas y centradas por fila en pantallas
   anchas sin tocar nada más; el media query de abajo fuerza una sola
   columna en móvil (ver reporte: "para vistas móviles... si una abajo de
   otra pero igual bien bonitas con texto centrado y su icono"). */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.metric-card {
  min-height: 116px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.metric-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--info-bg);
  color: var(--brand-700);
}
.metric-card-icon-danger { background: var(--danger-bg); color: var(--danger-fg); }
.metric-card-value { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.metric-card-label { font-size: 0.72rem; color: var(--text-secondary); }
.active-shipment-card {
  overflow: hidden;
}
.active-shipment-summary {
  padding: 18px 22px 16px;
}
.active-shipment-map {
  height: 178px;
  border-radius: 0;
  border-top: 1px solid var(--hairline);
}
/* Carrusel de envíos activos en el inicio del cliente — solo aparece
   cuando hay MÁS de un envío en curso a la vez (ver
   Shipment::allActiveForClient()); con uno solo se usa la tarjeta simple
   de siempre, sin este envoltorio. scroll-snap nativo, sin JS: cada
   tarjeta ocupa casi todo el ancho visible con un adelanto de la
   siguiente, para que quede claro que se puede deslizar (ver reporte:
   "mostrar todos utilizando tarjetas deslizantes izquierda/derecha,
   idénticas entre sí pero con sus respectivos datos, mapa y acciones"). */
.active-shipments-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
}
.active-shipments-carousel-item {
  flex: 0 0 88%;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .active-shipments-carousel-item {
    flex-basis: 360px;
  }
}
@media (max-width: 520px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .metric-card {
    min-height: 112px;
    padding: 14px 8px;
  }
  .metric-card-icon {
    width: 36px;
    height: 36px;
  }
  .metric-card-value {
    font-size: 1.22rem;
  }
  .metric-card-label {
    font-size: 0.68rem;
    line-height: 1.25;
  }
  .active-shipment-summary {
    padding: 16px 18px 14px;
  }
  .active-shipment-map {
    height: 164px;
  }
  .doc-row .metric-card,
  .driver-wallet-period-card .metric-card,
  .wallet-period-card .metric-card {
    min-height: auto;
    padding: 10px 8px;
  }
  .doc-row .grid .metric-card {
    justify-content: flex-start;
  }
  .vehicle-option-card {
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
  }
  .payment-payer-grid {
    grid-template-columns: 1fr;
  }
  .vehicle-option-icon {
    width: 38px;
    height: 38px;
  }
  .shipment-surcharge-note {
    display: inline-block;
    max-width: 100%;
  }
}

/* Pantalla completa de perfil público (cliente o conductor, mismo
   componente para ambos — ver ProfileController::fullProfile() y 5.2,
   imagen 5): foto de portada/fondo + foto de perfil centrada superpuesta.
   No hay foto de portada real en los datos (no se captura esa foto en
   ningún lado todavía) — se usa un degradado de marca como fondo, igual
   para todos, en vez de bloquear esta feature a que primero exista un
   flujo de subida de portada. */
.public-profile-cover {
  height: 120px;
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  background: linear-gradient(135deg, var(--brand-600, #2563eb), var(--brand-800, #1e3a8a));
  position: relative;
}
.public-profile-header-card {
  padding-top: 0;
  overflow: visible;
}
.public-profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background: var(--bg-fill);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 4px solid var(--surface, #fff);
  margin: -52px auto 8px;
  position: relative;
  z-index: 1;
}
.public-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Galardones/logros — mismas .metric-card de las tarjetas de métricas del
   dashboard, reutilizadas tal cual para no crear un componente nuevo
   (ver reporte: "galardones... tarjetas pequeñas con ícono y nombre,
   ejemplo 400 viajes de 5 estrellas"). */
.achievement-card { min-height: 96px; }
.achievement-card .metric-card-icon { background: var(--warning-bg); color: var(--warning-fg); }

/* Slider horizontal de reseñas (10 más recientes) — mismo mecanismo de
   scroll-snap sin JS que .active-shipments-carousel, tarjetas NO
   clickeables (ver 5.2, imagen 5: "sin acción al hacer click"). */
.reviews-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
.review-slide-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 118px;
}
@media (min-width: 640px) {
  .review-slide-card {
    flex-basis: 100%;
  }
}

.public-profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.public-profile-metrics .metric-card {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
}
.public-profile-metrics .metric-card-icon { grid-area: auto; }
.public-profile-metrics .metric-card-value {
  grid-area: auto;
  font-size: clamp(.88rem, 3.5vw, 1.25rem);
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.public-profile-metrics .metric-card-label {
  grid-area: auto;
  font-size: clamp(.62rem, 2.4vw, .76rem);
  line-height: 1.15;
  max-width: 100%;
}
.premium-client-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  color: #92400e;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 48%, #fff7ed 100%);
  border: 1px solid rgba(217, 119, 6, .28);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75) inset, 0 6px 16px rgba(217,119,6,.16);
  font-size: .68rem;
  font-weight: 900;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.premium-client-badge svg {
  width: 13px;
  height: 13px;
}
.premium-client-badge::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -45%;
  width: 38%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  animation: premium-sheen 2.6s ease-in-out infinite;
}
.premium-client-name {
  display: inline-block;
  color: #a16207;
  background: linear-gradient(100deg, #92400e 0%, #d97706 32%, #facc15 52%, #b45309 72%, #78350f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
}
.premium-client-name::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 28%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation: premium-sheen 2.8s ease-in-out infinite;
}
@keyframes premium-sheen {
  0%, 45% { left: -45%; }
  100% { left: 120%; }
}
.summary-achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.summary-achievement-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius-md);
  background: #f8fafc;
  border: 1px solid rgba(203, 213, 225, .72);
}
.summary-achievement-card.is-premium-achievement,
.achievement-card.is-premium-achievement {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 42%, #fde68a 100%);
  border-color: rgba(217, 119, 6, .32);
  box-shadow: 0 12px 28px rgba(217, 119, 6, .13), inset 0 1px 0 rgba(255,255,255,.84);
}
.summary-achievement-card.is-premium-achievement .metric-card-icon,
.achievement-card.is-premium-achievement .metric-card-icon {
  background: rgba(255, 255, 255, .72);
  color: #b45309;
}
.summary-achievement-card .metric-card-icon {
  width: 34px;
  height: 34px;
}
.summary-achievement-title {
  font-size: .76rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
}
.summary-achievement-level {
  font-size: .68rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.driver-safety-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.driver-safety-actions .btn {
  width: 100%;
  justify-content: center;
}

.safety-tips-modal {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.safety-tips-text {
  margin: 0;
  max-width: 280px;
  color: var(--text-primary);
  line-height: 1.45;
}
.safety-tips-refresh {
  width: 46px;
  min-width: 46px;
  padding: 0;
  border-radius: var(--radius-md);
}
.vui-modal-actions.has-safety-tip-refresh {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
}

.account-countdown-card {
  border-radius: var(--radius-lg);
  background: var(--brand-50);
  border: 1px solid rgba(22, 76, 182, .16);
  padding: 16px;
}
.account-countdown-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--brand-700);
  margin-top: 4px;
}

/* Aviso visual sutil mientras un directorio de admin espera la
   respuesta AJAX de una búsqueda/filtro/paginación (ver
   VoltUI.initLiveSearch() en ui.js) — no bloquea la interacción, solo
   atenúa el contenido viejo mientras llega el nuevo. */
.is-loading-list { opacity: 0.55; transition: opacity var(--dur-fast) var(--ease-out); pointer-events: none; }

/* Tablas operativas de admin: densas, escaneables y sin convertir cada
   registro en una tarjeta grande. */
.admin-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: middle;
}
.admin-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-fill);
  letter-spacing: 0;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: rgba(15, 23, 42, 0.025); }
body.theme-dark .table-wrap,
body.theme-dark .admin-table tr {
  background: var(--bg-surface);
  border-color: var(--hairline);
}
body.theme-dark .admin-table th {
  background: var(--bg-fill);
  color: var(--text-secondary);
}
body.theme-dark .admin-table td {
  border-color: var(--hairline);
}
body.theme-dark .admin-table tbody tr:hover { background: rgba(148, 163, 184, 0.08); }
body.theme-dark .choice-card {
  background: var(--bg-fill) !important;
  border-color: var(--hairline) !important;
  color: var(--text-primary) !important;
}
body.theme-dark .choice-card.is-selected {
  background: rgba(37, 99, 235, 0.16) !important;
  border-color: rgba(96, 165, 250, 0.85) !important;
}

/* ───────────────────────── Afinado de modo oscuro cliente/driver ─────────────────────────
   Esta capa corrige componentes reutilizables que tenían fondos blancos
   o hover claro quemados en vistas móviles: accesos rápidos, cards
   seleccionables, resumen de envío, VoltChat, notificaciones, billetera,
   recibos y botones secundarios dentro de sheets/modales. */
body.theme-dark .btn-secondary,
body.theme-dark .btn-tinted {
  background: rgba(37, 99, 235, .18) !important;
  color: #bfdbfe !important;
  border: 1px solid rgba(96, 165, 250, .24) !important;
}
body.theme-dark .btn-secondary:hover,
body.theme-dark .btn-tinted:hover {
  background: rgba(37, 99, 235, .28) !important;
  color: #dbeafe !important;
}
body.theme-dark .btn-danger-tinted,
body.theme-dark .btn-danger-soft,
body.theme-dark #shipment-details-mount .btn-danger-soft {
  background: rgba(239, 68, 68, .14) !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, .30) !important;
}
body.theme-dark .btn-danger-tinted:hover,
body.theme-dark .btn-danger-soft:hover,
body.theme-dark #shipment-details-mount .btn-danger-soft:hover {
  background: rgba(239, 68, 68, .22) !important;
  color: #fee2e2 !important;
}
body.theme-dark .quick-action-card,
body.theme-dark .profile-shortcut-card,
body.theme-dark .vehicle-option-card,
body.theme-dark .vehicle-option-grid .vehicle-option-card,
body.theme-dark .address-type-card,
body.theme-dark .saved-address-card,
body.theme-dark .profile-account-type-card,
body.theme-dark .payment-split-toggle,
body.theme-dark .shipment-summary-item,
body.theme-dark .wallet-proof-preview,
body.theme-dark .promo-visit-card,
body.theme-dark .promo-visit-card p,
body.theme-dark .promo-visit-card .card,
body.theme-dark .ad-detail-card {
  background: var(--bg-fill) !important;
  color: var(--text-primary) !important;
  border-color: var(--hairline) !important;
  box-shadow: none !important;
}
body.theme-dark .quick-action-card:hover,
body.theme-dark .profile-shortcut-card:hover,
body.theme-dark .vehicle-option-card:hover,
body.theme-dark .vehicle-option-card.is-selected,
body.theme-dark .address-type-card:hover,
body.theme-dark .saved-address-card:hover,
body.theme-dark .address-type-card.is-selected,
body.theme-dark .saved-address-card.is-selected,
body.theme-dark .profile-account-type-card:hover,
body.theme-dark .profile-account-type-card.is-selected {
  background: rgba(37, 99, 235, .16) !important;
  border-color: rgba(96, 165, 250, .58) !important;
}
body.theme-dark .quick-action-card *,
body.theme-dark .profile-shortcut-card *,
body.theme-dark .shipment-summary-item *,
body.theme-dark .promo-visit-card *,
body.theme-dark .ad-detail-card * {
  color: inherit;
}
body.theme-dark .quick-action-card p,
body.theme-dark .quick-action-card small,
body.theme-dark .profile-shortcut-card p,
body.theme-dark .shipment-summary-note,
body.theme-dark .shipment-summary-label,
body.theme-dark .saved-address-card span,
body.theme-dark .profile-account-type-card span:last-child {
  color: var(--text-secondary) !important;
}
body.theme-dark .vehicle-option-icon,
body.theme-dark .settings-list-item-icon,
body.theme-dark .order-item-qty,
body.theme-dark .trip-driver-avatar {
  background: rgba(37, 99, 235, .16) !important;
  color: #93c5fd !important;
}
body.theme-dark .price-tier-premium-card {
  background: linear-gradient(135deg, #78350f 0%, #92400e 48%, #451a03 100%) !important;
  border-color: rgba(251, 191, 36, .48) !important;
  color: #fffbeb !important;
}
body.theme-dark .price-tier-premium-card *,
body.theme-dark .price-tier-premium-card .text-slate-800,
body.theme-dark .price-tier-premium-card .text-slate-900 {
  color: #fffbeb !important;
}
body.theme-dark .price-tier-premium-card .text-slate-500,
body.theme-dark .price-tier-premium-card .text-slate-600 {
  color: #fde68a !important;
}
body.theme-dark .slide-action {
  background: rgba(37, 99, 235, .16) !important;
  color: #bfdbfe !important;
  border-color: rgba(96, 165, 250, .28) !important;
}
body.theme-dark .slide-action:not(:disabled):hover {
  background: rgba(37, 99, 235, .24) !important;
  color: #dbeafe !important;
}
body.theme-dark .slide-action-label { color: #bfdbfe; }
body.theme-dark .slide-action-knob {
  background: #eaf1ff;
  color: var(--brand-700);
}
body.theme-dark .chat-bubble {
  background: var(--bg-fill) !important;
  color: var(--text-primary) !important;
}
body.theme-dark .chat-bubble-mine {
  background: var(--brand-600) !important;
  color: #fff !important;
}
body.theme-dark .help-option-btn {
  background: rgba(37, 99, 235, .12) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, .42) !important;
}
body.theme-dark .help-option-btn:hover {
  background: rgba(37, 99, 235, .24) !important;
  color: #dbeafe !important;
}
body.theme-dark .notif-tab.is-active {
  background: rgba(37, 99, 235, .18) !important;
  color: #bfdbfe !important;
}
body.theme-dark .notif-tab em,
body.theme-dark .notif-tab.is-active em { color: #dbeafe; }
body.theme-dark .notif-item-nested {
  background: rgba(15, 23, 42, .46) !important;
  border-color: rgba(148, 163, 184, .16) !important;
}
body.theme-dark .wallet-proof-preview img {
  background: #0f172a !important;
}
body.theme-dark .floating-icon-btn-logo img,
body.theme-dark .app-header-logo,
body.theme-dark .public-landing-logo {
  background: rgba(255, 255, 255, .92);
  border-radius: 14px;
  padding: 3px;
}
@media (max-width: 720px) {
  .admin-filter-bar,
  #admin-search-form {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch;
    width: 100%;
  }
  .admin-filter-bar .field,
  .admin-filter-bar .input,
  .admin-filter-bar .btn,
  .admin-filter-bar select,
  .admin-filter-bar input,
  #admin-search-form .input,
  #admin-search-form .btn,
  #admin-search-form select,
  #admin-search-form input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .table-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }
  .card[style*="overflow-x"] {
    overflow-x: visible !important;
  }
  .admin-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  .admin-table thead {
    display: none;
  }
  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }
  .admin-table tr {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .admin-table td {
    border-bottom: 1px solid var(--hairline);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .admin-table td:last-child {
    border-bottom: 0;
  }
  .admin-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .admin-table td:empty {
    display: none;
  }
}

.dossier-sections > .card h3 {
  cursor: pointer;
  justify-content: space-between;
  user-select: none;
}
.dossier-sections > .card.is-collapsed > :not(h3) { display: none !important; }
.dossier-toggle-icon {
  margin-left: auto;
  color: var(--text-secondary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.dossier-sections > .card.is-collapsed .dossier-toggle-icon { transform: rotate(-90deg); }
.dossier-actions {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.dossier-metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.dossier-metric-grid .card {
  min-height: 92px;
  justify-content: center;
}
.login-log-list {
  display: grid;
  gap: 8px;
}
.login-log-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-fill);
}
.login-log-status {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-log-item.is-success .login-log-status {
  color: var(--success-fg);
  background: var(--success-bg);
}
.login-log-item.is-failed .login-log-status {
  color: var(--danger-fg);
  background: var(--danger-bg);
}
.login-log-main {
  min-width: 0;
}
.login-log-top,
.login-log-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.login-log-result {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.login-log-date,
.login-log-meta,
.login-log-agent {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.login-log-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.login-log-agent {
  margin-top: 5px;
}
.login-log-agent summary {
  cursor: pointer;
  color: var(--brand-700);
}
.login-log-agent code {
  display: block;
  margin-top: 5px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  white-space: normal;
  overflow-wrap: anywhere;
}
.driver-device-lock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.driver-device-lock-backdrop.is-visible { opacity: 1; }
.driver-device-lock {
  width: min(460px, 100%);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  padding: 24px;
  text-align: center;
}
.driver-device-lock-icon,
.orders-unavailable-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warning-bg);
  color: var(--warning-fg);
  margin-bottom: 12px;
}
.driver-device-lock h2,
.orders-unavailable h3 {
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.driver-device-lock p,
.orders-unavailable p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.45;
}
.driver-device-lock-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.driver-device-lock-actions.is-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.orders-unavailable {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 24px;
}

.shipment-wizard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.shipment-wizard-step {
  min-height: 58px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 650;
}
.shipment-wizard-step.is-active {
  border-color: var(--brand-600);
  color: var(--brand-700);
  background: var(--brand-50);
}
.shipment-wizard-step.is-complete {
  color: var(--success-fg);
  background: var(--success-bg);
}
.shipment-wizard-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.72);
}
.shipment-surcharge-note {
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning-fg);
  font-size: 0.74rem;
  font-weight: 650;
}
.shipment-confirm-summary {
  background:
    linear-gradient(135deg, rgba(14, 79, 184, .06), rgba(255, 255, 255, 0) 42%),
    var(--bg-surface);
}
.shipment-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.shipment-summary-map {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-fill);
  margin-bottom: 12px;
}
.shipment-summary-map .leaflet-container {
  font-family: inherit;
}
.shipment-summary-marker {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .75rem;
  font-weight: 850;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .24);
}
.shipment-summary-marker.is-pickup {
  background: var(--success-fg);
}
.shipment-summary-marker.is-dropoff {
  background: var(--brand-600);
}
.map-avatar-pin {
  position: relative;
  width: 58px;
  height: 88px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.map-avatar-pin-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: linear-gradient(180deg, #8b5cf6, #1d4ed8);
  border: 4px solid #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .24);
  position: relative;
  z-index: 2;
}
.map-avatar-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 49px;
  width: 18px;
  height: 18px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 4px 3px 5px 3px;
  box-shadow: 7px 7px 12px rgba(15, 23, 42, .13);
  z-index: 1;
}
.map-avatar-pin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.map-avatar-pin-dot {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #3b82f6;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .35);
  transform: translateX(-50%);
}
.shipment-summary-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  background: rgba(255,255,255,.72);
}
.shipment-summary-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.shipment-summary-label svg { color: var(--brand-600); }
.shipment-summary-value {
  color: var(--text-main);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.35;
}
.shipment-summary-note {
  color: var(--text-soft);
  font-size: .78rem;
  line-height: 1.35;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .shipment-summary-map {
    height: 190px;
  }
  .shipment-summary-grid {
    grid-template-columns: 1fr;
  }
}

.ticket-detail-frame {
  width: 100%;
  height: min(72vh, 760px);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-page);
}
.ticket-context-card {
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(255,255,255,.88) 46%),
    var(--bg-surface);
  padding: 14px;
}
.ticket-context-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ticket-context-kicker {
  color: var(--brand-700);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.ticket-context-head h3 {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.25;
}
.ticket-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ticket-context-grid > div {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.72);
  padding: 10px;
  min-width: 0;
}
.ticket-context-grid span,
.ticket-context-grid small {
  display: block;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.3;
}
.ticket-context-grid strong {
  display: block;
  color: var(--text-primary);
  font-size: .86rem;
  line-height: 1.3;
  margin: 2px 0;
  overflow-wrap: anywhere;
}
.ticket-context-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ticket-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ticket-admin-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .08);
  color: var(--brand-700);
  font-size: .74rem;
  font-weight: 700;
}
.ticket-admin-tools {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .72);
}
.ticket-admin-tool {
  display: grid;
  gap: 6px;
}
.ticket-admin-tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.ticket-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.ticket-rating-pill svg {
  fill: currentColor;
  stroke: currentColor;
}
.ticket-satisfaction-note {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .22);
  border-radius: var(--radius-md);
  background: #fffbeb;
  color: #92400e;
}
@media (max-width: 640px) {
  .ticket-admin-tool-row {
    grid-template-columns: 1fr;
  }
}
.ticket-satisfaction-note span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 800;
}
.ticket-satisfaction-note p {
  margin: 0;
  color: #78350f;
  font-size: .86rem;
  line-height: 1.45;
}
.ticket-related-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .66);
}
.ticket-related-list > span {
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.ticket-related-list button {
  border: 0;
  background: transparent;
  color: var(--brand-700);
  font-size: .78rem;
  font-weight: 700;
  text-align: left;
  padding: 4px 0;
  cursor: pointer;
}
.ticket-related-list button:hover {
  text-decoration: underline;
}
.quick-reply-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 8px;
  scrollbar-width: none;
}
.quick-reply-list::-webkit-scrollbar { display: none; }
.quick-reply-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 999px;
  background: rgba(37, 99, 235, .08);
  color: var(--brand-700);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
  padding: 8px 10px;
  white-space: nowrap;
  cursor: pointer;
}
.quick-reply-chip:hover {
  background: rgba(37, 99, 235, .13);
}
.ticket-satisfaction-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.72);
}
.ticket-rating-row {
  display: flex;
  gap: 6px;
}
.ticket-rating-row label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.ticket-rating-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ticket-rating-row span {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background: var(--bg-fill);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ticket-rating-row label:hover span,
.ticket-rating-row label.is-filled span,
.ticket-rating-row input:checked + span {
  color: #d97706;
  background: #fef3c7;
  border-color: #fde68a;
}
.ticket-rating-row label:hover span {
  transform: translateY(-1px);
}

body.theme-dark .ticket-satisfaction-form {
  background: rgba(15, 23, 42, .86);
  border-color: rgba(148, 163, 184, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.theme-dark .ticket-satisfaction-form .label {
  color: #dbeafe;
}

body.theme-dark .ticket-rating-row span {
  background: rgba(30, 41, 59, .92);
  border-color: rgba(148, 163, 184, .35);
  color: #93a4bb;
}

body.theme-dark .ticket-rating-row label:hover span,
body.theme-dark .ticket-rating-row label.is-filled span,
body.theme-dark .ticket-rating-row input:checked + span {
  color: #fbbf24;
  background: rgba(146, 64, 14, .24);
  border-color: rgba(251, 191, 36, .55);
}

body.theme-dark .ticket-satisfaction-form textarea.input {
  background: rgba(15, 23, 42, .88);
  color: #e5eefb;
  border-color: rgba(148, 163, 184, .35);
}

body.theme-dark .ticket-satisfaction-form textarea.input::placeholder {
  color: #9fb0c5;
}

body.theme-dark .ticket-satisfaction-form .btn[disabled] {
  background: rgba(37, 99, 235, .28);
  color: rgba(219, 234, 254, .62);
  border-color: rgba(96, 165, 250, .24);
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.operator-shift-card {
  overflow: hidden;
}
.operator-shift-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.operator-shift-progress .trip-progress {
  height: 7px;
  background: var(--bg-fill);
}
.operator-shift-progress .trip-progress-step {
  min-width: 0;
  flex: none;
}
.operator-timeline {
  width: 100%;
  height: 12px;
  display: flex;
  gap: 2px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-fill);
  border: 1px solid rgba(15, 23, 42, .06);
}
.operator-timeline-segment {
  min-width: 2px;
  height: 100%;
}
.operator-timeline-online {
  background: var(--brand-600);
}
.operator-timeline-break {
  background: #f59e0b;
}
.operator-time-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-secondary);
  font-size: .8rem;
}
.operator-time-breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.74);
  border: 1px solid var(--hairline);
}
.support-action-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.support-action-user {
  min-width: min(280px, 100%);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 12px 14px;
  background: var(--bg-fill);
}
.support-action-user span,
.support-action-user small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: .78rem;
}
.support-action-user strong {
  display: block;
  margin-top: 4px;
  color: var(--text-strong);
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.support-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.support-action-card {
  display: grid;
  gap: 14px;
  align-content: start;
}
.support-action-card.is-disabled {
  opacity: .68;
}
.support-action-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--brand-600);
  background: var(--brand-50);
}
@media (max-width: 560px) {
  .form-grid-2,
  .operator-shift-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .support-action-context,
  .support-action-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 900px) {
  .vui-sheet-ticket-detail {
    width: min(920px, 94vw);
    height: calc(100vh - 80px);
  }
  .vui-sheet-ticket-detail .vui-sheet-body {
    display: flex;
    flex-direction: column;
  }
  .vui-sheet-ticket-detail .ticket-detail-frame {
    flex: 1;
    height: auto;
  }
}
@media (max-width: 560px) {
  .ticket-context-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-panel {
  overflow: hidden;
}
.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;
}
.public-landing-hero {
  position: relative;
  min-height: calc(100vh - 170px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  align-items: center;
  gap: 34px;
  padding: clamp(28px, 5vw, 64px) 0;
}
.public-landing-hero::before {
  content: "";
  position: absolute;
  inset: 72px max(8px, calc((100vw - 1040px) / 2)) auto auto;
  width: min(38vw, 420px);
  height: min(38vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.12), rgba(37,99,235,.06) 44%, transparent 68%);
  pointer-events: none;
}
.public-landing-copy {
  display: grid;
  gap: 18px;
  align-content: center;
  position: relative;
  z-index: 2;
}
.public-landing-logo {
  width: clamp(190px, 24vw, 290px);
  height: auto;
}
.public-landing-copy h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: .9;
  font-weight: 900;
  letter-spacing: 0;
}
.public-landing-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.55;
}
.public-landing-actions,
.public-landing-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.public-landing-proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 700;
}
.public-landing-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}
.public-landing-metrics div {
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.26);
  border-radius: 18px;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
}
.public-landing-metrics strong,
.public-landing-metrics span {
  display: block;
}
.public-landing-metrics strong {
  color: var(--text-primary);
  font-size: 1.18rem;
  line-height: 1;
}
.public-landing-metrics span {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: .76rem;
  line-height: 1.28;
}
.public-landing-visual {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.public-phone-card {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 9 / 14;
  overflow: hidden;
  border-radius: 36px;
  background: #e8eef6;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 28px 70px rgba(15,23,42,.20);
}
.public-phone-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.72);
  pointer-events: none;
  z-index: 2;
}
.public-phone-card::after {
  content: "";
  position: absolute;
  left: 36%;
  right: 36%;
  top: 14px;
  height: 4px;
  border-radius: 999px;
  background: rgba(15,23,42,.16);
  z-index: 3;
}
.public-map-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  opacity: .8;
}
.public-map-grid span {
  border: 1px solid rgba(37,99,235,.08);
  background:
    linear-gradient(90deg, rgba(255,255,255,.35), transparent),
    repeating-linear-gradient(28deg, rgba(37,99,235,.10) 0 2px, transparent 2px 28px);
}
.public-route-line {
  position: absolute;
  left: 18%;
  top: 24%;
  width: 64%;
  height: 42%;
  border: 5px solid var(--brand-600);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 120px 0 0;
  transform: rotate(10deg);
  opacity: .92;
}
.public-pin {
  position: absolute;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--brand-700);
  box-shadow: var(--shadow-md);
}
.public-pin-a { left: 15%; top: 22%; }
.public-pin-b { right: 16%; top: 58%; }
.public-phone-card img {
  position: absolute;
  z-index: 4;
  width: 132px;
  height: 132px;
  object-fit: contain;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 16px 22px rgba(15,23,42,.22));
  animation: publicRiderFloat 4.5s ease-in-out infinite;
}
.public-floating-pill {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.76);
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(15,23,42,.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.public-floating-pill svg { color: var(--brand-700); }
.public-floating-pill-a {
  left: -24px;
  top: 18%;
  animation: publicPillFloat 5.2s ease-in-out infinite;
}
.public-floating-pill-b {
  right: -20px;
  top: 34%;
  animation: publicPillFloat 5.2s ease-in-out .9s infinite;
}
.public-trip-panel {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
}
.public-trip-panel strong,
.public-trip-panel small {
  display: block;
}
.public-trip-panel strong {
  color: var(--text-primary);
  font-size: 1.05rem;
}
.public-trip-panel small {
  margin-top: 4px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.public-mini-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.public-mini-progress span {
  height: 5px;
  border-radius: 999px;
  background: rgba(37,99,235,.16);
  overflow: hidden;
}
.public-mini-progress span::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--brand-600);
}
.public-mini-progress span:nth-child(4)::before { width: 42%; }
@keyframes publicRiderFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 8px)); }
}
@keyframes publicPillFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.public-landing-section {
  padding: 34px 0;
}
.public-section-head {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.public-section-head h2,
.public-landing-band h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.05;
}
.public-section-head p,
.public-landing-band p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}
.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.public-feature-grid article {
  min-height: 210px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}
.public-feature-grid span {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
  background: var(--brand-50);
}
.public-feature-grid h3 {
  margin: 16px 0 8px;
  color: var(--text-primary);
  font-size: 1.1rem;
}
.public-feature-grid p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .92rem;
  line-height: 1.5;
}
.public-flow-section,
.public-split-section,
.public-trust-section {
  padding: clamp(34px, 5vw, 62px) 0;
}
.public-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  counter-reset: flow;
}
.public-flow-grid article {
  position: relative;
  min-height: 180px;
  padding: 22px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.74));
  box-shadow: 0 16px 34px rgba(15,23,42,.06);
  overflow: hidden;
}
.public-flow-grid article::after {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  right: -26px;
  bottom: -30px;
  border-radius: 50%;
  background: rgba(16,185,129,.12);
}
.public-flow-grid span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #111827;
  font-size: .78rem;
  font-weight: 900;
}
.public-flow-grid h3 {
  margin: 18px 0 8px;
  color: var(--text-primary);
  font-size: 1.08rem;
}
.public-flow-grid p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: .9rem;
}
.public-split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .8fr);
  align-items: center;
  gap: clamp(20px, 5vw, 58px);
}
.public-split-section-alt {
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.05fr);
}
.public-split-copy {
  display: grid;
  gap: 14px;
}
.public-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(16,185,129,.11);
  color: #047857;
  font-size: .78rem;
  font-weight: 850;
}
.public-split-copy h2,
.public-trust-section h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.65rem, 4.8vw, 3.1rem);
  line-height: 1.02;
}
.public-split-copy p,
.public-trust-section p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 1rem;
}
.public-check-list {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}
.public-check-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: .92rem;
  font-weight: 700;
}
.public-check-list svg {
  flex: 0 0 auto;
  color: #059669;
}
.public-dashboard-preview {
  position: relative;
  min-height: 360px;
  border-radius: 34px;
  padding: 22px;
  background:
    linear-gradient(150deg, rgba(37,99,235,.12), rgba(255,255,255,.9) 42%, rgba(16,185,129,.10)),
    #fff;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 24px 60px rgba(15,23,42,.14);
  overflow: hidden;
}
.public-dashboard-preview::before {
  content: "";
  position: absolute;
  inset: 82px -40px auto 24px;
  height: 118px;
  border: 4px solid rgba(37,99,235,.32);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 96px 0 0;
  transform: rotate(8deg);
}
.public-preview-top {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.public-preview-top span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
}
.public-preview-card {
  position: relative;
  z-index: 2;
  margin-top: 74px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 38px rgba(15,23,42,.12);
}
.public-preview-card.is-blue {
  background: #174fc4;
  color: #fff;
}
.public-preview-card small,
.public-preview-card strong {
  display: block;
}
.public-preview-card small {
  color: inherit;
  opacity: .72;
  font-size: .76rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.public-preview-card strong {
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.25;
}
.public-preview-card.is-blue .public-mini-progress span {
  background: rgba(255,255,255,.2);
}
.public-preview-card.is-blue .public-mini-progress span::before {
  background: #fff;
}
.public-preview-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.public-preview-row div {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-sm);
}
.public-preview-row strong,
.public-preview-row span {
  display: block;
}
.public-preview-row strong {
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
}
.public-preview-row span {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 700;
}
.public-driver-preview {
  display: grid;
  align-content: center;
  gap: 16px;
}
.public-driver-orbit {
  position: relative;
  width: min(260px, 78%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(37,99,235,.12), rgba(16,185,129,.10) 48%, transparent 50%);
}
.public-driver-orbit img {
  position: absolute;
  width: 130px;
  height: 130px;
  object-fit: contain;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 22px rgba(15,23,42,.18));
  animation: publicRiderFloat 4.5s ease-in-out infinite;
}
.public-driver-orbit span {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--brand-700);
  box-shadow: 0 14px 28px rgba(15,23,42,.13);
}
.public-driver-orbit span:nth-of-type(1) { left: 10%; top: 18%; }
.public-driver-orbit span:nth-of-type(2) { right: 7%; top: 34%; color: #047857; }
.public-driver-orbit span:nth-of-type(3) { left: 44%; bottom: 4%; color: #b45309; }
.public-trust-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}
.public-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.public-trust-grid article {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}
.public-trust-grid svg {
  color: var(--brand-700);
}
.public-trust-grid strong {
  color: var(--text-primary);
  font-size: .98rem;
}
.public-trust-grid span {
  color: var(--text-secondary);
  line-height: 1.45;
  font-size: .84rem;
}
.public-advertisers-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  margin: 12px 0 clamp(30px, 5vw, 58px);
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.78)),
    radial-gradient(circle at 84% 16%, rgba(16,185,129,.20), transparent 32%);
  box-shadow: 0 24px 58px rgba(15,23,42,.10);
  overflow: hidden;
}
.public-advertisers-section::before {
  content: "";
  position: absolute;
  inset: auto 18% -90px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(245,158,11,.16);
  pointer-events: none;
}
.public-advertisers-section > * {
  position: relative;
  z-index: 1;
}
.public-advertisers-copy {
  display: grid;
  gap: 12px;
}
.public-advertisers-copy h2 {
  margin: 0;
  max-width: 660px;
  color: var(--text-primary);
  font-size: clamp(1.55rem, 4vw, 2.55rem);
  line-height: 1.04;
}
.public-advertisers-copy p {
  margin: 0;
  max-width: 680px;
  color: var(--text-secondary);
  line-height: 1.56;
}
.public-advertisers-card {
  min-height: 190px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(160deg, rgba(15,23,42,.92), rgba(30,64,175,.82)),
    radial-gradient(circle at 70% 20%, rgba(16,185,129,.32), transparent 34%);
  color: #fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
  overflow: hidden;
}
.public-advertisers-card span {
  width: max-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
  font-size: .72rem;
  font-weight: 800;
}
.public-advertisers-card strong {
  font-size: 1.3rem;
}
.public-advertisers-card p {
  max-width: 210px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: .86rem;
  line-height: 1.4;
}
.public-advertisers-card div {
  position: absolute;
  right: -34px;
  top: -24px;
  width: 122px;
  height: 122px;
  border-radius: 36px;
  background: rgba(255,255,255,.12);
  transform: rotate(18deg);
}
.public-landing-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
  padding: 24px;
  border-radius: 28px;
  background: #111827;
  color: #fff;
  box-shadow: 0 24px 58px rgba(15,23,42,.20);
  position: relative;
  overflow: hidden;
}
.public-landing-band::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(16,185,129,.22);
}
.public-landing-band h2,
.public-landing-band p {
  color: #fff;
}
.public-landing-band p {
  opacity: .78;
}
.public-landing-band > * {
  position: relative;
  z-index: 1;
}
.welcome-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-sm);
}
.welcome-strip-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-700);
  flex-shrink: 0;
}
.welcome-strip-label {
  display: block;
  font-size: .72rem;
  color: var(--text-secondary);
  margin-bottom: 1px;
}
.welcome-strip strong {
  display: block;
  color: var(--text-primary);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.email-verification-banner {
  padding-right: max(1rem, calc(env(safe-area-inset-right) + 190px));
}
.dashboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.quick-access-tile {
  min-height: 78px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.quick-access-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(22, 76, 182, .22);
  box-shadow: var(--shadow-sm);
}
.quick-access-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
  background: var(--brand-50);
}
.quick-access-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.quick-access-label {
  font-size: .92rem;
  font-weight: 750;
  color: var(--text-primary);
}
.quick-access-hint {
  font-size: .75rem;
  color: var(--text-secondary);
  line-height: 1.25;
}
.quick-access-arrow {
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.quick-access-tile:hover .quick-access-arrow {
  transform: translateX(2px);
  color: var(--brand-700);
}
.promo-panel {
  padding-bottom: 18px;
}
.promo-slider-window {
  position: relative;
  overflow: hidden;
  width: min(100%, 340px);
  margin: 0 auto;
  border-radius: 24px;
  background: #111827;
  aspect-ratio: 4 / 5;
  min-height: 0;
  max-height: min(68vh, 560px);
  touch-action: pan-y;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    0 18px 38px rgba(15, 23, 42, .18),
    0 2px 4px rgba(15, 23, 42, .10);
}
.promo-slider-window::before,
.promo-slider-window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}
.promo-slider-window::before {
  top: 0;
  height: 92px;
  background: linear-gradient(180deg, rgba(15,23,42,.58), rgba(15,23,42,0));
}
.promo-slider-window::after {
  bottom: 0;
  height: 116px;
  background: linear-gradient(0deg, rgba(15,23,42,.72), rgba(15,23,42,0));
}
.promo-story-progress {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 5px;
  pointer-events: none;
}
.promo-story-progress span {
  height: 3px;
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .34);
}
.promo-story-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, .92);
  transform: scaleX(0);
  transform-origin: left center;
}
.promo-story-progress span.is-complete i {
  transform: scaleX(1);
}
.promo-story-progress span.is-active i {
  animation: promoStoryProgress var(--promo-story-duration, 10s) linear forwards;
}
@keyframes promoStoryProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.promo-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.promo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}
.promo-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.promo-single-slide {
  display: block;
  position: relative;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.promo-slide-no-link {
  cursor: default;
}
.promo-slide-bg {
  position: absolute;
  inset: -18px;
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: blur(18px) saturate(1.08);
  transform: scale(1.08);
  opacity: .62;
}
.promo-slide .promo-slide-media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.promo-slide video {
  pointer-events: none;
}
.promo-slide-bg-video {
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  object-fit: cover;
  pointer-events: none;
}
.promo-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 48%),
    linear-gradient(180deg, rgba(15,23,42,.14), transparent 30%, rgba(15,23,42,.18));
}
.promo-slide-label {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 6;
  max-width: calc(100% - 40px);
  padding: 7px 12px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, .64);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo-tap-zone {
  position: absolute;
  top: 44px;
  bottom: 0;
  z-index: 6;
  width: 32%;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}
.promo-tap-zone-prev { left: 0; }
.promo-tap-zone-next { right: 0; }
.promo-empty-state {
  width: min(100%, 340px);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  min-height: 0;
  max-height: min(68vh, 560px);
  border: 1px dashed var(--hairline);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(22,76,182,.08), rgba(248,250,252,.92)),
    repeating-linear-gradient(45deg, rgba(22,76,182,.08) 0 1px, transparent 1px 14px);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  font-size: .86rem;
}
.promo-support-note {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.promo-visit-sheet {
  display: grid;
  gap: 14px;
}
.promo-visit-hero {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(30,41,59,.96)),
    var(--bg-fill);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-md);
}
.promo-visit-hero img,
.promo-visit-hero video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.promo-visit-hero video { pointer-events: none; }
.promo-visit-hero span {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.88);
  color: var(--text-primary);
  font-size: .75rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.promo-visit-card {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  padding: 14px;
  display: grid;
  gap: 7px;
}
.promo-visit-kicker {
  color: var(--brand-700);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.promo-visit-card h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.25;
}
.promo-visit-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .86rem;
  line-height: 1.45;
}
.promo-visit-card a {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-full);
  background: var(--brand-50);
  color: var(--brand-700);
  overflow-wrap: anywhere;
  font-weight: 750;
  text-decoration: none;
}
/* Pie del sheet de anuncio: contador de vistas (ojo) + me gusta/no me
   gusta con el rayo de marca VoltGo (ver reporte: "un botón más VoltGo
   como un rayo podría ser nuestro me gusta y un rayo con diagonal en
   el medio podría ser no me gusta"). */
.promo-reactions-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 0;
}
.promo-views-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 700;
}
.promo-reactions-spacer {
  flex: 1;
}
.promo-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.promo-reaction-btn:disabled {
  opacity: .6;
  cursor: default;
}
.promo-reaction-btn.is-active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
.promo-reaction-btn-dislike.is-active {
  background: var(--danger-600, #dc2626);
  border-color: var(--danger-600, #dc2626);
  color: #fff;
}
.announcement-thumb {
  width: 94px;
  height: 54px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--bg-fill);
}
.announcement-dimensions-note {
  margin: -4px 0 14px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: .76rem;
  line-height: 1.35;
}
.announcement-sheet-preview {
  aspect-ratio: 4 / 5;
  width: min(100%, 360px);
  min-height: 260px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-md);
  background: var(--bg-fill);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  overflow: hidden;
  margin-bottom: 14px;
}
.announcement-sheet-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  display: block;
  background: var(--bg-fill);
}
.vui-tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(15,23,42,.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.vui-tour-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.vui-tour-highlight {
  position: fixed;
  z-index: 9501;
  border-radius: 18px;
  border: 2px solid rgba(37,99,235,.95);
  box-shadow: 0 0 0 9999px rgba(15,23,42,.48), 0 18px 42px rgba(15,23,42,.22);
  opacity: 0;
  pointer-events: none;
  transition: all .18s ease;
}
.vui-tour-highlight.is-visible {
  opacity: 1;
}
.vui-tour-card {
  position: fixed;
  z-index: 9502;
  max-width: calc(100vw - 24px);
  border-radius: 22px;
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 22px 70px rgba(15,23,42,.3);
  padding: 18px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.vui-tour-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vui-tour-progress {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
}
.vui-tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #dbe4f0;
}
.vui-tour-dot.is-active {
  width: 20px;
  background: var(--brand-600);
}
.vui-tour-title {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--text-primary);
}
.vui-tour-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.45;
}
.vui-tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.vui-tour-spacer {
  flex: 1;
}
.profile-tour-reset {
  margin-top: 16px;
}
@media (max-width: 560px) {
  .public-landing-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 12px;
    gap: 20px;
  }
  .public-landing-hero::before {
    inset: 16px 10px auto auto;
    width: 220px;
    height: 220px;
  }
  .public-landing-logo {
    width: 128px;
  }
  .public-landing-copy {
    gap: 14px;
  }
  .public-landing-copy h1 {
    font-size: clamp(3.2rem, 18vw, 4.8rem);
  }
  .public-landing-actions .btn {
    flex: 1 1 150px;
  }
  .public-landing-metrics {
    grid-template-columns: 1fr;
  }
  .public-landing-metrics div {
    min-height: 0;
  }
  .public-landing-visual {
    order: -1;
  }
  .public-phone-card {
    width: min(100%, 310px);
    border-radius: 30px;
  }
  .public-floating-pill {
    font-size: .72rem;
    padding: 8px 10px;
  }
  .public-floating-pill-a { left: -2px; }
  .public-floating-pill-b { right: -2px; }
  .public-feature-grid {
    grid-template-columns: 1fr;
  }
  .public-flow-grid,
  .public-trust-grid {
    grid-template-columns: 1fr;
  }
  .public-split-section,
  .public-split-section-alt,
  .public-advertisers-section,
  .public-trust-section {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .public-split-section-alt .public-dashboard-preview {
    order: 2;
  }
  .public-flow-section,
  .public-split-section,
  .public-trust-section {
    padding: 28px 0;
  }
  .public-dashboard-preview {
    min-height: 310px;
    border-radius: 26px;
    padding: 18px;
  }
  .public-preview-card {
    margin-top: 54px;
  }
  .public-driver-orbit {
    width: min(230px, 82%);
  }
  .public-advertisers-section {
    border-radius: 24px;
    padding: 20px;
  }
  .public-advertisers-card {
    min-height: 160px;
  }
  .public-advertisers-section .btn {
    width: 100%;
  }
  .public-landing-band {
    display: grid;
    border-radius: 22px;
  }
  .email-verification-banner {
    padding-right: 1rem;
    padding-top: 74px;
  }
  .quick-access-grid {
    grid-template-columns: 1fr;
  }
  .quick-access-tile {
    min-height: 70px;
  }
  .promo-slider-window,
  .promo-empty-state {
    width: min(100%, 320px);
  }
  .promo-visit-hero { width: min(100%, 320px); }
  .vui-tour-card {
    border-radius: 18px;
    padding: 16px;
  }
  .vui-tour-highlight {
    border-radius: 14px;
  }
}

.text-success { color: var(--success-solid); }
.text-danger { color: var(--danger-solid); }
.text-warning { color: var(--warning-solid); }

/* Ajustes finales de contraste en modo oscuro para superficies que vienen
   de flujos cliente/driver/admin con fondos claros propios. */
body.theme-dark .welcome-strip,
body.theme-dark .quick-access-tile,
body.theme-dark .metric-card,
body.theme-dark .payout-pending-amount,
body.theme-dark .incident-type-card,
body.theme-dark .review-slide-card,
body.theme-dark .announcement-dimensions-note,
body.theme-dark .announcement-sheet-preview,
body.theme-dark .promo-reaction-btn {
  background: var(--bg-fill) !important;
  color: var(--text-primary) !important;
  border-color: var(--hairline) !important;
  box-shadow: none !important;
}

body.theme-dark .quick-access-tile:hover,
body.theme-dark .quick-access-tile:focus-visible,
body.theme-dark .incident-type-card:hover,
body.theme-dark .incident-type-card:focus-visible,
body.theme-dark .promo-reaction-btn:hover,
body.theme-dark .promo-reaction-btn:focus-visible {
  background: rgba(37, 99, 235, .16) !important;
  color: #dbeafe !important;
  border-color: rgba(96, 165, 250, .52) !important;
}

body.theme-dark .welcome-strip-icon,
body.theme-dark .quick-access-icon,
body.theme-dark .metric-card-icon,
body.theme-dark .incident-type-card-icon .incident-marker-icon,
body.theme-dark .trip-sheet-status-price {
  background: rgba(37, 99, 235, .18) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, .28) !important;
}

body.theme-dark .quick-access-label,
body.theme-dark .welcome-strip strong,
body.theme-dark .incident-type-card,
body.theme-dark .review-slide-card,
body.theme-dark .promo-reaction-btn svg {
  color: var(--text-primary) !important;
}

body.theme-dark .quick-access-hint,
body.theme-dark .quick-access-arrow,
body.theme-dark .welcome-strip-label,
body.theme-dark .metric-card-label,
body.theme-dark .payout-pending-amount span,
body.theme-dark .review-slide-card p,
body.theme-dark .announcement-dimensions-note {
  color: var(--text-secondary) !important;
}

body.theme-dark .payout-pending-amount {
  min-height: 82px;
  align-content: center;
  justify-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

body.theme-dark .deactivation-code-box {
  background: rgba(120, 53, 15, .34) !important;
  border-color: rgba(251, 146, 60, .34) !important;
  color: #fed7aa !important;
}

body.theme-dark .deactivation-code-inputs input {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--hairline) !important;
}

body.theme-dark .deactivation-code-inputs input:focus {
  background: var(--input-bg-hover) !important;
  border-color: rgba(96, 165, 250, .62) !important;
}

body.theme-dark .sheet-profile-edit .vui-sheet-body > .card,
body.theme-dark .sheet-profile-edit #client-profile-editor-source,
body.theme-dark .sheet-profile-edit .vui-sheet-body [data-driver-contact-editor],
body.theme-dark .sheet-profile-edit .vui-sheet-body [data-driver-docs-editor] {
  background: transparent !important;
  border-color: transparent !important;
}

body.theme-dark .trip-sheet-status-title {
  color: var(--text-primary) !important;
}

body.theme-dark .trip-sheet-status-eta,
body.theme-dark .trip-sheet-status-note {
  color: var(--text-secondary) !important;
}

body.theme-dark .trip-route-state {
  background: rgba(34, 197, 94, .18) !important;
  color: #86efac !important;
}

body.theme-dark .alert-danger {
  background: rgba(127, 29, 29, .72) !important;
  color: #fee2e2 !important;
  border: 1px solid rgba(248, 113, 113, .28);
}

body.theme-dark .trip-floating-card.alert-danger {
  background: rgba(127, 29, 29, .88) !important;
  color: #fecaca !important;
  box-shadow: 0 12px 28px rgba(127, 29, 29, .24);
}

body.theme-dark .promo-visit-card a {
  background: rgba(37, 99, 235, .20) !important;
  color: #bfdbfe !important;
  border: 1px solid rgba(96, 165, 250, .28);
}

body.theme-dark .promo-visit-hero span {
  background: rgba(15, 23, 42, .82) !important;
  color: var(--text-primary) !important;
}

body.theme-dark .promo-reaction-btn.is-active {
  background: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color: #fff !important;
}

body.theme-dark .promo-reaction-btn-dislike.is-active {
  background: var(--danger-solid) !important;
  border-color: var(--danger-solid) !important;
  color: #fff !important;
}

body.theme-dark .announcement-sheet-preview img {
  background: var(--bg-fill) !important;
}

body.theme-dark .reviews-slider {
  scrollbar-color: rgba(148, 163, 184, .55) rgba(15, 23, 42, .72);
}

body.theme-dark .incident-marker-icon,
body.theme-dark .incident-placement-pin {
  background: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(248, 113, 113, .32), 0 0 0 3px rgba(254, 226, 226, .92) !important;
}

body.theme-dark .incident-marker-icon svg,
body.theme-dark .incident-placement-pin svg,
body.theme-dark .incident-type-card-icon svg {
  color: #fff !important;
  stroke: currentColor !important;
}

body.theme-dark .incident-marker-icon.is-unverified {
  background: rgba(220, 38, 38, .20) !important;
  color: #fecaca !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 2px rgba(254, 226, 226, .72) !important;
}

body.theme-dark .shipment-wizard-step.is-active {
  background: rgba(37, 99, 235, .18) !important;
  border-color: rgba(96, 165, 250, .72) !important;
  color: #bfdbfe !important;
}

body.theme-dark .shipment-wizard-step.is-active .shipment-wizard-icon {
  background: rgba(37, 99, 235, .26) !important;
  color: #dbeafe !important;
}

body.theme-dark .shipment-wizard-step.is-complete {
  background: rgba(34, 197, 94, .16) !important;
  border-color: rgba(74, 222, 128, .42) !important;
  color: #86efac !important;
}

.order-marker-icon.is-search-pickup::before,
.order-marker-icon-radar::before,
.order-marker-icon-radar::after {
  animation: none !important;
  opacity: .38;
  transform: none !important;
}

.order-marker-icon-radar::after {
  display: none;
}

.leaflet-radar-ring {
  animation: none !important;
  stroke-dasharray: 8 10;
  stroke-opacity: .32;
  transform: none !important;
}

.leaflet-radar-ring.is-radar-mid {
  stroke-opacity: .24;
}

.leaflet-radar-ring.is-radar-outer {
  stroke-opacity: .4;
}

.map-reference-wrap,
.orders-map-wrap {
  position: relative;
}

.map-reference-note,
.map-status-badge {
  position: absolute;
  z-index: 610;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
  border: 1px solid rgba(96, 165, 250, .34);
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, .84);
  color: #dbeafe;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.map-reference-note {
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: fit-content;
  padding: 7px 10px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
}

.map-status-badge {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.map-status-badge svg {
  color: #93c5fd;
}

.map-status-badge-search::before,
.map-status-badge-search::after {
  content: "";
  flex: 0 0 auto;
  border-radius: var(--radius-full);
}

.map-status-badge-search::before {
  width: 10px;
  height: 10px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .68), 0 0 10px rgba(34, 197, 94, .62);
  animation: map-status-dot-pulse 1.45s ease-out infinite;
}

.map-status-badge-search::after {
  position: absolute;
  left: 7px;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(34, 197, 94, .78);
  box-shadow: 0 0 12px rgba(34, 197, 94, .24);
  animation: map-status-mini-radar 1.45s ease-out infinite;
  pointer-events: none;
}

@keyframes map-status-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .62), 0 0 10px rgba(34, 197, 94, .62); }
  60% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0), 0 0 12px rgba(34, 197, 94, .72); }
}

@keyframes map-status-mini-radar {
  0% { opacity: .98; transform: scale(.45); }
  100% { opacity: 0; transform: scale(1.55); }
}

.orders-map-wrap .map-status-badge {
  top: 10px;
}

body:not(.theme-dark) .map-reference-note,
body:not(.theme-dark) .map-status-badge {
  background: rgba(255, 255, 255, .92);
  color: var(--brand-700);
  border-color: rgba(22, 76, 182, .18);
}