@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;0,900;1,700;1,900&display=swap");

:root {
  --primary: #ffd700;

  --primary-rgb: 255, 215, 0;

  --bg-dark: #121212;

  --surface: rgba(255, 255, 255, 0.05);

  --text-main: #ffffff;

  --text-dim: #a0a0a0;

  --glass-border: rgba(255, 255, 255, 0.1);

  --header-logo-height: clamp(48px, 8vw, 56px);

  --modal-logo-height: clamp(80px, 15vh, 120px);

  --header-total-height: calc(70px + env(safe-area-inset-top));

  /* ── Escala Z-Index (Stacking Order Global) ── */

  --z-map: 1;

  --z-sidebar: 1110;

  --z-panel-overlay: 2000;

  --z-panel-content: 2100;

  --z-critical-alert: 9999;
}

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {
  /* Prevenir scroll elástico en iOS */

  overscroll-behavior: none;

  -webkit-overflow-scrolling: touch;
}

body {
  font-family: "Outfit", sans-serif;

  background-color: var(--bg-dark);

  color: var(--text-main);

  overflow: hidden;

  height: 100vh;

  /* PWA Optimizations */

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  user-select: none;

  /* iOS Touch Optimizations - Elimina delay de 300ms */

  touch-action: manipulation;

  -ms-touch-action: manipulation;

  /* CAMUFLAJE NATIVO: Eliminar rebote elástico (rubber-banding) en iOS */

  overscroll-behavior: none;

  overscroll-behavior-y: none;

  overscroll-behavior-x: none;

  /* Prevenir pull-to-refresh en iOS Safari */

  position: fixed;

  width: 100%;
}

/* v16.35: Bloquear touch completamente cuando modal está abierto */

body.modal-open {
  touch-action: none !important;

  overflow: hidden !important;

  position: fixed !important;

  width: 100% !important;

  height: 100% !important;
}

#app {
  display: flex;

  flex-direction: column;

  height: 100vh;

  /* Reforzar prevención de scroll elástico */

  overscroll-behavior: none;
}

.app-header {
  display: flex;

  /* Changed from Grid to Flex for easier centering */

  justify-content: space-between;

  align-items: center;

  padding: calc(10px + env(safe-area-inset-top)) 15px 10px;

  background: rgba(12, 12, 12, 0.95);

  /* backdrop-filter: blur(20px); GPU-PURGE v30.23 */

  z-index: 1000; /* Superpone a capas flotantes internas */

  border-bottom: 1px solid var(--glass-border);

  position: relative; /* CRITICAL: Must be relative to contain absolute brand wrapper */

  top: 0;

  height: auto;

  min-height: var(--header-total-height);

  /* Slightly taller for stack */

  flex-shrink: 0;

  /* v5.3.7: Hardware Isolation para iOS */

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  /* v5.4.7: CSS Containment para evitar repaint contagioso */

  contain: layout style;
}

/* Centered Brand Container (Removed Absolute logic since wrapper handles it) */

.brand-container-centered {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  pointer-events: none;
}

.brand-wrapper-header {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 2px; /* Ajuste milimétrico solicitado por el cliente */

  max-width: 60%; /* Protege contra solapamiento con botones laterales */
}

.brand-text-col {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  min-width: 0; /* Crucial para que el flex child permita truncado */

  white-space: nowrap;
}

.brand-logo-header {
  width: 30px;

  height: 30px;

  margin-bottom: 2px;

  /* mix-blend-mode removed as image is now transparent */
}

.header-logo {
  height: var(--header-logo-height);

  width: auto;

  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
}

.brand-title-header {
  font-family: "Montserrat", sans-serif;

  font-size: 1rem;

  font-weight: 400; /* Regular for MOBIX inner text */

  font-style: normal;

  text-transform: uppercase;

  margin: 0;

  margin-bottom: 0; /* Doble seguro */

  line-height: 0.95;

  color: var(--primary);

  /* Compensación óptica de itálica */

  padding-right: 2px;
}

.brand-subtitle-header {
  font-family: "Montserrat", sans-serif;

  font-size: 0.6rem;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-weight: 700;

  display: block; /* CRITICO: Permite que margin-top funcione */

  margin-top: 1px;

  line-height: 1; /* Reset de altura de línea */
}

#app-subtitle {
  display: block;

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.brand-title {
  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0.5px;

  line-height: 1;

  margin: 0;

  white-space: nowrap;
}

.brand-subtitle {
  font-size: 0.65rem;

  color: #ffd700 !important;

  text-transform: uppercase;

  letter-spacing: 3px;

  font-weight: 900;

  margin-top: 1px;

  text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);

  display: block;

  width: 100%;

  text-align: center;
}

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

.user-info h2 {
  font-size: 0.9rem;

  font-weight: 700;

  margin: 0;
}

.user-role-tag {
  font-size: 0.65rem;

  color: var(--primary);

  text-transform: uppercase;

  letter-spacing: 1px;

  font-weight: 800;
}

/* User Box Styles */

.framed-user-box {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  padding: 0;

  background: transparent;

  border: none;

  border-radius: 0;

  box-shadow: none;

  min-width: auto;

  backdrop-filter: none;
}

.rating-badge-mini {
  font-size: 0.75rem;

  color: #ffd700;

  font-weight: 700;
}

.user-name-mini {
  font-size: 0.8rem;

  font-weight: 600;

  color: var(--text-light);

  margin: 0;

  max-width: 90px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.user-role-mini {
  font-size: 0.6rem;

  color: rgba(255, 255, 255, 0.5);

  text-transform: uppercase;

  font-weight: 700;

  letter-spacing: 0.5px;
}

.user-name {
  font-size: 0.9rem;

  font-weight: 600;
}

.logout-pill {
  background: rgba(255, 59, 48, 0.12);

  color: #ff3b30;

  border: 1px solid rgba(255, 59, 48, 0.25);

  padding: 8px 16px;

  border-radius: 14px;

  font-size: 0.85rem;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* WEBVIEW-TURBO: transition:all purged */

  display: flex;

  align-items: center;

  gap: 8px;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.05);
}

.logout-pill:hover {
  background: #ff3b30;

  color: white;

  transform: translateY(-2px);

  box-shadow: 0 6px 15px rgba(255, 59, 48, 0.35);

  border-color: transparent;
}

.logout-pill:active {
  transform: scale(0.94);
}

.logout-pill span {
  font-size: 1.1rem;
}

/* Auth Styles */

.auth-overlay {
  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  width: 100% !important;

  height: 100dvh !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  /* v27.1: Fondo OSCURO sólido para respetar branding MotoXpress */

  background: #000000 !important;

  display: flex;

  justify-content: center;

  /* FIX SCROLL: flex-start permite que el contenido crezca y el overlay scrollee */

  align-items: flex-start;

  z-index: 20000 !important;

  /* v4.3.3: Padding dinámico — laterales 10px, inferior con safe-area iOS */

  padding: 20px 10px calc(20px + env(safe-area-inset-bottom));

  /* FIX SCROLL: Permitir scroll vertical en el overlay */

  overflow-y: auto !important;

  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch;

  /* v27.1: Transición de fade-out suave al ocultarse */

  opacity: 1;

  transition: opacity 0.4s ease-out;

  /* FIX SCROLL: Permitir scroll vertical táctil (era touch-action: none) */

  touch-action: pan-y !important;

  -webkit-touch-callout: none !important;

  -webkit-user-select: none !important;

  user-select: none !important;

  overscroll-behavior: none !important;

  /* v16.35: Forzar capa fija e inmóvil */

  transform: translate3d(0, 0, 0) !important;

  -webkit-transform: translate3d(0, 0, 0) !important;

  will-change: auto !important;

  backface-visibility: hidden !important;

  -webkit-backface-visibility: hidden !important;
}

/* Si el overlay está visible, ocultar todo lo demás por seguridad */

.auth-overlay:not(.hidden) ~ #app {
  display: none !important;
}

.auth-card {
  background: #000000 !important;
  width: 95%;

  max-width: 400px;

  text-align: center;

  /* v4.3.3: Centrado horizontal, expansión vertical libre */

  margin: auto 0 auto;

  padding: 40px 25px;

  padding-bottom: calc(40px + env(safe-area-inset-bottom));

  border-radius: 32px !important;

  /* FIX SCROLL: Permitir scroll interno si el contenido excede la card */

  overflow: visible;

  position: static !important;

  /* v16.35: Cambiar de relative a static para prevenir movimiento */

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  border: 1px solid rgba(255, 255, 255, 0.1);

  /* FIX SCROLL: Permitir scroll táctil dentro de la card */

  touch-action: pan-y !important;

  pointer-events: auto !important;

  /* v16.35: Mantener contenido fijo */

  transform: translate3d(0, 0, 0) !important;

  -webkit-transform: translate3d(0, 0, 0) !important;

  /* FIX SCROLL: Garantizar que la card no sea más alta que la pantalla */

  flex-shrink: 0;
}

/* v16.35: Asegurar que botones y elementos interactivos funcionen */

.auth-overlay button,
.auth-overlay input,
.auth-overlay select,
.auth-overlay a {
  touch-action: manipulation !important;

  pointer-events: auto !important;
}

.brand-container-auth {
  margin-bottom: 5px;

  display: flex;

  flex-direction: column;

  align-items: center;
}

.brand-wrapper-auth {
  display: flex;

  flex-direction: column;

  align-items: center;
}

.brand-logo {
  width: auto;

  height: var(--modal-logo-height);

  /* v27.1: Prevenir desbordamiento en pantallas pequeñas */

  max-width: 40vw;

  max-height: 40vw;

  object-fit: contain;

  margin-bottom: 6px;

  flex-shrink: 1; /* Para que reduzca si hay poco espacio (teclado abierto) */

  animation: float 3s ease-in-out infinite;

  background-color: transparent;

  border-radius: 12px;

  filter: drop-shadow(0 4px 15px rgba(255, 215, 0, 0.3));
}

/* Para el header principal, logo más pequeño */

.app-header .brand-logo {
  width: 35px;

  height: 35px;

  margin-bottom: 0;

  margin-right: 10px;
}

.brand-title-auth {
  font-family: "Montserrat", sans-serif;

  font-size: 2.2rem;

  font-weight: 400; /* Regular for MOBIX inner text */

  font-style: normal;

  text-transform: uppercase;

  margin: 0;

  line-height: 0.95;

  color: var(--primary);

  /* Compensación óptica de itálica */

  padding-right: 4px;
}

.brand-m,
.brand-x {
  font-weight: 900;

  letter-spacing: -0.03em;

  font-style: normal;

  text-transform: uppercase;
}

/* v28.1: Transición suave para cambio de identidad territorial */

.brand-subtitle-auth {
  font-family: "Montserrat", sans-serif;

  font-size: 0.9rem;

  color: var(--primary);

  text-transform: uppercase;

  letter-spacing: 5px;

  font-weight: 700;

  display: block;

  margin-top: 1px;

  margin-bottom: 5px;

  transition: opacity 0.3s ease;
}

/* Interfaz del Conductor (Overlay Global) se define más adelante para evitar conflictos */

.auth-tagline {
  color: var(--text-dim);

  margin-bottom: 30px;

  font-size: 0.9rem;

  opacity: 0.8;
}

.auth-tabs {
  display: flex;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 12px;

  padding: 5px;

  margin-bottom: 25px;
}

.tab-btn {
  flex: 1;

  padding: 10px;

  border: none;

  background: transparent;

  color: var(--text-dim);

  font-weight: 600;

  cursor: pointer;

  border-radius: 8px;

  transition: 0.3s;
}

.tab-btn.active {
  background: var(--primary);

  color: black;
}

.input-group {
  text-align: left;

  margin-bottom: 15px;
}

.input-group label {
  display: block;

  margin-bottom: 8px;

  font-size: 0.9rem;

  color: var(--text-dim);
}

.input-group input,
.input-group select {
  width: 100%;

  padding: 14px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid var(--glass-border);

  border-radius: 12px;

  color: white;

  font-size: 1rem;
}

.auth-msg {
  margin-top: 15px;

  font-size: 0.9rem;
}

.auth-msg.error {
  color: #ff4d4d;
}

.auth-msg.success {
  color: #4caf50;
}

.forgot-password-link {
  color: #f9f6ee; /* Blanco Hueso */

  font-size: 0.85rem;

  text-decoration: none;

  transition: opacity 0.3s;

  opacity: 0.9;
}

.forgot-password-link:hover {
  opacity: 1;

  text-decoration: underline;
}

.map-container {
  flex-grow: 1;

  position: relative;

  background: #1a1a1a;

  overflow: hidden;

  /* Prevenir scroll elástico delegado al root document */
}

#map {
  width: 100%;

  height: 100%;

  touch-action: pan-x pan-y;

  /* Crucial para rendimiento en móviles: evita scroll/zoom nativo del navegador */

  /* Aceleración por GPU forzada movida a .hardware-accel-active para prevenir memory leaks en WebKit */

  padding-top: env(safe-area-inset-top, 0px);
}

/* Limpiado el overload global de preserve-3d para estabilizar la VRAM en iPhone */

body.hardware-accel-active #map {
  transform: translate3d(0, 0, 0); /* Mantiene capa de mapa base */
}

.mox-driver-active {
  /* VRAM Profilaxis Purgada: Causaba memory leaks en Leaflet Android WebView */

  /* Animación UI Feedback: Entrada de viaje progresiva */

  transition: opacity 0.2s ease-in-out;

  opacity: 1;

  /* El translate3d de L.DomUtil se anexará automáticamente */
}

/* MAPA PREMIUM NATIVO: Sin filtros. Usamos el diseño profesional original */

.leaflet-tile {
  filter: none !important;
}

.leaflet-container {
  background: #121212 !important;
  /* Fondo negro profundo para OSM Dark Mode */

  /* CONFINAMIENTO DOM: Evita que el WebView redibuje botones cristalinos cuando el GPS desplaza el mapa */
  contain: layout paint;

  transform-style: preserve-3d; /* Extensión del blindaje al contenedor base */
}

/* v5.3.7: Restricción de MAPA para prevenir propagación de temblores HTML */

.leaflet-pane {
  isolation: isolate;
}

/* v30.31 WEBVIEW-TURBO v3: Dark Mode del Mapa
   ANTES: .osm-dark-mode-filter se aplicaba como className a CADA tile <img>
   AHORA: El filtro se aplica via JS al tile-pane CONTAINER (1 operación)
   
   Esta regla CSS se mantiene como FALLBACK por si map-engine.js no carga.
   En condiciones normales, el filtro inline del JS tiene precedencia. */
.osm-dark-mode-filter {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* Legal Attribution Fix: Fondo oscuro transparencia para legibilidad */

.leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.7) !important;

  color: #aaa !important;

  font-size: 0.7rem !important;

  border-radius: 4px;
}

.leaflet-control-attribution a {
  color: #ccc !important;
}

.motorcycle-icon {
  position: absolute;

  font-size: 1.5rem;

  filter: drop-shadow(0 0 5px var(--primary));

  animation: pulse 2s infinite;

  /* will-change: transform; WEBVIEW-TURBO: crea capas GPU permanentes en WebView */

  /* Optimización para movimiento suave */
}

.user-location {
  position: absolute;

  top: 50%;

  left: 50%;

  font-size: 2rem;

  transform: translate(-50%, -50%);
}

.interaction-panel {
  position: fixed;

  top: 70px;

  right: 0;

  width: 380px;

  height: calc(100vh - 70px - 140px);

  /* Restando header (70px) y banner de publicidad (140px) */

  z-index: 1000;

  /* MENOR QUE SIDEBAR (10001) Y OVERLAY (10000) */

  pointer-events: none;

  display: flex;

  justify-content: flex-end;

  align-items: flex-start;

  padding: 20px;
}

