/* Global utility classes */
.lib-hidden, .hidden {
  display: none !important;
}

:root {
  --primary-color: #0082ff;
  --bg-dark: #121212;
  --text-light: #ffffff;
  --btn-glass: rgba(20, 20, 20, 0.2); /* Mucho más transparente */
  --btn-glass-hover: rgba(40, 40, 40, 0.4);
  --border-glass: rgba(255, 255, 255, 0.15);
  
  /* Dynamic themes: Updated to evy's electric blue to neon green identity */
  --theme-color: #00ff87;
  --theme-color-rgb: 0, 255, 135;
  --theme-gradient: linear-gradient(135deg, #0082ff, #00ff87);
  --btn-shadow: 0 8px 32px rgba(0, 255, 135, 0.25);
  --dash-bg-image: url('assets/car_bordeaux.png');

  /* Drawer specific unified theme matching GAC Aion UT cyan palette */
  --drawer-theme-color: #00ffd7;
  --drawer-theme-color-rgb: 0, 255, 215;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  /* Elimina el delay de 300ms en todos los elementos interactivos */
  touch-action: manipulation;
}

body, html {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
  color: var(--text-light);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 45px rgba(0,0,0,0.85);
  background-color: #000000;
}

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* Solo animar propiedades compositor-friendly (opacity + transform) */
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.38s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 1;
}

.view.hidden {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
  transition: opacity 0.32s ease, z-index 0s linear 0.32s;
}

.view.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
  transform: translateZ(0);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.42s ease, z-index 0s linear 0s;
}

/* Preload Rules to avoid FOUC / Welcome Flash */
html {
  overscroll-behavior-x: none;
}

html.preload-skip-welcome #view-welcome {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transform: scale(0.9) !important;
}

html.preload-show-dashboard #view-dashboard {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  transform: none !important;
}

html.preload-show-main-menu #view-main-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  transform: none !important;
}

html.preload-show-auth #view-auth {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  transform: none !important;
}

/* Backgrounds */
.auth-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('assets/welcome.webp');
  background-size: cover;
  background-position: center;
  filter: brightness(1.05) contrast(1.25) saturate(1.25);
}

.welcome-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.welcome-logo-container {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-logo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  z-index: 10;
  border-radius: 34px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
}

.orbit-spinner {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  padding: 3.5px;
  background: conic-gradient(from 0deg, #0082ff, #00ff87 90deg, transparent 180deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: orbitRotate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 5;
}

@keyframes orbitRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Marca de agua elegante en la pantalla de bienvenida */
.welcome-watermark {
  position: absolute;
  left: 2rem;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  color: rgba(255, 255, 255, 0.25); /* Blanco muy atenuado y sutil */
  font-size: 0.72rem; /* Tamaño más pequeño y discreto */
  font-weight: 400;
  letter-spacing: 0.03em;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dash-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: var(--dash-bg-image, url('assets/car_bordeaux.png'));
  background-size: var(--dash-bg-size, cover);
  background-repeat: no-repeat;
  background-position: var(--dash-bg-position, center center);
  background-color: #121212;
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: opacity;
  filter: var(--dash-bg-filter, brightness(1.05) contrast(1.15) saturate(1.1));
}

/* Auth View */
.auth-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Vignette radial súper sutil y clara para no apagar la foto original */
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 0;
  box-sizing: border-box;
}

.auth-overlay::before,
.auth-overlay::after {
  content: '';
  margin: auto;
}

.auth-card {
  flex-shrink: 0;
  margin: 1.5rem auto;
  /* Cristal ahumado al 60% de opacidad sin backdrop-filter blur para mayor nitidez */
  background: rgba(18, 18, 18, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2.5rem 2rem;
  border-radius: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  color: #ffffff;
  text-align: center;
  
  /* Preparación para transición blowback — sin blur para evitar composición software */
  opacity: 0;
  transform: scale(1.12) translateZ(0);
  /* Quitar 'filter' del will-change: crea una capa GPU persistente costosa */
  will-change: transform, opacity;
}

/* Animación blowback reducida a 2.5s — blur eliminado para fluidez en móvil */
#view-auth.active .auth-card {
  animation: slowBlowback 2.5s cubic-bezier(0.15, 0.85, 0.35, 1) 0.6s forwards;
}

@keyframes slowBlowback {
  0% {
    opacity: 0;
    transform: scale(1.12) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

.auth-card h2 {
  margin-bottom: 0.5rem;
  color: #ffffff;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
}

.auth-card p {
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
}

.auth-logo {
  height: 58px; /* Unificado con el tamaño estándar del logo evy */
  width: auto;
  margin-bottom: 1.4rem;
  display: inline-block;
  object-fit: contain;
  /* Integrado en el fondo: transparente, sin bordes ni marco de icono */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

input, select {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1rem;
  outline: none;
  /* Solo propiedades compositor-safe */
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  width: 100%;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  accent-color: #38bdf8;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

input:focus, select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 130, 255, 0.25);
  background: rgba(255, 255, 255, 0.15);
}

.register-only.hidden {
  display: none;
}

.car-details-group {
  display: flex;
  gap: 0.8rem;
  width: 100%;
}

.car-details-group input {
  flex: 1;
}

.btn-primary {
  padding: 14px;
  background: var(--theme-gradient);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.25s ease;
  margin-top: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 255, 135, 0.2);
}

.btn-primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 20px rgba(0, 255, 135, 0.35);
}

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

/* Forzar color azul oscuro premium para los botones de subida en la biblioteca */
#btn-trigger-upload-doc,
#btn-trigger-upload-video {
  background: linear-gradient(135deg, #102a43, #1e3e62) !important;
  box-shadow: 0 4px 15px rgba(16, 42, 67, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#btn-trigger-upload-doc:hover,
#btn-trigger-upload-video:hover {
  background: linear-gradient(135deg, #1d3f5e, #294e75) !important;
  box-shadow: 0 6px 20px rgba(16, 42, 67, 0.6) !important;
}

#btn-trigger-upload-doc:active,
#btn-trigger-upload-doc:focus,
#btn-trigger-upload-video:active,
#btn-trigger-upload-video:focus {
  background: linear-gradient(135deg, #0a1f33, #142d4c) !important;
  box-shadow: 0 3px 10px rgba(16, 42, 67, 0.5) !important;
  transform: scale(0.98) !important;
  outline: none !important;
}

.auth-separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0 1rem;
  color: #888;
}

.auth-separator::before,
.auth-separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.auth-separator span {
  padding: 0 10px;
  font-size: 0.9rem;
}

.social-login {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 12px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-google {
  background: white;
  color: #333;
  border: 1px solid #ccc;
}

.btn-google:hover {
  background: #f1f1f1;
}

.btn-apple {
  background: #000000;
  color: #ffffff;
  border: 1px solid #333333;
}

.btn-apple:hover {
  background: #1a1a1a;
}

.btn-facebook {
  background: #1877F2;
  color: white;
  border: 1px solid #1877F2;
}

.btn-facebook:hover {
  background: #166fe5;
}

.auth-switch {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.auth-switch a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

/* Forgot password link — sutíl, solo visible en modo login */
.forgot-password-container {
  text-align: center;
  margin-top: 0.65rem;
  margin-bottom: 0.1rem;
}

.forgot-password-container a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.forgot-password-container a:hover,
.forgot-password-container a:active {
  color: rgba(255, 255, 255, 0.82);
}

/* Utility: ocultar en modo registro */
.login-only.hidden-in-register {
  display: none !important;
}

/* Dashboard View - Premium Bento Grid & Digital Cockpit Redesign */
.dash-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Estado de fundido a negro absoluto */
.dash-fade-to-black .dash-bg {
  opacity: 0 !important;
}

.dash-fade-to-black .dash-content {
  opacity: 0 !important;
  transform: scale(0.96); /* Sutil alejamiento tridimensional al apagarse */
  pointer-events: none;
}

/* Top Telemetry Action Bar */
.dash-top-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 44px; /* Unificado con el alto de la barra del menú principal */
  z-index: 20;
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición de retorno suave */
  will-change: transform, opacity;
}

.dash-top-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  visibility: hidden;
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  background-color: #00ff87;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff87;
  animation: greenPulse 1.8s infinite;
}

@keyframes greenPulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 255, 135, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(0, 255, 135, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 255, 135, 0);
  }
}

.brand-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.dash-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

#btn-logout:hover {
  background: rgba(220, 53, 69, 0.25);
  border-color: rgba(220, 53, 69, 0.4);
  color: #ff4a5a;
}

/* Center Large Telemetry Text */
.dash-center-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  justify-content: flex-start;
  padding-top: 1.2rem;
  padding-bottom: 2rem;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición de retorno suave */
  will-change: transform, opacity;
}

.dash-logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.logo-letters-img {
  height: 44px; /* Unificado con el tamaño del logo en la Pantalla Principal */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.logo-suffix-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 2.3rem;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
}

.model-telemetry-status {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

/* Botón Destacado de Explorar Cargadores en Dashboard (v129.52) */
.dash-primary-action {
  margin-top: 1.8rem;
  z-index: 50;
  pointer-events: auto !important; /* Permitir clics a pesar de pointer-events none del contenedor */
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-primary-explore {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(12, 12, 17, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(var(--drawer-theme-color-rgb, 0, 255, 215), 0.3);
  color: #fff;
  padding: 0.85rem 1.65rem;
  border-radius: 30px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 15px rgba(var(--drawer-theme-color-rgb, 0, 255, 215), 0.1);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  outline: none;
  pointer-events: auto !important;
}

.btn-primary-explore:hover, .btn-primary-explore:active {
  background: rgba(var(--drawer-theme-color-rgb, 0, 255, 215), 0.12);
  border-color: rgba(var(--drawer-theme-color-rgb, 0, 255, 215), 0.85);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 25px rgba(var(--drawer-theme-color-rgb, 0, 255, 215), 0.3);
}

.btn-primary-explore:active {
  transform: translateY(1px);
}

.btn-explore-bolt {
  font-size: 1.05rem;
  color: var(--drawer-theme-color, #00ffd7);
  filter: drop-shadow(0 0 4px rgba(var(--drawer-theme-color-rgb, 0, 255, 215), 0.4));
  animation: explore-bolt-pulse 1.8s infinite ease-in-out;
  display: inline-block;
}

@keyframes explore-bolt-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 3px rgba(var(--drawer-theme-color-rgb, 0, 255, 215), 0.3));
  }
  50% {
    transform: scale(1.2) rotate(15deg);
    filter: drop-shadow(0 0 8px rgba(var(--drawer-theme-color-rgb, 0, 255, 215), 0.7));
  }
}

/* Bento Grid System */
.dash-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 10;
  
  /* Cajón Digital: Inicialmente oculto abajo */
  transform: translateY(115%);
  transition: transform 0.75s cubic-bezier(0.25, 1, 0.3, 1);
  opacity: 1;
  pointer-events: none;
  will-change: transform;
}

/* Estado activo cuando el cajón está abierto */
.drawer-open .dash-bento-grid {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Botón flotante para alternar el cajón */
.drawer-toggle-btn {
  position: absolute;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(12, 12, 17, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  will-change: transform, opacity;
}

.drawer-toggle-btn:hover, .drawer-toggle-btn:active {
  background: rgba(12, 12, 17, 0.65);
  color: var(--drawer-theme-color);
  border-color: rgba(var(--drawer-theme-color-rgb), 0.35);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55), 0 0 12px rgba(var(--drawer-theme-color-rgb), 0.2);
}

.drawer-arrow-svg {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Rotación de la flecha al abrir el cajón (apunta hacia abajo) */
.drawer-open .drawer-arrow-svg {
  transform: rotate(180deg);
}

.bento-card {
  background: rgba(18, 18, 18, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.15rem;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  /* Solo transform+opacity: compositor-friendly, sin box-shadow en transición */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* Fuerza GPU layer */
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent);
  pointer-events: none;
}

.bento-card-large {
  grid-column: span 2;
  height: 125px;
}

.bento-card-small {
  grid-column: span 1;
  height: 110px;
}

.bento-card-wide {
  grid-column: span 2;
  height: 85px;
  flex-direction: row;
  align-items: center;
  padding: 1rem 1.2rem;
}

/* Bento Info Typography */
.bento-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bento-card-wide .bento-info {
  flex-grow: 1;
  padding-right: 10px;
}

.bento-info h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.bento-info p {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.3;
}

/* Bento Vector Icons & Glows */
.bento-icon, .bento-icon-glow {
  color: #00bfff; /* Color azul eléctrico por defecto */
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.bento-card-wide .bento-icon-glow {
  margin-bottom: 0;
  margin-right: 1rem;
}

.bento-svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Specific glows matching evy's tech branding */
.bento-icon-glow {
  color: #00bfff; /* Color azul eléctrico */
  filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.3)); /* Brillo azul eléctrico */
}

.wa-glow {
  color: #25D366 !important;
  filter: drop-shadow(0 0 6px rgba(37, 211, 102, 0.3)) !important;
}

.wa-svg {
  width: 26px;
  height: 26px;
}

/* Status badge and indicators inside Bento */
.bento-badge {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #00bfff; /* Azul eléctrico */
  background: rgba(0, 191, 255, 0.12);
  border: 1px solid rgba(0, 191, 255, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
}

.bento-arrow {
  display: none !important;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.95rem;
  transition: transform 0.3s ease, color 0.3s;
}

/* Interactivity Hover & Tap */
.bento-card:hover {
  background: rgba(30, 30, 30, 0.65); /* Cristal ahumado hover al 65% */
  border-color: rgba(0, 191, 255, 0.5); /* Borde azul eléctrico al 50% */
  box-shadow: 0 8px 32px rgba(0, 191, 255, 0.15); /* Sombra y brillo azul eléctrico */
}

.bento-card:hover .bento-icon {
  transform: translateY(-2px);
  color: #ffffff;
}

.bento-card:hover .bento-icon-glow {
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.5)); /* Brillo azul eléctrico hover */
}

.bento-card:hover .wa-glow {
  filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.5)) !important; /* Brillo verde WhatsApp hover */
}

.bento-card:hover .bento-arrow {
  transform: translateX(3px);
  color: #ffffff;
}

.bento-card:active {
  transform: scale(0.97);
  background: rgba(30, 30, 30, 0.65);
}

/* Modals */
.modal {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 480px;
  height: 100%;
  background-color: #09090b; /* Fondo negro sólido premium (Quiet Luxury) */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  
  /* Slide-up transition */
  transform: translateX(-50%) translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.modal.hidden {
  display: none !important;
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.modal.active-slide {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: #111113; /* Fondo sólido plano para evitar transparencias ruidosas */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 1.5rem;
  border-radius: 24px;
  width: 95%;
  height: 90%;
  max-width: 500px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════
   MAPA FULL-SCREEN — Sistema de diseño nuevo
   ══════════════════════════════════════════ */

/* El modal del mapa no tiene frame — el mapa ocupa toda la pantalla */
#modal-map {
  background: #0d0d0d;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

/* El mapa llena 100% del modal */
#modal-map #map-google {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #0d0d0d;
  overflow: hidden;
}

/* ── Punto de ubicación del usuario (animado) ── */
.user-loc-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.user-loc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #1B6FFF;
  opacity: 0;
  animation: userLocRipple 2.4s ease-out infinite;
}
.user-loc-ring.r2 { animation-delay: 0.8s; }
.user-loc-ring.r3 { animation-delay: 1.6s; }

@keyframes userLocRipple {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(4.5); opacity: 0; }
}

.user-loc-core {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #6EB4FF 0%, #1B6FFF 60%, #0045CC 100%);
  box-shadow:
    0 0 0 2.5px #fff,
    0 0 0 3.5px rgba(27,111,255,0.4),
    0 0 14px rgba(27,111,255,0.8);
  animation: userLocPulse 2s ease-in-out infinite;
}

