/* 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.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.42s ease, z-index 0s linear 0.42s;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03) translateZ(0); /* GPU layer desde inicio, zoom sutil */
  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.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-top-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn-top-action:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.2);
}

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

#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));
}

.lib-card-icon {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
  pointer-events: none !important;
}

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

.lib-card-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.35;
  pointer-events: none !important;
}

.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(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  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(255,255,255,0.25); }

.map-header-title {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  border: none;
  padding: 0;
}

.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) ── */
#map-filter-wrapper {
  position: absolute;
  top: calc(env(safe-area-inset-top, 44px) + 68px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#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 {
  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: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: 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: 44px;
  height: 44px;
  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.1rem;
  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); }

/* ── 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,
#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;
}

.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;
}

#modal-library {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Biblioteca Styles */
#modal-library .modal-content {
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

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

#lib-docs,
#lib-videos {
  height: 100%;
}

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

.lib-menu-container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1rem;
}

.lib-card {
  background: rgba(255, 255, 255, 0.04) !important; /* Totalmente transparente */
  border: 1.2px solid rgba(255, 255, 255, 0.08) !important; /* Borde elegante de cristal */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  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.09) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

.lib-card:active {
  transform: translateY(-2px) scale(0.97); /* Feedback táctil */
  background: rgba(255, 255, 255, 0.07) !important;
}

.lib-card-icon {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
  pointer-events: none !important;
}

.lib-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #fff;
  pointer-events: none !important;
}

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

.lib-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.8rem;
}

.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;
}

/* Estilos legacy (doc-modal-content y doc-viewer-container para los otros modales) */
.doc-modal-content {
  width: 100%;
  height: 100%;
  max-width: 100%;
  background: rgba(18, 18, 18, 0.96);
  border: none;
  border-radius: 0;
  padding: calc(env(safe-area-inset-top, 44px) + 0.5rem) 1.2rem calc(1rem + env(safe-area-inset-bottom, 0px)) 1.2rem;
  display: flex;
  flex-direction: column;
}

.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;
}

.admin-tab-btn {
  background: none;
  border: none;
  color: #aaa;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.3s;
}

.admin-tab-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 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);
}

/* Pending Documents List */
.pending-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pending-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pending-info h4 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

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

.pending-actions {
  display: flex;
  gap: 0.8rem;
}

.btn-approve, .btn-reject {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
  transition: opacity 0.3s;
}

.btn-approve {
  background: #28a745;
  color: white;
}

.btn-reject {
  background: #dc3545;
  color: white;
}

.btn-approve:hover, .btn-reject:hover {
  opacity: 0.9;
}

/* =========================================================================
   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;
}

/* =========================================================================
   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-tab-btn {
  font-size: 1rem;
  padding: 10px 18px;
}

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 */
  animation: slideUpFade 0.6s ease forwards;
}

.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;
}

/* Respetar mayúsculas/minúsculas exactas del JS para el título dinámico */
#selector-title {
  text-transform: none;
}

/* 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: hidden;
  box-shadow: none; /* Sin sombras en estado transparente */
  box-sizing: border-box;
  flex-shrink: 0;
  transform: translateZ(0); /* GPU layer */
  will-change: transform, opacity;
}

.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 premium de iluminación de bordes y atenuación de otras tarjetas al seleccionar */
.model-grid.has-selection .model-card:not(.selected) {
  opacity: 0.15 !important;
  transform: scale(0.97) translateY(0) !important;
  filter: blur(0.5px) grayscale(0.5) !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.model-card.selected {
  transform: scale(0.98) translateY(-2px) !important;
  border-color: var(--card-theme-color, #00bfff) !important;
  box-shadow: 0 0 12px rgba(var(--card-theme-rgb), 0.25) !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, #00bfff) !important;
  transform: translateX(6px) scale(1.2) !important;
}

/* Selector back link */
.model-selector-footer {
  display: none !important;
  margin-top: 2rem;
  animation: slideUpFade 0.6s ease forwards 0.3s;
  opacity: 0;
  z-index: 5;
}

.btn-selector-logout {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #eee;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.btn-selector-logout:hover {
  background: rgba(255, 50, 50, 0.2);
  border-color: rgba(255, 50, 50, 0.4);
  color: #fff;
  transform: translateY(-1px);
}

/* ── 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);
}

/* Botón de retroceso premium glassmorphic en los selectores */
.btn-selector-back {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #eee;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

@media (hover: hover) {
  .btn-selector-back:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    transform: translateY(-1px);
  }
}

#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 */
}

/* Animaciones escalonadas retrasadas para la Pantalla de Selección de Marcas (Snappy & Elegant) */
#view-brand-selector .model-selector-header {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#view-brand-selector.is-entering .model-selector-header.animate-header {
  transition-delay: 0.1s;
}

#view-brand-selector .model-selector-header.animate-header {
  opacity: 1;
  transform: translateY(0);
}

#col-brands .model-selector-footer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#view-brand-selector.is-entering #col-brands .model-selector-footer.animate-footer {
  transition-delay: 0.3s;
}

#col-brands .model-selector-footer.animate-footer {
  opacity: 1;
  transform: translateY(0);
}