.search-card {
  pointer-events: auto;

  background: rgba(15, 20, 25, 0.95);

  /* backdrop-filter: blur(30px); GPU-PURGE v30.23 */

  border-radius: 24px;

  padding: 25px;

  border: 1px solid var(--glass-border);

  box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.6);

  width: 100%;

  transform: translateX(0);

  animation: slideInRight 0.4s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(110%);

    opacity: 0;
  }

  to {
    transform: translateX(0);

    opacity: 1;
  }
}

.search-header-split {
  display: flex;

  flex-direction: column;

  /* Stacked on mobile */

  gap: 10px;

  margin-bottom: 15px;
}

.modern-input {
  background: rgba(255, 255, 255, 0.05);

  /* Ultra clean glass */

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: white;

  width: 100%;

  font-size: 1rem;

  padding: 16px;

  border-radius: 16px;

  outline: none;

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* WEBVIEW-TURBO: transition:all purged */

  font-family: "Outfit", sans-serif;

  pointer-events: auto !important;

  /* Force interactivity */

  z-index: 10;

  /* Ensure above container */

  /* backdrop-filter: blur(5px); GPU-PURGE v30.23 */
}

.modern-input:focus {
  border-color: var(--primary);

  background: rgba(255, 215, 0, 0.08);

  /* Subtle gold tint */

  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.1);
}

.modern-input::placeholder {
  color: rgba(255, 255, 255, 0.4);

  font-weight: 300;
}

.btn-pick-map {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );

  border: 1px solid rgba(255, 255, 255, 0.15);

  /* Solid refined border */

  color: var(--text-light);

  width: 100%;

  padding: 14px;

  border-radius: 16px;

  font-size: 0.9rem;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease; /* WEBVIEW-TURBO: transition:all purged */

  text-transform: uppercase;

  letter-spacing: 1px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-pick-map span {
  font-size: 1.1rem;

  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));

  /* Glowing icon */
}

.btn-pick-map:hover {
  background: rgba(255, 255, 255, 0.12);

  border-color: var(--primary);

  color: white;

  transform: translateY(-2px);

  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(255, 215, 0, 0.2);
}

.btn-pick-map:active {
  transform: scale(0.98);
}

.search-header:active {
  transform: scale(0.98);

  background: rgba(255, 255, 255, 0.15);
}

.price-row {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 12px;

  padding: 0 5px;
}

.route-info {
  color: var(--text-dim);

  font-size: 0.8rem;
}

.price-tag {
  color: var(--primary);

  font-weight: 800;

  font-size: 1.2rem;

  min-width: 80px;

  text-align: center;
}

.price-selector {
  display: flex;

  align-items: center;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 12px;

  padding: 5px;

  gap: 10px;
}

.price-btn {
  background: rgba(255, 215, 0, 0.2);

  color: var(--primary);

  border: 1px solid rgba(255, 215, 0, 0.3);

  width: 32px;

  height: 32px;

  border-radius: 10px;

  font-size: 1.2rem;

  font-weight: 800;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.2s;
}

.price-btn:hover {
  background: var(--primary);

  color: black;
}

.price-btn:active {
  transform: scale(0.9);
}

.action-grid {
  display: flex;

  flex-direction: column;

  width: 100%;

  gap: 0;
}

#btn-request {
  width: 100%;

  justify-content: center;
}

.search-container {
  display: flex;

  align-items: center;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 16px;

  padding: 12px 16px;

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.location-marker {
  font-size: 1.2rem;

  margin-right: 12px;
}

.search-container input {
  background: transparent;

  border: none;

  color: white;

  width: 100%;

  font-size: 1rem;

  font-family: "Outfit", sans-serif;
}

.price-container {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 5px 5px;
}

.btn-cancel-ride-active {
  width: 100%;

  padding: 16px;

  background: linear-gradient(135deg, #ff4d4d, #c0392b);

  color: white;

  border: none;

  border-radius: 16px;

  font-size: 1rem;

  font-weight: 800;

  margin-top: 15px;

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease; /* WEBVIEW-TURBO: transition:all purged */

  animation: pulse-cancel 2s infinite; /* ✅ Animación de pulso */
}

.btn-cancel-ride-active:hover {
  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(231, 76, 60, 0.5);

  filter: brightness(1.1);
}

.btn-cancel-ride-active:active {
  transform: scale(0.98);
}

/* Animación de pulso para botón de cancelar */

@keyframes pulse-cancel {
  0% {
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);
  }

  50% {
    box-shadow: 0 8px 30px rgba(231, 76, 60, 0.6);
  }

  100% {
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3);
  }
}

.driver-img {
  width: 60px;

  height: 60px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--primary);

  background: var(--bg-dark);
}

/* Driver Active Panel Styles - OPTIMIZED COMPACT */

.driver-active-panel {
  position: fixed;

  top: 85px;

  /* Más aire arriba */

  left: 10px;

  right: 10px;

  width: auto;

  max-width: 190px;

  /* Reducción lateral adicional % */

  margin: 0 auto;

  height: auto;

  z-index: 1000;

  pointer-events: none;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 0;

  touch-action: none;
}

/* Tarjeta compacta flotante */

.driver-active-panel.glass-dark {
  pointer-events: auto;

  background: rgba(15, 20, 25, 0.95);

  /* backdrop-filter: blur(20px); GPU-PURGE v30.23 */

  border-radius: 14px;

  padding: 12px 5px;

  /* Más vertical, menos lateral */

  border: 1px solid var(--glass-border);

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

  width: 100%;
}

.active-ride-header {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  margin-bottom: 12px;

  /* Reducido de 20px */

  width: 100%;
}

.status-row-centered {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  margin-bottom: 5px;
}

.status-text-bold {
  font-size: 0.8rem;

  /* Reducido de 0.9rem */

  color: white;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-weight: 800;
}

.pulsing-container-mini {
  display: flex;

  align-items: center;

  justify-content: center;
}

.client-mini-profile {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-bottom: 8px;

  width: 100%;
}

.client-name-active {
  font-size: 0.85rem;

  font-weight: 700;

  color: white;

  max-width: 110px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.rating-badge-active {
  font-size: 0.8rem;

  font-weight: 800;
}

.client-info-minimal {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 4px;
}

.destination-info-panel {
  background: rgba(255, 255, 255, 0.05);

  padding: 8px 10px;

  /* Reducido de 12px 15px */

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

  /* Reducido */

  width: 100%;

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.destination-info-panel span:first-child {
  font-size: 1.2rem;
}

.destination-info-panel span:last-child {
  font-size: 1.1rem;

  /* Más grande */

  color: var(--primary);

  /* En dorado para resaltar */

  font-weight: 700;

  text-align: center;
}

/* Definición simplificada de driver-interface movida al final del bloque de navegación */

.header-row {
  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;
}

#active-client-name-driver {
  font-size: 1rem;

  margin: 0;

  white-space: nowrap;

  /* Evitar saltos de línea raros */

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;
}

.btn-complete-premium {
  padding: 12px;

  /* Botón menos alto */

  font-size: 0.9rem;

  width: 100%;
}

.pulsing-container {
  padding: 10px;

  background: rgba(46, 204, 113, 0.1);

  border-radius: 50%;
}

.status-dot {
  display: block;

  width: 12px;

  height: 12px;

  background: #2ecc71;

  border-radius: 50%;
}

.pulsing {
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);

  animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);

    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  }

  70% {
    transform: scale(1);

    box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
  }

  100% {
    transform: scale(0.95);

    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}

.status-text {
  font-size: 0.75rem;

  color: var(--text-dim);

  text-transform: uppercase;

  letter-spacing: 1px;
}

#active-client-name-driver {
  font-size: 1.1rem;

  font-weight: 700;

  margin: 0;

  color: white;
}

.active-ride-actions {
  display: flex;

  flex-direction: column;

  gap: 12px;

  width: 100%;

  /* Asegurar que los botones llenen el ancho reducido */
}

.btn-complete-premium {
  background: linear-gradient(135deg, #2ecc71, #27ae60);

  color: white;

  border: none;

  padding: 12px;

  /* Reducido de 16px */

  border-radius: 14px;

  font-weight: 800;

  font-size: 0.9rem;

  /* Reducido de 1rem */

  letter-spacing: 0.5px;

  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.2);

  cursor: pointer;
}

.btn-cancel-simple {
  background: linear-gradient(135deg, #ff4d4d, #d32f2f);

  color: white;

  border: none;

  padding: 10px;

  /* Reducido de 14px */

  border-radius: 12px;

  font-size: 0.8rem;

  /* Reducido de 0.9rem */

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease; /* WEBVIEW-TURBO: transition:all purged */

  box-shadow: 0 3px 10px rgba(211, 47, 47, 0.15);
}

.btn-cancel-simple:hover {
  filter: brightness(1.1);

  transform: translateY(-1px);

  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4);
}

.btn-request {
  background: linear-gradient(135deg, var(--primary), #ffa500);

  color: black;

  border: none;

  border-radius: 16px;

  padding: 16px;

  font-weight: 800;

  font-size: 1rem;

  cursor: pointer;

  transition: 0.3s;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;
}

/* LEGACY: .btn-request.searching removido en v5.8.2 — ver #btn-request.searching abajo */

.btn-map-selection {
  background: rgba(255, 255, 255, 0.1);

  color: white;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 16px;

  padding: 16px;

  font-weight: 600;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;
}

.btn-content {
  display: flex;

  align-items: center;

  gap: 8px;
}

.status-msg-small {
  font-size: 0.7rem;

  font-weight: 400;

  margin-top: 2px;

  display: block;

  width: 100%;
}

.btn-request {
  flex-direction: row; /* Default layout */

  align-items: center;

  justify-content: center;

  text-align: center;
}

/* ========== v5.8.2: ESTADO "BUSCANDO" — Premium Gold + Black Contrast ========== */

/* SELECTOR POR ID: #btn-request.searching domina sobre .btn-request-primary */

#btn-request.searching {
  background: linear-gradient(
    135deg,
    var(--primary),
    #ffb300,
    #ffa000
  ) !important;

  color: #121212 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 15px !important;

  animation: btn-glow-gold 2.5s ease-in-out infinite;

  overflow: hidden;

  position: relative;

  border: 1px solid rgba(255, 215, 0, 0.5);

  font-family: "Montserrat", "Outfit", sans-serif;
}

/* Protección de texto sobre radar */

#btn-request.searching .btn-content,
#btn-request.searching #ride-status-msg {
  position: relative;

  z-index: 10;
}

/* Título "CANCELAR SOLICITUD" — Black on Gold, Maximum Legibility */

#btn-request.searching #btn-text {
  color: #121212 !important;

  font-family: "Montserrat", "Outfit", sans-serif;

  font-weight: 900;

  letter-spacing: 2px;

  text-transform: uppercase;

  -webkit-text-fill-color: #121212;
}

/* ========== v5.8.2: GLOW RÍTMICO DORADO ========== */

@keyframes btn-glow-gold {
  0% {
    box-shadow:
      0 4px 15px rgba(255, 215, 0, 0.3),
      0 0 0 0 rgba(255, 215, 0, 0.15);
  }

  50% {
    box-shadow:
      0 6px 30px rgba(255, 215, 0, 0.55),
      0 0 25px 3px rgba(255, 215, 0, 0.25);
  }

  100% {
    box-shadow:
      0 4px 15px rgba(255, 215, 0, 0.3),
      0 0 0 0 rgba(255, 215, 0, 0.15);
  }
}

/* ========== v5.8.2: CONTENEDOR SVG RADAR ========== */

.radar-pulse-container {
  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 50px;

  height: 50px;

  margin: 0 auto 4px auto;
}

.radar-svg {
  display: block;

  overflow: visible;
}

/* Núcleo central — Negro sobre dorado */

.radar-core {
  animation: radar-core-pulse 2s ease-in-out infinite;

  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

@keyframes radar-core-pulse {
  0%,
  100% {
    opacity: 0.9;

    r: 4;
  }

  50% {
    opacity: 1;

    r: 5;
  }
}

/* Ondas concéntricas — expansión escalonada con trazos oscuros */

.radar-wave {
  transform-origin: center;

  animation: radar-expand 2.2s ease-out infinite;

  /* will-change: transform, opacity; WEBVIEW-TURBO: crea capas GPU permanentes en WebView */
}

.radar-wave-1 {
  animation-delay: 0s;
}

.radar-wave-2 {
  animation-delay: 0.5s;
}

.radar-wave-3 {
  animation-delay: 1s;
}

@keyframes radar-expand {
  0% {
    transform: scale(1);

    opacity: 0.85;

    stroke-width: 2;
  }

  100% {
    transform: scale(3.2);

    opacity: 0;

    stroke-width: 0.5;
  }
}

/* ========== v5.8.2: SHIMMER TEXT OSCURO — Gradiente Negro/Gris ========== */

.shimmer-text {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,

    rgba(0, 0, 0, 1) 50%,

    rgba(0, 0, 0, 0.55) 100%
  );

  background-size: 200% 100%;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: shimmer-slide 2.5s ease-in-out infinite;

  font-family: "Montserrat", "Outfit", sans-serif;

  font-weight: 600;
}

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

  100% {
    background-position: -200% center;
  }
}

/* ========== LEGACY: signal-emitter (oculto, compatibilidad DOM residual) ========== */

.signal-emitter {
  display: none !important;
}

.signal-emitter i {
  display: none !important;
}

.signal-emitter::before,
.signal-emitter::after {
  display: none !important;
}

/* Legacy support alias */

.icono-busqueda {
  display: none !important;
}

/* Global variable for dynamic layout based on ad bar */

:root {
  /* Base universal para Android/Web e iOS */

  --ad-bar-height: calc(140px + env(safe-area-inset-bottom, 0px));

  /* Anclaje Dinámico para botones de mapa (Fórmula UX Compacta) */

  --ui-map-controls-bottom: calc(var(--ad-bar-height, 0px) + 10px);
}

html.ios-standalone {
  /* En iOS PWA abramos el safe area nativo (Eliminado el gap min de 15px) */

  --ad-bar-height: calc(140px + env(safe-area-inset-bottom, 0px));
}

body.ads-hidden,
body.mox-user-pro {
  /* When hidden or GOLD, bottom spacing is just the safe area */
  --ad-bar-height: env(safe-area-inset-bottom, 0px);
  --ui-map-controls-bottom: calc(var(--ad-bar-height, 0px) + 10px);
}

html.ios-standalone body.ads-hidden,
html.ios-standalone body.mox-user-pro {
  --ad-bar-height: env(safe-area-inset-bottom, 0px);
  --ui-map-controls-bottom: calc(var(--ad-bar-height, 0px) + 10px);
}

/* ========================================

   HUD BACKDROP (Modo Premium / Ad-Free / Gold)

   Espalda oscura bajo botones flotantes cuando la publicidad se oculta

   ======================================== */

.hud-backdrop {
  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: calc(env(safe-area-inset-bottom, 0px) + 75px);

  background: rgba(
    8,
    8,
    8,
    0.98
  ); /* Oscurecido a petición del usuario para Gold Tier */

  /* backdrop-filter REMOVIDO: GPU freeze en iOS Safari — GPU-PURGE v30.23 */

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.08); /* Detalle glassmorphism superior */

  box-shadow: none;

  z-index: 1005; /* Arriba del mapa, detrás de los botones */

  pointer-events: none; /* Por defecto transparente a clics */

  --mox-ty: 0px;

  transform: translateY(var(--mox-ty));

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;

  /* will-change: transform, opacity; WEBVIEW-TURBO: crea capas GPU permanentes en WebView */

  opacity: 0;
}