@keyframes userLocPulse {
  0%, 100% { box-shadow: 0 0 0 2.5px #fff, 0 0 0 3.5px rgba(27,111,255,0.4), 0 0 14px rgba(27,111,255,0.8); }
  50%       { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px   rgba(27,111,255,0.6), 0 0 22px rgba(27,111,255,1); }
}

/* ── Header flotante ── */
#map-floating-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: env(safe-area-inset-top, 44px) 16px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.map-header-back {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(26, 26, 28, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.map-header-back:active { transform: scale(0.92); background: rgba(38, 38, 40, 0.9); }

.map-loading-badge {
  pointer-events: none;
  font-size: 0.72rem;
  color: #00C9A7;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  width: 38px;
  text-align: right;
  text-shadow: 0 0 8px rgba(0,201,167,0.6);
}

/* ── Filtro flotante (pill + panel), ahora dentro del header, en el lugar del título ── */
#map-filter-wrapper {
  position: relative;
  flex: 1;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

#map-filter-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: rgba(20, 20, 26, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
#map-filter-btn:active { transform: scale(0.96); }
#map-filter-chevron { transition: transform 0.25s; }
#map-filter-btn.open #map-filter-chevron { transform: rotate(180deg); }

#map-filter-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(18, 18, 26, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  min-width: 180px;
  animation: filterPanelIn 0.2s ease;
}
#map-filter-panel.hidden { display: none; }

@keyframes filterPanelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.map-filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}
.map-filter-opt:hover { background: rgba(255,255,255,0.08); color: #fff; }
.map-filter-active { background: rgba(0,201,167,0.15) !important; color: #00C9A7 !important; font-weight: 700; }

.map-filt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: inherit;
}

#map-filter-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 190;
}
#map-filter-overlay.visible { display: block; }

/* ── Botón tema ── */
#btn-map-theme {
  position: absolute;
  bottom: 120px;
  right: 16px;
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20,20,26,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: transform 0.2s, background 0.2s;
}
#btn-map-theme:active { transform: scale(0.9); }

#btn-report-charger {
  position: absolute;
  bottom: 188px;
  right: 16px;
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 201, 167, 0.92);
  border: 1px solid rgba(255,255,255,0.25);
  color: #06231c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,201,167,0.4);
  transition: transform 0.2s, background 0.2s;
}
#btn-report-charger:active { transform: scale(0.9); }
#btn-report-charger svg { width: 32px; height: 32px; }

/* ── Overlay de la tarjeta de detalle ── */
#map-card-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 350;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: overlayFadeIn 0.25s ease;
}
#map-card-overlay.visible { display: block; }
@keyframes overlayFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ── Tarjeta flotante central ── */
#map-detail-card {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.88);
  z-index: 400;
  width: 88%;
  max-width: 360px;
  background: rgba(12, 12, 18, 0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
  opacity: 0;
}
#map-detail-card.open {
  display: block;
  animation: cardSpringIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes cardSpringIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Botón cerrar */
.map-card-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.map-card-close:active { transform: scale(0.88); background: rgba(255,255,255,0.2); }

/* Ilustración del conector */
#map-card-connector-img {
  width: 100%;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(0,201,167,0.12) 0%, rgba(0,40,50,0.4) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}
#map-card-connector-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,201,167,0.18) 0%, transparent 70%);
}

/* Cuerpo de la tarjeta */
#map-card-body { padding: 16px 18px 20px; }

#map-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.3;
  padding-right: 24px; /* evitar solapamiento con btn cerrar */
}
#map-card-address {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin: 0 0 14px;
  line-height: 1.4;
}

/* Badges fila */
#map-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
.map-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.8);
}
.map-card-badge.power  { background: rgba(0,201,167,0.12); border-color: rgba(0,201,167,0.28); color: #00C9A7; }
.map-card-badge.points { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.11); color: #fff; }
.map-card-badge.dist   { background: rgba(255,200,80,0.12);  border-color: rgba(255,200,80,0.28);  color: #ffd060; }
.map-card-badge.oper   { background: rgba(120,140,255,0.12); border-color: rgba(120,140,255,0.28); color: #a0b0ff; }

/* Etiqueta sección */
.map-card-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

/* Pills de conectores */
#map-card-plugs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.map-card-plug {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(0,201,167,0.08);
  border: 1px solid rgba(0,201,167,0.2);
  color: #00C9A7;
}

/* CTA botón */
.map-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #00C9A7 0%, #007f87 100%);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(0,201,167,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.map-card-btn:active { transform: scale(0.97); }

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}


/* Modal Background Colors (Quiet Luxury) */
#modal-library {
  background-image: url('assets/Fondo_bibliotecas.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

#modal-community,
#modal-whatsapp,
#modal-profile,
#modal-doc-viewer,
#modal-admin-doc-review,
#modal-video-play,
#modal-admin-video-review {
  background: #09090b !important;
}

.close {
  position: absolute;
  top: 1.2rem;
  left: 1.5rem;
  font-size: 1.8rem;
  cursor: pointer;
  color: #fff;
  line-height: 1;
  transition: color 0.2s;
}

.close:hover {
  color: white;
}

.modal-content h2 {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.8rem;
  font-weight: 600;
}

.resource-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 10px 6px 12px 6px !important;
}

.resource-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 1.1rem 1.4rem;
  background: rgba(255, 255, 255, 0.05) !important; /* Totalmente transparente/translúcido */
  border: 1.2px solid rgba(255, 255, 255, 0.1) !important; /* Borde elegante de cristal */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.resource-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff;
  transform: translateY(-2px); /* Desplazamiento premium hacia arriba */
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.05), 0 4px 15px rgba(0, 0, 0, 0.35);
}

.resource-link:active {
  transform: translateY(0) scale(0.98); /* Feedback físico al pulsar */
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Biblioteca Styles */
#modal-library .modal-content {
  opacity: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative !important; /* contexto de posicionamiento para las vistas absolutas durante animación */
  overflow: hidden !important;   /* recorta el contenido que se desliza fuera de los límites */
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

#modal-library.show-glass .modal-content {
  opacity: 1;
}

#lib-docs,
#lib-videos {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* La clase .lib-hidden debe poder ganarle al display:flex de arriba */
#lib-docs.lib-hidden,
#lib-videos.lib-hidden,
#lib-menu.lib-hidden {
  display: none !important;
}

#lib-docs .resource-list,
#lib-videos .resource-list {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  margin-bottom: 0 !important;
  padding: 22px 6px 32px 6px !important;
  margin-top: -12px !important;

  /* Ocultar barra de desplazamiento nativa, igual que en el selector de marcas */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;

  /* Difuminado superior/inferior para listas largas, igual que .model-grid */
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 75%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 75%, transparent 95%);
}

#lib-docs .resource-list::-webkit-scrollbar,
#lib-videos .resource-list::-webkit-scrollbar {
  display: none;
}

#lib-docs .lib-upload-container,
#lib-videos .lib-upload-container,
#lib-docs .compliance-disclaimer,
#lib-videos .compliance-disclaimer {
  flex-shrink: 0 !important;
}

#lib-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  position: relative;
}

.lib-menu-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1rem;
  /* Ajuste fino de alineación con el diseño del fondo — subir (negativo) o bajar (positivo) este único valor */
  transform: translateY(-51.6px);
}

.lib-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 20px;
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: inherit;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

@media (hover: hover) {
  .lib-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }
}

.lib-card:active {
  transform: translateY(-2px) scale(0.97);
  background: rgba(0, 0, 0, 0.35) !important;
}

.lib-card-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
  pointer-events: none !important;
}

.lib-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  letter-spacing: 0.5px;
  color: #fff;
  pointer-events: none !important;
}

.lib-card-desc {
  font-size: 0.85rem;
  color: #bbb;
  line-height: 1.35;
  pointer-events: none !important;
}

.lib-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.8rem;
  padding-top: calc(0.4rem + env(safe-area-inset-top, 24px));
}

/* El modal de Plan de Carga ya suma env(safe-area-inset-top) en su propio padding
   (ver estilo inline de #modal-charging-plan .modal-content); evitar duplicarlo aquí */
#modal-charging-plan .lib-header {
  padding-top: 0.4rem;
}

/* Lo mismo para el modal de evyshop: su .modal-content ya suma el safe-area-inset-top
   en el padding del contenedor (ver estilo inline de #modal-shopping .modal-content);
   sin esto, el header interno de Anunciar/Mis Anuncios/Mensajes lo sumaba una segunda vez */
#modal-shopping .lib-header {
  padding-top: 0.4rem;
  /* El espaciado hacia el contenido ya lo da el gap del contenedor flex de cada
     vista (Anunciar/Mis Anuncios/Mensajes); el margin-bottom de 1.5rem duplicaba
     ese espacio y dejaba un hueco desperdiciado bajo el título */
  margin-bottom: 0;
}

.lib-header h2 {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
  flex-grow: 1;
  text-align: center;
}

.btn-back-lib {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-back-lib:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lib-upload-container {
  margin-top: 1.5rem;
}

.btn-secondary {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px dashed #666;
  color: #aaa;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.05);
  color: white;
  border-color: #aaa;
}

.lib-legal-footer {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  line-height: 1.4;
  flex-shrink: 0;
}

.lib-legal-footer a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
  font-weight: 500;
}

.lib-legal-footer a:hover {
  color: #fff;
}

.wa-main-link {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  text-decoration: none;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wa-main-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.wa-main-link div {
  display: flex;
  flex-direction: column;
}

.wa-main-link small {
  opacity: 0.6;
  font-size: 0.8rem;
  margin-top: 2px;
}

.whatsapp-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.wa-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  text-decoration: none;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wa-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  box-sizing: border-box;
  color: #25D366; /* Verde WhatsApp para el icono vectorial */
}

.wa-link span {
  flex: 1;
  text-align: center;
  line-height: 1.2;
  padding: 0 5px;
}

.wa-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Logout Button */
.btn-logout {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 1rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 20;
}

.btn-profile {
  position: absolute;
  top: calc(7px + env(safe-area-inset-top, 0px));
  left: 1rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 20;
}

.btn-profile:hover, .btn-logout:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-logout:hover {
  background: rgba(255, 0, 0, 0.6);
  border-color: rgba(255, 100, 100, 0.5);
}

.btn-profile:active, .btn-logout:active {
  transform: scale(0.95);
}

/* Dash Header adjustments for absolute logout button */
.dash-header {
  width: 100%;
}

/* Animations - Staggering */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view.active .stagger-1 {
  animation: slideUpFade 0.6s ease forwards 0.2s;
  opacity: 0; /* Starts hidden */
}

.view.active .stagger-2 {
  animation: slideUpFade 0.6s ease forwards 0.35s;
  opacity: 0;
}

.view.active .stagger-3 {
  animation: slideUpFade 0.6s ease forwards 0.5s;
  opacity: 0;
}

.view.active .stagger-4 {
  animation: slideUpFade 0.6s ease forwards 0.65s;
  opacity: 0;
}

/* Profile Modal specific styles */
#modal-profile {
  background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.9)), url('assets/car_front_original.webp');
  background-size: cover;
  background-position: center;
}

#modal-profile .modal-content {
  padding-top: 1rem;
}

#modal-profile .lib-header {
  padding-top: 0 !important;
  margin-bottom: 1.2rem !important;
}

@media (max-width: 768px) {
  #modal-profile {
    align-items: flex-start;
  }

  #modal-profile .modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 0.75rem 1rem 1rem 1rem;
    padding-top: calc(0.5rem + env(safe-area-inset-top, 24px));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 15px));
  }

  #modal-profile .lib-header {
    margin-bottom: 0.8rem !important;
  }

  #modal-profile .profile-form {
    gap: 0.5rem;
    padding-bottom: 1.5rem;
  }
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: left;
  overflow-y: auto;
  padding-bottom: 2rem;
}

.profile-form label {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: -0.4rem;
  margin-top: 0.5rem;
}

.profile-form input, .profile-form select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.profile-form input:focus, .profile-form select:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--primary-color);
}

.profile-form select option {
  background: var(--bg-dark);
  color: white;
}

/* Shopping Center View Styles */
#view-shopping {
  background: url('assets/shop_splash.webp') no-repeat center center;
  background-size: cover;
  color: white;
  display: flex;
  flex-direction: column;
  
  /* Slide-up custom transitions, sobreescribiendo el zoom general de las vistas */
  transform: translateY(100%) !important;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.3, 1) !important, opacity 0.5s ease !important;
  opacity: 0 !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

#view-shopping.active {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

#view-shopping.hidden {
  transform: translateY(100%) !important;
  opacity: 0 !important;
}

.shop-topbar {
  height: calc(60px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: flex-end; /* Alinea los items al fondo de la barra, por si hay notch */
  padding: 0 1rem 10px 1rem; /* padding bottom para centrar respecto al height de 60px original */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto; /* Habilitar interacción para evitar que WebKit trague los clics en el botón Atrás */
}

.shop-topbar .close {
  top: calc(env(safe-area-inset-top, 0px) + 15px);
  left: 1.5rem;
  pointer-events: auto; /* Mantener interactividad del botón de volver */
}

.shop-topbar.hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.btn-back {
  background: transparent;
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 1rem;
}

#shop-topbar-title {
  font-size: 1.2rem;
  font-weight: 600;
  flex-grow: 1;
}

.shop-subview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateX(50px);
}

.shop-subview:not(#shop-splash) {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.shop-subview.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.shop-subview.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50px); /* Move left when hiding to simulate deeper navigation */
}

/* Splash Screen */
#shop-splash {
  padding-top: 0; /* Full screen */
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 60;
  transform: scale(1.1);
}

#shop-splash.active {
  transform: scale(1);
}

.shop-splash-content {
  text-align: center;
  animation: pulseLogo 2s infinite;
}

.shop-splash-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  display: block;
}

.shop-splash-content h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  background: -webkit-linear-gradient(#fff, #eee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

.shop-splash-content p {
  color: #fff;
  font-size: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  font-weight: 500;
}

@keyframes pulseLogo {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Lists and Content */
.shop-content-scroll {
  padding-top: calc(75px + env(safe-area-inset-top, 0px)); /* Usar padding en vez de margin evita el bug de altura de Safari en iOS */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 120px !important; /* Espacio de seguridad extra al final para scroll y botón de Compra */
  flex: 1;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important; /* Evita que el scroll rebote en el body/PWA */
  touch-action: pan-y !important; /* Habilita el gesto de deslizamiento vertical nativo */
  box-sizing: border-box;
  user-select: auto !important;
  -webkit-user-select: auto !important;
}

.shop-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

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

/* MercadoPago Interactive Payment Option styles */
.mp-payment-option {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mp-payment-option:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.mp-payment-option.active:hover {
  background: rgba(0, 158, 227, 0.15) !important;
  border-color: #009ee3 !important;
  box-shadow: 0 4px 15px rgba(0, 158, 227, 0.2);
}

/* Large store tile (1:1 icon style) */
.store-tile {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
  gap: 0.6rem;
}

.store-tile:hover,
.store-tile:active {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.store-tile-logo-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.store-tile-emoji {
  font-size: 3rem;
}

.store-tile-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.store-tile-category {
  font-size: 0.72rem;
  color: #ffffff;
  line-height: 1.2;
}


/* Store products page header with big logo */
.store-page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.store-page-logo {
  width: 130px;
  height: 130px;
  border-radius: 22px;
  object-fit: cover;
  object-position: center;
  background: #111;
  margin-bottom: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.store-page-category {
  font-size: 0.82rem;
  color: #ffffff;
  text-align: center;
}

/* Products grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Price tag on product cards */
.product-price-tag {
  font-size: 1rem;
  font-weight: 700;
  color: #00d2ff;
  margin-top: 0.3rem;
}

/* Products Grid */
/* Eliminado el override de 1 columna para mantener el hermoso diseño prémium de 2 columnas de arriba */

.product-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s;
}

.product-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
}

.product-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.product-img-placeholder {
  height: 120px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  margin-bottom: 0.8rem;
}

/* Store logo image (real photo) */
.store-logo-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  margin-right: 1rem;
  border: 2px solid rgba(255,255,255,0.15);
  background: #111;
}

/* Product card with real image */
.product-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 0.8rem;
  display: block;
}

/* Product detail gallery */
.product-gallery {
  margin-bottom: 1.5rem;
  border-radius: 16px;
  overflow: hidden;
}

.gallery-main {
  width: 100%;
  aspect-ratio: 4 / 3; /* Formato clásico más alto que evita recortes excesivos */
  object-fit: cover;
  border-radius: 16px;
  display: block;
  transition: opacity 0.25s ease;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.gallery-thumb {
  aspect-ratio: 4 / 3;
  width: 65px; /* Tamaño ideal y balanceado para ahorrar espacio */
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: opacity 0.2s, border-color 0.2s;
}

.gallery-thumb.active,
.gallery-thumb:hover {
  border-color: #00d2ff;
  opacity: 1;
}

/* Product Detail */
.product-detail-hero {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  margin-bottom: 1.5rem;
}

.product-detail-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.product-detail-store {
  color: #888;
  margin-bottom: 1.5rem;
}

.product-detail-desc {
  font-size: 1rem;
  line-height: 1.5;
  color: #ccc;
  margin-bottom: 1.5rem;
}

.product-detail-price-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: rgba(255, 215, 0, 0.08);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.05);
}