#view-brand-selector .model-grid {
  opacity: 1;
}

/* ── Estado base de animación: siempre invisible cuando la vista no está activa ── */
/* Esto ANULA cualquier clase animate-card/header/footer residual del ciclo anterior */
#view-brand-selector:not(.active) #col-brands .model-card,
#view-brand-selector:not(.active) #col-brands .model-card.animate-card {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: none !important; /* Sin transición al resetear — solo al animar */
}

#view-brand-selector:not(.active) .model-selector-header,
#view-brand-selector:not(.active) .model-selector-header.animate-header {
  opacity: 0 !important;
  transform: translateY(-12px) !important;
  transition: none !important;
}

#view-brand-selector:not(.active) #col-brands .model-selector-footer,
#view-brand-selector:not(.active) #col-brands .model-selector-footer.animate-footer {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: none !important;
}

/* ── Animaciones escalonadas solo cuando está activa y con clase is-entering ── */
#view-brand-selector.is-entering #col-brands .model-card.animate-card:nth-child(1) { transition-delay: 0.05s; }
#view-brand-selector.is-entering #col-brands .model-card.animate-card:nth-child(2) { transition-delay: 0.10s; }
#view-brand-selector.is-entering #col-brands .model-card.animate-card:nth-child(3) { transition-delay: 0.15s; }
#view-brand-selector.is-entering #col-brands .model-card.animate-card:nth-child(4) { transition-delay: 0.20s; }
#view-brand-selector.is-entering #col-brands .model-card.animate-card:nth-child(5) { transition-delay: 0.25s; }
#view-brand-selector.is-entering #col-brands .model-card.animate-card:nth-child(6) { transition-delay: 0.30s; }

/* ── Estado visible cuando la vista ESTÁ activa ── */
/* Estado inicial (sin animate-card): invisible con transición lista para animar */
#view-brand-selector.active #col-brands .model-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Estado final (con animate-card): visible */
#view-brand-selector.active #col-brands .model-card.animate-card {
  opacity: 1;
  transform: translateY(0);
}
/* Header: invisible mientras espera animate-header */
#view-brand-selector.active .model-selector-header {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#view-brand-selector.active .model-selector-header.animate-header {
  opacity: 1;
  transform: translateY(0);
}
/* Footer: invisible mientras espera animate-footer */
#view-brand-selector.active #col-brands .model-selector-footer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#view-brand-selector.active #col-brands .model-selector-footer.animate-footer {
  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.88);
  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;
  pointer-events: 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.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: 0s !important;
}

/* Ocultar el footer del selector de marcas cuando hay una selección activa */
.model-grid.has-selection ~ .model-selector-footer {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) !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;
}

/* 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; }

/* Custom back button padding/style override for unified screen */
/* Custom back button padding/style override for unified screen */
.selector-col .model-selector-footer {
  margin-top: 1.5rem;
  width: 100%;
}

/* =========================================================================
   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: flex-start; /* Subir el contenido a la parte superior */
  overflow-y: auto;
  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.2rem + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  text-align: center;
}

.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(14px); /* Desplaza sutilmente todo el conjunto hacia abajo */
}

.main-menu-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.4rem !important; /* Espaciado más holgado para el diseño de tarjeta */
  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: auto !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;
}
.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(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}
.main-menu-card-green:hover {
  box-shadow: 0 8px 35px rgba(0,0,0,0.6), 0 0 25px rgba(16, 185, 129, 0.25) !important;
  border-color: rgba(16, 185, 129, 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;
}

.main-menu-card:active {
  transform: translate3d(2px, 0, 0) !important;
  -webkit-transform: translate3d(2px, 0, 0) !important;
}

/* Efecto premium de iluminación de bordes y atenuación al seleccionar una opción */
.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.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.15s ease-out !important;
}

.main-menu-card.selected {
  transform: translate3d(5px, 0, 0) !important;
  -webkit-transform: translate3d(5px, 0, 0) !important;
  z-index: 10 !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

.main-menu-card.selected .menu-card-arrow {
  color: #00bfff !important;
  transform: translate3d(4px, 0, 0) !important;
  -webkit-transform: translate3d(4px, 0, 0) !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;
}

.main-menu-card.selected .menu-card-details p {
  color: rgba(255, 255, 255, 1.0) !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: 72px;
  height: 36px;
  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);
}
.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;
}
.hidden-bg {
  pointer-events: none;
}

/* Plan de Carga Card */
.charging-plan-card {
  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;
}

.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;
}

/* 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 {
  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.45rem 1rem;
  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: cover;
  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 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
}
.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;
  margin-top: 1rem !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;
}
/* Admin Panel Tab Buttons */
.admin-tab-btn {
  background: rgba(255,255,255,0.03);
  color: #64748b;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}
.admin-tab-btn:hover {
  color: #cbd5e1;
  border-color: rgba(255,255,255,0.12);
}
.admin-tab-btn.active {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.3) !important;
  color: #f59e0b !important;
  font-weight: 700;
}
.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);
  margin: 0 -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%;
  object-fit: cover !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-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;
}