/* Solo se vuelve visible y opaco a clics cuando está activo el Modo Gold o NO hay anuncios */

body.ads-hidden .hud-backdrop,
body.mox-user-pro .hud-backdrop {
  opacity: 1;

  pointer-events: auto; /* Bloquea arrastre de mapa al tocar la barra */
}

/* Reacción al deslizamiento del mapa (Igual a --mox-ty de map-engine.js) */

body.user-is-interacting .hud-backdrop {
  --mox-ty: 150px; /* Se oculta deslizando hacia abajo */

  pointer-events: none;
}

.pwa-standalone .leaflet-bottom {
  bottom: var(--ad-bar-height) !important;

  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Footer Ad Bar (Optimizada para Publicidad Local) */

.fixed-ad-bar {
  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  width: 100%;

  height: 140px;

  /* Restaurado a 140px fijo por solicitud */

  background: rgba(18, 18, 18, 0.98);

  border-radius: 0;

  /* Sin esquinas redondeadas para maximizar espacio */

  border-top: 2px solid rgba(255, 215, 0, 0.4);

  /* Borde superior visible */

  z-index: 1000 !important;

  display: flex;

  padding: 0;

  padding-bottom: env(safe-area-inset-bottom, 0px);

  height: var(--ad-bar-height);

  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(255, 215, 0, 0.1);

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* v5.4.7: Render Containment removido (Degradación elegante) */

  contain: none;

  --mox-tx: 0px;

  --mox-ty: 0px;

  transform: translate(var(--mox-tx), var(--mox-ty));
}

/* =========================================

   GPS PULSE COMPOSITOR-ONLY (WebKit iOS)

   ========================================= */

.mox-gpu-pulse-container {
  overflow: visible;
}

.mox-gpu-pulse-inner {
  position: absolute;

  left: -100px;

  top: -100px;

  width: 200px;

  height: 200px;

  border-radius: 50%;

  background-color: rgba(255, 59, 48, 0.12);

  border: 2px solid rgba(255, 59, 48, 0.45);

  /* will-change: transform, opacity; WEBVIEW-TURBO: crea capas GPU permanentes en WebView */

  transform-origin: center center;

  contain: strict;

  pointer-events: none;
}

/* Refuerzo por Clase (iOS Safe Area Padding) */

html.ios-standalone .fixed-ad-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Clase para ocultar la barra hacia abajo */

.fixed-ad-bar.ad-hidden {
  --mox-ty: 100%;
}

/* Contenedor Carrusel Horizontal Smooth Snapping */

.ads-slider {
  display: flex;

  flex: 1; /* FIX: tomará el 100% de width disponible y 100% height por align-items stretch del padre */

  overflow-x: auto;

  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;

  scrollbar-width: none;

  gap: 0;

  align-items: stretch; /* FIX: estirar las imágenes hijas al máximo height */
}

.ads-slider::-webkit-scrollbar {
  display: none;
}

.ad-image-layer {
  position: relative;

  flex: 0 0 100%; /* Cada slide ocupa el ancho total del contenedor */

  height: 100%; /* FIX: Asegurar altura máxima visible (UI Guard bypass) */

  scroll-snap-align: center;

  border-radius: 0; /* FIX: Edge-to-edge real sin esquinas redondeadas */

  background-color: rgba(
    40,
    40,
    40,
    0.8
  ); /* Refuerzo de color base sólido en caso de fallo proxy img */

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

  cursor: pointer;

  overflow: hidden;
}

.ad-badge {
  position: absolute;

  top: 8px;

  left: 8px;

  background: rgba(255, 215, 0, 0.9);

  color: black;

  font-size: 0.6rem;

  letter-spacing: 0.5px;

  font-weight: 900;

  padding: 3px 6px;

  border-radius: 6px;

  text-transform: uppercase;

  /* backdrop-filter: blur(4px); GPU-PURGE v30.23 */

  z-index: 2;
}

/* Estilos para el enlace de publicidad */

#ad-link {
  display: flex;

  align-items: center;

  flex: 1;

  min-width: 0;

  transition: opacity 0.2s ease;
}

#ad-link:hover {
  opacity: 0.8;
}

#ad-link:active {
  opacity: 0.6;
}

#ad-business {
  color: #ffd700;

  font-weight: 800;
}

#ad-description {
  color: rgba(255, 255, 255, 0.9);

  font-weight: 500;
}

.driver-info-panel {
  position: fixed;

  bottom: var(--ui-map-controls-bottom);

  /* Ajuste dinámico basado en la altura de la publicidad */

  right: 15px;

  width: auto;

  max-width: 280px;

  z-index: 900;

  pointer-events: none;

  touch-action: none;

  /* Crucial for dragging on mobile */

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  padding: 0;

  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* WEBVIEW-TURBO */
}

.driver-info-panel.glass {
  pointer-events: auto;

  background: rgba(15, 20, 25, 0.95);

  /* backdrop-filter: blur(25px); GPU-PURGE v30.23 */

  border-radius: 20px;

  padding: 20px;

  border: 1px solid var(--primary);

  /* Borde dorado para resaltar */

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

  width: 100%;
}

/* Cabecera de Estado del Viaje */

.ride-status-header {
  background: linear-gradient(135deg, #2ecc71, #27ae60);

  border-radius: 14px;

  padding: 12px 16px;

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

#ride-status-icon {
  font-size: 1.8rem;

  flex-shrink: 0;
}

.ride-status-text {
  display: flex;

  flex-direction: column;

  gap: 2px;

  flex: 1;
}

#ride-status-title {
  font-size: 1rem;

  font-weight: 800;

  color: white;

  text-transform: uppercase;

  letter-spacing: 0.5px;
}

#ride-status-subtitle {
  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.85);

  font-weight: 600;
}

.driver-header {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 5px;

  width: 100%;
}

.driver-meta {
  flex: 1;

  overflow: hidden;
}

.driver-meta h3 {
  font-size: 1rem;

  margin: 0;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.glass-dark {
  background: rgba(10, 10, 10, 0.95) !important;

  /* backdrop-filter: blur(25px) !important; GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(25px) !important; GPU-PURGE v30.23 */

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-radius: 32px !important;
}

/* Sobrescribir border-radius para la barra de publicidad */

.fixed-ad-bar.glass-dark {
  border-radius: 0 !important;

  border: none !important;

  border-top: 2px solid rgba(255, 215, 0, 0.4) !important;
}

.ad-content {
  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;
}

.premium-pill {
  background: linear-gradient(90deg, #ffd700, #ffa500);

  color: black;

  border: none;

  padding: 6px 12px;

  border-radius: 12px;

  font-size: 0.75rem;

  font-weight: 800;

  cursor: pointer;

  text-transform: uppercase;

  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);

  white-space: nowrap;

  transition: 0.3s;
}

.premium-pill:hover {
  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

/* Duplicate .ads-slider removed */

.ad-item {
  font-size: 0.9rem;

  display: flex;

  align-items: center;

  gap: 12px;

  animation: fadeIn 0.5s ease-out;
}

.ad-label {
  background: var(--primary);

  color: black;

  padding: 2px 8px;

  border-radius: 6px;

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;
}

.ad-item strong {
  color: var(--primary);
}

@keyframes fadeIn {
  from {
    opacity: 0;

    transform: translateY(10px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

.glass {
  background: rgba(25, 25, 25, 0.8);

  /* backdrop-filter: blur(20px); GPU-PURGE v30.23 */

  border: 1px solid var(--glass-border);

  border-radius: 24px;

  padding: 20px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Sidebar Styles - Base container */

.sidebar {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2000;

  display: flex;

  visibility: hidden; /* Oculto por defecto pero permitiendo transiciones */

  pointer-events: none;

  transition: visibility 0.3s;
}

/* Estado Activo: Visible y clickable */

.sidebar.sidebar-active {
  visibility: visible;

  pointer-events: auto;
}

/* Marcador de cliente pulsante para el conductor */

.client-location-pulsing {
  display: flex;

  justify-content: center;

  align-items: center;
}

.pulse-marker-inner {
  width: 20px;

  height: 20px;

  background: #ff4d4d;

  border: 3px solid white;

  border-radius: 50%;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

  position: relative;
}

.pulse-marker-inner::after {
  content: "";

  position: absolute;

  top: -10px;

  left: -10px;

  right: -10px;

  bottom: -10px;

  border-radius: 50%;

  background: rgba(255, 77, 77, 0.4);

  animation: marker-pulse 1.5s ease-out infinite;
}

@keyframes marker-pulse {
  0% {
    transform: scale(0.5);

    opacity: 1;
  }

  100% {
    transform: scale(3);

    opacity: 0;
  }
}

/* Marcadores Premium en Mapa */

.driver-moto-marker {
  font-size: 2rem;

  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8));

  transition:
    transform 0.5s ease-out,
    opacity 0.5s ease-out; /* WEBVIEW-TURBO */

  cursor: pointer;
}

.client-pickup-marker {
  font-size: 2rem;

  filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.8));

  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Driver Interface Styles */

/* --- Interfaz del Conductor (Incoming Request) --- */

.driver-interface {
  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  width: 100% !important;

  height: 100% !important;

  margin: 0 !important;

  /* Ajuste de caja seguro */

  box-sizing: border-box !important;

  background: rgba(0, 0, 0, 0.05) !important;

  /* Casi transparente para que se vea el mapa */

  /* backdrop-filter: blur(10px) !important; GPU-PURGE v30.23 */

  /* Desenfoque más suave, no tan agresivo */

  /* -webkit- backdrop-filter: blur(10px) !important; GPU-PURGE v30.23 */

  /* Soporte Apple */

  z-index: 2147483647 !important;

  /* Máximo entero posible en CSS */

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 20px;

  /* Padding interior seguro gracias a box-sizing */

  transition: opacity 0.3s ease;

  /* Transición suave */

  opacity: 1;

  /* Por defecto visible si no tiene .hidden */
}

.driver-interface.hidden {
  display: none !important;
}

.incoming-request-card {
  width: 100%;

  max-width: 420px;

  background: rgba(20, 20, 20, 0.95);

  border: 2px solid var(--primary);

  /* Borde dorado característico */

  border-radius: 28px;

  padding: 30px;

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(255, 215, 0, 0.1);

  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  pointer-events: auto;
}

.request-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;
}

.live-tag {
  background: #ff4d4d;

  color: white;

  padding: 4px 10px;

  border-radius: 6px;

  font-size: 0.7rem;

  font-weight: 800;

  animation: blink 1s infinite;
}

#req-timer {
  font-weight: 700;

  color: var(--primary);
}

.request-body {
  text-align: center;

  margin-bottom: 25px;
}

.request-body h3 {
  font-size: 1.5rem;

  margin-bottom: 5px;
}

.price-bubble {
  background: var(--primary);

  color: black;

  display: inline-block;

  padding: 10px 25px;

  border-radius: 30px;

  font-size: 1.8rem;

  font-weight: 800;

  margin-top: 15px;
}

.btn-accept-premium {
  width: 100%;

  padding: 18px;

  background: linear-gradient(135deg, #4caf50, #45a049);

  color: white;

  border: none;

  border-radius: 16px;

  font-weight: 800;

  font-size: 1.1rem;

  cursor: pointer;

  text-transform: uppercase;

  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);

  transition: 0.3s;
}

.btn-accept-premium:hover {
  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);

  filter: brightness(1.1);
}

.btn-cancel {
  background: transparent;

  color: var(--text-dim);

  border: none;

  padding: 12px;

  cursor: pointer;

  font-size: 0.9rem;

  font-weight: 600;

  opacity: 0.7;
}

.btn-cancel:hover {
  opacity: 1;

  color: #ff4d4d;
}

/* Role Selector Premium */

.role-selector-premium {
  display: flex;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid var(--glass-border);

  border-radius: 16px;

  padding: 6px;

  gap: 6px;

  margin-top: 8px;
}

.role-option {
  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 12px 5px;

  border-radius: 12px;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease; /* WEBVIEW-TURBO: transition:all purged */

  opacity: 0.6;
}

.role-option.active {
  background: rgba(255, 215, 0, 0.15);

  /* Sutil dorado en el fondo */

  border: 1px solid rgba(255, 215, 0, 0.3);

  opacity: 1;

  transform: scale(1.02);
}

.role-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 6px;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease; /* WEBVIEW-TURBO: transition:all purged */
}

.role-icon svg {
  color: rgba(255, 255, 255, 0.6);

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* WEBVIEW-TURBO: transition:all purged */
}

.role-option:hover .role-icon svg {
  color: rgba(255, 255, 255, 0.9);

  transform: scale(1.1);
}

.role-option.active .role-icon svg {
  color: var(--primary);

  transform: scale(1.05);

  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.role-label {
  font-size: 0.8rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  transition: color 0.3s ease;
}

.role-option.active .role-label {
  color: var(--primary);
}

.checkbox-group.warning .checkbox-container {
  color: #ff4d4d;

  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);

    opacity: 0;
  }

  50% {
    transform: scale(1.05);

    opacity: 1;
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes blink {
  50% {
    opacity: 0.4;
  }
}

/* Sidebar Wrapper - The actual fixed container */

.sidebar {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: var(--z-sidebar);

  /* MÁXIMA PRIORIDAD ABSOLUTA NUCLEAR - Supera a todo */

  pointer-events: none;

  visibility: hidden;

  transition: visibility 0.3s;
}

.sidebar.sidebar-active {
  visibility: visible;

  pointer-events: auto;
}

.sidebar-content {
  width: 80%;

  max-width: 300px;

  height: 100%;

  background: var(--bg-dark) !important;

  border-radius: 0 24px 24px 0 !important;

  display: flex;

  flex-direction: column;

  padding: 30px 20px !important;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1110;

  /* Viewport Fix: Scrollable on mobile */

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  /* ESTADO OCULTO: Desplazado a la izquierda */

  transform: translateX(-100%);

  /* TRANSICIÓN: Suave y fluida */

  transition: transform 0.3s ease-in-out;

  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}

/* ESTADO ACTIVO: Desliza hacia adentro */

.sidebar.sidebar-active .sidebar-content {
  transform: translateX(0);
}

#sidebar-overlay {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1100;

  display: flex;
}

.sidebar-overlay {
  flex-grow: 1;

  background: rgba(0, 0, 0, 0.5);

  /* backdrop-filter: blur(4px); GPU-PURGE v30.23 */

  cursor: pointer;

  /* TRANSICIÓN DE OPACIDAD */

  opacity: 0;

  transition: opacity 0.3s ease-in-out;
}

/* ESTADO ACTIVO: Overlay visible */

.sidebar.sidebar-active .sidebar-overlay {
  opacity: 1;
}

.sidebar-header {
  text-align: center;

  margin-bottom: 40px;
}

.sidebar-brand-container {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 2px;

  margin-bottom: 1rem;
}

.sidebar-brand-container img.header-logo {
  max-height: 35px;

  max-width: 35px;

  width: auto;
}

.brand-title-sidebar {
  font-family: "Montserrat", sans-serif;

  font-size: 1.4rem;

  color: var(--primary);

  margin: 0;

  line-height: 1;
}

.profile-large {
  font-size: 3.5rem;

  background: var(--surface);

  width: 100px;

  height: 100px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  margin: 0 auto 15px;

  border: 3px solid var(--primary);

  overflow: hidden;

  /* Asegurar recorte circular perfecto */
}