.price-label {
  font-weight: 700;
  color: #ffd700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.payment-plans-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.payment-plan-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-plan-card.highlight {
  border-color: #00d2ff;
  background: rgba(0, 210, 255, 0.1);
}

.plan-name {
  font-weight: 600;
  color: #ddd;
}

.plan-price {
  font-weight: 800;
  color: #fff;
}

.product-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px)); /* Space for iOS home indicator */
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 50;
}

.btn-buy-full {
  width: 100%;
  background: linear-gradient(135deg, #009ee3, #006ebc);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 158, 227, 0.4);
  transition: transform 0.2s;
}

.btn-buy-full:active {
  transform: scale(0.96);
}

@media (max-width: 400px) {
  .whatsapp-list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   NUEVO SISTEMA DE VISOR DE DOCUMENTOS
   ========================================================================= */

/* El modal ocupa toda la pantalla */
#modal-doc-viewer {
  background: #111 !important;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

/* Contenedor principal: columna flex de toda la pantalla */
#modal-doc-viewer .doc-modal-content {
  width: 100%;
  height: 100%;
  max-width: 100%;
  background: #111;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header fijo en la parte superior — respeta el notch/safe-area del iPhone */
.viewer-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  background: rgba(20, 20, 20, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  /* Padding superior = altura del status bar del iPhone + espacio cómodo */
  padding: calc(env(safe-area-inset-top, 44px) + 10px) 1rem 12px 1rem;
}

/* Botón volver */
.viewer-back-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.viewer-back-btn:active { background: rgba(255,255,255,0.2); }

/* Botón descargar azul prémium */
.viewer-download-btn {
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: none;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.35);
}
.viewer-download-btn:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, #0056b3, #004085);
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
}

/* Título del documento */
.viewer-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  border: none;
  padding: 0;
}

/* El contenedor wrapper del iframe permite scroll táctil nativo e independiente en iOS y Android */
.viewer-iframe-wrapper {
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  overflow: auto !important;
  overscroll-behavior: contain;
  background: #fff;
  display: block;
  position: relative;
}

/* El iframe ocupa todo el espacio de su wrapper */
.viewer-iframe {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: none;
  display: block;
  background: #fff;
}

/* Contenedor scrollable para PDF.js (canvas) */
.pdf-canvas-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background: #525659;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.pdf-canvas-container canvas {
  max-width: 100%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  display: block;
  touch-action: pan-x pan-y pinch-zoom;
}

/* Estilos legacy (doc-modal-content y doc-viewer-container para los otros modales) */
.doc-modal-content {
  width: 100%;
  height: 100%;
  max-width: 100%;
  background: #121212;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.video-modal-content {
  width: 92%;
  height: 80%;
  max-width: 800px;
  max-height: 560px;
  background: rgba(20, 20, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
}


.doc-viewer-container {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  margin-top: 1rem;
  border-radius: 12px;
  overflow: auto !important;
  overscroll-behavior: contain;
  background: #ffffff;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

#doc-iframe, #admin-doc-review-iframe, #viewer-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
  display: block;
}


/* Fullscreen styles for document viewers in PWA */
.modal.fullscreen-active {
  background-image: none !important;
  background: #000 !important;
}

.modal.fullscreen-active .doc-modal-content {
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  background: #000 !important;
}

.modal.fullscreen-active .lib-header {
  display: none !important;
}

.modal.fullscreen-active .doc-viewer-container {
  margin-top: 0 !important;
  border-radius: 0 !important;
  height: 100vh !important;
  width: 100vw !important;
}

/* Botón fullscreen (ícono ↗️) en el header del visor */
.btn-fullscreen {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #ffd700;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.btn-fullscreen:hover { background: rgba(255, 215, 0, 0.25); }
.btn-fullscreen:active { transform: scale(0.92); }

/* Glassmorphic Floating Close Button */
.btn-floating-close {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 16px;
  z-index: 999999 !important;
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: background 0.3s, transform 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-floating-close:active {
  transform: scale(0.95);
  background: rgba(50, 50, 50, 0.95);
}

.btn-floating-close.hidden {
  display: none !important;
}


/* WhatsApp Community Modal Centering and Overlap Fix */
#modal-community .modal-content {
  justify-content: flex-start;
  padding-top: 5.2rem; /* Adjusted to perfect height as requested */
}

/* ==========================================
   Back Office Administrative Panel Styles
   ========================================== */
#view-admin {
  background-color: #000000 !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100% !important;
}

#view-admin.hidden {
  display: none !important;
}

#view-admin .dash-bg {
  background-image: none !important;
  background-color: #000000 !important;
}

.admin-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(30px + env(safe-area-inset-top, 0px)) 1.5rem 1.5rem;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.admin-header {
  text-align: left;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
}

.btn-back-admin {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  transition: background 0.3s;
}

.btn-back-admin:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-header h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0.5rem 0 0.2rem 0;
  background: linear-gradient(135deg, #fff, #aaa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-header p {
  color: #aaa;
  font-size: 0.95rem;
  margin: 0;
}

/* Bento Stats Grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.admin-stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.stat-icon {
  font-size: 2.2rem;
}

.stat-info h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  color: #ffd700;
}

.stat-info p {
  margin: 0;
  color: #ccc;
  font-size: 0.85rem;
}

/* Tabs */
.admin-tabs {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.8rem;
}

/* Table Actions */
.table-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}

#admin-search-users {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
}

#admin-search-users:focus {
  border-color: #ffd700;
}

.btn-export {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #111;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.3s, transform 0.2s;
}

.btn-export:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Responsive Table */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.admin-table th, .admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.admin-table th {
  background: rgba(255, 255, 255, 0.05);
  color: #aaa;
  font-weight: 600;
}

.admin-table td {
  color: #fff;
}

.admin-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}



/* =========================================================================
   SWEETALERT2 CUSTOM PREMIUM STYLING (IOS MOBILE PASSWORDS AND SELECTS)
   ========================================================================= */
.swal2-popup .swal2-input, 
.swal2-popup .swal2-select, 
.swal2-popup .swal2-textarea {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  padding: 12px 16px !important;
  height: auto !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.3s !important;
  -webkit-text-fill-color: #ffffff !important; /* iOS: Force white text/dots */
}

.swal2-popup .swal2-input:focus, 
.swal2-popup .swal2-select:focus {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Forzar la visualización de bullets oscuros/claros de contraseña en iOS Safari */
.swal2-popup input[type="password"] {
  -webkit-text-security: disc !important; /* iOS standard secure bullets mask */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  letter-spacing: 3px !important;
}

/* Estilo para las opciones del selector de categorías */
.swal2-popup select.swal2-select option {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* Ajuste de margen superior para popups ubicados en 'top' (evita pegarse al notch o status bar) */
.swal2-container.swal2-top {
  padding-top: max(45px, env(safe-area-inset-top, 45px)) !important;
}

/* Tarjeta emergente tipo glassmorph — mismo lenguaje visual que el panel de filtros del mapa
   (fondo semitransparente + blur, esquinas redondeadas, borde y sombra suaves) en vez del
   popup gris opaco y cuadrado por defecto de SweetAlert2 */
.evy-glass-popup {
  background: rgba(26, 26, 28, 0.82) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 32px !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.evy-glass-popup .swal2-styled {
  border-radius: 999px !important;
  padding: 0.65em 1.8em !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.evy-glass-popup .swal2-styled:hover {
  transform: translateY(-1px);
}
.evy-glass-popup .swal2-styled:focus {
  box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.25) !important;
}
.evy-glass-popup .swal2-confirm {
  color: #7cffd1 !important;
  border-color: rgba(0, 201, 167, 0.4) !important;
  background: rgba(0, 201, 167, 0.12) !important;
}
.evy-glass-popup .swal2-confirm:hover {
  background: rgba(0, 201, 167, 0.2) !important;
}
.evy-glass-popup .swal2-cancel {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.evy-glass-popup .swal2-cancel:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* La tarjeta de anuncios se muestra sobre la Pantalla Principal, cuyo fondo
   (#081a25) es casi negro — con la misma opacidad que usa la tarjeta de
   Reportar cargador (pensada para el mapa, mucho más claro) no se distingue
   nada detrás. Se le da su propia opacidad más baja para que el efecto de
   transparencia sea perceptible. */
.evy-glass-popup-announcement {
  background: rgba(30, 30, 34, 0.42) !important;
}

.evy-glass-popup .evy-announcement-confirm {
  color: #7dd3fc !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  background: rgba(56, 189, 248, 0.12) !important;
}
.evy-glass-popup .evy-announcement-confirm:hover {
  background: rgba(56, 189, 248, 0.2) !important;
}

/* =========================================================================
   BLOQUEO DE ORIENTACIÓN HORIZONTAL REACTIVO
   ========================================================================= */

/* Por defecto (y en posición vertical nativa), el bloqueo está 100% oculto y desactivado */
#orientation-lock-overlay {
  display: none !important;
}

/* Solo se activa en pantallas tipo smartphone sostenidas de forma horizontal */
@media screen and (orientation: landscape) and (max-height: 500px) {
  #orientation-lock-overlay {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0c0c0c !important; /* Fondo negro premium profundo */
    z-index: 999999 !important; /* Capa sobre cualquier modal, alert o elemento */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    animation: fadeIn 0.3s ease-out;
  }

  #orientation-lock-overlay .lock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 420px;
  }

  #orientation-lock-overlay .lock-icon {
    font-size: 3.5rem;
    margin-bottom: 1.2rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(255,255,255,0.1));
    animation: rotatePhone 2.5s infinite ease-in-out;
  }

  #orientation-lock-overlay h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.8rem 0;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }

  #orientation-lock-overlay p {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }
}