.profile-large img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.menu-list {
  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 15px;
}

.menu-list li {
  padding: 15px;

  border-radius: 12px;

  background: var(--surface);

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 15px;

  transition: 0.2s;
}

.menu-list li:hover {
  background: rgba(255, 255, 255, 0.1);

  transform: translateX(5px);
}

.sidebar-footer {
  margin-top: auto;

  text-align: center;

  color: var(--text-dim);

  font-size: 0.8rem;
}

.ride-info h2 {
  font-size: 1.1rem;

  margin-bottom: 5px;
}

.ride-info p {
  color: var(--text-dim);

  font-size: 0.85rem;
}

.destination-picker {
  position: relative;

  margin-bottom: 12px;
}

.input-with-icon {
  display: flex;

  align-items: center;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid var(--glass-border);

  border-radius: 16px;

  padding: 2px 15px;
}

.input-with-icon .icon {
  font-size: 1.2rem;

  margin-right: 10px;
}

.input-with-icon input {
  background: transparent;

  border: none;

  color: white;

  padding: 12px 0;

  width: 100%;

  font-size: 1rem;

  outline: none;
}

.suggestions-box {
  position: absolute;

  top: 100%;

  left: 0;

  right: 0;

  background: #1e1e1e;

  border: 1px solid var(--glass-border);

  border-radius: 12px;

  margin-top: 5px;

  max-height: 200px;

  overflow-y: auto;

  z-index: 2000;
}

.suggestion-item {
  padding: 12px 15px;

  border-bottom: 1px solid var(--glass-border);

  cursor: pointer;

  font-size: 0.9rem;
}

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

.suggestion-item:hover {
  background: var(--surface);
}

/* ============================================



   v4.4.0: AUTOCOMPLETE RESULTS — Glassmorphism Dark Premium



   Container para sugerencias de destino soberano



   ============================================ */

.autocomplete-results {
  position: absolute;

  top: calc(100% + 4px);

  left: 0;

  right: 0;

  max-height: 240px;

  overflow-y: auto;

  z-index: 2100;

  /* Glassmorphism */

  background: rgba(15, 15, 20, 0.85);

  /* backdrop-filter: blur(20px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(20px); GPU-PURGE v30.23 */

  border: 1px solid rgba(255, 215, 0, 0.15);

  border-radius: 16px;

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Scroll suave estilo iOS */

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;

  scrollbar-color: rgba(255, 215, 0, 0.3) transparent;

  /* Aparición animada */

  animation: autocompleteSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.autocomplete-results::-webkit-scrollbar {
  width: 4px;
}

.autocomplete-results::-webkit-scrollbar-track {
  background: transparent;
}

.autocomplete-results::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);

  border-radius: 4px;
}

.autocomplete-item {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  cursor: pointer;

  border-bottom: 1px solid rgba(255, 255, 255, 0.04);

  transition:
    transform 0.2s ease,
    opacity 0.2s ease; /* WEBVIEW-TURBO: transition:all purged */
}

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

.autocomplete-item:hover,
.autocomplete-item:active {
  background: rgba(255, 215, 0, 0.08);
}

.autocomplete-item:active {
  transform: scale(0.98);
}

.autocomplete-icon {
  font-size: 1.3rem;

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.06);

  border-radius: 10px;

  flex-shrink: 0;
}

.autocomplete-text {
  display: flex;

  flex-direction: column;

  gap: 2px;

  min-width: 0;
}

.autocomplete-name {
  color: #ffffff;

  font-size: 0.95rem;

  font-weight: 600;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.autocomplete-type {
  color: rgba(255, 215, 0, 0.6);

  font-size: 0.72rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;
}

@keyframes autocompleteSlideIn {
  from {
    opacity: 0;

    transform: translateY(-8px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* ============================================



   v4.4.2: MARKER DROP BOUNCE — Confirmación visual de destino



   Simula caída con rebote elástico al seleccionar un lugar.



   ============================================ */

.marker-drop-bounce {
  animation: markerDropBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

  transform-origin: bottom center;
}

@keyframes markerDropBounce {
  0% {
    opacity: 0;

    transform: translateY(-40px) scale(0.6);
  }

  40% {
    opacity: 1;

    transform: translateY(0) scale(1.05);
  }

  60% {
    transform: translateY(-8px) scale(0.97);
  }

  80% {
    transform: translateY(0) scale(1.02);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* ============================================



   v4.5.0: MARCADORES POI PERMANENTES — Glassmorphism Map Icons



   Iconos fijos en el mapa para lugares territoriales.



   ============================================ */

/* Contenedor Leaflet — debe ser transparente */

.poi-marker-container {
  background: transparent !important;

  border: none !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  pointer-events: auto;

  cursor: pointer;

  animation: poiAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Burbuja de cristal con emoji */

.poi-marker-glass {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* v30.44: Fondo oscuro nativo — sin pseudo-clases hover/active.
     RAZÓN: En Safari/Capacitor, :hover se pega tras el toque (estado sucio). 
     box-shadow en :hover = 30 paint ops innecesarias.
     transform en :active = compositing layers extra.
     El popup de Leaflet ya da feedback visual al tocar. */
  border: 1px solid rgba(70, 70, 75, 0.35);
  background: rgba(20, 20, 25, 0.82);
  box-sizing: border-box;
}

/* v30.43: Gold/Premium mantienen contraste prominente — estilo original */
.poi-marker-glass[data-tier="gold"],
.poi-marker-glass[data-tier="premium"] {
  background: rgba(25, 25, 30, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.4);
}

/* v30.44: hover/active ELIMINADOS — ganancia de rendimiento en iOS/Capacitor.
   Antes: .poi-marker-container:hover .poi-marker-glass { scale, box-shadow, border }
   Antes: .poi-marker-container:active .poi-marker-glass { scale(0.95) }
   Antes: .poi-marker-container:hover .poi-marker-label { opacity, max-width }
   Todo eliminado — cero paint ops reactivas en touch. */

/* Emoji dentro de la burbuja */
.poi-marker-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

/* Etiqueta flotante debajo del icono */
.poi-marker-label {
  /* v30.43: Etiquetas basic con contraste reducido — color cercano al piso del mapa. */
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  background: rgba(50, 50, 55, 0.65);
  border-radius: 8px;
  color: #c8c8cc;
  font-size: 0.55rem;
  font-weight: 600;
  white-space: nowrap;
  width: max-content;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  text-align: center;
  letter-spacing: 0.15px;
  opacity: 0.85;
  pointer-events: none;
  box-sizing: border-box;
}

@keyframes poiAppear {
  0% {
    opacity: 0;

    transform: scale(0.3) translateY(-10px);
  }

  100% {
    opacity: 1;

    transform: scale(1) translateY(0);
  }
}

/* ============================================



   v5.9.3: POI POPUP GLASSMORPHISM — Jerarquía Tipográfica Refinada



   Overrides del popup estándar de Leaflet.



   Popup manual (sin bindPopup) — abierto por renderTerritoryPOIs().



   ============================================ */

.poi-popup-glass .leaflet-popup-content-wrapper {
  background: rgba(20, 20, 22, 0.88);

  /* backdrop-filter: blur(16px) saturate(1.2); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(16px) saturate(1.2); GPU-PURGE v30.23 */

  color: #ffffff;

  border: 1px solid rgba(255, 215, 0, 0.25);

  border-radius: 14px;

  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  font-family: "Montserrat", "Outfit", sans-serif;

  padding: 0;
}

.poi-popup-glass .leaflet-popup-content {
  margin: 10px 14px;

  line-height: 1.4;

  text-align: center;
}

.poi-popup-glass .leaflet-popup-tip {
  background: rgba(20, 20, 22, 0.88);

  border: none;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Nombre del lugar — Jerarquía principal */

.poi-popup-content strong {
  display: block;

  color: #ffd700;

  font-size: 1.1rem;

  font-weight: 700;

  letter-spacing: 0.3px;

  line-height: 1.3;
}

/* v5.9.3: Subtítulo "Toca de nuevo para más detalles"



   Color blanco puro para contraste, sin emojis.



   Cursor pointer para indicar que todo el popup es touchable. */

.poi-popup-hint {
  display: block;

  margin-top: 6px;

  font-size: 0.85rem;

  font-weight: 500;

  color: #ffffff;

  letter-spacing: 0.2px;

  text-align: center;

  cursor: pointer;

  /* Entrada suave con retardo — el usuario lee el nombre primero */

  opacity: 0;

  animation: poiHintFadeIn 0.5s ease 0.35s forwards;
}

/* Todo el popup es touchable cuando tiene hint */

.poi-popup-content:has(.poi-popup-hint) {
  cursor: pointer;
}

@keyframes poiHintFadeIn {
  from {
    opacity: 0;

    transform: translateY(3px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* v5.9.3: Popup con borde dorado para tier Gold */

.poi-popup-gold .leaflet-popup-content-wrapper {
  border: 1.5px solid rgba(255, 215, 0, 0.5);

  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 215, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.poi-popup-gold .leaflet-popup-tip {
  border-top-color: rgba(255, 215, 0, 0.15);
}

/* ============================================



   v4.5.6: MODO VIAJE ACTIVO — Efecto Cristal Recalibrado



   Marcadores permanecen en DOM, visualmente atenuados pero reconocibles.



   NUNCA se remueven. Solo afecta .poi-marker-container.



   driverMarker y destinationMarker NO heredan esta clase.



   ============================================ */

.poi-style-crystal {
  opacity: 0.4 !important;

  filter: blur(0.5px) grayscale(0.5);

  transform: scale(0.7) !important;

  pointer-events: none !important;

  transition:
    transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out; /* WEBVIEW-TURBO */
}

/* ============================================



   v4.6.7: CLON DECORATIVO DEL POI DE DESTINO



   Anclaje estabilizado: transition: none elimina lag en zoom.



   pointer-events: auto permite recibir toque para popup.



   PROHIBIDO usar transform aquí — Leaflet lo necesita internamente.



   ============================================ */

.poi-destination-active {
  pointer-events: auto !important;

  transition: none !important; /* Elimina el lag durante el zoom */

  margin-top: 0 !important;

  animation: poi-dest-pulse 2s ease-in-out infinite;
}

.poi-destination-active .poi-marker-glass {
  border: 2px solid rgba(255, 215, 0, 0.85) !important;

  box-shadow: 0 0 18px rgba(255, 215, 0, 0.55) !important;
}

@keyframes poi-dest-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
  }

  50% {
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 1));
  }
}

.ride-details {
  padding: 10px 5px;

  border-top: 1px solid var(--glass-border);

  margin-top: 10px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.9rem;
}

#ride-price {
  font-size: 1.2rem;

  color: var(--primary);
}

.action-buttons {
  display: flex;

  gap: 10px;
}

.btn-secondary {
  flex: 1;

  background: rgba(255, 255, 255, 0.1);

  color: white;

  border: 1px solid var(--glass-border);

  border-radius: 16px;

  padding: 15px;

  font-weight: 600;

  cursor: pointer;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;
}

.btn-auth-premium,
.btn-yellow-premium {
  width: 100%;

  padding: 16px;

  background: linear-gradient(135deg, var(--primary), #ffb800);

  color: #000;

  border: none;

  border-radius: 14px;

  font-weight: 800;

  font-size: 1.1rem;

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 1px;

  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);

  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* WEBVIEW-TURBO */
}

.btn-auth-premium {
  margin-top: 25px;
}

.btn-green-success {
  width: 100%;

  padding: 16px;

  background: linear-gradient(135deg, #2ecc71, #27ae60);

  color: white;

  border: none;

  border-radius: 14px;

  font-weight: 800;

  font-size: 1.1rem;

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 1px;

  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.2);

  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* WEBVIEW-TURBO */
}

.btn-red-danger {
  width: 100%;

  padding: 16px;

  background: linear-gradient(135deg, #ff4d4d, #d32f2f);

  color: white;

  border: none;

  border-radius: 14px;

  font-weight: 800;

  font-size: 1.1rem;

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 1px;

  box-shadow: 0 8px 25px rgba(211, 47, 47, 0.2);

  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* WEBVIEW-TURBO */
}

.btn-auth-premium:hover,
.btn-yellow-premium:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(255, 215, 0, 0.4);

  filter: brightness(1.1);
}

.btn-green-success:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(46, 204, 113, 0.4);

  filter: brightness(1.1);
}

.btn-red-danger:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(211, 47, 47, 0.4);

  filter: brightness(1.1);
}

.btn-auth-premium:active,
.btn-yellow-premium:active,
.btn-green-success:active,
.btn-red-danger:active {
  transform: scale(0.97);
}

.btn-red-danger:hover {
  transform: translateY(-3px);

  box-shadow: 0 12px 30px rgba(211, 47, 47, 0.4);

  filter: brightness(1.1);
}

.btn-auth-premium:active,
.btn-yellow-premium:active,
.btn-red-danger:active {
  transform: scale(0.97);
}

/* Checkbox Styles */

.checkbox-group {
  margin-top: 15px;
}

.checkbox-container {
  display: flex;

  align-items: center;

  position: relative;

  padding-left: 35px;

  cursor: pointer;

  font-size: 0.85rem;

  color: var(--text-dim);

  user-select: none;
}

.checkbox-container input {
  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;
}

.checkmark {
  position: absolute;

  top: 0;

  left: 0;

  height: 22px;

  width: 22px;

  background-color: rgba(255, 255, 255, 0.05);

  border: 1px solid var(--glass-border);

  border-radius: 6px;

  transition: 0.2s;
}

.checkbox-container:hover input ~ .checkmark {
  background-color: rgba(255, 255, 255, 0.1);
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--primary);

  border-color: var(--primary);
}

.checkmark:after {
  content: "";

  position: absolute;

  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 7px;

  top: 3px;

  width: 5px;

  height: 10px;

  border: solid black;

  border-width: 0 3px 3px 0;

  transform: rotate(45deg);
}

.ads-container {
  margin-bottom: 20px;
}

.ad-card {
  background: linear-gradient(135deg, #1e1e1e, #2a2a2a);

  padding: 15px;

  border-radius: 20px;

  border: 1px solid var(--glass-border);
}

.ad-tag {
  font-size: 0.6rem;

  text-transform: uppercase;

  color: var(--primary);

  margin-bottom: 5px;
}

/* Estilos de Valoración Inline y Badges */

.name-rating-row {
  display: flex;

  align-items: center;

  gap: 8px;

  /* Espacio entre nombre y estrella */

  flex-wrap: wrap;

  width: 100%;
}

.rating-badge {
  padding: 3px 8px;

  border-radius: 12px;

  font-size: 0.85rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 4px;

  border: 1px solid transparent;

  white-space: nowrap;

  margin-top: 2px;

  /* Alineación fina */
}

/* Estilos de Valoración */

.rating-stars {
  display: flex;

  align-items: center;

  gap: 8px;

  margin: 4px 0;
}

.stars {
  letter-spacing: 2px;

  font-size: 0.9rem;
}

.rating-num {
  font-weight: 700;

  color: var(--primary);

  font-size: 0.9rem;
}

.plate-info {
  color: var(--text-dim);

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 1px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.hidden {
  display: none !important;
}

/* Rating Modal Styles */

.rating-input-container {
  margin: 20px 0;

  text-align: center;
}

.star-rating {
  display: flex;

  justify-content: center;

  gap: 10px;

  font-size: 2.5rem;

  margin-bottom: 10px;
}

.star {
  cursor: pointer;

  color: var(--text-dim);

  transition: 0.2s;
}

.star-driver {
  cursor: pointer;

  color: var(--text-dim);

  transition: 0.2s;
}

.star-client {
  cursor: pointer;

  color: var(--text-dim);

  transition: 0.2s;
}

.star.active,
.star:hover,
.star-driver.active,
.star-driver:hover,
.star-client.active,
.star-client:hover {
  color: #ffd700;

  transform: scale(1.1);
}

.rating-text {
  font-size: 1rem;

  color: var(--primary);

  font-weight: 700;

  min-height: 24px;
}

/* Ocultar panel de instrucciones de Leaflet Routing Machine */

.leaflet-routing-container {
  display: none !important;
}

/* Custom Confirm Modal Styles */

.confirm-icon {
  font-size: 3.5rem;

  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;

  margin-top: 30px;

  width: 100%;

  padding: 0 10px 10px 10px;
}

.confirm-actions button {
  width: 70%;

  min-width: 200px;
}

.animate-pop {
  animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  0% {
    transform: scale(0.6);

    opacity: 0;
  }

  100% {
    transform: scale(1);

    opacity: 1;
  }
}

/* ============================================



   RESPONSIVE AUTH OPTIMIZATION v4.3.3



   Variables CSS para control centralizado



   ============================================ */

@media (max-height: 700px) {
  :root {
    --auth-overlay-pad-y: 12px;

    --auth-overlay-pad-x: 8px;

    --auth-card-pad-y: 20px;

    --auth-card-pad-x: 12px;

    --auth-logo-size: 60px;

    --auth-title-size: 1.6rem;

    --auth-tagline-mb: 10px;

    --auth-input-mb: 8px;

    --auth-btn-mt: 10px;

    --auth-btn-pad: 11px;
  }

  .auth-overlay {
    padding: var(--auth-overlay-pad-y) var(--auth-overlay-pad-x)
      calc(var(--auth-overlay-pad-y) + env(safe-area-inset-bottom));

    /* v4.3.3: Reforzar scroll en pantallas cortas */

    overflow-y: auto !important;
  }

  .auth-card {
    padding: var(--auth-card-pad-y) var(--auth-card-pad-x);

    padding-bottom: calc(var(--auth-card-pad-y) + env(safe-area-inset-bottom));
  }

  .brand-logo {
    width: auto;

    height: var(--modal-logo-height);

    max-width: 35vw;

    max-height: 35vw;
  }

  .brand-title-auth {
    font-size: var(--auth-title-size);
  }

  .auth-tagline {
    margin-bottom: var(--auth-tagline-mb);

    font-size: 0.8rem;
  }

  .input-group {
    margin-bottom: var(--auth-input-mb);
  }

  .input-group label {
    margin-bottom: 4px;

    font-size: 0.8rem;
  }

  .input-group input,
  .input-group select {
    padding: 10px 12px;

    font-size: 0.9rem;
  }

  .btn-auth-premium {
    margin-top: var(--auth-btn-mt);

    padding: var(--auth-btn-pad);
  }
}

/* Pantallas ultra-cortas: teclado abierto en móvil */

@media (max-height: 500px) {
  :root {
    --auth-logo-size: 40px;

    --auth-title-size: 1.4rem;

    --auth-tagline-mb: 6px;

    --auth-input-mb: 6px;

    --auth-card-pad-y: 12px;
  }

  .brand-container-auth {
    margin-bottom: 2px;
  }

  .auth-tagline {
    display: none;
  }

  .auth-tabs {
    margin-bottom: 12px;

    padding: 3px;
  }

  .tab-btn {
    padding: 7px;

    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .auth-card {
    /* v4.3.3: Mantener padding vertical para accesibilidad */

    padding: 25px 10px;

    padding-bottom: calc(25px + env(safe-area-inset-bottom));
  }
}

/* ========================================



   BOTONES FLOTANTES DE MAPA (Clase Compartida)



   .btn-map-float: base común para GPS y Búsqueda



   ======================================== */

.glass-action-btn {
  background: rgba(18, 18, 18, 0.98);

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.btn-map-float {
  position: fixed;

  bottom: var(
    --ui-map-controls-bottom
  ); /* Fix de colisión dinámica CSS Variables */

  width: 48px;

  height: 48px;

  border-radius: 50%;

  cursor: pointer;

  z-index: 1010;

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;

  align-items: center;

  justify-content: center;

  user-select: none;

  -webkit-tap-highlight-color: transparent;

  pointer-events: auto;

  /* Degradación Elegante (translateY simple sin GPU hint forzado) */

  --mox-tx: 0px;

  --mox-ty: 0px;

  transform: translate(var(--mox-tx), var(--mox-ty));
}

.btn-map-float:hover {
  transform: translate(var(--mox-tx), var(--mox-ty)) scale(1.05);
}

.btn-map-float:active {
  transform: translate(var(--mox-tx), var(--mox-ty)) scale(0.95);

  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.6);
}

/* ── Botón GPS (derecha) ── */

/* v22.5: Transition Kill-Switch durante modo brújula.

   Evita que WebKit interpole micro-reflows como animaciones de 300ms.

   El botón se posiciona instantáneamente sin transición durante la rotación. */

.is-compass-active .btn-map-float,
.map-is-flying .btn-map-float {
  transition: none !important;
}

.recenter-btn {
  right: 20px;
}

/* Anti-colisión Driver UI: Cuando la cápsula de disponibilidad está visible,

   separación vertical (3px) y horizontal (3px más hacia bordes).

   :has() es soportado en Safari 15.4+ / iOS 15.4+ */

body:has(.driver-availability-container:not(.hidden)) .btn-map-float {
  bottom: calc(var(--ui-map-controls-bottom) + 3px);
}

body:has(.driver-availability-container:not(.hidden)) .btn-search-poi {
  left: 12px;
}

body:has(.driver-availability-container:not(.hidden)) .recenter-btn {
  right: 12px;
}

.recenter-btn.recenter-hidden {
  transform: translate(150%, var(--mox-ty, 0px));
}

/* Micro-targeting atómico (Control desde navigation-compass) */

#recenter-btn.mox-ui-hidden {
  --mox-ty: 150px;

  opacity: 0 !important;

  pointer-events: none !important;
}

/* Icono SVG Crosshair Minimalista */

.recenter-btn::before {
  content: "";

  width: 24px;

  height: 24px;

  background-color: var(--primary);

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="8"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>');

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="8"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>');

  -webkit-mask-size: contain;

  mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  -webkit-mask-position: center;

  mask-position: center;
}

/* ── Botón Búsqueda (izquierda — espejo simétrico) ── */

.btn-search-poi {
  left: 20px;

  --mox-tx: 0px;

  --mox-ty: 0px;

  transform: translate(var(--mox-tx), var(--mox-ty));
}

.btn-search-poi.search-hidden {
  --mox-tx: -150%;
}

/* Icono SVG Lupa */

.btn-search-poi::before {
  content: "";

  width: 22px;

  height: 22px;

  background-color: var(--primary);

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');

  -webkit-mask-size: contain;

  mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  -webkit-mask-position: center;

  mask-position: center;
}

/* ========================================



   BARRA DE BÚSQUEDA DE LUGARES (v6.0)



   Motor de Búsqueda Premium



   ======================================== */

/* Overlay oscuro detrás de la barra */

.search-overlay {
  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.6);

  /* backdrop-filter: blur(8px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(8px); GPU-PURGE v30.23 */

  z-index: 11000;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;
}

.search-overlay.search-overlay-visible {
  opacity: 1;

  pointer-events: auto;
}

/* Barra superior */

.search-bar {
  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 11001;

  padding: calc(env(safe-area-inset-top, 10px) + 10px) 16px 0;

  transform: translateY(-100%);

  opacity: 0;

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}

.search-bar.search-bar-visible {
  transform: translateY(0);

  opacity: 1;
}

.search-bar-inner {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 16px;

  background: rgba(20, 20, 24, 0.95);

  /* backdrop-filter: blur(24px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(24px); GPU-PURGE v30.23 */

  border: 1px solid rgba(255, 215, 0, 0.25);

  border-radius: 16px;

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 215, 0, 0.1);
}

.search-bar-icon {
  color: #ffd700;

  display: flex;

  align-items: center;

  flex-shrink: 0;
}

.search-bar-input {
  flex: 1;

  background: transparent;

  border: none;

  outline: none;

  color: #fff;

  font-family: "Outfit", sans-serif;

  font-size: 1rem;

  font-weight: 500;

  letter-spacing: 0.3px;

  caret-color: #ffd700;
}

.search-bar-input::placeholder {
  color: rgba(255, 255, 255, 0.4);

  font-weight: 400;
}

.search-bar-close {
  background: rgba(255, 255, 255, 0.1);

  border: none;

  border-radius: 8px;

  padding: 6px;

  color: #fff;

  cursor: pointer;

  display: flex;

  align-items: center;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease; /* WEBVIEW-TURBO: transition:all purged */

  flex-shrink: 0;
}

.search-bar-close:active {
  transform: scale(0.9);

  background: rgba(255, 255, 255, 0.2);
}

/* Lista de resultados */

.search-results {
  list-style: none;

  margin: 0;

  padding: 0;

  max-height: 0;

  overflow: hidden;

  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
}

.search-results.has-results {
  max-height: 60vh;

  overflow-y: auto;

  padding: 8px 0 0;
}

.search-result-item {
  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px 16px;

  margin: 4px 0;

  background: rgba(255, 255, 255, 0.04);

  border-radius: 12px;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease; /* WEBVIEW-TURBO: transition:all purged */

  -webkit-tap-highlight-color: transparent;
}

.search-result-item:active {
  background: rgba(255, 215, 0, 0.12);

  transform: scale(0.98);
}

.search-result-icon {
  font-size: 1.6rem;

  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 215, 0, 0.08);

  border-radius: 12px;

  flex-shrink: 0;
}

.search-result-info {
  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 2px;

  min-width: 0;
}

.search-result-name {
  font-family: "Outfit", sans-serif;

  font-size: 0.95rem;

  font-weight: 600;

  color: #fff;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.search-result-tipo {
  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.45);

  text-transform: capitalize;

  font-weight: 500;
}

/* Badges de tier */

.search-badge {
  font-size: 0.65rem;

  font-weight: 800;

  padding: 3px 8px;

  border-radius: 8px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  flex-shrink: 0;

  white-space: nowrap;
}

.search-badge-gold {
  background: rgba(255, 215, 0, 0.2);

  color: #ffd700;

  border: 1px solid rgba(255, 215, 0, 0.3);
}

.search-badge-premium {
  background: rgba(46, 204, 113, 0.15);

  color: #2ecc71;

  border: 1px solid rgba(46, 204, 113, 0.25);
}

/* Sin resultados */

.search-no-results {
  text-align: center;

  padding: 24px 16px;

  color: rgba(255, 255, 255, 0.4);

  font-size: 0.9rem;

  font-style: italic;
}

/* ========================================



   MODAL DE DECISIÓN Y VALORACIÓN v15.00



   ======================================== */

/* Overlay de modales */

.modal-overlay {
  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(0, 0, 0, 0.85);

  /* backdrop-filter: blur(10px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(10px); GPU-PURGE v30.23 */

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  padding: 20px;
}

.modal-overlay.hidden {
  display: none;
}

/* Card del modal */

.modal-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

  border-radius: 24px;

  border: 1px solid rgba(255, 215, 0, 0.2);

  padding: 24px !important;

  max-width: calc(100vw - 40px);

  width: 100%;

  max-width: 420px;

  max-height: calc(100vh - 40px);

  overflow-y: auto;

  text-align: center;

  scrollbar-width: thin;

  scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
}

.modal-card::-webkit-scrollbar {
  width: 6px;
}

.modal-card::-webkit-scrollbar-track {
  background: transparent;
}

.modal-card::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);

  border-radius: 3px;
}

/* Título del modal */

.modal-title {
  font-size: 1.5rem;

  font-weight: 700;

  color: #ffd700;

  margin-bottom: 20px;

  text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* ========== TEMPORIZADOR ========== */

.decision-timer-container {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-bottom: 10px;
}

.timer-icon {
  font-size: 1.5rem;
}

.decision-timer {
  font-size: 2rem;

  font-weight: 700;

  color: #ffd700;

  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);

  min-width: 50px;

  text-align: center;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease; /* WEBVIEW-TURBO: transition:all purged */
}

.timer-label {
  font-size: 0.9rem;

  color: rgba(255, 255, 255, 0.7);
}

/* Animación de parpadeo para timer crítico (<10s) */

@keyframes timer-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.decision-timer.critical {
  animation: timer-blink 0.8s ease-in-out infinite;

  color: #ff4444;

  text-shadow: 0 0 15px rgba(255, 68, 68, 0.7);
}

/* ========== AVATAR CON PULSE-GLOW ========== */

.driver-avatar-container {
  display: inline-block;

  margin: 20px 0;

  position: relative;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(255, 215, 0, 0);
  }
}

.pulse-glow {
  border-radius: 50%;

  animation: pulse-glow 2s ease-in-out infinite;
}

.driver-avatar {
  width: 100px;

  height: 100px;

  border-radius: 50%;

  border: 3px solid #ffd700;

  object-fit: cover;

  display: block;
}

/* ========== INFORMACIÓN DEL CONDUCTOR ========== */

.driver-name {
  font-size: 1.3rem;

  font-weight: 600;

  color: #fff;

  margin: 15px 0 10px;
}

.driver-stats {
  display: flex;

  justify-content: center;

  gap: 20px;

  margin-bottom: 25px;
}

.driver-rating,
.driver-trips {
  font-size: 0.95rem;

  color: rgba(255, 255, 255, 0.8);
}

/* ========== BOTONES ========== */

.decision-buttons {
  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 25px;

  padding: 0 5px;
}

.btn-primary,
.btn-secondary {
  width: 100%;

  padding: 16px 24px;

  border-radius: 16px;

  font-size: 1.1rem;

  font-weight: 600;

  border: none;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease; /* WEBVIEW-TURBO: transition:all purged */

  font-family: "Outfit", sans-serif;
}

.btn-primary {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);

  color: #000;

  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

.btn-primary:active {
  --mox-tx: 0px;

  --mox-ty: 0px;

  transform: translate(var(--mox-tx), var(--mox-ty));
}

.btn-primary:disabled {
  opacity: 0.5;

  cursor: not-allowed;

  transform: none;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);

  border-color: rgba(255, 255, 255, 0.3);
}

/* ========== SISTEMA DE VALORACIÓN ========== */

.star-rating-container {
  text-align: center;

  margin: 20px 0;
}

.stars {
  display: flex;

  justify-content: center;

  gap: 10px;

  margin-bottom: 15px;
}

.star {
  font-size: 2.5rem;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease; /* WEBVIEW-TURBO: transition:all purged */

  filter: grayscale(100%);

  opacity: 0.4;

  user-select: none;
}

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

  filter: grayscale(0%);

  opacity: 1;
}

.star.active {
  filter: grayscale(0%);

  opacity: 1;

  animation: starPop 0.3s ease;
}

@keyframes starPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.rating-feedback {
  font-size: 1.2rem;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.6);

  min-height: 30px;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.3s ease; /* WEBVIEW-TURBO: transition:all purged */
}

.rating-feedback.preview {
  color: rgba(255, 215, 0, 0.8);
}

.rating-feedback.selected {
  color: #ffd700;

  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.rating-comment {
  width: 100%;

  min-height: 80px;

  padding: 12px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.05);

  color: #fff;

  font-size: 0.95rem;

  resize: vertical;

  margin: 15px 0;

  font-family: "Outfit", sans-serif;
}