/* Sutil animación de balanceo del icono de celular para instruir al usuario a girarlo */
@keyframes rotatePhone {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-90deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

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

/* =========================================================================
   BARRA DE MODERACIÓN FLOTANTE DEL VISOR DE DOCUMENTOS (BACK OFFICE)
   ========================================================================= */

.viewer-moderation-bar {
  position: absolute;
  bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200 !important; /* Por encima de iFrame y otros elementos */
  background: rgba(18, 18, 18, 0.85) !important; /* Cristal de color carbón oscuro */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.2px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 40px;
  padding: 10px 14px;
  display: flex !important;
  gap: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.3);
  width: max-content;
  max-width: 90%;
  box-sizing: border-box;
  animation: slideUpModerationBar 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.viewer-moderation-bar.hidden {
  display: none !important;
}

.btn-mod {
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Botón Aprobar iOS-like Esmeralda Translúcido */
.btn-mod.approve-btn {
  background: rgba(40, 167, 69, 0.18) !important;
  border: 1px solid rgba(40, 167, 69, 0.45) !important;
  color: #4cd964 !important;
}

.btn-mod.approve-btn:hover {
  background: rgba(40, 167, 69, 0.35) !important;
  border-color: rgba(40, 167, 69, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(40, 167, 69, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Botón Rechazar iOS-like Rubí Translúcido */
.btn-mod.reject-btn {
  background: rgba(220, 53, 69, 0.18) !important;
  border: 1px solid rgba(220, 53, 69, 0.45) !important;
  color: #ff3b30 !important;
}

.btn-mod.reject-btn:hover {
  background: rgba(220, 53, 69, 0.35) !important;
  border-color: rgba(220, 53, 69, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(220, 53, 69, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-mod:active {
  transform: scale(0.94);
  filter: brightness(0.9);
}

@keyframes slideUpModerationBar {
  from {
    transform: translate(-50%, 40px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* =========================================================================
   ADAPTACIÓN ANDROID — PANTALLAS 6.5" – 6.8"
   Todos los selectores usan el prefijo html.android para
   NO afectar iOS/Safari en ninguna circunstancia.
   Bloque 100% aislado — se puede revertir borrando desde esta línea.
   ========================================================================= */

/* ── 1. BASE: viewport dinámico y escala de fuente raíz ───────────────── */
html.android {
  height: 100dvh;
  font-size: 15px;
}

html.android body,
html.android #app,
html.android .view {
  height: 100dvh;
}

/* ── 2. PANTALLA PRINCIPAL (DASHBOARD) ───────────────────────────────── */

html.android .dash-logo {
  height: 105px;
}

html.android .dash-header p {
  font-size: 1.6rem;
  letter-spacing: 0.5rem;
}

html.android .dash-header {
  margin-top: 3.4rem;
}

html.android .dash-content {
  padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
}

html.android .dash-btn {
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  border-radius: 16px;
}

html.android .dash-btn .icon {
  font-size: 1.6rem;
  margin-right: 1.2rem;
}

html.android .dash-buttons {
  gap: 1.8rem;
  margin-bottom: 5rem;
}

html.android .btn-profile {
  width: 46px;
  height: 46px;
  top: calc(20px + env(safe-area-inset-top, 0px));
}

html.android .btn-logout {
  width: 40px;
  height: 40px;
  top: calc(22px + env(safe-area-inset-top, 0px));
}

/* ── 3. MODALES GENERALES ─────────────────────────────────────────────── */

html.android .modal-content {
  padding: 1.8rem;
}

html.android .modal-content h2 {
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
}

html.android .close {
  font-size: 2rem;
  top: 1.4rem;
}

/* ── 4. BIBLIOTECA ───────────────────────────────────────────────────── */

html.android .lib-card {
  padding: 2rem 1.6rem;
  border-radius: 22px;
}

html.android .lib-card-icon {
  font-size: 3.2rem;
}

html.android .lib-card-title {
  font-size: 1.25rem;
}

html.android .lib-card-desc {
  font-size: 0.9rem;
}

html.android .resource-link {
  padding: 1.25rem 1.5rem;
  font-size: 0.97rem;
  border-radius: 16px;
}

/* ── 5. WHATSAPP COMUNIDAD ───────────────────────────────────────────── */

html.android .wa-main-link {
  padding: 1.4rem;
  border-radius: 18px;
}

html.android .wa-main-icon {
  width: 56px;
  height: 56px;
}

html.android .wa-link {
  padding: 1rem;
  font-size: 1rem;
  border-radius: 14px;
}

html.android .wa-icon {
  width: 40px;
  height: 40px;
}

/* ── 6. SHOPPING CENTER — SPLASH ─────────────────────────────────────── */

html.android .shop-splash-icon {
  font-size: 4.5rem;
}

html.android .shop-splash-content h2 {
  font-size: 2.3rem;
}

html.android .shop-splash-content p {
  font-size: 1.1rem;
}

/* ── 7. SHOPPING CENTER — LISTA DE TIENDAS ───────────────────────────── */

html.android .shop-topbar {
  height: calc(64px + env(safe-area-inset-top, 0px));
}

html.android #shop-topbar-title {
  font-size: 1.3rem;
}

html.android .shop-title {
  font-size: 1.6rem;
}

html.android .store-tile {
  border-radius: 22px;
  padding: 1.2rem;
  gap: 0.75rem;
}

html.android .store-tile-name {
  font-size: 1rem;
}

html.android .store-tile-category {
  font-size: 0.78rem;
}

html.android .store-tile-emoji {
  font-size: 3.4rem;
}

/* ── 8. SHOPPING CENTER — DETALLE DE PRODUCTO ────────────────────────── */

html.android .product-title {
  font-size: 1.15rem;
}

html.android .product-detail-title {
  font-size: 1.9rem;
}

html.android .product-detail-desc {
  font-size: 1.05rem;
  line-height: 1.6;
}

html.android .price-value {
  font-size: 1.7rem;
}

html.android .price-label {
  font-size: 1.1rem;
}

html.android .btn-buy-full {
  padding: 17px;
  font-size: 1.15rem;
  border-radius: 14px;
}

html.android .store-page-logo {
  width: 140px;
  height: 140px;
  border-radius: 24px;
}

/* ── 9. PERFIL DE USUARIO ────────────────────────────────────────────── */

html.android .profile-form label {
  font-size: 0.95rem;
}

html.android .profile-form input,
html.android .profile-form select {
  padding: 15px;
  font-size: 1.05rem;
  border-radius: 12px;
}

/* ── 10. VISOR DE DOCUMENTOS ─────────────────────────────────────────── */

html.android .viewer-header {
  padding: calc(env(safe-area-inset-top, 24px) + 12px) 1rem 14px 1rem;
  gap: 1rem;
}

html.android .viewer-title {
  font-size: 1.05rem;
}

html.android .viewer-back-btn {
  padding: 9px 16px;
  font-size: 0.95rem;
}

html.android .viewer-download-btn {
  padding: 9px 17px;
  font-size: 0.9rem;
}

/* ── 11. MAPA DE CARGA ───────────────────────────────────────────────── */

html.android .map-popup-header h4 {
  font-size: 1rem;
}

html.android .map-popup-body {
  font-size: 0.85rem;
}

html.android .map-popup-btn {
  padding: 10px;
  font-size: 0.9rem;
}

/* ── 12. PANEL ADMINISTRATIVO ─────────────────────────────────────────── */

html.android .admin-header h2 {
  font-size: 1.9rem;
}

html.android .admin-header p {
  font-size: 1rem;
}

html.android .admin-table th,
html.android .admin-table td {
  padding: 16px 18px;
  font-size: 0.95rem;
}

html.android .stat-info h3 {
  font-size: 1.7rem;
}

html.android .stat-info p {
  font-size: 0.9rem;
}

html.android .stat-icon {
  font-size: 2.4rem;
}

/* ── 13. FORMULARIO DE LOGIN / REGISTRO ───────────────────────────────── */

html.android .auth-card {
  padding: 2.8rem 2.2rem;
  border-radius: 24px;
}

html.android .auth-card h2 {
  font-size: 1.5rem;
}

html.android input,
html.android select {
  padding: 16px;
  font-size: 1.05rem;
}

html.android .btn-primary {
  padding: 16px;
  font-size: 1.15rem;
}

/* ── 14. BOTÓN FLOTANTE VOLVER ───────────────────────────────────────── */

html.android .btn-floating-close {
  padding: 10px 20px;
  font-size: 0.9rem;
  top: calc(18px + env(safe-area-inset-top, 0px));
}

/* ── 15. SWEETALERT2 EN ANDROID ──────────────────────────────────────── */

html.android .swal2-popup .swal2-input,
html.android .swal2-popup .swal2-select,
html.android .swal2-popup .swal2-textarea {
  font-size: 1.05rem !important;
  padding: 14px 18px !important;
}

/* ── FIN DEL BLOQUE ANDROID ─────────────────────────────────────────── */

/* ── 16. BOTÓN ATRÁS ULTRA-LIMPIO (CHEVRON BLANCO) ────────────────────── */

.btn-back-clean {
  background: none !important;
  border: none !important;
  outline: none !important;
  padding: 8px !important;
  cursor: pointer;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
  touch-action: manipulation;  /* Elimina el delay de 300ms en iOS */
  -webkit-user-select: none;
  position: relative;
  z-index: 10;
}

.btn-back-clean svg,
.btn-back-clean svg * {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 3; /* Chevron en negrita/bold para máxima visibilidad */
  display: block;
  pointer-events: none !important;
}

@media (hover: hover) {
  .btn-back-clean:hover {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

.btn-back-clean:active {
  transform: scale(0.95);
}

/* ── 17. FILTRO CINEMÁTICO PREMIUM PARA MALAMINAS ─────────────────────── */

.malaminas-filter {
  filter: contrast(1.22) saturate(1.28) sepia(0.06) brightness(0.93) !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

/* ── 18. MODEL SELECTOR VIEW STYLES ────────────────────────────────────── */

.model-selector-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
}

.model-selector-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  padding-top: 1rem; /* Subir ligeramente el bloque para centrado visual */
  overflow-y: auto;
  box-sizing: border-box;
}

.model-selector-header {
  text-align: center;
  margin-bottom: 1.4rem; /* Reducido de 2.5rem para subir los botones */
  /* Sin animation aquí: el fundido de entrada/salida lo controla por completo el par de
     reglas opacity/transform + transition más abajo, activadas por la clase .animate-header.
     Una animation de una sola vez (forwards) declarada en la base competía con ese sistema
     y, según el momento, ganaba ella dejando el título trabado en su fotograma inicial
     (opacity:0) — esa era la causa del parpadeo del título "Modelos". */
}

.model-selector-logo {
  height: 44px; /* Unificado con el tamaño del logo en la Pantalla Principal */
  width: auto;
  margin-bottom: 0.8rem;
  opacity: 0.95;
  object-fit: contain;
}

.model-selector-header h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Título dinámico del selector ("Marcas" y "Modelos"): letras blancas finas, ultraligeras y elegantes con halo azul cobalto perfectamente centrado */
#selector-title {
  text-transform: none;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 300 !important; /* Letras finas y estilizadas que restan peso al texto */
  letter-spacing: 0.18rem !important;
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
  margin-top: -6px !important; /* Elevación de algunos píxeles para centrado óptico perfecto */
  margin-bottom: 0.2rem !important;
  text-shadow:
    0 0 12px rgba(56, 189, 248, 0.95),
    0 0 28px rgba(56, 189, 248, 0.8),
    0 0 60px rgba(56, 189, 248, 0.6),
    0 0 100px rgba(56, 189, 248, 0.4) !important;
  transition: opacity 0.4s ease, transform 0.4s ease, text-shadow 0.4s ease !important;
}

/* Tipografía idéntica al h1 para el subtítulo estático "Marcas" */
.selector-title-style {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.model-selector-header p {
  font-size: 0.95rem;
  color: #ccc;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.model-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 420px;
  animation: slideUpFade 0.6s ease forwards 0.2s;
  opacity: 0;
  box-sizing: border-box;

  /* Habilitar scroll táctil vertical premium */
  overflow-y: auto;
  max-height: 100%;
  overscroll-behavior-y: contain;
  scrollbar-width: none; /* Ocultar barra de desplazamiento en Firefox */
  -ms-overflow-style: none; /* Ocultar barra de desplazamiento en IE/Edge */

  /* Padding y márgenes compensatorios para evitar recortes en la retroiluminación (glow) superior */
  padding-top: 20px;
  margin-top: -20px;
  padding-bottom: 90px; /* Espacio para que el último elemento libre el fade y el footer */

  /* Máscara de degradado para desvanecer elementos en la parte superior e inferior (difuminado) */
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 75%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 75%, transparent 95%);
}

/* Ocultar barra de desplazamiento en Chrome, Safari y Opera */
.model-grid::-webkit-scrollbar {
  display: none;
}

.model-card {
  background: transparent; /* Totalmente transparente */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil */
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  cursor: pointer;
  /* Transición suave para transform, opacity, border-color y background */
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, border-color 0.25s ease, background-color 0.25s ease;
  position: relative;
  overflow: visible;
  box-shadow: none; /* Sin sombras en estado transparente */
  box-sizing: border-box;
  flex-shrink: 0;
  transform: translateZ(0); /* GPU layer */
}

.model-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(var(--card-theme-rgb), 0.05), transparent); /* Tintura de color de 5% de opacidad */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.model-card-info {
  flex: 1;
  z-index: 2;
  text-align: left;
}

.model-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.model-card-title::before {
  display: none;
}

.model-card-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.model-card-badge.ut {
  background: rgba(0, 255, 215, 0.2);
  color: #00ffd7;
  border: 1px solid rgba(0, 255, 215, 0.4);
}

.model-card-badge.v {
  background: rgba(161, 0, 255, 0.2);
  color: #a100ff;
  border: 1px solid rgba(161, 0, 255, 0.4);
}

.model-card-badge.y-plus {
  background: rgba(0, 255, 102, 0.2);
  color: #00ff66;
  border: 1px solid rgba(0, 255, 102, 0.4);
}

.model-card-badge.soon {
  background: rgba(255, 255, 255, 0.12);
  color: #bbb;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.model-card-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  margin-top: 0.2rem;
}

.model-card-arrow {
  display: none !important;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  z-index: 2;
}

.model-card:hover {
  background: rgba(255, 255, 255, 0.04); /* Fondo translúcido sutil al hacer hover */
  transform: translateY(-2px);
  border-color: rgba(var(--card-theme-rgb), 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.model-card:hover::before {
  opacity: 1;
}

.model-card:hover .model-card-arrow {
  color: var(--card-theme-color);
  transform: translateX(4px);
}

.model-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.03);
}

.model-card.disabled:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.06);
}

.model-card.disabled::before {
  display: none;
}

.model-card.disabled .model-card-arrow {
  display: none;
}

/* Efecto de iluminación de bordes y desvanecimiento ágil de otras tarjetas (0.4s dinámico y fluido sin desenfoque) */
.model-card.selected {
  transform: scale(0.98) translateY(-2px) !important;
  border-color: var(--card-theme-color, #38bdf8) !important;
  box-shadow: 0 0 0 1px rgba(var(--card-theme-rgb), 0.3), 0 0 55px 10px rgba(var(--card-theme-rgb), 0.4), 0 8px 36px rgba(var(--card-theme-rgb), 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important; /* Fondo translúcido sutil al estar seleccionado */
  z-index: 10 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.model-card.selected::before {
  opacity: 1 !important;
  background: linear-gradient(135deg, rgba(var(--card-theme-rgb), 0.1), transparent) !important;
}

.model-card.selected .model-card-arrow {
  color: var(--card-theme-color, #38bdf8) !important;
  transform: translateX(6px) scale(1.2) !important;
}

/* ── 19. TACTILE TETHER DRAG TRANSITION (TIRADOR DEL CAJÓN DIGITAL) ────── */

/* Tarjeta Bento Seleccionada en Proceso de Transición */
.bento-card.bento-selected {
  position: relative !important;
  z-index: 1000 !important;
  border-color: #00bfff !important; /* Azul eléctrico */
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.4) !important; /* Brillo azul eléctrico sin blur interno */
  transform: scale(1.03) translateZ(0) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  background: rgba(18, 18, 18, 0.60) !important; /* Cristal ahumado al 60% */
  transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease !important;
}

/* Desvanecimiento Lento del resto de tarjetas */
.bento-card.bento-dimmed {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Fundido a Negro Lento del Contenido y Fondo */
.dash-fade-to-black-slow .dash-bg {
  opacity: 0 !important;
  transition: opacity 3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.dash-fade-to-black-slow .dash-content {
  background: transparent !important; /* Quitar gradiente de fondo durante el fundido */
}

.dash-fade-to-black-slow .dash-center-info,
.dash-fade-to-black-slow .dash-top-bar,
.dash-fade-to-black-slow #btn-drawer-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  transform: scale(0.95) !important;
}

/* Desactivación de Transiciones durante Arrastre (Cero Latencia) */
.bento-card.dragging, .modal.dragging, #view-shopping.dragging {
  transition: none !important;
}

/* Tipografía e Iluminación del Indicador Swipe flotante */
.swipe-instruction {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--drawer-theme-color);
  text-shadow: 0 0 10px rgba(var(--drawer-theme-color-rgb), 0.6);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.swipe-instruction.show {
  opacity: 1;
  transform: translateY(-25px);
  animation: pulseSwipe 1.5s infinite ease-in-out;
}

@keyframes pulseSwipe {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(-25px);
  }
  50% {
    opacity: 1;
    transform: translateY(-30px);
  }
}

/* Cinematic Blackout Transition Overlay */
#view-transition-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000; /* Negro absoluto premium */
  z-index: 99999; /* Por encima de toda la cabina digital y capas flotantes */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

#view-transition-flash.flash-active {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================================
   ESTILOS PREMIUM - MANIFIESTO COLABORATIVO (Fase Temprana evy)
   ========================================================================= */

.manifesto-banner {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.2rem;
  margin: 1.2rem auto 0 auto;
  max-width: 90%;
  box-sizing: border-box;
  text-align: left;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s;
}

.manifesto-banner:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
}

.manifesto-badge {
  display: inline-block;
  background: rgba(0, 255, 215, 0.15);
  color: #00ffd7;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.8px;
  margin-bottom: 0.6rem;
  border: 1px solid rgba(0, 255, 215, 0.25);
  text-transform: uppercase;
}

.manifesto-banner p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
}

.dashboard-manifesto {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 0.8rem 1.5rem 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.dashboard-manifesto:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.dashboard-manifesto:active {
  transform: scale(0.98);
}

.manifesto-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatIcon 3s infinite ease-in-out;
}

.manifesto-text {
  flex-grow: 1;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', sans-serif;
}

.manifesto-text strong {
  color: var(--theme-color);
  font-weight: 700;
}

.manifesto-action {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--theme-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

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

/* Badges de moderación */
.admin-badge-l1 {
  background: rgba(255, 165, 0, 0.15);
  color: #ffa500;
  border: 1px solid rgba(255, 165, 0, 0.3);
}

.admin-badge-l2 {
  background: rgba(161, 0, 255, 0.15);
  color: #ca7fff;
  border: 1px solid rgba(161, 0, 255, 0.3);
}

#view-brand-selector .model-selector-bg,
#view-model-selector-geely .model-selector-bg,
#view-model-selector-dongfeng .model-selector-bg {
  background: #000000;
}

/* Fondo de pantalla premium más claro y brillante para la Pantalla de Modelos GAC */
#view-model-selector-gac .model-selector-bg {
  background: #000000;
}

/* Ajustes de maquetación de la Pantalla de Marcas y Nuevas Marcas para subir el contenido */
#view-brand-selector .model-selector-content,
#view-model-selector-geely .model-selector-content,
#view-model-selector-dongfeng .model-selector-content {
  justify-content: flex-start;
  padding-top: calc(1.8rem + env(safe-area-inset-top, 0px));
  overflow: hidden; /* Fija la maquetación y evita scroll del viewport principal */
}

/* Tarjetas de marca: SIN animación propia (ni fade individual ni escalonado). El
   único elemento que se mueve al entrar a "Marcas" es el overlay
   #view-transition-flash disolviéndose desde negro — el mismo mecanismo simple que
   ya funciona bien en el mapa de cargadores. El sistema anterior (fade + stagger por
   tarjeta, sincronizado con el flash) resultó frágil entre dispositivos y generaba
   parpadeos que costó eliminar del todo; se prioriza que sea confiable por sobre el
   efecto más elaborado. (El título "Marcas" no se toca acá: su propio fade de 0.6s
   vía #view-brand-selector.active .model-selector-header.animate-header, más abajo,
   funciona bien y además se reutiliza para el cruce "Marcas" ↔ "Modelos" al tocar
   una marca — cambiarlo rompería esa otra transición.) */
#view-brand-selector #col-brands .model-card {
  opacity: 1;
  transform: none;
}
.model-selector-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* will-change se aplica solo just-in-time desde JS (justo antes de animar) y se retira
     al terminar: dejarlo declarado siempre aquí hacía que WebKit mantuviera la capa de GPU
     promovida durante toda la espera en el Dashboard, y al reutilizarla tras varios segundos
     de inactividad el primer frame salía con contenido desactualizado (el parpadeo del título). */
}
.model-selector-header::before {
  content: '';
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.38) 0%, rgba(56, 189, 248, 0.18) 45%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}

/* Header "Marcas": aparece en 0.6s exactos (igual al apagado de pantalla principal) */
#view-brand-selector.active .model-selector-header {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.6s linear, transform 0.6s linear, text-shadow 0.6s ease, color 0.6s ease;
}
#view-brand-selector.active .model-selector-header.animate-header {
  opacity: 1;
  transform: translateY(0);
}
/* Logotipo unificado al tamaño de la Pantalla Principal en todas las pantallas de selección */
#view-brand-selector .model-selector-logo,
#view-model-selector-geely .model-selector-logo,
#view-model-selector-dongfeng .model-selector-logo {
  height: 44px;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