.rating-comment:focus {
  outline: none;

  border-color: #ffd700;

  background: rgba(255, 255, 255, 0.08);
}

/* ========== ANIMACIONES DE ENTRADA/SALIDA ========== */

.slide-up {
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-down {
  animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
  from {
    transform: translateY(100%);

    opacity: 0;
  }

  to {
    transform: translateY(0);

    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);

    opacity: 1;
  }

  to {
    transform: translateY(100%);

    opacity: 0;
  }
}

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

@media (max-width: 380px) {
  .modal-overlay {
    padding: 15px;
  }

  .modal-card {
    padding: 25px 20px;

    max-width: calc(100vw - 30px);

    max-height: calc(100vh - 30px);
  }

  .btn-primary,
  .btn-secondary {
    padding: 14px 20px;

    font-size: 1rem;
  }

  .decision-timer {
    font-size: 1.8rem;
  }

  .star {
    font-size: 2rem;
  }
}

/* Safe area para dispositivos con notch */

@supports (padding: max(0px)) {
  .modal-overlay {
    padding-left: max(20px, env(safe-area-inset-left));

    padding-right: max(20px, env(safe-area-inset-right));

    padding-top: max(20px, env(safe-area-inset-top));

    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ========== v15.30: ANIMACIÓN PULSO AVATAR ========== */

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(255, 215, 0, 0.4),
      0 0 40px rgba(255, 215, 0, 0.2);
  }

  50% {
    box-shadow:
      0 0 30px rgba(255, 215, 0, 0.6),
      0 0 60px rgba(255, 215, 0, 0.3);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;

  border-radius: 50%;
}

/* ========== v16.70: MODAL DE ALERTA DE CANCELACIÓN (PREMIUM) ========== */

#cancellation-alert-modal {
  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  z-index: 99999 !important;

  display: flex;

  align-items: center;

  justify-content: center;

  /* backdrop-filter: blur(15px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(15px); GPU-PURGE v30.23 */

  background: rgba(0, 0, 0, 0.92);

  touch-action: none;

  overscroll-behavior: none;

  opacity: 0;

  transition: opacity 0.3s ease;
}

#cancellation-alert-modal:not(.hidden) {
  opacity: 1;
}

#cancellation-alert-modal .glass-panel {
  background: rgba(18, 18, 20, 0.98);

  width: 85%;

  max-width: 320px;

  padding: 35px 25px calc(35px + env(safe-area-inset-bottom)) 25px;

  border-radius: 28px;

  border: 1px solid rgba(255, 215, 0, 0.25);

  text-align: center;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);

  transform: scale(0.9);

  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#cancellation-alert-modal:not(.hidden) .glass-panel {
  transform: scale(1);
}

#cancellation-alert-modal h2 {
  font-family: "Montserrat", sans-serif;

  font-weight: 900;

  font-style: italic;

  color: #ffd700;

  font-size: 1.5rem;

  margin: 0 0 12px 0;

  text-transform: uppercase;

  line-height: 1.1;

  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

#cancellation-alert-modal p {
  font-family: "Montserrat", sans-serif;

  font-weight: 500;

  color: #e0e0e0;

  font-size: 1.05rem;

  margin: 0 0 25px 0;

  line-height: 1.4;
}

#btn-cancellation-understood {
  background: linear-gradient(135deg, #ffd700 0%, #fdb931 100%);

  color: #000;

  border: none;

  padding: 16px 0;

  width: 100%;

  border-radius: 18px;

  font-weight: 800;

  font-family: "Montserrat", sans-serif;

  font-size: 1.1rem;

  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);

  transition: transform 0.2s;

  text-transform: uppercase;

  letter-spacing: 1px;

  -webkit-tap-highlight-color: transparent;
}

#btn-cancellation-understood:active {
  transform: scale(0.96);
}

/* Botón de acción pequeña (Reset/Limpiar) - v3.6.1 */

.btn-action-small {
  background: rgba(255, 255, 255, 0.08); /* Glass effect subtle */

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: #ffd700; /* Gold accent */

  min-width: 44px; /* Touch target size */

  height: 44px;

  border-radius: 12px;

  font-size: 1.2rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* WEBVIEW-TURBO */

  flex-shrink: 0;

  /* backdrop-filter: blur(5px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(5px); GPU-PURGE v30.23 */

  outline: none;

  /* Alineación óptica del icono */

  padding-bottom: 2px;
}

.btn-action-small:hover {
  background: rgba(255, 215, 0, 0.2);

  border-color: rgba(255, 215, 0, 0.4);

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-action-small:active {
  transform: scale(0.95);

  background: rgba(255, 215, 0, 0.1);
}

/* Flex container for input row (Request Panel) */

.input-row-flex {
  display: flex;

  gap: 8px;

  align-items: center;

  margin-bottom: 10px;
}

.input-row-flex .modern-input {
  margin-bottom: 0;
}

/* Header Action Grouping v3.6.2 */

.header-actions-group {
  display: flex;

  gap: 8px;

  align-items: center;
}

/* Ajuste para que la escoba no se vea gigante en el header */

.header-actions-group .btn-action-small {
  width: 36px;

  height: 36px;

  font-size: 1rem;

  border-radius: 10px;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 215, 0, 0.3);

  color: var(--accent-yellow);
}

.header-actions-group .btn-close {
  width: 36px;

  height: 36px;

  font-size: 1.2rem;

  border-radius: 10px;

  background: rgba(255, 59, 48, 0.1);

  color: #ff3b30;

  border: 1px solid rgba(255, 59, 48, 0.2);

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;
}

/* =========================================



   v4.6.8: TEMA OSCURO PARA POPUPS DE LEAFLET



   Override global — aplica a todos los popups del mapa.



   Glassmorphism coherente con el resto de la UI.



========================================= */

/* El contenedor principal del bocadillo */

.leaflet-popup-content-wrapper {
  background: rgba(20, 20, 20, 0.9) !important;

  /* backdrop-filter: blur(10px) !important; GPU-PURGE v30.23 */

  color: #ffffff !important;

  border: 1px solid rgba(255, 215, 0, 0.2) !important;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;

  border-radius: 12px !important;

  text-align: center !important;
}

/* La pequeña punta triangular que señala al icono */

.leaflet-popup-tip {
  background: rgba(20, 20, 20, 0.9) !important;

  border: 1px solid rgba(255, 215, 0, 0.2) !important;

  border-top-color: transparent !important;

  border-left-color: transparent !important;

  box-shadow: none !important;
}

/* Ajuste del espaciado interno del contenido */

.leaflet-popup-content {
  margin: 10px 14px !important;

  line-height: 1.4 !important;

  font-size: 13px !important;

  font-weight: 500 !important;
}

/* Eliminar el botón de cierre estándar si llegara a aparecer */

.leaflet-popup-close-button {
  display: none !important;
}

/* 🚦 v4.7.28: Alertas Visuales para Tarifas Bajas (Conductor) */

.low-offer-alert {
  color: #ff3b30 !important; /* Rojo alerta iOS / Standard Danger */

  font-weight: 800 !important;

  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* =========================================



   MotoXpress v4.8.2 - Nested Node Marker Fix



   ========================================= */

/* El wrapper base inmutable de Leaflet */

.mox-destination-wrapper-static {
  background: none !important;

  border: none !important;

  pointer-events: none !important; /* Vital para poder hacer click "a través" de la bandera */
}

/* El bocadillo (burbuja flotante de destino) */

.mox-bocadillo-container {
  display: flex;

  flex-direction: column;

  align-items: center;

  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));

  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* WEBVIEW-TURBO */

  animation: pulseDest 2s infinite ease-in-out;
}

.mox-bocadillo-body {
  background-color: white;

  background-image: conic-gradient(
    black 90deg,

    white 90deg 180deg,

    black 180deg 270deg,

    white 270deg
  );

  background-size: 15px 15px; /* Ajusta el tamaño de los cuadros */

  width: 45px;

  height: 45px;

  border-radius: 50%; /* Redondo */

  display: flex;

  justify-content: center;

  align-items: center;

  border: 2px solid white;

  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6);

  transform-origin: bottom center;
}

.mox-bocadillo-tail {
  width: 0;

  height: 0;

  border-left: 8px solid transparent;

  border-right: 8px solid transparent;

  border-top: 10px solid #ffae00; /* La punta del bocadillo */

  margin-top: -2px;
}

/* Estado de compás activo - aumenta el tamaño y añade brillo */

body.is-compass-active .mox-bocadillo-container {
  transform: scale(1.2);

  filter: drop-shadow(0 0 12px #ffd700);

  animation: pulseDestActive 2s infinite ease-in-out;
}

@keyframes pulseDest {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.03);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes pulseDestActive {
  0% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1.2);
  }
}

/* Base container styles */

.dest-marker {
  background: transparent !important;

  border: none !important;

  pointer-events: none !important;

  width: 40px !important;

  height: 40px !important;
}

/* v4.7.59: Sincronía Total - Permitir interacción bajo la capa invisible de Leaflet */

.leaflet-pane.destinationPane-pane {
  pointer-events: none !important;
}

/* 1. Wrapper for the Pin (Client Selection) - v3.5.2 GPU-Optimized */

.marker-pin-animated {
  font-size: 2.8rem;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  line-height: 1;

  margin: 0;

  padding: 0;

  position: relative;

  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));

  animation: pinBounce 2s infinite ease-in-out;

  transform-origin: bottom center;

  cursor: grab;
}

.marker-pin-animated::after {
  content: "";

  position: absolute;

  bottom: -6px;

  left: 50%;

  width: 24px;

  height: 8px;

  border-radius: 50%;

  background: radial-gradient(
    ellipse at center,

    rgba(0, 0, 0, 0.35) 0%,

    transparent 70%
  );

  transform: translateX(-50%) scale(1);

  opacity: 1;

  animation: pinShadow 2s infinite ease-in-out;

  /* will-change: transform, opacity; WEBVIEW-TURBO: crea capas GPU permanentes en WebView */
}

@keyframes pinBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-10px) scale(1.1);
  }
}

@keyframes pinShadow {
  0%,
  100% {
    transform: translateX(-50%) scale(1);

    opacity: 1;
  }

  50% {
    transform: translateX(-50%) scale(0.6);

    opacity: 0.4;
  }
}

/* 2. Wrapper for the Flag (Driver Destination) - Animación base */

@keyframes flagWave {
  0% {
    transform: rotate(0deg) skewX(0deg);
  }

  100% {
    transform: rotate(5deg) skewX(-5deg);
  }
}

.marker-flag-animated {
  animation: flagWave 1.5s infinite ease-in-out alternate;

  transform-origin: bottom left;
}

/* 🎯 MIRA CENTRAL (Crosshair) */

.map-crosshair {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -100%);

  z-index: 900;

  pointer-events: none;

  transition:
    transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* WEBVIEW-TURBO */

  display: flex;

  flex-direction: column;

  align-items: center;
}

.map-crosshair.hidden {
  display: none !important;
}

.crosshair-pin {
  font-size: 40px;

  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));

  transform-origin: bottom center;

  transition: transform 0.2s ease;

  line-height: 1;
}

.crosshair-shadow {
  width: 10px;

  height: 4px;

  background: rgba(0, 0, 0, 0.3);

  border-radius: 50%;

  margin-top: -5px;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease; /* WEBVIEW-TURBO: transition:all purged */
}

.map-crosshair.is-dragging .crosshair-pin {
  transform: translateY(-15px) scale(1.1);
}

.map-crosshair.is-dragging .crosshair-shadow {
  transform: scale(0.6);

  opacity: 0.5;
}

/* Botón Flotante Confirmar Ubicación */

.btn-confirm-location {
  position: fixed;

  bottom: 160px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2000;

  background: linear-gradient(135deg, #ffd700, #ffed4e);

  color: #000;

  border: none;

  padding: 12px 24px;

  border-radius: 30px;

  font-weight: 800;

  font-size: 1rem;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;

  display: flex;

  align-items: center;

  gap: 8px;

  cursor: pointer;
}

.btn-confirm-location:active {
  transform: translateX(-50%) scale(0.95);
}

.btn-confirm-location.hidden {
  display: none !important;

  pointer-events: none;
}

/* Botón Cancelar Mapa (X) */

.btn-cancel-map {
  position: fixed;

  bottom: 160px;

  left: 20px;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  z-index: 2000;

  background: linear-gradient(135deg, #ff4d4d, #c0392b);

  color: white;

  border: none;

  font-weight: 800;

  font-size: 1.2rem;

  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease; /* WEBVIEW-TURBO: transition:all purged */

  display: flex;

  align-items: center;

  justify-content: center;
}

.btn-cancel-map:active {
  transform: scale(0.9);
}

.btn-cancel-map.hidden {
  display: none !important;

  pointer-events: none;
}

/* ANIMACIÓN "CLEAN VIEW" */

.ui-hide-on-drag {
  opacity: 0.3 !important;

  pointer-events: none;

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* WEBVIEW-TURBO: transition:all purged */
}

.btn-confirm-location.ui-hide-on-drag {
  transform: translateX(-50%) translateY(20px) scale(0.9) !important;
}

.btn-cancel-map.ui-hide-on-drag {
  transform: translateX(-100px) scale(0.8) !important;
}

/* ============================================



   🏍️ MOTORCYCLE ICON PREMIUM



   ============================================ */

.motorcycle-icon-premium {
  font-size: 2rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent !important;

  border: none !important;

  filter: drop-shadow(0 0 8px #ffd700);

  z-index: 1000 !important;

  animation: motoGlow 2s ease-in-out infinite;
}

.leaflet-marker-icon.motorcycle-icon-premium {
  transition: transform 0.5s linear !important;
}

@keyframes motoGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
  }

  50% {
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 1));
  }
}

/* v4.9.8 - MARCADOR DUAL DEL CONDUCTOR - ACTIVE/IDLE MODE */

@keyframes idlePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

.mox-driver-premium-idle {
  width: 28px;
  height: 28px;
  background-color: #ffd700;

  /* GPU BINDING PURGED: Causaba VRAM limits en Leaflet zoom */

  border: 2px solid #121212;

  border-radius: 50%;

  position: relative;

  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);

  animation: idlePulse 2s infinite;

  box-sizing: border-box;
}

.mox-driver-active-trip {
  width: 28px;
  height: 28px;
  background-color: #ffd700;

  /* GPU BINDING PURGED: Causaba VRAM limits en Leaflet zoom */

  border: 2px solid #121212;

  border-radius: 50%;

  position: relative;

  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);

  animation: idlePulse 2s infinite;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;
}

.mox-client-premium-tracking {
  width: 28px;

  height: 28px;

  background-color: #ffd700;

  border: 2px solid #121212;

  border-radius: 50%;

  position: relative;

  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);

  animation: idlePulse 2s infinite;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;
}

/* v6.1.5 GPU Accelerated Breathing Animation (Solid Aura Isolated) */

@keyframes breathing-green {
  0% {
    opacity: 0.05;

    transform: scale(0.95);
  }

  50% {
    opacity: 0.15;

    transform: scale(1.08);
  }

  100% {
    opacity: 0.05;

    transform: scale(0.95);
  }
}

/* Modal Scrollable Content Protection (v6.1.9) */

.modal-scrollable-content {
  max-height: 250px;

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

  padding-right: 5px; /* Prevent scrollbar overlap */
}

.modal-scrollable-content::-webkit-scrollbar {
  width: 4px;
}

.modal-scrollable-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal-scrollable-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);

  border-radius: 4px;
}

.green-breathing::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: #00ff7f; /* Aura neón sólida externa */

  filter: blur(25px); /* Reflejo difuso por fuera del borde */

  z-index: -2; /* Forzado al fondo, siempre debajo del negro */

  border-radius: inherit;

  animation: breathing-green 2s infinite ease-in-out;

  pointer-events: none;

  /* Hardware acceleration trigger */

  /* will-change: transform, opacity; WEBVIEW-TURBO: crea capas GPU permanentes en WebView */
}

/* =========================================================================



   BILLING ENGINE — Suscripciones, Planes y Ad-Free (v1.0.0)



   ========================================================================= */

/* ── UI Guard: Ocultar Ads para usuarios Pro ────────────────────────── */

body.mox-user-pro .fixed-ad-bar,
body.mox-user-pro #google-ads-container,
body.mox-user-pro .barra-publicidad-inferior {
  display: none !important;
}

/* ── Panel Lateral Deslizable (Billing & Support) ───────────────────── */

.mox-panel-overlay {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background: rgba(0, 0, 0, 0.7);

  z-index: var(--z-panel-overlay) !important;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  /* backdrop-filter: blur(10px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(10px); GPU-PURGE v30.23 */

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mox-panel-overlay.is-active {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

#mox-universal-drawer {
  z-index: var(--z-panel-content) !important;
}

.mox-side-panel {
  position: fixed;

  top: 0;

  right: 0;

  transform: translateX(100%);

  width: 100%;

  height: 100vh;

  background: var(--bg-dark);

  visibility: hidden;

  pointer-events: none;

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s ease;

  display: flex;

  flex-direction: column;
}

.mox-side-panel.is-active {
  transform: translateX(0) !important;

  visibility: visible !important;

  pointer-events: auto !important;
}

.mox-panel-header {
  position: sticky;

  top: 0;

  display: flex;

  align-items: center;

  padding: 40px 16px 20px 16px; /* SafeArea margin on iOS */

  background: rgba(10, 10, 10, 0.9);

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  z-index: 2001; /* Asegura estar en el nivel superios del content */
}

.mox-panel-back-btn {
  background: transparent;

  border: none;

  color: #ffd700;

  font-weight: 800;

  font-size: 0.85rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 5px 10px 5px 0;
}

.mox-panel-title {
  margin: 0 0 0 20px;

  color: #fff;

  font-size: 1.1rem;

  letter-spacing: 0.5px;
}

.mox-panel-content {
  flex: 1;

  overflow-y: auto;

  overscroll-behavior-y: contain;

  -webkit-overflow-scrolling: touch;

  padding: 16px;
}

.mox-panel-view {
  animation: moxFadeIn 0.3s ease;
}

@keyframes moxFadeIn {
  from {
    opacity: 0;

    transform: translateY(10px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* ── PlanCard (Glassmorphism Premium Mobile) ───────────────────────────── */

.mox-plan-card {
  display: flex;

  flex-direction: column;

  background: rgba(255, 255, 255, 0.03); /* Transparencia sutil */

  /* backdrop-filter: blur(15px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(15px); GPU-PURGE v30.23 */

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 18px;

  padding: 22px;

  margin-bottom: 20px;

  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s;

  position: relative;

  overflow: hidden;
}

.mox-plan-card:active {
  transform: scale(0.97);
}

.mox-plan-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;
}

.mox-plan-name {
  font-size: 1.15rem;

  font-weight: 800;

  color: #fff;

  margin: 0;

  letter-spacing: 0.5px;
}

.mox-plan-price {
  font-size: 0.95rem;

  font-weight: 800;

  color: var(--text-dim);
}

.mox-plan-desc {
  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.65);

  margin: 0 0 16px 0;

  line-height: 1.4;
}

.mox-plan-features {
  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 24px;
}

.mox-plan-features span {
  font-size: 0.85rem;

  color: #e0e0e0;

  display: flex;

  align-items: center;

  gap: 8px;
}

.mox-plan-action {
  width: 100%;
}

.mox-plan-btn {
  width: 100%;

  padding: 16px;

  border: none;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.12);

  color: #fff;

  font-size: 0.95rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

  cursor: pointer;

  transition:
    background 0.3s,
    transform 0.2s;

  min-height: 48px; /* Touch area generosa para iOS/Android */
}

.mox-plan-btn:disabled {
  background: rgba(255, 255, 255, 0.05);

  color: rgba(255, 255, 255, 0.3);

  cursor: default;
}

.mox-plan-btn-current {
  background: rgba(76, 175, 80, 0.1) !important;

  color: #4caf50 !important;

  border: 1px solid rgba(76, 175, 80, 0.2);
}

/* ── Free / Básico ──────────────────────────────────────────────────── */

.mox-plan-free,
.mox-plan-basico {
  border-color: rgba(255, 255, 255, 0.05);
}

.mox-plan-free .mox-plan-price,
.mox-plan-basico .mox-plan-price {
  color: rgba(255, 255, 255, 0.4);
}

/* ── Premium ────────────────────────────────────────────────────────── */

.mox-plan-premium {
  border-color: rgba(var(--primary-rgb), 0.3);

  box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.08);
}

.mox-plan-premium .mox-plan-name {
  color: var(--primary);
}

.mox-plan-premium .mox-plan-price {
  color: var(--primary);
}

.mox-plan-premium .mox-plan-btn:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.2),
    rgba(255, 165, 0, 0.15)
  );

  border: 1px solid rgba(255, 215, 0, 0.3);

  color: #ffd700;
}

/* ── GOLD — Shimmer Style (Refundado) ───────────────────────────────── */

.mox-plan-gold {
  border: 1px solid rgba(255, 215, 0, 0.4);

  background: rgba(30, 25, 0, 0.6);

  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.15);

  position: relative;

  z-index: 1;
}

.mox-plan-gold::before {
  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.25),
    transparent
  );

  animation: moxGoldShine 3s infinite;

  z-index: -1;
}

@keyframes moxGoldShine {
  0% {
    left: -100%;
  }

  20% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

.mox-plan-gold .mox-plan-name {
  background: linear-gradient(135deg, #ffd700, #ffa500);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  font-weight: 900;
}

.mox-plan-gold .mox-plan-price {
  color: #ffd700;

  font-weight: 900;
}

.mox-plan-gold .mox-plan-btn:not(:disabled) {
  background: linear-gradient(135deg, #ffd700, #ffa500);

  color: #111;

  border: none;

  font-weight: 800;

  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* ── Botones Extra (Soporte) ────────────────────────────────────────── */

/* ── v30.0: Card "Verificar Pago" Glassmorphism ────────────────────── */

.mox-verify-payment-card {
  margin-bottom: 16px;

  border-radius: 14px;

  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.08),
    rgba(255, 165, 0, 0.04)
  );

  /* backdrop-filter: blur(12px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(12px); GPU-PURGE v30.23 */

  border: 1px solid rgba(255, 215, 0, 0.25);

  box-shadow:
    0 4px 24px rgba(255, 215, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  animation: moxVerifyPulse 2.5s ease-in-out infinite;

  overflow: hidden;
}

.mox-verify-payment-inner {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;
}

.mox-verify-icon {
  font-size: 1.5rem;

  animation: moxVerifySpin 2s linear infinite;

  flex-shrink: 0;
}

.mox-verify-text {
  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 2px;
}

.mox-verify-text strong {
  color: #ffd700;

  font-size: 0.85rem;

  font-weight: 700;
}

.mox-verify-text small {
  color: rgba(255, 255, 255, 0.5);

  font-size: 0.7rem;

  font-weight: 600;

  letter-spacing: 0.5px;
}

.mox-verify-btn {
  flex-shrink: 0;

  padding: 10px 18px;

  background: linear-gradient(135deg, #ffd700, #ffa500);

  color: #111;

  border: none;

  border-radius: 10px;

  font-size: 0.75rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease; /* WEBVIEW-TURBO: transition:all purged */

  box-shadow: 0 3px 12px rgba(255, 215, 0, 0.25);

  min-height: 38px;

  display: flex;

  align-items: center;

  gap: 6px;
}

.mox-verify-btn:active {
  transform: scale(0.95);
}

.mox-verify-btn:disabled {
  opacity: 0.7;

  cursor: not-allowed;
}

@keyframes moxVerifyPulse {
  0%,
  100% {
    box-shadow:
      0 4px 24px rgba(255, 215, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  50% {
    box-shadow:
      0 4px 30px rgba(255, 215, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

@keyframes moxVerifySpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.mox-submit-primary {
  width: 100%;

  padding: 14px;

  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15),
    rgba(255, 165, 0, 0.1)
  );

  border: 1px solid rgba(255, 215, 0, 0.3);

  color: #ffd700;

  border-radius: 12px;

  min-height: 44px;

  font-size: 0.85rem;
}

/* ── Plan Activo (Indicador Visual) ─────────────────────────────────── */

.mox-plan-active {
  border-color: rgba(76, 175, 80, 0.4) !important;
}

.mox-plan-active::after {
  content: "✓ ACTIVO";

  position: absolute;

  top: 8px;

  right: 10px;

  font-size: 0.55rem;

  font-weight: 800;

  color: #4caf50;

  background: rgba(76, 175, 80, 0.12);

  padding: 2px 6px;

  border-radius: 4px;

  letter-spacing: 0.5px;
}

/* ── Tier Badge (Sidebar) ───────────────────────────────────────────── */

.mox-tier-badge {
  display: inline-block;

  padding: 2px 8px;

  border-radius: 6px;

  font-size: 0.6rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-left: 6px;
}

.mox-tier-free {
  background: rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.5);
}

.mox-tier-basico {
  background: rgba(100, 181, 246, 0.15);

  color: #64b5f6;
}

.mox-tier-premium {
  background: rgba(255, 215, 0, 0.12);

  color: #ffd700;
}

.mox-tier-gold {
  background: linear-gradient(135deg, #ffd700, #ffa500);

  color: #111;

  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* ── Formulario de Soporte ──────────────────────────────────────────── */

.mox-support-form {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.mox-support-form select,
.mox-support-form textarea {
  width: 100%;

  padding: 14px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 12px;

  color: #fff;

  font-size: 0.9rem;

  font-family: "Outfit", sans-serif;

  min-height: 44px;

  transition:
    border-color 0.3s,
    background 0.3s;

  -webkit-appearance: none;

  appearance: none;
}

.mox-support-form select:focus,
.mox-support-form textarea:focus {
  border-color: var(--primary);

  background: rgba(255, 215, 0, 0.06);

  outline: none;
}

.mox-support-form textarea {
  min-height: 80px;

  resize: none;
}

.mox-support-status {
  font-size: 0.8rem;

  font-weight: 600;

  padding: 8px 12px;

  border-radius: 10px;

  text-align: center;

  display: none;
}

.mox-status-success {
  background: rgba(76, 175, 80, 0.12);

  color: #4caf50;
}

.mox-status-error {
  background: rgba(255, 77, 77, 0.12);

  color: #ff4d4d;
}

.mox-status-warning {
  background: rgba(255, 193, 7, 0.12);

  color: #ffc107;
}

/* ── Spinner & Success Animation ────────────────────────────────────── */

.mox-spinner {
  display: inline-block;

  width: 16px;

  height: 16px;

  border: 2px solid rgba(255, 255, 255, 0.3);

  border-top-color: #fff;

  border-radius: 50%;

  animation: moxSpin 0.6s linear infinite;

  vertical-align: middle;

  margin-right: 6px;
}

@keyframes moxSpin {
  to {
    transform: rotate(360deg);
  }
}

.mox-btn-loading {
  opacity: 0.7;

  pointer-events: none;
}

.mox-btn-success {
  background: rgba(76, 175, 80, 0.2) !important;

  border-color: rgba(76, 175, 80, 0.4) !important;

  color: #4caf50 !important;
}

/* ==========================================================================



   CONFIGURACIÓN PLANA (FLAT UI SETTINGS) - v7.3.0



   ========================================================================== */

.mox-setting-list {
  display: flex;

  flex-direction: column;
}

.mox-setting-item {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 16px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* var(--glass-border) */

  cursor: pointer;

  transition: background 0.2s ease;
}

.mox-setting-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.mox-setting-icon {
  flex: 0 0 40px;

  font-size: 1.5rem;

  display: flex;

  align-items: center;

  justify-content: flex-start;
}

.mox-setting-info {
  flex-grow: 1;

  display: flex;

  flex-direction: column;

  gap: 4px;
}

.mox-setting-label {
  font-family: var(--font-primary, "Inter", sans-serif);

  font-weight: 600;

  font-size: 1rem;

  color: #ffffff;
}

.mox-setting-desc {
  font-size: 0.8rem;

  color: var(--text-dim, rgba(255, 255, 255, 0.5));
}

.mox-setting-action {
  flex: 0 0 auto;
}

/* Toggle Switch Premium (Gold/Black) */

.mox-flat-toggle {
  appearance: none;

  -webkit-appearance: none;

  width: 50px;

  height: 28px;

  background-color: rgba(255, 255, 255, 0.1);

  border-radius: 30px;

  position: relative;

  outline: none;

  cursor: pointer;

  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  margin: 0;
}

.mox-flat-toggle::after {
  content: "";

  position: absolute;

  top: 2px;

  left: 2px;

  width: 24px;

  height: 24px;

  background-color: #ffffff;

  border-radius: 50%;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease;
}

.mox-flat-toggle:checked {
  background-color: #ffd700; /* Gold MOBIX */
}

.mox-flat-toggle:checked::after {
  transform: translateX(22px);

  background-color: #1a1a1a; /* Black perilla */
}

/* =========================================

   SUPPORT INBOX V2: NOTIFICATION DOT

   ========================================= */

.menu-notification-dot {
  position: relative;
}

.menu-notification-dot::after {
  content: "";

  position: absolute;

  top: 0px;

  right: -2px;

  width: 8px;

  height: 8px;

  background-color: #ff3b30;

  border-radius: 50%;

  border: 2px solid var(--bg-dark, #1a1a1c);

  animation: mox-pulse-red 2s infinite ease-out;

  pointer-events: none;

  z-index: 10;
}

/* =========================================

   SUPPORT INBOX V2: RED ASTERISK BADGE (HOTFIX)

   ========================================= */

#btn-menu {
  overflow: visible !important;
}

.menu-notification-dot::after {
  content: "*" !important;

  color: #ff3b30 !important;

  font-size: 28px !important;

  text-shadow: 0 0 8px rgba(255, 59, 48, 0.9) !important;

  background-color: transparent !important;

  border: none !important;

  top: -12px !important;

  right: -8px !important;

  width: auto !important;

  height: auto !important;

  animation: pulse-red-asterisk 1.5s infinite alternate !important;

  line-height: 1 !important;
}

@keyframes pulse-red-asterisk {
  0% {
    transform: scale(1);

    opacity: 0.8;
  }

  100% {
    transform: scale(1.3);

    opacity: 1;

    text-shadow: 0 0 12px #ff3b30;
  }
}

/* ============================================================================

   v30.23: NUCLEAR GPU SHIELD — Suspende TODOS los backdrop-filter durante
   interaccion con el mapa (pinch-zoom, drag, tap).
   La clase .user-is-interacting se aplica en map-engine.js via touchstart.
   ============================================================================ */
body.user-is-interacting * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* v30.31 WEBVIEW-TURBO: Pausar TODAS las animaciones CSS durante
     interacción con el mapa (pinch-zoom, drag). En Chrome, las
     animaciones fuera de viewport se pausan auto. En WebView NO:
     cada animation:infinite consume GPU permanentemente.
     animation-play-state:paused las suspende sin destruirlas,
     liberando ~20% de capacidad GPU para el scroll del mapa. */
  animation-play-state: paused !important;
}

/* ========================================
   v30.25: FLOATING SEARCH BADGE — Indicador de búsqueda activa
   Badge flotante premium que aparece sobre el mapa cuando hay
   una solicitud de viaje en progreso. Se OCULTA cuando la clase
   .hidden está presente (JS toggle).
   Respeta restricción GPU iOS: NO usa backdrop-filter.
   ======================================== */

#mox-search-badge {
  position: fixed;
  bottom: 100px;
  left: 16px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(15, 20, 25, 0.92);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 50px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 215, 0, 0.08);
  animation: moxBadgeSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition:
    transform 0.15s ease,
    opacity 0.3s ease;
}

#mox-search-badge:active {
  transform: scale(0.95);
}

#mox-search-badge.hidden {
  display: none !important;
}

/* Punto pulsante verde */
.mox-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2ecc71;
  flex-shrink: 0;
  animation: moxDotPulse 1.5s ease-in-out infinite;
}

.mox-badge-text {
  font-family: "Outfit", sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.mox-badge-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

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

@keyframes moxDotPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
    transform: scale(1.15);
  }
}
/* ============================================================================
   v7.7.0: MODO ALTA PERFORMANCE — Suspensión de GPU durante flyTo

   Cuando el mapa está animándose (flyTo/flyToBounds), se aplica .map-is-flying

   al <html> via ads-manager.js. Esto desactiva todos los backdrop-filter para

   liberar la GPU de iOS y evitar el freezing por competencia de compositing.

   ============================================================================ */

.map-is-flying .app-header {
  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 22, 0.98) !important;
}

.map-is-flying .search-overlay {
  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;
}

.map-is-flying .search-bar-inner {
  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(20, 20, 24, 0.98) !important;
}

.map-is-flying .poi-marker-glass {
  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(15, 15, 18, 0.95) !important;
}

.map-is-flying .poi-popup-glass {
  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(15, 15, 18, 0.95) !important;
}

.map-is-flying #driver-trip-subheader {
  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 22, 0.98) !important;
}