/* ── 20. LANDING ONBOARDING VIEW STYLES ───────────────────────────────── */
#view-landing {
  transition: opacity 2.2s cubic-bezier(0.4, 0, 0.2, 1), transform 2.2s cubic-bezier(0.25, 1, 0.25, 1) !important;
}

#view-landing .landing-bg-img {
  background-image: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.18)), url('assets/landing_bg.webp');
  background-size: cover;
  background-position: 46% center; /* Desplaza la foto ligeramente para que el coche respire a la izquierda */
  filter: brightness(1.02) contrast(1.15) saturate(1.1);
}

#view-landing .model-selector-content {
  justify-content: flex-start;
  padding-top: calc(1.8rem + env(safe-area-inset-top, 0px)); /* Sutilmente más abajo del safe area */
  overflow: hidden;
}

.landing-header {
  text-align: center;
  margin-top: 4px; /* Bajó un milímetro */
  z-index: 5;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.25, 1);
}

/* Logo un poco más pequeño y bien arriba */
.landing-logo {
  height: 58px; /* Unificado con el tamaño estándar del logo evy */
  width: auto;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
  object-fit: contain;
}

.landing-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.2rem;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* Contenedor del texto deslizable (Formato Bottom Sheet Pantalla Completa) */
.landing-text-container {
  background: rgba(10, 10, 14, 0.58);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 36px 36px 0 0;
  width: 100%;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100% - 180px);
  padding: 2.2rem 1.8rem calc(1rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: left;
  z-index: 15;
  box-sizing: border-box;
  animation: slideUpFade 0.8s cubic-bezier(0.25, 1, 0.25, 1) forwards;
  opacity: 0;
}

.landing-scroll-content {
  height: calc(100% - 4.5rem);
  overflow-y: auto;
  padding-right: 0.8rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.015em;
}

.landing-scroll-content p {
  margin: 0 0 1.4rem 0;
  text-indent: 2rem;
  text-align: justify;
  text-justify: inter-word;
  color: rgba(255, 255, 255, 0.9);
}

.landing-scroll-content p:last-child {
  margin-bottom: 0;
}

/* Document styling elements for the manifesto */
.manifesto-doc-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #00ffd7;
  text-align: center;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 255, 215, 0.2);
}

.manifesto-doc-divider {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffd7, transparent);
  margin: 0 auto 1.5rem auto;
}

/* Estilo del scrollbar dentro del texto */
.landing-scroll-content::-webkit-scrollbar {
  width: 4px;
}
.landing-scroll-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}
.landing-scroll-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.landing-swipe-tip {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #00ffd7;
  letter-spacing: 1.5px;
  margin-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.8rem;
  animation: WA-pulse 2s infinite;
}

/* Efecto para ocultar el header un poco hacia arriba cuando aparece el texto */
.landing-header.text-visible {
  transform: translateY(-0.8rem);
}

/* Animación sutil de desvanecimiento muy lento de los elementos de bienvenida hacia el negro absoluto */
.welcome-fade-out .welcome-logo-container,
.welcome-fade-out .welcome-watermark {
  opacity: 0 !important;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Integración prémium del imagotipo de evy dentro de los párrafos del manifiesto */
.inline-logo {
  height: 1.15em;
  width: auto;
  display: inline-block;
  vertical-align: -20%;
  margin: 0 4px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* =========================================================================
   CAROUSEL TRANSITION STYLES (UNIFIED SELECTOR CAROUSEL)
   ========================================================================= */

/* The viewport clips horizontal overflow to allow sliding columns */
.selector-viewport {
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  
  /* Buffer vertical de resplandor para evitar que el brillo (box-shadow) de las tarjetas se recorte */
  padding: 30px 0;
  margin-top: -30px;
  margin-bottom: -30px;
}

/* The track holds all columns side-by-side */
.selector-track {
  display: flex;
  width: 1000%; /* 10 columns (Brands, GAC, BYD, Geely, Dongfeng, OMODA, GWM, Chevrolet, LinkCo, Zeekr) */
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Individual column configuration */
.selector-col {
  width: 10%; /* Exactly 1/10th of the track */
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  opacity: 1;
}

/* Dimming other cards when one is selected */
.model-grid.has-selection .model-card:not(.selected) {
  opacity: 0 !important;
  transform: scale(0.92) translateY(10px) !important;
  filter: none !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: 0s !important;
}

/* Fade and scale down transition for the selected brand card */
.model-card.tethered-out {
  transform: scale(0.95) !important;
  opacity: 0 !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: 0s !important;
}

/* Staggered entrance off-screen initial state for models */
.selector-model-col .model-card {
  opacity: 0;
  transform: translateX(60px) scale(0.98); /* Reducida la distancia inicial de deslizamiento para más suavidad */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered entrance active reveal state */
.selector-model-col.active-model-view .model-card {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Staggered animation delays */
.selector-model-col.active-model-view .model-card:nth-child(1) { transition-delay: 0.04s; }
.selector-model-col.active-model-view .model-card:nth-child(2) { transition-delay: 0.08s; }
.selector-model-col.active-model-view .model-card:nth-child(3) { transition-delay: 0.12s; }

/* =========================================================================
   GOOGLE MAPS CUSTOM INFOWINDOW STYLES (v129.52)
   ========================================================================= */

/* Dark theme container override for GM InfoWindow */
.gm-style .gm-style-iw-c {
  background-color: rgba(18, 18, 24, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65) !important;
  padding: 0 !important;
}

.gm-style .gm-style-iw-d {
  overflow: auto !important;
  padding: 14px 16px 14px 14px !important;
  max-width: 250px !important;
}

/* InfoWindow anchor arrow color */
.gm-style .gm-style-iw-t::after {
  background: rgba(18, 18, 24, 0.92) !important;
  box-shadow: -1px 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

/* Hide standard GM InfoWindow close button */
.gm-style .gm-style-iw-th {
  display: none !important;
}

/* Premium InfoWindow Card Layout */
.map-popup-card {
  font-family: 'Inter', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.map-popup-header h4 {
  font-family: 'Outfit', sans-serif;
  margin: 0 0 4px 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  letter-spacing: 0.3px;
}

.map-popup-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.2rem;
  margin-bottom: 0.4rem;
}

.map-popup-detail {
  font-size: 0.72rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.3;
}

.map-popup-detail strong {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

.map-popup-detail span {
  color: #fff;
  font-weight: 600;
}

.map-popup-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  border-radius: 20px;
  margin-top: 0.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s, transform 0.15s;
  cursor: pointer;
}

.map-popup-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.map-popup-btn:active {
  transform: translateY(1px);
}


/* =========================================================================
   PANTALLA PRINCIPAL (MENÚ PRINCIPAL) DE LA APP (v129.60)
   ========================================================================= */
#view-main-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center; /* Centrar verticalmente en la pantalla */
  overflow: hidden !important; /* Desactivar todo scroll y asegurar estabilidad */
  touch-action: none; /* Evitar gestos de scroll/deslizamiento */
  box-sizing: border-box;
  z-index: 10;
  background-color: #081a25; /* Color turquesa oscuro de estilo Disney */
}

#view-main-menu.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.main-menu-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 350px); /* Ajustado de 310px a 350px para dar más espacio turquesa abajo */
  background-image: url('assets/main_hub_bg.webp');
  background-size: cover;
  background-position: top center;
  z-index: 1;
}

.main-menu-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 250px; /* Incrementado de 180px a 250px para un degradado más alto */
  background: linear-gradient(to bottom, transparent, #081a25);
  z-index: 2;
  pointer-events: none;
}

.main-menu-content {
  width: 100%;
  max-width: 440px;
  height: 100%; /* Corregido para asegurar que margin-top: auto funcione en navegadores móviles */
  padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem; /* Reducido para evitar desbordamientos verticales */
  text-align: center;
  overflow: hidden !important;
}

.main-menu-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 20;
}

.main-menu-header {
  animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  margin-top: -0.75rem; /* Sube un poco el texto del destino */
}

.main-menu-logo {
  height: 58px;
  width: auto;
  margin-bottom: 0.8rem;
  opacity: 0.95;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.main-menu-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-menu-top-bar .main-menu-logo {
  height: 44px; /* Aumentado de 32px a 44px para mayor presencia visual */
  margin-bottom: 0;
}

.main-menu-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.2rem;
  font-weight: 400;
  font-family: 'Plus Jakarta Sans', sans-serif; /* Usando fuente moderna Plus Jakarta Sans */
  letter-spacing: 1px;
  margin: 0.6rem 0 0 0; /* Bajado 1 espacio respecto al logo */
  text-transform: none; /* Fuerza mayúsculas/minúsculas tal como están escritas */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.main-menu-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Separación más compacta para encajar en el 30% */
  margin-top: auto; /* Empuja la cuadrícula de botones a la parte inferior */
  margin-bottom: 0.15rem !important; /* Separado del borde inferior para centrar las opciones en el fondo negro */
  align-items: center;
  z-index: 10;
  transform: translateY(16px); /* Desplaza los botones en conjunto 16px hacia abajo (8px adicionales) */
}

.main-menu-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.0rem 1.4rem !important; /* Espaciado simétrico para igualar alturas perfectamente */
  border-radius: 20px;
  background: rgba(17, 19, 23, 0.6) !important; /* Cristal esmerilado translúcido */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Borde sutil */
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
  max-width: 380px;
  min-height: 88px !important;
  box-sizing: border-box;
}

/* Efectos de brillo individuales para las tarjetas */
.main-menu-card-blue {
  box-shadow: 0 4px 25px rgba(0,0,0,0.5), 0 0 15px rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  /* Baja Garage Eléctrico (y con él, Mapa de Cargadores, que le sigue con el mismo gap)
     10px — el margin-top de evyshop lo compensa para que no se mueva de su lugar.
     (Originalmente se bajó 20px, luego se subieron 10px por quedar muy separado) */
  margin-top: 10px;
}
.main-menu-card-blue:hover {
  box-shadow: 0 8px 35px rgba(0,0,0,0.6), 0 0 25px rgba(56, 189, 248, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-3px) !important;
  -webkit-transform: translateY(-3px) !important;
}

.main-menu-card-green {
  box-shadow: 0 4px 25px rgba(0,0,0,0.5), 0 0 15px rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
}
.main-menu-card-green:hover {
  box-shadow: 0 8px 35px rgba(0,0,0,0.6), 0 0 25px rgba(56, 189, 248, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-3px) !important;
  -webkit-transform: translateY(-3px) !important;
}

.main-menu-card-gradient {
  background: rgba(17, 19, 23, 0.45) !important; /* Cristal esmerilado sin bordes ni glows */
  border: none !important;
  box-shadow: none !important;
}

.main-menu-card-gradient:hover {
  background: rgba(17, 19, 23, 0.65) !important;
  transform: translateY(-3px) !important;
  -webkit-transform: translateY(-3px) !important;
}

.main-menu-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  opacity: 0;
}

.main-menu-card:hover::before {
  opacity: 0;
}

/* Fase 1 — Micro-squeeze táctil inmediato al tocar */
.main-menu-card:active {
  transform: scale(0.96) !important;
  -webkit-transform: scale(0.96) !important;
  transition: transform 0.08s ease-out !important;
}

/* Efecto premium de iluminación de bordes y atenuación al seleccionar una opción */
/* Fase 2 — Atenuación suave de las tarjetas hermanas (0.25s, antes 0.15s) */
.main-menu-grid.has-selection .main-menu-card:not(.selected) {
  opacity: 0 !important;
  transform: scale(0.95) translate3d(0, 0, 0) !important;
  -webkit-transform: scale(0.95) translate3d(0, 0, 0) !important;
  filter: blur(10px) grayscale(1) !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.25s ease-out !important;
}

/* Fase 2 — Bloom glow con muelle spring al soltar el dedo */
.main-menu-card.selected {
  transform: scale(1.02) translate3d(0, 0, 0) !important;
  -webkit-transform: scale(1.02) translate3d(0, 0, 0) !important;
  z-index: 10 !important;
  border-color: rgba(0, 191, 255, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(0, 191, 255, 0.25), 0 8px 36px rgba(0, 191, 255, 0.28) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease !important;
}

/* Glow tint azul para la card de Hub — borde + halo difuminado (Opción A) */
.main-menu-card-blue.selected {
  border-color: rgba(56, 189, 248, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3), 0 0 55px 10px rgba(56, 189, 248, 0.4), 0 8px 36px rgba(56, 189, 248, 0.32) !important;
}

/* Glow tint verde para la card de Mapa — borde + halo difuminado (Opción A) */
.main-menu-card-green.selected {
  border-color: rgba(56, 189, 248, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3), 0 0 55px 10px rgba(56, 189, 248, 0.4), 0 8px 36px rgba(56, 189, 248, 0.32) !important;
}

.main-menu-card.selected::before {
  opacity: 0 !important;
  background: transparent !important;
}

.main-menu-card.selected .menu-card-arrow {
  color: #00bfff !important;
  transform: translate3d(6px, 0, 0) !important;
  -webkit-transform: translate3d(6px, 0, 0) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s ease !important;
}

.main-menu-card.selected .menu-card-icon-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

.main-menu-card.selected .menu-card-details h3 {
  color: #00bfff !important;
  transition: color 0.22s ease !important;
}

.main-menu-card.selected .menu-card-details p {
  color: rgba(255, 255, 255, 1.0) !important;
  transition: color 0.22s ease !important;
}

.menu-card-icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* Totalmente transparente */
  border: none;
  color: #00bfff;
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.main-menu-card:hover .menu-card-icon-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

.menu-card-svg {
  width: 22px;
  height: 22px;
}

.menu-card-details {
  flex: 1;
  text-align: left;
  position: relative;
  z-index: 2;
}

.menu-card-details h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.2rem 0;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
  transition: color 0.3s ease; /* Transición suave de color */
}

.main-menu-card:hover .menu-card-details h3 {
  color: #00bfff !important; /* Título en azul eléctrico en hover */
}

.menu-card-details p {
  color: rgba(255, 255, 255, 0.65); /* Atenuado para jerarquía visual */
  font-size: 0.75rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.35;
}

.main-menu-card:hover .menu-card-details p {
  color: rgba(255, 255, 255, 0.95); /* Más brillante en hover */
}

.menu-card-arrow {
  display: none !important;
  color: rgba(255, 255, 255, 0.25);
  font-size: 1.1rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease;
  position: relative;
  z-index: 2;
}

.main-menu-card:hover .menu-card-arrow {
  color: #00bfff;
  transform: translateX(4px);
}

.model-card-thumb {
  width: 92px;
  height: 46px;
  object-fit: contain;
  vertical-align: middle;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  margin-left: 0.5rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  flex-shrink: 0; /* Prevenir colapso de dimensiones */
  transform: scale(var(--thumb-scale, 1)) translateY(var(--thumb-translate-y, 0px));
}

.model-card:hover .model-card-thumb {
  transform: scale(calc(var(--thumb-scale, 1) * 1.08)) translateY(var(--thumb-translate-y, 0px)) translateX(-2px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)) brightness(1.05);
}



/* =========================================================================
   TESLA-STYLE VEHICLE DASHBOARD & CHARGING PLANNER STYLES
   ========================================================================= */

/* Tesla-style Dashboard scroll container */
.dash-scroll-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  padding: calc(1.2rem + env(safe-area-inset-top, 0px)) 1.2rem calc(2rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background-color: #09090b;
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-width: none; /* Hide standard Firefox scrollbar */
}
.dash-scroll-container::-webkit-scrollbar {
  display: none; /* Hide Chrome/Safari scrollbar */
}

/* Custom top bar buttons */
#view-dashboard .dash-top-bar {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.btn-top-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, color 0.25s ease;
}
.btn-top-action:hover, .btn-top-action:active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* Telemetry Header */
.dash-telemetry-header {
  width: 100%;
  max-width: 480px;
  text-align: center;
  margin-bottom: 0.5rem;
}
.dash-car-name {
  font-family: 'Outfit', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}