.map-is-flying .ride-details-drawer {
  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: rgba(18, 18, 22, 0.98) !important;
}

/* ========================================================

   MODO ALTA PERFORMANCE: Blindaje Táctil iOS (Ghost Select)

======================================================== */

#map,
.leaflet-container,
.leaflet-control-container,
.btn-map-float {
  /* Mata permanentemente el recuadro azul de WebKit en Long Press */

  -webkit-user-select: none !important;

  user-select: none !important;

  /* Destruye el menú contextual de iOS (Copiar Imagen del Tile/Enlace) */

  -webkit-touch-callout: none !important;

  /* Elimina el flasheo de recuadro oscuro al hacer tap continuo en iOS */

  -webkit-tap-highlight-color: transparent !important;
}

/* ============================================================================

   v7.8.2: ZOOM HIERARCHY ENGINE — Escala Unificada + Transparencia

   Todos los marcadores usan la MISMA escala por banda de zoom.

   La diferenciación Gold se delega al aro dorado (directory-sheet.css)

   y al zIndexOffset amplificado (app.js).

   

   Clases inyectadas por _updateZoomHierarchy() en app.js via map.on('zoomend').

   

   BANDAS:

     map-zoom-far   (zoom ≤ 14): scale(0.4). Dots mínimos.

     map-zoom-mid   (zoom 15-16): scale(0.85). Vista de barrio.

     map-zoom-close (zoom ≥ 17): scale(1.0). Tamaño natural.

   ============================================================================ */

/* ── BASE: GPU Prep v3 (marcadores ligeros para WebView) ── */
.poi-marker-glass {
  /* v30.31: backface-visibility ELIMINADO.
     Promueve CADA marcador a su propia capa GPU = 30 capas.
     En Chrome esto se optimiza; en WebView consume VRAM sin beneficio.
     Marcadores ahora son DOM ligeros sin capas GPU dedicadas. */
  contain: layout style;
}

/* ── ZOOM FAR (≤ 14): Dots mínimos — escala unificada ── */

.map-zoom-far .poi-marker-glass {
  transform: scale(0.4);

  opacity: 0.5;
}

/* Gold/Premium: misma escala, mayor presencia (opacity) */

.map-zoom-far .poi-marker-glass[data-tier="gold"],
.map-zoom-far .poi-marker-glass[data-tier="premium"] {
  opacity: 0.8;
}

/* Labels: fade suave */

.map-zoom-far .poi-marker-label {
  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease;
}

/* ── ZOOM MID (15-16): Vista de barrio ── */

.map-zoom-mid .poi-marker-glass {
  transform: scale(0.65);
}

.map-zoom-mid .poi-marker-label {
  transition: opacity 0.25s ease;
}

/* ── ZOOM CLOSE (≥ 17): Tamaño natural ── */

/* Escala 1.0 es el default — no se requiere regla explícita */

/* ── BLINDAJE GPU: Suspender transitions durante flyTo (iOS) ── */

.map-is-flying .poi-marker-glass,
.map-is-flying .poi-marker-label {
  transition: none !important;
}

/* Initialization for Driver UI Safe-Transform */

#driver-sub-header,
#driver-trip-subheader {
  --mox-tx: 0px;

  --mox-ty: 0px;

  transform: translate(var(--mox-tx), var(--mox-ty)) !important;
}

/* ================================================================= */

/* INTERACCIÓN GLOBAL DE UI (Atomic Hide) */

/* ================================================================= */

/* ================================================================= */

/* SLIDE-ON-TOUCH: Lógica de Desplazamiento Lateral Unificada       */

/* v7.8.4 — Variables mutadas POR ELEMENTO (no body-level)          */

/* ================================================================= */

/* --- Botones laterales HUD: deslizamiento en eje X --- */

body.user-is-interacting #btn-search-poi,
body.user-is-interacting #mox-search-led {
  --mox-tx: -100px;
}

body.user-is-interacting #recenter-btn {
  transform: translate(100px, var(--mox-ty, 0px));
}

/* --- Barras rectangulares: deslizamiento en eje Y --- */

body.user-is-interacting .fixed-ad-bar {
  --mox-ty: 120%; /* Ocultar hacia abajo */
}

body.user-is-interacting #driver-sub-header,
body.user-is-interacting #driver-trip-subheader {
  --mox-ty: -120%; /* Ocultar hacia arriba (debajo del Header) */
}

/* --- Botones centrales: deslizamiento en eje Y --- */

body.user-is-interacting .floating-action-bar {
  --mox-ty: 150px;
}

body.user-is-interacting #btn-master-offer,
body.user-is-interacting #btn-cancel-active-client {
  --mox-ty: 150px;
}

/* --- Fade + Pointer Lock para TODOS los elementos --- */

body.user-is-interacting .fixed-ad-bar,
body.user-is-interacting #recenter-btn,
body.user-is-interacting #btn-search-poi,
body.user-is-interacting #mox-search-led,
body.user-is-interacting .floating-action-bar,
body.user-is-interacting #driver-sub-header,
body.user-is-interacting #driver-trip-subheader,
body.user-is-interacting #btn-cancel-active-client,
body.user-is-interacting #btn-master-offer {
  opacity: 0 !important;
  pointer-events: none !important;
  /* 🚀 WebView Fix: NUNCA usar 'all' al interactuar, fuerza Layout Thrashing. 
     Solo transform y opacity escalan a 60fps reales en Android. */
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ================================================================= */

/* SUPPORT INBOX V2: GLASSMORPHISM & SMOOTH TRANSITION */

/* ================================================================= */

#mox-inbox-ui-injected {
  transform: translateY(100%);

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  background: rgba(18, 18, 22, 0.85) !important;

  /* backdrop-filter: blur(12px) !important; GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(12px) !important; GPU-PURGE v30.23 */

  z-index: 2200; /* Asegurar que no colisiona con el drawer */

  position: relative; /* Depende del layout del padre */

  border-top: 1px solid rgba(255, 255, 255, 0.05); /* Soft premium border */

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

  margin-top: -10px; /* Para solapar elegantemente con forms si es necesario */
}

#mox-inbox-ui-injected.chat-active {
  transform: translateY(0);
}

/* ================================================================= */

/* SUPPORT FORM V2: STATIC & OPACITY ONLY (No translation) */

/* ================================================================= */

#mox-support-form {
  opacity: 0;

  pointer-events: none;

  visibility: hidden;

  transition: opacity 0.35s ease;

  background: rgba(18, 18, 22, 0.85) !important;

  /* backdrop-filter: blur(12px) !important; GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(12px) !important; GPU-PURGE v30.23 */

  padding: 20px;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.05); /* Premium glass border */

  z-index: 2201;

  position: relative;
}

#mox-support-form.form-active {
  opacity: 1;

  pointer-events: auto;

  visibility: visible;
}

/* ================================================================= */

/* ACTION SHEET (Custom Select Premium UI) */

/* ================================================================= */

.mox-subject-sheet-overlay {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(0, 0, 0, 0.4);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.3s ease;

  z-index: 2300;
}

.mox-subject-sheet-overlay.active {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.mox-subject-sheet {
  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  transform: translateY(100%);

  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  background: rgba(25, 25, 30, 0.95);

  /* backdrop-filter: blur(20px); GPU-PURGE v30.23 */

  /* -webkit- backdrop-filter: blur(20px); GPU-PURGE v30.23 */

  border-top: 1px solid rgba(255, 255, 255, 0.08); /* Shiny top */

  border-top-left-radius: 20px;

  border-top-right-radius: 20px;

  padding: 20px;

  box-sizing: border-box;

  z-index: 2301;

  display: flex;

  flex-direction: column;

  gap: 10px;
}

.mox-subject-sheet.active {
  transform: translateY(0);
}

.mox-subject-option {
  padding: 15px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.03);

  color: #ddd;

  font-size: 0.95rem;

  text-align: center;

  transition:
    background 0.2s,
    transform 0.2s,
    color 0.2s;

  cursor: pointer;

  border: 1px solid transparent;
}

.mox-subject-option:active {
  background: rgba(255, 193, 7, 0.15);

  transform: scale(0.98);
}

.mox-subject-option[data-highlight="true"] {
  color: #ffc107;

  font-weight: 600;

  background: rgba(255, 193, 7, 0.05);

  border-color: rgba(255, 193, 7, 0.15);
}
.mox-manual-sync {
  text-align: center;
  margin-top: 15px;
  padding-bottom: 20px;
}
.mox-sync-link {
  color: #888;
  font-size: 13px;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 10px;
  display: inline-block;
}

/* ============================================================================
   v30.23: NUCLEAR GPU SHIELD — Suspende TODOS los backdrop-filter durante
   interaccion con el mapa (pinch-zoom, drag, tap).
   ============================================================================ */
body.user-is-interacting * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ========================================
   v30.26: SEARCH LED — Indicador LED de búsqueda activa
   Reemplaza la lupa cuando hay solicitud de viaje en progreso.
   Hereda 100% de .btn-map-float (position:fixed, bottom).
   FIX: Eliminado position:relative que anulaba position:fixed
   causando desfase de ~50px en móviles (iOS/Android).
   Reacciona automáticamente a tier (ads-hidden/pro) via
   --ui-map-controls-bottom heredado de .btn-map-float.
   ======================================== */

/* [ARQUITECTURA ESPEJO PWA v30.31 — Marcadores visibles a 60fps]
   ═══════════════════════════════════════════════════════════════
   ESTRATEGIA: En vez de ocultar marcadores (que rompe UX), replica
   cómo Chrome maneja los markers internamente:
   
   ① SINGLE GPU LAYER: Promover .leaflet-marker-pane a UNA sola capa
      GPU. Todos los marcadores se mueven como UNA textura compuesta
      en vez de ~120 nodos DOM individuales reposicionados por frame.
   
   ② CONTAIN: Cada marcador declara contain:strict → el browser sabe
      que el repaint de un marcador NO afecta a los demás.
   
   ③ CONTENT-VISIBILITY: Marcadores fuera de viewport se SKIP-renderizan
      automáticamente (misma optimización que Chrome hace internamente).
   
   ④ Sin hit-testing durante drag: pointer-events:none evita que el
      browser calcule qué marcador está bajo el dedo en cada frame. */

/* ─── CAPA 1: Pane como textura GPU unificada ─── */
.leaflet-marker-pane {
  will-change: transform;
  contain: layout style;
}

/* ─── CAPA 2: Cada marker con isolación de cálculo (sin paint clipping) ─── */
/* v30.40 FIX CRITICO: Se eliminó 'paint' de contain y content-visibility:auto.
   RAZÓN: 'contain: paint' actúa como overflow:hidden a nivel GPU compositor —
   recorta TODO lo que se desborde del rectángulo 44x56 del divIcon de Leaflet.
   Esto ahogaba las etiquetas (.poi-marker-label) y los anillos pulsantes.
   En PRODUCCIÓN esta regla NO EXISTE.
   'contain: layout style' mantiene la barrera de recálculo sin clipping visual. */
.leaflet-marker-icon {
  contain: layout style;
}

/* ─── CAPA 3: Optimización durante interacción (sin ocultar) ─── */
/* v30.37 FIX: pointer-events SOLO se bloquea en la ETIQUETA (label),
   NO en el contenedor completo (.poi-marker-container).
   RAZÓN: Bloquear el contenedor entero impedía que Leaflet registrara
   el evento click/touchend en el emoji, rompiendo preselectDestination().
   La etiqueta ya tiene pointer-events:none por defecto → sin impacto GPU.
   El emoji (.poi-marker-glass) mantiene pointer-events:auto → Leaflet
   puede hacer hit-testing SOLO en el círculo del emoji (1 nodo por marker)
   en vez de en todo el contenedor (que incluye label + padding). */
body.user-is-interacting .poi-marker-label {
  pointer-events: none !important;
}

body.user-is-interacting .leaflet-marker-icon,
body.user-is-interacting .mox-driver-premium-idle,
body.user-is-interacting .mox-driver-active-trip {
  box-shadow: none !important;
  transition: none !important;
  filter: none !important;
}

/* Tiles sin transiciones durante interacción */
body.user-is-interacting .leaflet-tile {
  transition: none !important;
}

#mox-search-led {
  left: 20px;
  --mox-tx: 0px;
  --mox-ty: 0px;
  /* NO declarar position/bottom: los hereda de .btn-map-float */
  background: rgba(10, 10, 12, 0.88) !important;
  border: 1px solid rgba(46, 204, 113, 0.35) !important;
  overflow: visible;
}

#mox-search-led::before {
  content: "" !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #2ecc71 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
  animation: moxLedPulse 1.5s ease-in-out infinite;
}

#mox-search-led::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 204, 113, 0.4);
  transform: translate(-50%, -50%);
  animation: moxLedWave 2s ease-out infinite;
  pointer-events: none;
}

@keyframes moxLedPulse {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px rgba(46, 204, 113, 0.8);
    transform: scale(1.15);
  }
}

@keyframes moxLedWave {
  0% {
    width: 20px;
    height: 20px;
    opacity: 0.6;
  }
  100% {
    width: 44px;
    height: 44px;
    opacity: 0;
  }
}

/* ========================================================================= */
/* 🚀 RECTIFICACIÓN FERRARI - ANDROID WEBVIEW (v30.30)                       */
/* Bloque '.user-is-interacting' eliminado por Layout Thrashing Severo       */
/* ========================================================================= */

/* HARDWARE VECTOR SHIELD PURGADO: will-change en SVG causa WebView stutter */