.dash-battery-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0.3rem;
}
.virtual-battery-mini-container {
  width: 28px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 1px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
.virtual-battery-mini-container::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 0 1px 1px 0;
}
.virtual-battery-mini-fill {
  height: 100%;
  width: 0%;
  background-color: var(--theme-color, #00ffd7);
  border-radius: 1px;
  transition: width 0.4s ease, background-color 0.4s ease;
}
.dash-battery-metrics {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.dash-car-status-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Floating Car Stage */
.dash-car-stage {
  width: 100%;
  max-width: 480px;
  height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
  background-color: #000000;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
  pointer-events: none;
}
.dash-car-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #09090b 72%);
  z-index: 3;
  pointer-events: none;
}
.dash-car-stage .dash-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.95) contrast(1.1) saturate(1.05);
  transition: opacity 0.4s ease-in-out;
  will-change: opacity;
  pointer-events: none;
}
.hidden-bg {
  pointer-events: none;
}

/* Plan de Carga Card */
.charging-plan-card {
  /* Colores fijos (los del GAC Aion UT), iguales para todos los modelos sin importar el auto activo */
  --theme-color: #00ffd7;
  --theme-color-rgb: 0, 255, 215;
  width: 100%;
  max-width: 480px;
  background: rgba(18, 18, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.25rem;
  box-sizing: border-box;
  margin: 1rem 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.charge-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.charge-calc-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.charge-calc-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.charge-calc-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ffffff;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
  box-sizing: border-box;
}
.charge-calc-select:focus {
  border-color: var(--theme-color, #00ffd7);
  box-shadow: 0 0 8px rgba(var(--theme-color-rgb, 0, 255, 215), 0.2);
}

/* Virtual battery slider styling */
.charge-calc-battery-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.virtual-battery-wrapper {
  position: relative;
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}
.virtual-battery-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 12px;
  width: 4px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 0 4px 4px 0;
}
.virtual-battery-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, rgba(var(--theme-color-rgb, 0, 255, 215), 0.6), rgba(var(--theme-color-rgb, 0, 255, 215), 0.85));
  transition: width 0.2s ease, background 0.4s ease;
  z-index: 1;
  box-shadow: 0 0 15px rgba(var(--theme-color-rgb, 0, 255, 215), 0.35);
}
.virtual-battery-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  position: relative;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.05em;
}
.virtual-battery-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}

/* Amperage Chips selectors */
.amp-chips-container, .target-chips-container {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}
.amp-chip, .target-chip {
  flex: 1 1 auto;
  min-width: 50px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.65);
  padding: 10px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  outline: none;
}
.target-chip {
  flex: 1 1 auto;
  padding: 10px 14px;
}
.amp-chip:hover, .target-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.amp-chip.active, .target-chip.active {
  background-color: var(--theme-color, #00ffd7) !important;
  color: #000000 !important;
  border-color: var(--theme-color, #00ffd7) !important;
  box-shadow: 0 4px 15px rgba(var(--theme-color-rgb, 0, 255, 215), 0.35);
  font-weight: 700;
}
.disabled-chip {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.15) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Charging Calculator Results Panel */
.charge-calc-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 0.2rem;
}
.calc-result-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}
.calc-result-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}
.calc-result-value {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* Toggle Simulated Charge button */
.charge-toggle-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  padding: 12px 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  margin-top: 0.2rem;
}
.charge-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.charge-toggle-btn.charging-active {
  background: linear-gradient(135deg, rgba(var(--theme-color-rgb, 0, 255, 215), 0.15), rgba(var(--theme-color-rgb, 0, 255, 215), 0.05)) !important;
  border-color: var(--theme-color, #00ffd7) !important;
  color: var(--theme-color, #00ffd7) !important;
  animation: charging-pulse 2s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(var(--theme-color-rgb, 0, 255, 215), 0.15);
  font-weight: 700;
}
@keyframes charging-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(var(--theme-color-rgb, 0, 255, 215), 0.15);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 0 20px rgba(var(--theme-color-rgb, 0, 255, 215), 0.35);
  }
}

/* Menu list vertical items */
.dash-menu-list {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
.dash-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1.25rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.25s ease;
}
.dash-menu-item:hover, .dash-menu-item:active {
  transform: translateX(4px);
}
.dash-menu-item-icon {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color, #00ffd7);
  flex-shrink: 0;
  transition: all 0.4s;
}
.dash-menu-item:hover .dash-menu-item-icon {
  background: rgba(var(--theme-color-rgb, 0, 255, 215), 0.1);
  border-color: rgba(var(--theme-color-rgb, 0, 255, 215), 0.25);
  box-shadow: 0 0 12px rgba(var(--theme-color-rgb, 0, 255, 215), 0.2);
}
.dash-menu-item-details {
  flex-grow: 1;
  margin-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 10px;
}
.dash-menu-item-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.dash-menu-item-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.3;
}
.dash-menu-item-arrow {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
  transition: color 0.25s, transform 0.25s;
}
.dash-menu-item:hover .dash-menu-item-arrow {
  color: var(--theme-color, #00ffd7);
  transform: translateX(2px);
}


/* =========================================================================
   TESLA-STYLE THEME OVERRIDES FOR OMODA E5 (v130.80)
   ========================================================================= */
.tesla-theme.view {
  background-image: radial-gradient(ellipse 450px 180px at 50% 235px, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0) 80%) !important;
  background-color: #000000 !important;
}

.tesla-theme .dash-scroll-container {
  background: transparent !important;
  background-color: transparent !important;
  padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
}

.tesla-theme .dash-car-name {
  display: none !important;
}

.tesla-theme .dash-battery-status-row {
  display: none !important;
}

.tesla-theme .dash-car-status-text {
  display: none !important;
}

.tesla-theme .dash-logo-wrapper {
  display: none !important;
}

/* Spotlight Cenital -> Extra-wide elliptical backlit gradient centered behind the car cabin, fading to solid black at vertical edges */
.tesla-theme .dash-car-stage {
  height: 320px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  overflow: visible !important;
  position: relative;
  pointer-events: none !important;
}

.tesla-theme .dash-car-stage .dash-bg {
  background-size: var(--dash-bg-size, contain) !important;
  background-repeat: no-repeat !important;
  background-position: var(--dash-bg-position, center bottom) !important;
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.85)) brightness(1.02);
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  background-color: transparent !important;
  transform: translate(var(--dash-bg-translate-x, 0px), calc(var(--dash-bg-translate-y, -38px) + 20px)) scale(var(--dash-bg-scale, 1.22)) !important;
  z-index: 1;
  pointer-events: none !important;
}

/* Hidden overlay - not needed with the new stage-level backlit gradient */
.tesla-theme .dash-car-overlay {
  display: none !important;
}

/* Quick Actions Panel -> Hidden on Tesla theme */
.dash-quick-actions {
  display: none;
}

.tesla-theme .dash-quick-actions {
  display: none !important;
}

.btn-quick-action {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #111113;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-quick-action:hover {
  background-color: #1a1a1c;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}

.btn-quick-action.active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

/* Menu list vertical items overrides */
.tesla-theme .dash-menu-list {
  background-color: #000000 !important;
  border-top: none !important;
  margin-top: 2.5rem !important;
}

.tesla-theme .dash-menu-item {
  border-bottom: none !important;
  padding: 1.35rem 0.5rem !important;
  background: transparent !important;
  align-items: flex-start !important;
}

.tesla-theme .dash-menu-item:hover, .tesla-theme .dash-menu-item:active {
  background-color: rgba(255, 255, 255, 0.02) !important;
  transform: translateX(4px);
}

.tesla-theme .dash-menu-item-icon {
  background-color: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  width: 28px;
  height: 28px;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
}

.tesla-theme .dash-menu-item-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.tesla-theme .dash-menu-item-title {
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}

.tesla-theme .dash-menu-item-subtitle {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.15rem;
}

.tesla-theme .dash-menu-item-arrow {
  color: rgba(255, 255, 255, 0.25) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tesla-theme .dash-menu-item-arrow svg {
  width: 20px !important;
  height: 20px !important;
}

.tesla-theme .dash-menu-item:hover .dash-menu-item-arrow {
  color: #ffffff !important;
}

.tesla-theme .charging-plan-card {
  display: none !important;
}

/* Watermark */
.dash-watermark-text {
  display: none;
}

.tesla-theme .dash-watermark-text {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 1.5rem 0 2rem 0;
  text-align: center;
  user-select: none;
}

/* Centrar texto en los botones de selección de marcas */
#col-brands .model-card-info {
  text-align: center;
}
#col-brands .model-card-title {
  justify-content: center;
}

/* Compliance and App Store Approval Styles */
.btn-destructive {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.btn-destructive:hover {
  background: rgba(234, 67, 53, 0.25) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(234, 67, 53, 0.2);
}
.btn-destructive:active {
  transform: translateY(0) scale(0.98) !important;
}

.terms-container a {
  color: var(--theme-color) !important;
  font-weight: 600;
  text-decoration: underline;
  transition: opacity 0.25s ease;
}
.terms-container a:hover {
  opacity: 0.8;
}

/* ==========================================
   SHOPPING CENTER STYLES
   ========================================== */

/* Barra de Filtros de Categorías */
.shop-filter-bar {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.3rem 0;
  margin-bottom: 0.5rem;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.shop-filter-bar::-webkit-scrollbar {
  display: none; /* Safari & Chrome */
}

.shop-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.shop-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.shop-filter-btn.active {
  background: var(--theme-color, #ffd700);
  border-color: var(--theme-color, #ffd700);
  color: #000000;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(var(--theme-color-rgb, 255, 215, 0), 0.25);
}

/* Grilla de productos */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  padding-bottom: 2rem;
}

/* Tarjeta de Producto */
.shop-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.shop-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Contenedor de Imagen */
.shop-card-img-container {
  width: 100%;
  height: 160px;
  position: relative;
  background: #111113;
  overflow: hidden;
}
.shop-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

/* Badge de Proveedor */
.shop-vendor-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  z-index: 2;
}
.shop-vendor-logo {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
}
.shop-vendor-logo-fallback {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--theme-color, #ffd700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: bold;
  color: #000;
}
.shop-vendor-name {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* Contenido del Producto */
.shop-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
}
.shop-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}
.shop-card-desc {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer de la tarjeta */
.shop-card-footer {
  margin-top: auto;
  padding: 0.8rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.shop-price-container {
  display: flex;
  flex-direction: column;
}
.shop-price-label {
  font-size: 0.6rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.shop-price-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--theme-color, #ffd700);
}

.btn-shop-buy {
  background: var(--theme-color, #ffd700);
  color: #000000;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(var(--theme-color-rgb, 255, 215, 0), 0.15);
}
.btn-shop-buy:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 15px rgba(var(--theme-color-rgb, 255, 215, 0), 0.3);
}
.btn-shop-buy:active {
  transform: scale(0.98);
}

/* evy Garage Fit: Selector de vehículo */
.shop-vehicle-capsule:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.shop-vehicle-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: #c5c5c7;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.18s ease;
}
.shop-vehicle-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.shop-vehicle-dropdown-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--theme-color, #ffd700);
  font-weight: 500;
}
.shop-compatibility-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.shop-compatibility-badge.specific {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.shop-compatibility-badge.universal {
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

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

/* Buscador y categorías estilo Amazon/MercadoLibre */
.shop-search-wrapper input:focus {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 215, 0, 0.3) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.1);
}
.shop-filter-btn span {
  font-size: 0.9rem;
}

/* circular progress ring styles */
.progress-ring-circle {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 12px var(--theme-color, #00ffd7));
}

@keyframes ring-pulse {
  0% { filter: drop-shadow(0 0 8px var(--theme-color, #00ffd7)); }
  50% { filter: drop-shadow(0 0 20px #72e54e); }
  100% { filter: drop-shadow(0 0 8px var(--theme-color, #00ffd7)); }
}

.ring-active {
  animation: ring-pulse 3s infinite ease-in-out;
}

/* Glassmorphism panels from Stitch */
.glass-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Thumb-friendly Sliders from Stitch */
.range-slider {
  -webkit-appearance: none;
  height: 32px; /* Taller touch target */
  background: transparent !important;
  width: 100%;
  touch-action: none; /* Prevents scroll bounce when sliding */
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.range-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 28px !important;
  width: 28px !important;
  background: #0091ff !important; /* Blue circles exactly from Stitch */
  border-radius: 50% !important;
  cursor: pointer !important;
  margin-top: -11px !important; /* Center thumb on track */
  box-shadow: 0 0 15px rgba(0, 145, 255, 0.6), 0 2px 5px rgba(0,0,0,0.5) !important;
  border: 3px solid #031427 !important;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.15s ease !important;
}

.range-slider:active::-webkit-slider-thumb {
  transform: scale(1.25) !important;
  background: #72e54e !important;
  box-shadow: 0 0 25px rgba(114, 229, 78, 0.8), 0 4px 8px rgba(0,0,0,0.6) !important;
}

/* Mozilla (Firefox) support */
.range-slider::-moz-range-thumb {
  appearance: none !important;
  height: 28px !important;
  width: 28px !important;
  background: #0091ff !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 0 15px rgba(0, 145, 255, 0.6), 0 2px 5px rgba(0,0,0,0.5) !important;
  border: 3px solid #031427 !important;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.15s ease !important;
}

.range-slider::-moz-range-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

/* Custom Alarm Switch Slider & Animations */
.alarm-switch-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#charge-calc-alarm-toggle:checked + .alarm-switch-slider {
  background-color: var(--theme-color, #0091ff) !important;
  box-shadow: 0 0 10px rgba(var(--theme-color-rgb, 0, 145, 255), 0.4);
}
#charge-calc-alarm-toggle:checked + .alarm-switch-slider::before {
  transform: translateX(20px);
}

#charge-calc-volt-toggle:checked + .alarm-switch-slider {
  background-color: #ff9500 !important;
  box-shadow: 0 0 10px rgba(255, 149, 0, 0.4);
}
#charge-calc-volt-toggle:checked + .alarm-switch-slider::before {
  transform: translateX(20px);
}

@keyframes alarm-pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6); }
  70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 59, 48, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
@keyframes alarm-bell-swing {
  0% { transform: rotate(0); }
  15% { transform: rotate(12deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(4deg); }
  90% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

.alarm-pulsing-circle {
  animation: alarm-pulse-ring 1.8s infinite ease-in-out;
}
.alarm-bell-icon {
  animation: alarm-bell-swing 0.8s infinite ease-in-out;
  transform-origin: top center;
}

/* Integración sin marco del logo de evyshop */
#card-shopping {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* 1rem original, menos los 10px agregados en .main-menu-card-blue, para
     que evyshop no se desplace al bajar Garage Eléctrico y Mapa de Cargadores */
  margin-top: calc(1rem - 10px) !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: auto !important;
  width: auto !important;
}

#card-shopping::before {
  display: none !important; /* Desactivar cualquier pseudo-elemento de fondo */
}

#card-shopping:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.05) !important; /* Animación de escala limpia sin traslación lateral */
}

#card-shopping:active {
  transform: scale(0.98) !important;
}

/* evyshop P2P Marketplace Custom Styles */
.shop-tab-pill {
  padding: 0.45rem 0.85rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a0aec0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.shop-tab-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.shop-tab-pill.active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #38bdf8;
  color: #fff;
}
.shop-sub-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: #090a10;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #718096;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.shop-sub-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
.shop-sub-pill.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

/* ── Categoría Principal pills (nivel 1, más prominentes) ── */
.shop-cp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.42rem 0.9rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}
.shop-cp-pill:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: #e2e8f0;
  transform: translateY(-1px);
}
.shop-cp-pill.active {
  background: linear-gradient(135deg, rgba(2,132,199,0.25), rgba(3,105,161,0.25));
  border-color: rgba(56,189,248,0.45);
  color: #7dd3fc;
  box-shadow: 0 0 12px rgba(56,189,248,0.12);
}

/* ── Contenedor de filas de filtros ── */
.shop-filter-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.shop-filter-row::-webkit-scrollbar { display: none; }

/* ── Segunda fila: subcategorías de la CP seleccionada ── */
.shop-sub-row {
  animation: slideDownFade 0.2s ease;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 0.2rem;
}
@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.shop-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  color: #718096;
  cursor: pointer;
  padding: 0.4rem 0;
  transition: color 0.25s ease;
}
.shop-nav-btn:hover {
  color: #cbd5e1;
}
.shop-nav-btn.active {
  color: #38bdf8;
}
.publish-type-btn {
  background: transparent;
  color: #718096;
  border: none;
  transition: all 0.2s;
}
.publish-type-btn.active {
  background: #0284c7 !important;
  color: #000 !important;
}
.pub-video-opt-btn {
  background: #000;
  color: #718096;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  font-size: 0.65rem;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  transition: all 0.2s;
}
.pub-video-opt-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}
.pub-video-opt-btn.active {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: #a5b4fc !important;
  font-weight: bold;
}
.shop-preset-img-btn {
  position: relative;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #000;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.shop-preset-img-btn.active {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
.shop-preset-img-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-preset-img-btn span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.85);
  font-size: 0.58rem;
  color: #cbd5e1;
  padding: 0.1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AI Studio Premium Grid & Location Scroll Custom Styles */
.shop-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  padding-bottom: 2rem;
}

.shop-dept-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: #090a10;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #718096;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.shop-dept-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}
.shop-dept-btn.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}

/* Bloquear desplazamiento lateral de la pantalla y forzar ajuste lateral perfecto */
html, body, #app, .modal, .modal-content, #modal-shopping, #shop-views-container, #shopping-catalog-view, #shopping-publish-view, #shop-publish-form, #shopping-admin-view, #shopping-ad-detail-view, #shop-scrollable-body {
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Ocultar barras de desplazamiento para todos los navegadores conservando la función de scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Asegurar scroll vertical suave y táctil nativo */
#shop-scrollable-body, #shopping-publish-form, #shopping-admin-view {
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   MEJORAS PREMIUM DE EVYSHOP: WIZARD, PREVISUALIZADOR, ZOOM Y TARJETAS
   ========================================================================== */

/* 1. Tarjetas de equipamiento / certificado activas dinámicas */
label:has(input[type="checkbox"]:checked) {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.08) !important;
}

label:has(input#pub-car-has-cert:checked) {
  background: rgba(244, 114, 182, 0.08) !important;
  border-color: rgba(244, 114, 182, 0.35) !important;
  color: #f472b6 !important;
  box-shadow: 0 0 12px rgba(244, 114, 182, 0.08) !important;
}

/* Hover de tarjetas checkbox para desktop */
@media (hover: hover) {
  label:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
}

/* 2. Stepper y Wizard */
.pub-step-panel {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
}

.pub-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
  position: relative;
}

.pub-step-indicator {
  flex: 1;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748b;
  border-bottom: 3px solid #1e293b;
  padding-bottom: 0.4rem;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pub-step-indicator.active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
}

.pub-step-indicator.completed {
  color: #10b981;
  border-bottom-color: #10b981;
}

/* Botones de navegación del Wizard */
.pub-wizard-footer {
  display: flex;
  gap: 0.75rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #081a25;
  margin-top: auto;
  flex-shrink: 0;
}

.pub-wizard-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.pub-wizard-btn-prev {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pub-wizard-btn-prev:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pub-wizard-btn-next {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.pub-wizard-btn-next:hover {
  background: #0369a1;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
}

.pub-wizard-btn-submit {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.pub-wizard-btn-submit:hover {
  background: #059669;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* 3. Previsualizador premium de fotos */
.pub-img-preview-card {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  background: #0a0b10;
  transition: transform 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.pub-img-preview-card:hover {
  transform: scale(1.05);
  border-color: #38bdf8;
}

.pub-img-preview-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 10;
}

.pub-img-preview-delete:hover {
  background: #ef4444;
  transform: scale(1.1);
}

/* 4. Modal de zoom de imágenes */
#shop-image-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.96);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-in-out;
}

#shop-image-zoom-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.shop-zoom-img {
  max-width: 95%;
  max-height: 85%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  object-fit: contain;
  transition: transform 0.2s ease;
  cursor: grab;
}

.shop-zoom-img:active {
  cursor: grabbing;
}

/* 5. Filtros en Catálogo */
.shop-filters-row {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.2rem 0.6rem 0.6rem 0.6rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
  margin: 0 -0.4rem;
}
.shop-filters-row::-webkit-scrollbar {
  display: none;
}

.shop-filter-pill {
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shop-filter-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

.shop-filter-pill.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

/* Bloqueo táctil de balanceo horizontal en el catálogo de evyshop */
/* Bloqueo táctil de balanceo horizontal exhaustivo en el modal de evyshop */
#modal-shopping,
#modal-shopping .modal-content,
#shop-views-container,
#shopping-catalog-view,
#shop-scrollable-body {
  touch-action: pan-y !important;
  overscroll-behavior-x: none !important;
}

/* Permitir explícitamente el scroll horizontal solo en los sliders/filtros */
.shop-filters-row,
.shop-filter-row,
.shop-card-img-slider,
.shop-detail-img-slider,
#shop-dept-scroller {
  touch-action: pan-x pan-y !important;
}

/* Evita menú contextual nativo (guardar/compartir) por toque prolongado y selección en imágenes */
.shop-detail-img-slider img,
.shop-zoom-img,
.shop-card img {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* Estandarización de Detalles de Anuncios y Carrusel de Banners Promocionales */
.shop-detail-img-container {
  position: relative;
  width: calc(100% + 1.6rem);
  height: 280px;
  flex-shrink: 0 !important;
  background: #060b11;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  /* Antes 0 arriba: el cuadro quedaba pegado al borde superior de la pantalla,
     tapado por el Dynamic Island en los iPhone que lo tienen. */
  margin: calc(0.6rem + env(safe-area-inset-top, 0px)) -0.8rem 0.5rem -0.8rem;
}
.shop-detail-img-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shop-detail-img-slide-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-detail-img-blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  filter: blur(14px) brightness(0.35);
  transform: scale(1.12);
  pointer-events: none;
  z-index: 1;
}
.shop-detail-img {
  cursor: zoom-in;
  width: 100%;
  height: 100%;
  /* contain (no cover): que se vea la foto completa sin recortar. El fondo
     desenfocado (.shop-detail-img-blur-bg) de atrás disimula el letterboxing. */
  object-fit: contain !important;
  position: relative;
  z-index: 2;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

/* Carrusel de Banners Promocionales (Ofertas) */
#shop-promo-carousel {
  touch-action: pan-x pan-y !important;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0c1e2b;
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.35);
  margin-bottom: 0.25rem;
}
#shop-promo-slides {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.shop-promo-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
}
.shop-promo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.shop-promo-slide img.shop-promo-img { opacity: 0; transition: opacity 0.35s ease; }
.shop-promo-slide img.shop-promo-img.loaded { opacity: 1; }
.shop-promo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.shop-promo-dot.active {
  background: #38bdf8;
  width: 14px;
  border-radius: 4px;
}

/* ==========================================
   11. Estilos del Chat Interno P2P
   ========================================== */
.shop-chat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.shop-chat-item:active {
  transform: scale(0.98);
  background: rgba(255,255,255,0.04);
}
.shop-chat-item.unread {
  background: rgba(16, 185, 129, 0.03);
  border-color: rgba(16, 185, 129, 0.15);
}
.shop-chat-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #0f1c24;
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-chat-badge-count {
  background: #ef4444;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  font-family: monospace;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-sizing: border-box;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.35);
}
.chat-msg-bubble {
  max-width: 78%;
  padding: 0.65rem 0.85rem;
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.chat-msg-sent {
  align-self: flex-end;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.chat-msg-received {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.03);
  border-bottom-left-radius: 4px;
}
.chat-msg-time {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.25rem;
  text-align: right;
  font-family: monospace;
  display: block;
}
.chat-msg-sent .chat-msg-time {
  color: rgba(255, 255, 255, 0.7);
}

/* =========================================================================
   OVERLAY FLOTANTE DE ALARMA (SILENCIADOR VISUAL DE CARGA)
   ========================================================================= */

.alarm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  z-index: 9999999 !important; /* Por encima de cualquier modal o alert */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.alarm-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.alarm-overlay-content {
  background: #09090b;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 35px 30px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 100px rgba(114, 229, 78, 0.1);
  transform: scale(0.85);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
}

.alarm-overlay.active .alarm-overlay-content {
  transform: scale(1);
}

.alarm-icon-container {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alarm-icon {
  font-size: 2.8rem;
  z-index: 2;
  filter: drop-shadow(0 0 12px rgba(114, 229, 78, 0.6));
  animation: pulseIcon 1.5s infinite ease-in-out;
}

.alarm-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(114, 229, 78, 0.15);
  animation: rippleAnimation 2.2s infinite ease-out;
  z-index: 1;
}

.alarm-ripple.delay-1 {
  animation-delay: 0.7s;
}

.alarm-ripple.delay-2 {
  animation-delay: 1.4s;
}

@keyframes rippleAnimation {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes pulseIcon {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.alarm-overlay h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.alarm-overlay p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 30px 0;
  line-height: 1.5;
}

.btn-stop-alarm {
  background: #ea4335;
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 15px 24px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 6px 20px rgba(234, 67, 53, 0.4);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.btn-stop-alarm:hover {
  background: #d93025;
  box-shadow: 0 8px 25px rgba(234, 67, 53, 0.55);
}

.btn-stop-alarm:active {
  transform: scale(0.96);
  box-shadow: 0 2px 10px rgba(234, 67, 53, 0.3);
}

/* Transiciones fluidas premium para las vistas del Shopping Center (EvyShop) */
#shopping-catalog-view,
#shopping-publish-view,
#shopping-my-ads-view,
#shopping-videos-view,
#shopping-chats-list-view,
#shopping-chat-conversation-view {
  animation: fadeIn 0.28s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#shopping-ad-detail-view {
  animation: slideUpFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* Flecha de volver visible en las pantallas que no la tenían (útil con la barra de navegación oculta) */
.evy-back-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, transform 0.2s ease;
}
.evy-back-btn:active { background: rgba(255, 255, 255, 0.2); transform: scale(0.94); }
.evy-back-floating {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  z-index: 60;
}


/* Buscador de las bibliotecas (documentos y videos) */
.lib-search-box { padding: 4px 14px 0; flex-shrink: 0; }
.lib-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.2px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 0.92rem;
  font-family: 'Outfit', sans-serif;
  outline: none;
}
.lib-search-input:focus { border-color: rgba(143,211,167,0.7); }
.lib-search-input::placeholder { color: rgba(255,255,255,0.4); }


/* Botones − / + de ajuste fino junto a los diales de la calculadora de carga */
.soc-stepper { display: inline-flex; align-items: center; gap: 4px; }
.soc-step-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.15rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.soc-step-btn:active { background: rgba(255,255,255,0.22); }


/* Selector de versión del Plan de Carga: subordinado al nombre del modelo, con flecha visible */
.charge-calc-version-pill {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 9px 38px 9px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  color: rgba(255,255,255,0.92);
  background-color: rgba(255,255,255,0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  text-overflow: ellipsis;
}

/* Valores de los diales de carga: se pueden tocar para escribir el número exacto */
#charge-battery-slider-text, #charge-target-slider-text, #charge-calc-amp-val, #charge-calc-volt-val {
  cursor: pointer;
  text-decoration: underline dotted rgba(255,255,255,0.35);
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════════════════════
   MENÚ PRINCIPAL: carrusel de botones (solo si el comparador está activo)
   Sin el carrusel, los contenedores no generan caja (display: contents)
   y los botones quedan exactamente como siempre.
   ══════════════════════════════════════════════════════════════ */
.menu-pager, .menu-track, .menu-page { display: contents; }
.menu-pager-arrow { display: none; }

.main-menu-card-gold {
  box-shadow: 0 4px 25px rgba(0,0,0,0.5), 0 0 15px rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
}
.main-menu-card-gold:hover {
  box-shadow: 0 8px 35px rgba(0,0,0,0.6), 0 0 25px rgba(56, 189, 248, 0.25) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-3px) !important;
}
.main-menu-card-gold.selected {
  border-color: rgba(56, 189, 248, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3), 0 0 55px 10px rgba(56, 189, 248, 0.4), 0 8px 36px rgba(56, 189, 248, 0.32) !important;
}

.menu-pager.carousel-on {
  display: block;
  position: relative;
  width: 100%;
  max-width: 380px;
}
.menu-pager.carousel-on .menu-track {
  display: flex;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.menu-pager.carousel-on[data-page="1"] .menu-track { transform: translateX(-50%); }
.menu-pager.carousel-on .menu-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}
/* La página que no se ve no recibe toques ni se ve mientras se desplaza */
.menu-pager.carousel-on[data-page="0"] #menu-page-2,
.menu-pager.carousel-on[data-page="1"] #menu-page-1 { opacity: 0; pointer-events: none; }
/* Las dos páginas tienen el mismo margen superior (10 px) aunque la primera tarjeta no sea Garage:
   así el primer botón de cada página queda exactamente a la misma altura. */
.menu-pager.carousel-on .menu-page { padding-top: 10px; }
.menu-pager.carousel-on .menu-page .main-menu-card { margin-top: 0; }
/* Todo el conjunto (botones + flecha) baja 8 px para separarlo de los cargadores del fondo */
.menu-pager.carousel-on { top: 8px; }

/* Flecha fina, blanca, sin círculo: pulsa con luz celeste (el mismo celeste de los botones) */
.menu-pager.carousel-on .menu-pager-arrow {
  display: flex;
  position: absolute;
  top: -34px;
  right: -6px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  color: #38bdf8; /* el celeste que ilumina el botón Garage Eléctrico al tocarlo */
  cursor: pointer;
  z-index: 12;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0.7;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-pager.carousel-on[data-page="1"] .menu-pager-arrow { right: auto; left: -6px; transform: scaleX(-1); }
.menu-pager.carousel-on .menu-pager-arrow svg { filter: drop-shadow(0 0 0 rgba(56,189,248,0)); }
.menu-pager.carousel-on.arrow-pulse .menu-pager-arrow { animation: menu-arrow-glow 6.6s ease-in-out infinite; }
.menu-pager.carousel-on.arrow-pulse .menu-pager-arrow svg { animation: menu-arrow-halo 6.6s ease-in-out infinite; }
/* Ciclo muy lento: aparece, llega al brillo máximo y se apaga hasta desaparecer del todo */
@keyframes menu-arrow-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
@keyframes menu-arrow-halo {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(56,189,248,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(56,189,248,0.95)) drop-shadow(0 0 16px rgba(56,189,248,0.55)); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-pager.carousel-on.arrow-pulse .menu-pager-arrow,
  .menu-pager.carousel-on.arrow-pulse .menu-pager-arrow svg { animation: none; }
  .menu-pager.carousel-on .menu-pager-arrow { opacity: 1; }
  .menu-pager.carousel-on .menu-track { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   COMPARADOR DE AUTOS
   ══════════════════════════════════════════════════════════════ */
#evy-compare {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 480px;
  height: 100%;
  z-index: 120;
  background: #09090b;
  color: #fff;
  font-family: 'Outfit', 'Inter', sans-serif;
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
#evy-compare.open { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
#evy-compare::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  height: 320px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(56,189,248,0.16), transparent);
  pointer-events: none;
}
.cmp-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
}
#cmp-result.off { display: none; }
#cmp-result { background: #09090b; transform: translateX(100%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease, visibility 0s linear 0.32s; }
#cmp-result.show { transform: translateX(0); opacity: 1; pointer-events: auto; visibility: visible; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease, visibility 0s; }
#cmp-pick.behind { transform: translateX(-22%); opacity: 0.4; }
.cmp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 8px 12px;
  flex-shrink: 0;
  position: relative;
}
.cmp-top h1 {
  flex: 1;
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  padding-right: 40px;
}
.cmp-togrow { display: flex; justify-content: center; padding: 2px 0 8px; flex-shrink: 0; }
.cmp-sub { text-align: center; color: rgba(255,255,255,0.55); font-size: 0.82rem; margin: 0 16px 8px; line-height: 1.35; }

/* — Selección — */
.cmp-chips { display: flex; gap: 8px; padding: 4px 14px 8px; flex-shrink: 0; }
.cmp-chip {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 14px;
  border: 1.4px dashed rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  padding: 0 8px;
  overflow: hidden;
  position: relative;
}
.cmp-chip.filled { border: 1.4px solid var(--cmp-c); background: rgba(255,255,255,0.05); color: #fff; font-weight: 600; }
.cmp-chip.filled span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chip button { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1rem; padding: 4px; cursor: pointer; }
.cmp-search { padding: 0 14px 8px; flex-shrink: 0; }
#evy-compare .cmp-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.2px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
}
#evy-compare .cmp-search input:focus { border-color: rgba(56,189,248,0.6); }
.cmp-list { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 0 14px 110px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.cmp-brand { font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase; color: #38bdf8; margin: 14px 4px 6px; font-weight: 700; }
.cmp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1.2px solid rgba(255,255,255,0.07);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.cmp-item:active { transform: scale(0.985); }
.cmp-item.sel { border-color: var(--cmp-c); background: rgba(255,255,255,0.08); }
.cmp-item img { width: 90px; height: 50px; object-fit: contain; flex-shrink: 0; }
.cmp-item .cmp-iname { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; }
.cmp-item .cmp-iver { display: block; font-size: 0.72rem; font-weight: 400; color: rgba(255,255,255,0.45); margin-top: 1px; }
.cmp-item .cmp-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.6px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #000; flex-shrink: 0;
}
.cmp-item.sel .cmp-check { background: var(--cmp-c); border-color: var(--cmp-c); }
.cmp-empty { text-align: center; color: rgba(255,255,255,0.45); padding: 40px 10px; font-size: 0.9rem; }
.cmp-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: linear-gradient(to top, #09090b 55%, rgba(9,9,11,0));
  z-index: 5;
}
.cmp-go {
  width: 100%;
  padding: 15px;
  border-radius: 16px;
  border: none;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #00bfff, #0091ff);
  box-shadow: 0 8px 28px rgba(0,145,255,0.32);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.12s ease;
}
.cmp-go:active { transform: scale(0.98); }
.cmp-go:disabled { opacity: 0.35; box-shadow: none; cursor: default; }

/* — Resultado — */
.cmp-body { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 4px 12px 40px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; width: 100%; box-sizing: border-box; }
.cmp-body > * { max-width: 100%; box-sizing: border-box; }
.cmp-screen { overflow: hidden; }
.cmp-toggle { display: inline-flex; background: rgba(255,255,255,0.08); border-radius: 10px; padding: 2px; flex-shrink: 0; }
.cmp-toggle button { border: none; background: none; color: rgba(255,255,255,0.6); font-family: inherit; font-size: 0.72rem; font-weight: 600; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.cmp-toggle button.on { background: rgba(255,255,255,0.18); color: #fff; }
.cmp-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.cmp-car {
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
  border: 1.2px solid rgba(255,255,255,0.08);
  padding: 8px 6px 10px;
  text-align: center;
  min-width: 0;
  border-top: 3px solid var(--cmp-c);
}
.cmp-car img { width: 100%; height: auto; aspect-ratio: 360 / 200; object-fit: contain; display: block; margin: -4px 0 -2px; }
.cmp-car .cmp-cbrand { font-size: 0.62rem; letter-spacing: 1.5px; color: rgba(255,255,255,0.5); margin-top: 4px; text-transform: uppercase; }
.cmp-car .cmp-cname { font-size: 1.02rem; font-weight: 700; line-height: 1.15; margin: 2px 0 6px; overflow-wrap: anywhere; }
.cmp-vsel { position: relative; display: inline-block; max-width: 100%; }
#evy-compare .cmp-vsel select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 22px 6px 12px;
  max-width: 100%;
  text-overflow: ellipsis;
  outline: none;
}
.cmp-vsel::after { content: '▾'; position: absolute; right: 9px; top: 50%; transform: translateY(-52%); font-size: 0.7rem; color: rgba(255,255,255,0.8); pointer-events: none; }
#evy-compare .cmp-vsel select:disabled { opacity: 0.6; }
.cmp-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.62rem; color: rgba(255,255,255,0.5); margin-top: 6px; }
.cmp-status i { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; display: inline-block; }
.cmp-status.verificada i { background: #00ffd7; }
.cmp-status.parcial i { background: #ffd700; }
.cmp-sec { font-size: 0.74rem; letter-spacing: 2.2px; text-transform: uppercase; color: #38bdf8; font-weight: 700; margin: 22px 4px 2px; display: flex; align-items: center; gap: 10px; }
.cmp-sec::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.cmp-rlabel { text-align: center; font-size: 0.74rem; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 600; margin: 16px 0 6px; }
.cmp-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.cmp-cell {
  position: relative;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1.2px solid rgba(255,255,255,0.07);
  padding: 13px 4px 9px;
  text-align: center;
  min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0;
}
.cmp-cell.best { border-color: rgba(0,255,215,0.7); background: rgba(0,255,215,0.07); }
.cmp-cell.best .cmp-val { color: #00ffd7; }
.cmp-cell.equal .cmp-val { color: rgba(255,255,255,0.7); }
.cmp-val { font-size: 1.5rem; font-weight: 700; line-height: 1.05; }
.cmp-val.sm { font-size: 0.82rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; padding: 0 3px; }
.cmp-val.na { color: rgba(255,255,255,0.28); font-weight: 400; }
.cmp-unit { font-size: 0.72rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
.cmp-tag { display: inline-block; margin-top: 4px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.6px; padding: 2px 6px; border-radius: 6px; background: rgba(56,189,248,0.18); color: #7dd3fc; }
.cmp-tag.conv { background: rgba(255,215,0,0.14); color: #ffd277; }
.cmp-badge {
  position: absolute; top: -8px; right: 8px;
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.8px;
  padding: 2px 8px; border-radius: 999px;
  background: #00ffd7; color: #04231c;
}
.cmp-cell.equal .cmp-badge { background: #3a3d44; color: rgba(255,255,255,0.8); }
.cmp-note { margin: 16px 4px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,215,0,0.07); border: 1px solid rgba(255,215,0,0.25); color: #ffd277; font-size: 0.74rem; line-height: 1.4; }
.cmp-note.info { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.cmp-src { margin: 18px 4px 0; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.cmp-src summary { cursor: pointer; padding: 13px 14px; font-weight: 600; font-size: 0.9rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.cmp-src summary::-webkit-details-marker { display: none; }
.cmp-src summary::after { content: '▾'; color: rgba(255,255,255,0.6); transition: transform 0.2s; }
.cmp-src[open] summary::after { transform: rotate(180deg); }
.cmp-src .cmp-src-in { padding: 0 14px 14px; }
.cmp-src h4 { margin: 12px 0 4px; font-size: 0.84rem; display: flex; align-items: center; gap: 8px; }
.cmp-src h4 i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cmp-src ul { list-style: none; margin: 0; padding: 0; }
.cmp-src li { font-size: 0.74rem; color: rgba(255,255,255,0.65); line-height: 1.4; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.cmp-src li a { color: #7dd3fc; text-decoration: none; word-break: break-word; }
.cmp-src li small { color: rgba(255,255,255,0.4); }
.cmp-src .cmp-st { font-size: 0.68rem; color: rgba(255,255,255,0.45); margin-bottom: 2px; }
/* Barras */
.cmp-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; margin-bottom: 8px; }
.cmp-legend .cmp-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; background: rgba(255,255,255,0.05); border-radius: 999px; padding: 4px 4px 4px 10px; }
.cmp-legend .cmp-lg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--cmp-c); }
#evy-compare .cmp-legend .cmp-vsel select { font-size: 0.72rem; padding: 4px 20px 4px 8px; }
.cmp-bcard { margin-top: 12px; padding: 14px 14px 10px; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1.2px solid rgba(255,255,255,0.08); }
.cmp-bhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cmp-bhead b { font-size: 0.74rem; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.cmp-bhead small { font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.45); text-align: right; }
.cmp-brow { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 8px; margin: 7px 0; }
.cmp-brow .cmp-bn { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; min-width: 0; }
.cmp-brow .cmp-bn i { width: 9px; height: 9px; border-radius: 50%; background: var(--cmp-c); flex-shrink: 0; }
.cmp-brow .cmp-bn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-btrack { height: 14px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.cmp-bfill { height: 100%; border-radius: 999px; background: var(--cmp-c); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.cmp-bval { font-size: 0.95rem; font-weight: 700; min-width: 70px; text-align: right; white-space: nowrap; }
.cmp-bval small { font-size: 0.64rem; font-weight: 400; color: rgba(255,255,255,0.55); margin-left: 2px; }
.cmp-bval.best { color: #00ffd7; }
.cmp-brow.text { grid-template-columns: 92px 1fr; }
.cmp-brow.text .cmp-btxt { font-size: 0.8rem; color: rgba(255,255,255,0.85); line-height: 1.3; }

/* ══════════════════════════════════════════════════════════════
   CENTRO MULTIMEDIA («Videos»)
   ══════════════════════════════════════════════════════════════ */
#evy-media {
  position: fixed; top: 0; left: 50%; width: 100%; max-width: 480px; height: 100%;
  z-index: 120; background: #09090b; color: #fff;
  font-family: 'Outfit', 'Inter', sans-serif;
  transform: translateX(-50%) translateY(100%); opacity: 0; pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  overflow: hidden; overflow: clip; contain: paint; touch-action: pan-y; overscroll-behavior: contain;
}
#evy-media.open { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
#evy-media::before {
  content: ''; position: absolute; top: -120px; left: 0; right: 0; height: 320px; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(56,189,248,0.16), transparent);
}
.med-screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease; }
#med-player-screen { background: #09090b; transform: translateX(100%); opacity: 0; pointer-events: none; }
#med-player-screen.show { transform: translateX(0); opacity: 1; pointer-events: auto; }
#med-player-screen.off { display: none; }
#med-list-screen.behind { transform: translateX(-22%); opacity: 0.4; }
.med-top { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 8px 12px; flex-shrink: 0; position: relative; }
.med-top h1 { flex: 1; margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: 0.3px; text-align: center; padding-right: 40px; }
.med-list { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 6px 14px 40px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.med-card { margin-bottom: 16px; border-radius: 20px; background: rgba(255,255,255,0.045); border: 1.2px solid rgba(255,255,255,0.08); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, border-color 0.2s ease; }
.med-card:active { transform: scale(0.985); border-color: rgba(56,189,248,0.6); }
.med-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #14161b; }
.med-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.med-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(9,9,11,0.62); border: 1.5px solid rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 4px; box-sizing: border-box; }
.med-reserva { position: absolute; top: 10px; left: 10px; font-size: 0.6rem; font-weight: 800; letter-spacing: 1px; padding: 3px 9px; border-radius: 999px; background: #ffd700; color: #241c00; }
.med-info { padding: 12px 14px 14px; }
.med-series { font-size: 0.66rem; letter-spacing: 1.6px; text-transform: uppercase; color: #38bdf8; font-weight: 700; margin-bottom: 4px; }
.med-name { font-size: 1.06rem; font-weight: 700; line-height: 1.25; }
.med-desc { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.med-empty { text-align: center; color: rgba(255,255,255,0.55); padding: 70px 24px; font-size: 0.95rem; line-height: 1.5; }
.med-empty-ico { font-size: 2.4rem; color: #38bdf8; margin-bottom: 10px; }
.med-pbody { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 8px 14px 40px; }
.med-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; }
.med-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.med-pinfo { padding: 16px 4px 0; }
.med-pinfo h2 { margin: 2px 0 8px; font-size: 1.25rem; line-height: 1.25; }
.med-pinfo p { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.7); white-space: pre-line; }
.med-yt { display: inline-block; padding: 11px 18px; border-radius: 14px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); color: #fff; text-decoration: none; font-weight: 600; font-size: 0.88rem; }

/* Los botones de la página 2 tienen la misma altura mínima que los de la página 1 (Garage / Mapa) */
.menu-pager.carousel-on .menu-page .main-menu-card { min-height: 101px !important; }

/* Mientras se mueve o se amplía el mapa se apagan los desenfoques sobre él: recalcularlos en cada cuadro
   es lo que hacía que el gesto de pinza fuera a tirones. Al soltar el dedo vuelven. */
#modal-map.map-interacting, #modal-map.map-interacting * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Reviews: encabezado del creador, categorías, etiqueta del auto, duración */
#evy-compare { z-index: 130; }
.med-creator { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 18px; background: rgba(56,189,248,0.07); border: 1.2px solid rgba(56,189,248,0.22); }
.med-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; color: #38bdf8; background: rgba(56,189,248,0.12); border: 1.5px solid rgba(56,189,248,0.5); }
.med-cinfo { flex: 1; min-width: 0; }
.med-cname { font-size: 1.05rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.med-csub { font-size: 0.74rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
.med-cbtn { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-decoration: none; color: #38bdf8; border: 1.2px solid rgba(56,189,248,0.6); }
.med-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.med-chips::-webkit-scrollbar { display: none; }
.med-chip { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1.2px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.75); font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.med-chip.on { color: #04202b; background: #38bdf8; border-color: #38bdf8; }
.med-car { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.8px; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; color: #38bdf8; background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.35); }
.med-dur { position: absolute; right: 10px; bottom: 10px; font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(9,9,11,0.82); color: #fff; }
.med-foot { text-align: center; font-size: 0.7rem; color: rgba(255,255,255,0.4); padding: 6px 12px 0; line-height: 1.4; }
.med-by { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: -2px 0 10px; }
.med-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.med-cmp { padding: 11px 18px; border-radius: 14px; border: none; font-family: inherit; font-weight: 700; font-size: 0.88rem; color: #fff; background: linear-gradient(135deg, #00bfff, #0091ff); cursor: pointer; }

.med-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: 14px; background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.25); font-size: 0.85rem; }
.med-banner b { color: #38bdf8; }
.med-banner button { background: none; border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 6px 12px; border-radius: 999px; font-family: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; }

/* Pantalla de cada auto con la tarjeta «Reviews» (4 ítems): para que la imagen del auto conserve su tamaño de siempre,
   se compacta el texto de la lista (menos relleno, letra un poco menor y subtítulos de hasta 2 líneas). */
.dash-menu-list.has-reviews .dash-menu-item { padding: 1.18rem 0.5rem !important; }
.dash-menu-list.has-reviews .dash-menu-item-details { gap: 2px; }
.dash-menu-list.has-reviews .dash-menu-item-title { font-size: 1rem; }
.dash-menu-list.has-reviews .dash-menu-item-subtitle {
  font-size: 0.74rem;
  line-height: 1.25;
  margin-top: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Aviso de carga del visor de documentos: se ve mientras el documento todavía no apareció */
.viewer-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f1115;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.viewer-loading.done { opacity: 0; }
.viewer-loading.gone { display: none; }
.viewer-loading-box { width: min(78%, 280px); text-align: center; color: #e8eaed; }
.viewer-loading-spinner {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 3px solid rgba(56, 189, 248, 0.22);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: viewer-spin 0.9s linear infinite;
}
.viewer-loading-text { font-size: 0.92rem; line-height: 1.35; margin-bottom: 14px; min-height: 2.5em; }
.viewer-loading-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.viewer-loading-bar i {
  display: block; height: 100%; width: 38%; border-radius: 4px; background: #38bdf8;
  animation: viewer-slide 1.3s ease-in-out infinite;
}
@keyframes viewer-spin { to { transform: rotate(360deg); } }
@keyframes viewer-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
.viewer-loading-cancel {
  display: none; margin: 18px auto 0; padding: 10px 22px; border-radius: 22px;
  border: 1px solid rgba(56, 189, 248, 0.55); background: rgba(56, 189, 248, 0.12);
  color: #e8eaed; font-size: 0.9rem; font-family: inherit; cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.viewer-loading-cancel.show { display: inline-block; animation: viewer-cancel-in 0.35s ease both; }
.viewer-loading-cancel:active { background: rgba(56, 189, 248, 0.28); }
@keyframes viewer-cancel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }