/* ==========================================================================
🌐 UI GLOBAL (COMPONENTES COMPARTIDOS Y RESETEO BASE)
========================================================================== */

/* --- 1. RESET & BASE --- */
/* Nota: La fuente Inter se carga vía <link> en el HTML con preconnect para mayor rendimiento */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, sans-serif;
  /* 💀 PURGADO: word-wrap !important */
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  min-height: 100vh;
  min-height: 100dvh;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
  overflow-x: clip;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* ✅ SOLUCIÓN: Delegado al body para herencia natural */
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.contenedor-principal {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen and (min-width: 1440px) {
    .contenedor-principal { max-width: 1280px; }
}
@media screen and (min-width: 1920px) {
    .contenedor-principal { max-width: 1360px; }
}

/* --- ESTRUCTURA DE REJILLA DE PRODUCTOS UNIFICADA (OOCSS) --- */
.catalogo-grid, .tienda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

html, body {
  -webkit-tap-highlight-color: transparent !important;
  width: 100%;
  touch-action: manipulation;
}

/* --- COMPONENTE CENTRALIZADO: GEOMETRÍA DE MINIATURAS Y ÁNGULOS (OOCSS) --- */
.mini-foto-container, 
.mini-foto-edicion, 
.mini-foto-estudio-wrapper, 
.btn--add-extra {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
}

/* --- COMPONENTE CENTRALIZADO: BOTONES FLOTANTES CIRCULARES DE ACCIÓN --- */
.btn--floating-cart, .chatbot-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    outline: none;
    /* Sincronización cinética unificada */
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn--floating-cart:hover, .chatbot-toggle:hover {
    transform: scale(1.08); /* Reacción micro-espacial táctil premium */
}

.btn--floating-cart:active, .chatbot-toggle:active {
    transform: scale(0.95);
}

/* --- COMPONENTE CENTRALIZADO: CÁPSULAS INTERACTIVAS Y CHIPS DE FILTRADO (OOCSS) --- */
.pildora-filtro, .tab-categoria, .chip-categoria {
    border: 1px solid var(--color-borde);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* ✨ INTEGRACIÓN ÉLITE: Refresco cinético a 0.15s con aceleración cubic-bezier */
    transition: background-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.pildora-filtro:active, .tab-categoria:active, .chip-categoria:active {
    transform: scale(0.96);
}

body.bloquear-scroll {
  position: fixed;
  top: calc(-1 * var(--scroll-y, 0px));
  left: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* --- 2. SCROLLBAR NATIVO Y PANELES INTERNOS --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-fondo); }
.bg-oscuro { background: var(--bg-surface); }
.bg-error { background: #E74C3C !important; }
.bg-naranja-fuerte { background: #E67E22 !important; }
.bg-naranja-suave { background: #F39C12 !important; }
::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-texto-suave); }

/* Declaraciones individuales seguras para evitar colapsos de motor de renderizado */
.tabs-categorias-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
.tabs-categorias-wrapper::-webkit-scrollbar-track { background: transparent; }
.tabs-categorias-wrapper::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: 10px; }

.scroll-detalle::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-detalle::-webkit-scrollbar-track { background: transparent; }
.scroll-detalle::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: 10px; }

.panel-temas-scrolleable::-webkit-scrollbar { width: 6px; height: 6px; }

.caja-botones-checkout-movil::-webkit-scrollbar { width: 6px; height: 6px; }
.caja-botones-checkout-movil::-webkit-scrollbar-track { background: transparent; }
.caja-botones-checkout-movil::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: 10px; }

/* --- 3. FORMULARIOS, TABS & INPUTS GLOBALES --- */
.tabs-config {
  display: flex;
  border-bottom: 2px solid var(--color-borde);
  margin-bottom: 25px;
  width: 100%;
}

.tab-content { display: none; animation: fadeIn 0.3s ease; width: 100%; }
.tab-content.activo { display: block; }

/* --- 4. BOTONES GLOBALES --- */
.separador-auth {
  display: flex; align-items: center; text-align: center;
  margin-bottom: 20px; color: var(--color-texto-suave); font-size: 13px;
}
.separador-auth::before, .separador-auth::after { content: ''; flex: 1; border-bottom: 1px solid var(--color-borde); }
.separador-auth span { padding: 0 15px; font-weight: 600; }

/* --- 5. MODALES & VISORES --- */
.modal-contenido h3 { margin-bottom: 25px; font-weight: 800; letter-spacing: -1px; font-size: 22px; color: var(--color-texto); }

/* MODAL DE CONFIRMACIÓN GLOBAL (GLASSMORPHISM) */
#modal-confirmacion-global {
  z-index: 10000000; /* Asegura quedar por encima de otros modales con z-index 999999 */
}
.modal-confirm-caja {
  max-width: 400px;
  text-align: center;
  padding: 30px;
}
.confirm-titulo {
  margin-bottom: 15px;
  color: var(--color-texto);
}
.confirm-mensaje {
  color: var(--color-texto-suave);
  margin-bottom: 25px;
  white-space: pre-wrap;
}
.confirm-botones {
  display: flex;
  gap: 10px;
}
.confirm-botones > button {
  flex: 1;
}

/* ==========================================================================
   [🔍 VISOR GLOBAL ÉLITE] LIGHTBOX UNIFICADO (SHRINK-WRAP + 3D FIX)
   ========================================================================== */
/* --- BOTONES DE CIERRE UNIVERSALES (PANELES, MODALES Y GODMODE) --- */
.btn--close-modal, .btn--close-elite, .godmode-btn-close, .btn--close-panel {
    position: relative;
    border: none;
    line-height: 1;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Curva ejecutiva unificada para todos los cierres */
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn--close-modal, .btn--close-elite, .godmode-btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
    background: transparent;
    color: var(--color-texto-suave);
    font-size: 28px;
}

.btn--close-modal:hover, .btn--close-modal-light:hover {
    transform: rotate(90deg) scale(1.1);
}

.btn--close-modal:hover {
    color: var(--color-texto);
}

.btn--close-modal-light {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, border-color 0.2s ease;
}

.btn--close-modal-light:hover {
    background-color: #ef4444;
    border-color: rgba(239, 68, 68, 0.6);
    color: #ffffff;
    transform: scale(1.1);
}

/* ✕ Botón Cerrar Omni-Detalle estilo Élite con fondo translúcido y alto contraste */
.btn-close-omni {
    position: absolute;
    z-index: 50;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}
.btn-close-omni:hover {
    transform: scale(1.1);
    background: #ffffff;
}
[data-theme="dark"] .btn-close-omni {
    background: rgba(15, 23, 42, 0.8);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .btn-close-omni:hover {
    background: #1e293b;
}


.btn--close-panel {
    background: transparent;
    color: var(--color-texto-suave);
    font-size: 28px;
}

.btn--close-panel:hover {
    color: var(--color-texto);
    transform: scale(1.1);
}

/* Expansion de touch targets para cierres a 44x44px sin alterar diseno visual */
.btn--close-modal::before,
.btn--close-modal-light::before,
.btn--close-elite::before,
.godmode-btn-close::before,
.btn--close-panel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
}

.visor-fondo .visor-caja-blanca {
  /* Rectangular adaptativo: ancho primero, sin forzar cuadrado */
  width: min(92vw, 1200px);
  max-width: 1200px;
  height: auto;
  aspect-ratio: auto;
  min-height: 40vh;
  max-height: 88vh;
  background: transparent; border-radius: 16px; display: flex;
  align-items: center; justify-content: center; position: relative;
  overflow: hidden; box-shadow: var(--sombra-profunda);
  padding: 15px;
  box-sizing: border-box;
}

/* Con fondo premium o fondo mantenido activo: el visor es cuadrado 1:1 para coincidir con las nuevas imágenes */
body.modo-con-fondo .visor-fondo .visor-caja-blanca,
.visor-fondo .visor-caja-blanca {
  width: min(95vw, 85vh);
  aspect-ratio: 1 / 1;
  padding: 0;
}

/* 🚀 FIX: Visor adaptativo dinámico para fondo original (cero barras vacías) */
.visor-fondo .visor-caja-blanca.visor-caja-fondo-mantenido {
  background: transparent;
  border: none;
  box-shadow: none;
}
/* 🚀 FIX 2: CONTENEDOR 3D purificado */
.visor-fondo .visor-caja-blanca .contenedor-3d-premium {
  width: 100%; height: 100%; 
  display: flex; align-items: center; justify-content: center;
  position: relative; top: auto; left: auto; bottom: auto;
}

/* 🚀 FIX 3: IMAGEN purificada — sin recorte horizontal */
.visor-fondo .visor-img,
.visor-fondo #img-visor-pantalla,
.visor-fondo .producto-3d {
  /* Ocupa todo el espacio disponible del contenedor, respetando proporciones */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center center;
  cursor: zoom-in;
  touch-action: none;
  will-change: transform;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.25));
  position: relative;
  bottom: auto;
  margin: auto;
  display: block;
}

/* Con fondo premium: imagen ocupa todo el contenedor sin drop-shadow extra */
body.modo-con-fondo .visor-fondo .visor-img,
body.modo-con-fondo .visor-fondo #img-visor-pantalla,
body.modo-con-fondo .visor-fondo .producto-3d {
  border-radius: 0;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35));
  max-height: 100%;
}
.visor-fondo .visor-img.zoomed, .visor-fondo #img-visor-pantalla.zoomed, .visor-fondo .producto-3d.zoomed { cursor: zoom-out !important; }



@media (max-width: 768px) {
   .visor-fondo .visor-btn-carrusel { display: none !important; }
    .visor-fondo .visor-caja-blanca {
        width: 97vw;
        height: auto;
        max-height: 88dvh;
        border-radius: 12px;
        aspect-ratio: auto;
    }
    body.modo-con-fondo .visor-fondo .visor-caja-blanca,
    .visor-fondo .visor-caja-blanca:not(.visor-caja-fondo-mantenido) {
        width: min(95vw, 85vh);
        aspect-ratio: 1 / 1;
        padding: 0;
    }
    .visor-fondo .visor-img, .visor-fondo #img-visor-pantalla, .visor-fondo .producto-3d {
        max-height: 82dvh;
    }
  .btn--close-modal-light {
    top: calc(15px + env(safe-area-inset-top)); right: calc(15px + env(safe-area-inset-right));
  }
}

/* ==========================================================================
   FLECHAS NAVEGADORAS DEL VISOR FULLSCREEN (ALTO CONTRASTE UNIVERSAL)
   ========================================================================== */
.visor-fondo .btn--nav-preview,
.visor-caja-blanca .btn--nav-preview {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    box-sizing: border-box;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.2s ease, 
                border-color 0.2s ease, 
                box-shadow 0.2s ease;
}

.visor-fondo .btn--nav-preview svg,
.visor-caja-blanca .btn--nav-preview svg {
    width: 24px;
    height: 24px;
    stroke: #ffffff;
    stroke-width: 2.5;
    fill: none;
    display: block;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.visor-fondo .btn--nav-preview-left,
.visor-caja-blanca .btn--nav-preview-left {
    left: 14px;
}

.visor-fondo .btn--nav-preview-right,
.visor-caja-blanca .btn--nav-preview-right {
    right: 14px;
}

.visor-fondo .btn--nav-preview:hover:not(:disabled),
.visor-caja-blanca .btn--nav-preview:hover:not(:disabled) {
    background-color: var(--color-primario);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.55), 0 0 14px rgba(37, 99, 235, 0.4);
    color: #ffffff;
}

.visor-fondo .btn--nav-preview-left:hover:not(:disabled),
.visor-caja-blanca .btn--nav-preview-left:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.1);
}
.visor-fondo .btn--nav-preview-right:hover:not(:disabled),
.visor-caja-blanca .btn--nav-preview-right:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.1);
}

.visor-fondo .btn--nav-preview:active:not(:disabled),
.visor-caja-blanca .btn--nav-preview:active:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
}
/* ========================================================================== */

.modal-detalle-full {
  width: 100%; max-width: 600px; max-height: 85vh; display: flex;
  flex-direction: column; padding: 30px; border-top: 4px solid var(--color-primario);
}
.detalle-titulo { margin-bottom: 5px; color: var(--color-texto); font-size: 22px; font-weight: 800; line-height: 1.2; }
.detalle-precio { color: var(--color-primario); font-weight: 800; font-size: 18px; margin-bottom: 15px; }
.detalle-separador { border: 0; border-top: 1px solid var(--color-borde); margin-bottom: 15px; }
.detalle-subtitulo { color: var(--color-texto-suave); font-weight: 700; margin-bottom: 10px; font-size: 14px; }
.scroll-detalle {
    overflow-y: auto; padding-right: 10px; flex-grow: 1;
    -webkit-overflow-scrolling: touch !important;
}
.texto-descripcion-modal { white-space: pre-wrap; font-size: 15px; color: var(--color-texto); line-height: 1.6; }
.modal-footer { display: flex; gap: 15px; flex-wrap: nowrap; }
.modal-footer button:first-child, button.btn-secundario {
  white-space: nowrap; word-break: normal; flex-shrink: 0; min-width: max-content;
}

/* --- 6. TOASTS, ALERTAS, LOADERS & SWITCHES --- */
.alerta {
    padding: 15px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    display: none;
    animation: fadeIn 0.3s ease;
}
.alerta.activo { display: block; }
.alerta.error { background-color: rgba(239, 68, 68, 0.1); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.2); }
.alerta.exito { background-color: rgba(16, 185, 129, 0.1); color: var(--color-exito); border: 1px solid rgba(16, 185, 129, 0.2); }

.toast-flotante.activo { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }

.loader, .loader-grande, .loader-chico {
  border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; animation: girar 1s linear infinite;
}
.loader { width: 20px; height: 20px; border-top-color: var(--color-blanco); }
.loader-grande { width: 40px; height: 40px; border: 4px solid rgba(37,99,235,0.2); border-top-color: var(--color-primario); margin-bottom: 20px; }
.loader-chico { width: 20px; height: 20px; border: 3px solid rgba(37,99,235,0.2); border-top-color: var(--color-primario); margin-right: 10px; }

/* Utilidades de Estado y Estructura */
.oculto { display: none !important; }
.select-bloqueado { pointer-events: none !important; opacity: 0.7 !important; background: var(--color-fondo) !important; cursor: not-allowed !important; }
.ios-repintado { transform: scale(0.9999) !important; }
.torta-vacia { background: transparent; border: 2px dashed var(--color-primario); opacity: 0.4; display: flex; align-items: center; justify-content: center; box-shadow: none; }

/* --- ARQUITECTURA TIPOGRÁFICA DE SECCIONES (OOCSS BASE) --- */
.titulo-seccion-config, .config-section-title-elite {
    font-size: 26px;
    letter-spacing: -1px;
    color: var(--color-texto);
}

.titulo-subseccion-config, .config-subsection-title {
    font-size: 18px;
    color: var(--color-texto);
}

/* --- 7. TIPOGRAFÍA LEGAL (LAZY LOADS) --- */
.fecha-legal {
    font-size: 13px;
    color: var(--color-texto-suave);
    margin-bottom: 25px;
    display: block;
    font-weight: 800;
}
.titulo-legal {
    color: var(--color-primario);
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.texto-legal {
    color: var(--color-texto-suave);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
}
.lista-legal {
    color: var(--color-texto-suave);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
    padding-left: 20px;
}
.lista-legal li {
    margin-bottom: 8px;
}
.caja-codigo {
    background: #0f172a;
    color: #10b981;
    padding: 10px 15px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 10px;
    display: inline-block;
}

/* --- COMPONENTE CENTRALIZADO: CONTADORES DE TEXTAREA Y INPUT (RESPONSIVOS) --- */
.contador-textarea-config, .contador-textarea-flotante, .contador-textarea--flotante {
    display: block;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-texto-suave);
    background: transparent;
    padding: 4px 2px 0 0;
    margin: 0;
    box-shadow: none;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* ==========================================================================
🧩 COMPONENTES UI GLOBALES 
========================================================================== */
/* 1. NAV APP FLOTANTE & HERRAMIENTAS (Definición principal unificada abajo) */
.nav-enlaces { display: flex; gap: 10px; flex-wrap: nowrap; }

.nav-herramientas-elite { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: nowrap; }
.indicador-plan, .indicador-creditos { padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; color: white; text-transform: uppercase; }
.indicador-plan { background: var(--color-primario); }
.indicador-creditos { background: #f59e0b; }

.nav-herramientas-elite > * {
    flex-shrink: 0 !important;
}
.nav-herramientas-elite .indicador-creditos .creditos-etiqueta {
    display: none !important;
}



/* 3. FOOTER TIENDA PÚBLICA & UTILIDADES VISUALES */
.footer-tienda-publica { margin-top: 50px; padding: 40px 20px 80px 20px; border-top: 1px solid var(--color-borde); display: flex; flex-direction: column; align-items: center; gap: 15px; }
.marca-agua-footer { color: var(--color-texto-suave); font-size: 13px; margin: 0; opacity: 0.7; }

/* ==========================================================================
   --- ANIMACIONES GLOBALES DE TEMAS (EX-TEMAS.CSS) ---
   ========================================================================== */

.estudio-app, .catalogo-app {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cabecera-estudio, .cabecera-catalogo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-borde);
  padding-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}
.cabecera-estudio h2, .cabecera-catalogo h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-texto);
  margin: 0;
  letter-spacing: -1px;
}

/* ==========================================================================
   [🎨 CSS-11] PLANES DE SUSCRIPCIÓN (ONBOARDING)
   ========================================================================== */

.modal-contenido.modal-planes-contenido {
    width: 95%;
    max-width: 1200px;
}

.header-planes-modal {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.btn--back-modal {
    background: transparent;
    border: none;
    color: var(--color-texto-suave);
    font-weight: 700;
    font-size: 15px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.btn--back-modal:hover {
    color: var(--color-texto);
    transform: translateX(-5px);
}

.contenedor-planes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    align-items: stretch;
}

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

.plan-nombre {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--color-texto);
}

.plan-precio {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--color-texto);
    letter-spacing: -1px;
}

.plan-precio span {
    font-size: 14px;
    color: var(--color-texto-suave);
    font-weight: 400;
}

.plan-desc {
    font-size: 13px;
    color: var(--color-texto-suave);
    margin-bottom: 20px;
    line-height: 1.5;
}

.lista-beneficios {
    list-style: none;
    margin-bottom: 20px;
    flex-grow: 1;
    padding: 0;
}

.lista-beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--color-texto-suave);
    margin-bottom: 12px;
    line-height: 1.4;
}

.check-icon {
    color: var(--color-primario);
    font-weight: bold;
    font-size: 14px;
    margin-top: 2px;
}

/* ==========================================================================
   [🎨 CSS-08] CATÁLOGO, TARJETAS DE PRODUCTO Y PRECIOS
   ========================================================================== */
.contenedor-imagen-catalogo {
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: hidden; 
    border-radius: 12px 12px 0 0; 
    padding: 3px;
    position: relative;
    z-index: 1;
}

.contenedor-carrusel img {
    border-radius: 9px 9px 0 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.titulo-catalogo {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-texto);
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.desc-catalogo {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-texto-suave);
    margin-bottom: 15px;
    flex-grow: 1;
    /* 🚀 FIX: Forzamos una altura mínima de 3 líneas exactas (4.8em) para que todas las tarjetas midan igual */
    min-height: 4.8em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Grupo precio/moneda inline */
.grupo-precio {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}

/* ==========================================================================
   [🎨 CSS-03] CONTROLES GLOBALES Y NAVEGACIÓN PRINCIPAL
   ========================================================================== */


.nav-app {
    display: flex;
    background-color: var(--color-tarjeta);
    background-clip: padding-box;
    padding: 8px 20px;
    border-radius: 50px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35) !important;
    margin: 10px auto 20px; /* Centrado automático */
    border: 1px solid var(--color-borde);
    width: 100%;
    max-width: 100%; /* Alineado al max-width general para evitar deformación en pantallas gigantes */
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* Mantener siempre en una sola línea en escritorio */
    gap: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Colores de borde y resplandor translúcido específicos según el plan activo (UX/UI Elite) */
.nav-app.plan-nav-free, .nav-app.plan-nav-gratis {
    border-color: rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35) !important;
}
.nav-app.plan-nav-basic, .nav-app.plan-nav-basico {
    border-color: rgba(37, 99, 235, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35) !important;
}
.nav-app.plan-nav-advance, .nav-app.plan-nav-intermedio, .nav-app.plan-nav-avanzado {
    border-color: rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35) !important;
}
.nav-app.plan-nav-premium {
    border-color: rgba(245, 158, 11, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.35) !important;
}

/* Colores de borde y resplandor translúcido específicos en modo oscuro */
[data-theme="dark"] .nav-app.plan-nav-free, [data-theme="dark"] .nav-app.plan-nav-gratis {
    border-color: rgba(52, 211, 153, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .nav-app.plan-nav-basic, [data-theme="dark"] .nav-app.plan-nav-basico {
    border-color: rgba(96, 165, 250, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .nav-app.plan-nav-advance, [data-theme="dark"] .nav-app.plan-nav-intermedio, [data-theme="dark"] .nav-app.plan-nav-avanzado {
    border-color: rgba(167, 139, 250, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .nav-app.plan-nav-premium {
    border-color: rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

/* Responsividad para móviles y tablets (Se eliminaron las reglas de apilado en columna para conservar la barra horizontal en landscape) */

/* Optimización para pantallas grandes (Desktop) */


.nav-enlaces {
    display: flex;
    gap: 10px;
}

.btn-nav, .btn--nav {
    background: transparent;
    border: 1px solid transparent;
    padding: 8px 16px;
    color: var(--color-texto-suave);
    font-weight: 600;
    cursor: pointer;
    border-radius: 50px;
    font-size: 13px;
    /* transition premium élite incorporada */
    transition: background-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-nav.activo, .btn--nav.is-active {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.btn-nav:hover:not(.activo), .btn--nav:hover:not(.is-active) {
    color: var(--color-texto);
    background-color: var(--color-fondo);
}

.nav-herramientas-elite {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: nowrap;
}

.indicador-plan {
    background: var(--color-primario);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Colores dinámicos premium por plan (alto contraste en claro/oscuro) */
.indicador-plan.plan-free, .indicador-plan.plan-gratis {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}
.indicador-plan.plan-basic, .indicador-plan.plan-basico {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: #2563eb;
}
.indicador-plan.plan-advance, .indicador-plan.plan-intermedio, .indicador-plan.plan-avanzado {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}
.indicador-plan.plan-premium {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
}

[data-theme="dark"] .indicador-plan.plan-free, [data-theme="dark"] .indicador-plan.plan-gratis {
    color: #34d399;
}
[data-theme="dark"] .indicador-plan.plan-basic, [data-theme="dark"] .indicador-plan.plan-basico {
    color: #60a5fa;
}
[data-theme="dark"] .indicador-plan.plan-advance, [data-theme="dark"] .indicador-plan.plan-intermedio, [data-theme="dark"] .indicador-plan.plan-avanzado {
    color: #a78bfa;
}
[data-theme="dark"] .indicador-plan.plan-premium {
    color: #fbbf24;
}

.plan-text-mobile {
    display: none;
}

.indicador-creditos {
    background: #f59e0b;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.nav-principal, .header-app, .botones-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    gap: 10px;
}

.logout-elite {
    color: var(--color-error);
    border-color: var(--color-error);
    margin-left: 5px;
}

.logout-elite:hover {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--color-error);
}

/* ==========================================================================
   [🎨 CSS-06] AUTENTICACIÓN, SECCIONES PRINCIPALES Y ESTUDIO IA
   ========================================================================== */

.cabecera-auth {
    text-align: center;
    margin-bottom: 30px;
}

.cabecera-auth h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primario);
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.cabecera-auth p {
    font-size: 14px;
    color: var(--color-texto-suave);
}

/* ==========================================================================
   [🎨 CSS-09] CARRUSEL DE IMÁGENES Y FLECHAS
   ========================================================================== */
.carrusel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   📦 ESTRUCTURA UNIVERSAL: MOTOR DE CARRUSELES Y FLECHAS NATIVAS
   ========================================================================== */
.carrusel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.contenedor-carrusel {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.contenedor-carrusel::-webkit-scrollbar {
  display: none;
}

.item-carrusel-3d {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.contenedor-carrusel img {
  scroll-snap-align: center;
  flex: 0 0 100%;
}

/* 💎 GEOMETRÍA CONTROLADA: Forzamos especificidad élite para neutralizar interferencias de .btn */
.btn.btn--scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Bloqueo absoluto contra el formato cuadrado */
  padding: 0; /* Extirpación total de paddings de texto heredados */
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  cursor: pointer;
  transition: background-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
              scale 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
              color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn.btn--scroll-arrow:hover:not(:disabled) {
  scale: 1.15;
}

.contenedor-imagen-catalogo {
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    border-radius: 12px 12px 0 0; 
    padding: 3px;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.btn-carrusel.prev { left: 10px; }
.btn-carrusel.next { right: 10px; }
.carrusel-wrapper .btn-carrusel.prev { left: 20px; }
.carrusel-wrapper .btn-carrusel.next { right: 20px; }



/* ==========================================================================
   [🎨 CSS-12] LOADERS, SOPORTE Y ESTADOS GLOBALES
   ========================================================================== */

/* Ocultar el botón de logout móvil en desktop */
.btn-logout-mobile-only {
    display: none;
}

.cambio-vista {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--color-texto-suave);
}

.cambio-vista span {
    color: var(--color-primario);
    font-weight: 600;
    cursor: pointer;
}

/* ==========================================================================
   [🎨 CSS-13] MEDIA QUERIES GLOBALES (MÓVIL Y ACCESIBILIDAD 300%)
   ========================================================================== */

/* 🖥️ NAVEGACIÓN PRINCIPAL ESCRITORIO Y LAPTOPS (901px en adelante) */
@media (min-width: 901px) {
    .nav-app {
        padding: 6px 14px;
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .nav-app::-webkit-scrollbar {
        display: none;
    }
    .nav-enlaces {
        gap: 6px;
        flex-shrink: 0;
    }
    .btn-nav, .btn--nav {
        padding: 5px 10px;
        font-size: 12px;
        white-space: nowrap;
    }
    .nav-herramientas-elite {
        gap: 6px;
        margin-left: auto;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    #btn-upgrade-nav {
        padding: 5px 10px;
        font-size: 11px;
        border-radius: 8px;
        white-space: nowrap;
    }
    
    #btn-upgrade-nav span[data-i18n="plan_label"] {
        display: none !important;
    }
    
    .btn-tema-simple {
        width: 62px;
        height: 32px;
        font-size: 11px;
        padding: 0 2px;
    }

    #btn-tema-global,
    .btn-logout-elite,
    .nav-herramientas-elite .btn-herramienta-nav {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        flex-shrink: 0;
    }

    .btn-logout-elite .logout-text,
    #btn-tema-global .theme-toggle__text,
    .indicador-creditos .creditos-etiqueta {
        display: none !important;
    }

    .indicador-creditos {
        padding: 4px 10px;
        font-size: 11px;
        border-radius: 8px;
        white-space: nowrap;
    }
}

@media (max-width: 900px) {
    /* 🚀 FIX iOS ZOOM: Forzamos 16px en todos los inputs/selects en móvil */
    input, select, textarea, 
    .formulario__input, .formulario__select, .formulario__textarea, 
    .btn-tema-simple, .select-auth-limpio {
        font-size: 16px !important;
    }

    /* Reducir espacio superior en el contenedor principal */
    .contenedor-principal {
        padding-top: 10px;
    }

    /* Al estar dentro del Media Query, ganan por cascada. Adiós !important */


    #btn-upgrade-nav {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
        cursor: pointer;
    }

    #btn-upgrade-nav span[data-i18n="plan_label"],
    #btn-upgrade-nav .plan-text-desktop,
    #btn-upgrade-nav .plan-text-mobile {
        display: none !important;
    }

    #btn-upgrade-nav .plan-arrow-desktop {
        display: inline-block !important;
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    /* Colores dinámicos para el botón del plan en móvil */
    #btn-upgrade-nav.plan-free, #btn-upgrade-nav.plan-gratis {
        background: #10b981 !important;
        border: 1px solid rgba(16, 185, 129, 0.4) !important;
        color: #ffffff !important;
    }
    #btn-upgrade-nav.plan-basic, #btn-upgrade-nav.plan-basico {
        background: #2563eb !important;
        border: 1px solid rgba(37, 99, 235, 0.4) !important;
        color: #ffffff !important;
    }
    #btn-upgrade-nav.plan-advance, #btn-upgrade-nav.plan-intermedio, #btn-upgrade-nav.plan-avanzado {
        background: #8b5cf6 !important;
        border: 1px solid rgba(139, 92, 246, 0.4) !important;
        color: #ffffff !important;
    }
    #btn-upgrade-nav.plan-premium {
        background: #f59e0b !important;
        border: 1px solid rgba(245, 158, 11, 0.4) !important;
        color: #ffffff !important;
    }

    .btn-tema-simple {
        padding: 0 4px; font-size: 11px; border-radius: 16px;
        background: var(--color-tarjeta); border: 1px solid var(--color-borde);
        box-shadow: none; font-weight: 700;
        height: 32px;
        width: 78px;
        text-align: center;
        white-space: nowrap !important;
    }
    .select-auth-limpio {
        padding: 6px 12px; font-size: 11px; border-radius: 20px;
        background: var(--color-tarjeta); border: 1px solid var(--color-borde);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-weight: 700;
    }

    .nav-app {
        background: var(--color-tarjeta) !important;
        padding: 6px 8px; margin-top: 5px; margin-bottom: 8px;
        display: flex; flex-direction: row !important; justify-content: space-between;
        align-items: center; gap: 6px; width: 100%;
        flex-wrap: nowrap !important;
        overflow-x: auto; scrollbar-width: none;
        box-shadow: var(--sombra-premium) !important;
        border-width: 2px !important;
        border-style: solid !important;
    }
    .nav-app::-webkit-scrollbar {
        display: none;
    }

    .nav-herramientas-elite {
        flex: 1 1 auto; margin: 0; padding: 0; 
        display: flex; gap: 5px; align-items: center; 
        background: transparent; border: none; box-shadow: none;
        flex-wrap: nowrap;
    }

    /* Ocultar botones redundantes en la cabecera móvil (tema y salir) */
    #btn-tema-global,
    .nav-herramientas-elite .btn-logout-elite,
    .nav-herramientas-elite #btn-cerrar-sesion {
        display: none !important;
    }

    .nav-herramientas-elite .btn-herramienta-nav {
        width: 32px; height: 32px; border-radius: 50%;
        font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0; background: var(--color-fondo); border: 1px solid var(--color-borde);
        padding: 0; margin: 0; color: var(--color-texto); box-shadow: none;
    }

    .nav-herramientas-elite #btn-guia {
        margin-left: auto;
    }

    /* Rayo de créditos simplificado a un botón circular interactivo */
    .nav-herramientas-elite .indicador-creditos {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(245, 158, 11, 0.08) !important;
        color: #d97706 !important;
        border: 1px solid rgba(245, 158, 11, 0.2) !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }
    .nav-herramientas-elite .indicador-creditos .creditos-valor,
    .nav-herramientas-elite .indicador-creditos .creditos-etiqueta {
        display: none !important;
    }

    /* Botón de logout móvil en el sidebar de configuración */
    .btn-logout-mobile-only {
        display: block !important;
        width: 100% !important;
        margin-top: 15px !important;
        background: rgba(239, 68, 68, 0.08) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.15) !important;
        border-radius: 12px !important;
        padding: 12px !important;
        font-weight: 700 !important;
        text-align: left !important;
        font-size: 14px !important;
        transition: background 0.2s ease, transform 0.1s ease !important;
    }
    .btn-logout-mobile-only:active {
        background: rgba(239, 68, 68, 0.15) !important;
        transform: scale(0.98) !important;
    }

    .nav-enlaces {
        position: fixed; bottom: 0; left: 0; width: 100%;
        display: flex; justify-content: space-evenly; align-items: center;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        padding: 10px 10px calc(15px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0; border-top: 1px solid var(--color-borde);
        z-index: 9999; gap: 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
        overflow: visible;
    }

    [data-theme="dark"] .nav-enlaces {
        background: rgba(30, 41, 59, 0.85);
        border-top: 1px solid rgba(255,255,255,0.05);
        box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
    }

    .btn-nav, .btn--nav { 
        flex: 1; text-align: center; padding: 10px 4px; font-size: 11px; font-weight: 700;
        border-radius: 12px; background: transparent; color: var(--color-texto-suave);
        margin: 0; border: none; line-height: 1.2;
        transition: color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                    background-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                    transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .btn-nav.activo, .btn--nav.is-active {
        color: var(--color-primario); background: rgba(37, 99, 235, 0.1); 
        box-shadow: none; transform: translateY(-2px);
    }
    .estudio-app, .catalogo-app { padding-bottom: 100px; }
    .indicador-plan span[data-i18n], .indicador-creditos span[data-i18n] {
        display: none;
    }
    #ui-plan-texto { font-size: 12px; font-weight: 800; }
    .tarjeta-auth {
        padding: 25px 20px;
        margin-top: 120px; 
        margin-bottom: 40px;
    }
    .cabecera-auth h1 { font-size: 24px; }
    .cabecera-catalogo { flex-direction: column; align-items: flex-start; gap: 15px; }
    .cabecera-estudio {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }
    .btn-cancel-text { display: none; }
    .modal-contenido { padding: 20px; max-height: 85vh; overflow-y: auto; }
    #pantalla-elegir-plan { padding: 20px; }
    .contenedor-planes { grid-template-columns: 1fr; }
    
}

@media screen and (max-width: 380px) {
    body, html, .contenedor-principal, .seccion-app, .modal-contenido {
        padding: 5px; margin: 0; width: 100%; max-width: 100vw; box-sizing: border-box;
    }
    #catalogo-grid, #tienda-grid, .grupo-precio, .botones-checkout-movil, .toast-flotante {
        display: flex !important; flex-direction: column !important; gap: 10px; width: 100%; min-width: 0;
    }
    .producto-tarjeta, .tienda-item, input, select, button, textarea, .grupo-input {
        width: 100%; max-width: 100%; min-width: 0; margin-left: 0; margin-right: 0; box-sizing: border-box;
    }
    img, .contenedor-imagen-catalogo, .carrusel-wrapper {
        max-width: 100%; height: auto; object-fit: contain;
    }
    h1, h2, h3, h4, p, span, label, .titulo-catalogo, a {
        font-size: clamp(12px, 5vw, 16px); 
        white-space: normal;
    }
    .btn-nav {
        width: 100%;
        justify-content: center;
        margin-bottom: 5px;
    }
    .item-carrito {
        flex-direction: column;
        align-items: flex-start;
    }
    .item-carrito img {
        width: 100%;
        height: 150px;
    }
    button, .btn-nav, .btn-secundario, .btn-accion, a {
        hyphens: auto;
        padding-left: 5px;
        padding-right: 5px;
    }
    .tarjeta-auth {
        padding: 20px 15px;
    }
    .cabecera-auth h1 {
        font-size: 20px;
    }
    .grupo-input input {
        padding: 10px;
    }
}

@media screen and (min-width: 1600px) {
    /* 1. Solo centramos el body si estamos DENTRO de la app, liberando la Landing */
    body:not(.modo-landing) {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 2. Forzamos a la Landing Page a ser un bloque completo (Rompe el Flexbox) */
    body.modo-landing {
        display: block; width: 100%; max-width: 100%; overflow-x: clip;
    }

    /* 3. FASE 1: Expansión fluida para monitores Ultrawide */
    .tienda-contenedor-principal {
        width: 100%; max-width: 100%; padding: 0 40px; margin-left: auto; margin-right: auto;
    }

    /* 4. Tarjeta de Login/Registro de vuelta a su tamaño hermoso y centrada */
    .tarjeta-auth {
        max-width: 400px; margin-left: auto; margin-right: auto;
    }


}

.seccion-auth, .seccion-app {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.5s ease;
}

/* ==========================================================================
   [🎨 CSS-18] OPTIMIZACIONES NATIVAS iOS Y ACCESIBILIDAD
   ========================================================================== */

/* 🔒 CLASE PARA BLOQUEAR MONEDAS */

.tarjeta-auth, 
.tarjeta-auth button, 
.tarjeta-auth label, 
.tarjeta-auth span, 
.tarjeta-auth p, 
.tarjeta-auth h1 {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.link-terminos {
    color: var(--color-primario);
    font-weight: bold;
    text-decoration: underline;
}

/* ==========================================================================
   [ℹ️ CSS-29] COMPONENTES DE AYUDA Y MODAL REAL-TIME
   ========================================================================== */

/* Dimensiones e interior del Modal Educativo */
.modal-realtime-dimensiones {
    max-width: 550px;
    padding: 35px 30px; 
    position: relative; 
    border-radius: var(--radio-borde);
}

.titulo-modal-realtime {
    margin-bottom: 20px; 
    color: var(--color-primario);
}

.contenido-realtime {
    font-size: 15px; 
    color: var(--color-texto); 
    line-height: 1.6; 
    text-align: left;
}

/* Correcciones*/

/* ==========================================================================
   [🔘] CLASE MAESTRA DE BOTONES (BEM)
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; font-family: inherit; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; border-radius: 8px;
    text-align: center; box-sizing: border-box; user-select: none;
    text-decoration: none; line-height: 1.4; background: transparent;
    color: var(--color-texto);
    white-space: nowrap;
    /* 📈 CURVA EJECUTIVA: Transición reactiva de impacto inmediato y amortiguación de retorno */
    transition: scale 0.1s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 0.1s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.1s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn:disabled, .btn.is-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    scale: 1;
    filter: none;
    box-shadow: none;
}

/* ⭐ INTENSIDAD ÉLITE EN PULSACIÓN: Iluminación premium cristalina y compresión blindada sin deuda técnica */
.btn:active:not(:disabled):not(.is-disabled) {
    /* Mantenemos el micro-hundimiento físico aislado sin colisiones de posicionamiento */
    scale: 0.97; 
    /* Elevamos la luminancia y saturación de forma balanceada para que el color base resplandezca */
    filter: brightness(1.18) saturate(1.15) contrast(1.02); 
    /* Destello interno cristalino translúcido que incrementa la percepción de iluminación táctil sin tapar textos */
    box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.45);
}

/* --- MODIFICADORES DE TAMAÑO --- */
.btn--lg {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    min-height: 48px;
}

.btn--md {
    padding: 10px 18px;
    font-size: 14px;
    min-height: 44px;
}

.btn--sm {
    padding: 8px 16px;
    font-size: 13px;
    min-height: 36px;
}

.btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
}

.btn--icon-sm {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    font-size: 12px;
}

/* --- MODIFICADORES DE COLOR --- */
.btn--primary {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}
.btn--primary:hover:not(:disabled) {
    background-color: var(--color-primario-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn--secondary {
    background-color: transparent;
    color: var(--color-texto);
    border-color: var(--color-borde);
}
.btn--secondary:hover:not(:disabled) {
    background-color: var(--color-fondo);
    border-color: var(--color-texto-suave);
}

.btn--danger {
    background-color: transparent;
    color: var(--color-error);
    border-color: var(--color-error);
}
.btn--danger:hover:not(:disabled) {
    background-color: rgba(239, 68, 68, 0.05);
    transform: translateY(-2px);
}

.btn--danger-solid {
    background-color: var(--color-error);
    color: var(--color-blanco);
}
.btn--danger-solid:hover:not(:disabled) {
    background-color: #dc2626;
}

.btn--success {
    background-color: var(--color-exito);
    color: var(--color-blanco);
}
.btn--success:hover:not(:disabled) {
    background-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.btn--google {
    background-color: var(--color-tarjeta);
    color: var(--color-texto);
    border-color: var(--color-borde);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.btn--google:hover:not(:disabled) {
    background-color: var(--color-fondo);
    border-color: var(--color-texto-suave);
    transform: translateY(-1px);
}

.btn--ghost {
    background-color: transparent;
    border-color: transparent;
    padding: 0;
    min-height: auto;
    color: var(--color-primario);
    font-weight: 800;
    font-size: 14px;
}
.btn--ghost:hover:not(:disabled) {
    text-decoration: underline;
}

.btn--ghost-muted {
    background-color: transparent;
    border-color: transparent;
    padding: 0;
    min-height: auto;
    color: var(--color-texto-suave);
    font-weight: 700;
    font-size: 13px;
}
.btn--ghost-muted:hover:not(:disabled) {
    color: var(--color-texto);
}


.btn--pill {
    border-radius: 50px;
}

.btn--outline-white {
    background-color: transparent;
    border-color: var(--color-blanco);
    color: var(--color-blanco);
}
.btn--outline-white:hover:not(:disabled) {
    background-color: var(--color-blanco);
    color: var(--color-primario);
}

/* --- COMPONENTE CENTRALIZADO: BOTONES DE SELECCIÓN DE PLANES SaaS (OOCSS) --- */
.btn--plan-gratis, .btn--plan-basico, .btn--plan-intermedio, .btn--plan-premium {
    color: #ffffff;
    box-shadow: 0 4px 12px var(--plan-shadow-color, rgba(0, 0, 0, 0.12));
    /* ✨ INTEGRACIÓN ÉLITE: Consistencia táctica en el Onboarding de Negocios */
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.15s cubic-bezier(0.25, 1, 0.5, 1),
                background-color 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn--plan-gratis:hover, .btn--plan-basico:hover, .btn--plan-intermedio:hover, .btn--plan-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--plan-shadow-color, rgba(0, 0, 0, 0.22));
}

.btn--plan-gratis { background-color: #10b981; --plan-shadow-color: rgba(16, 185, 129, 0.3); }
.btn--plan-gratis:hover { background-color: #059669; }

.btn--plan-basico { background-color: #2563eb; --plan-shadow-color: rgba(37, 99, 235, 0.3); }
.btn--plan-basico:hover { background-color: #1d4ed8; }

.btn--plan-intermedio { background-color: #8b5cf6; --plan-shadow-color: rgba(139, 92, 246, 0.3); }
.btn--plan-intermedio:hover { background-color: #7c3aed; }

.btn--plan-premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    border: none;
}
.btn--plan-premium:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn--anim-error {
    transform: scale(0.97);
}

/* En 02-ui-global.css - Mecánica Universal de Carruseles */
.carrusel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.contenedor-carrusel {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.contenedor-carrusel::-webkit-scrollbar {
  display: none;
}
.item-carrusel-3d {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ==========================================================================
   [📝] CLASE MAESTRA DE FORMULARIOS E INPUTS (BEM)
   ========================================================================== */
input, textarea, select {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
}

/* --- CONTENEDORES --- */
.formulario__grupo {
    margin-bottom: 20px;
    width: 100%;
}

.formulario__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-texto);
}

.formulario__hint {
    font-size: 12px;
    color: var(--color-texto-suave);
    margin-top: 5px;
}

/* --- INPUTS, SELECTS Y TEXTAREAS BASE --- */
.formulario__input,
.formulario__select,
.formulario__textarea,
.chatbot-input-area textarea {
    width: 100%;
    padding: 14px 15px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    background-color: var(--color-tarjeta);
    color: var(--color-texto);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    /* ✨ INTEGRACIÓN ÉLITE: Transiciones con curva ejecutiva premium */
    transition: border-color 0.15s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.formulario__input,
.formulario__select {
    height: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.formulario__input:focus,
.formulario__select:focus,
.formulario__textarea:focus,
.chatbot-input-area textarea:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.formulario__select option {
    background-color: var(--color-tarjeta);
    color: var(--color-texto);
}

.formulario__textarea {
    resize: vertical;
    line-height: 1.5;
}

/* Ocultar botones de incremento/decremento nativos (spinners) en inputs de tipo number */
input[type="number"].formulario__input::-webkit-outer-spin-button,
input[type="number"].formulario__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].formulario__input {
    -moz-appearance: textfield;
}

/* --- ESTILIZACIÓN PREMIUM DE CALENDARIOS (type="date") --- */
input[type="date"].formulario__input {
    position: relative;
    padding-right: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px;
    color-scheme: light;
}

[data-theme="dark"] input[type="date"].formulario__input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>");
    color-scheme: dark;
}

input[type="date"].formulario__input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* --- MODIFICADORES DE INPUTS --- */
.formulario__input--centrado {
    text-align: center;
}

.formulario__input--gigante {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    padding: 15px;
    color: var(--color-primario);
}

.formulario__input--otp {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primario);
    letter-spacing: 8px;
    text-transform: uppercase;
}

.formulario__input--clave-temp {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primario);
    letter-spacing: 4px;
}

.formulario__input--oferta {
    color: var(--color-exito);
    border-color: var(--color-exito);
    padding-right: 25px;
}

.formulario__input--invisible {
    border: none;
    background-color: transparent;
    box-shadow: none;
    padding: 14px 10px;
    width: 100%;
    font-weight: 600;
    color: var(--color-texto);
    outline: none;
    font-family: inherit;
    font-size: 16px;
}
.formulario__input--invisible::placeholder {
    color: var(--color-texto-suave);
    opacity: 0.7;
}

.formulario__input--busqueda {
    padding: 16px 16px 16px 45px;
    border-radius: 12px;
    box-shadow: var(--sombra-premium);
}

.formulario__input--edicion-rapida {
    width: 100px;
    padding: 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
    border-radius: 6px;
}

.formulario__input--wa-codigo {
    width: 140px;
    padding-right: 28px;
    cursor: pointer;
    text-overflow: ellipsis;
}
.formulario__input--wa-codigo::placeholder {
    color: var(--color-texto-suave);
    opacity: 0.7;
}

/* ==========================================================================
 * 🌍 SELECTOR DE PREFIJO DE PAÍS PERSONALIZADO (DESIGN SYSTEM ELITE)
 * Reemplaza el <datalist> nativo con un menú glassmorphic responsivo y accesible.
 * ========================================================================== */
.prefijo-pais-contenedor {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 140px;
}

.prefijo-pais-contenedor::after {
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-family: inherit;
    color: var(--color-texto-suave, #94a3b8);
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease;
    user-select: none;
    z-index: 2;
}

.prefijo-pais-contenedor.abierto::after,
.prefijo-pais-contenedor:focus-within::after {
    color: var(--color-primario, #3b82f6);
    transform: translateY(-50%) rotate(180deg);
}

.prefijo-pais-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 270px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 99999;
    border-radius: 12px;
    padding: 8px;
    background-color: var(--color-tarjeta, #ffffff);
    border: 1px solid var(--color-borde, #cbd5e1);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-theme="dark"] .prefijo-pais-menu {
    background-color: rgba(15, 23, 42, 0.96);
    background-image: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.prefijo-pais-menu::-webkit-scrollbar {
    width: 6px;
}
.prefijo-pais-menu::-webkit-scrollbar-track {
    background: transparent;
}
.prefijo-pais-menu::-webkit-scrollbar-thumb {
    background: var(--color-borde, #cbd5e1);
    border-radius: 4px;
}
.prefijo-pais-menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-primario, #2563eb);
}

.prefijo-pais-buscar {
    width: calc(100% - 12px);
    margin: 4px 6px 8px 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--color-borde, #cbd5e1);
    background: var(--color-fondo, #f8fafc);
    color: var(--color-texto, #0f172a);
    outline: none;
    box-sizing: border-box;
}

[data-theme="dark"] .prefijo-pais-buscar {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.25);
    color: #f8fafc;
}

.prefijo-pais-buscar:focus {
    border-color: var(--color-primario, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.prefijo-pais-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prefijo-pais-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    min-height: 40px;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-texto, #0f172a);
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    box-sizing: border-box;
}

[data-theme="dark"] .prefijo-pais-opcion {
    color: #f8fafc;
}

.prefijo-pais-opcion:hover,
.prefijo-pais-opcion.focus-teclado {
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

[data-theme="dark"] .prefijo-pais-opcion:hover,
[data-theme="dark"] .prefijo-pais-opcion.focus-teclado {
    background-color: rgba(37, 99, 235, 0.25);
    color: #60a5fa;
}

.prefijo-pais-flag {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
}

.prefijo-pais-code {
    font-weight: 800;
    font-family: monospace, sans-serif;
    color: var(--color-primario, #2563eb);
    min-width: 48px;
    flex-shrink: 0;
}

.prefijo-pais-nombre {
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

.prefijo-pais-vacio {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--color-texto-suave, #64748b);
}

@media (max-width: 640px) {
    .prefijo-pais-menu {
        width: calc(100vw - 40px);
        max-width: 300px;
    }
}

.formulario__input--wa-numero {
    flex-grow: 1;
}
.formulario__input--wa-numero::placeholder {
    color: var(--color-texto-suave);
    opacity: 0.7;
}

.formulario__input--descuento-dinamico {
    width: 80px;
    text-align: center;
}

/* --- MODIFICADORES DE SELECTS --- */
.formulario__select--corto {
    min-width: 130px;
    max-width: 160px;
    padding: 12px 10px;
}

.formulario__select--limpio {
    width: auto;
    height: auto;
    padding: 8px 30px 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNjQ3NDhiJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBvbHlsaW5lIHBvaW50cz0nNiA5IDEyIDE1IDE4IDknPjwvcG9seWxpbmU+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.formulario__select--premium {
    font-size: 16px;
    font-weight: 700;
    border-width: 2px;
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: var(--sombra-premium);
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L7 7L13 1" stroke="%232563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.formulario__select--filtro-avanzado {
    width: auto;
    min-width: 180px;
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.formulario__select--footer {
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    text-align: center;
}

.formulario__select--pais {
    padding: 8px;
    border-radius: 6px;
}

/* --- CONTENEDORES CON ICONOS Y PREFIJOS --- */
.formulario__input-icono {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.formulario__input-icono .formulario__input {
    padding-right: 40px;
}

.btn--input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.formulario__icono-fijo {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: var(--color-exito);
    pointer-events: none;
}

.formulario__prefijo-caja {
    display: flex;
    align-items: center;
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding-left: 14px;
    transition: 0.2s;
    box-sizing: border-box;
    overflow: hidden;
}
.formulario__prefijo-caja:focus-within {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.formulario__prefijo {
    color: var(--color-texto-suave);
    font-weight: 700;
}

/* --- GRUPOS ESPECÍFICOS --- */
.formulario__grupo--precio {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
}
.formulario__grupo--precio .formulario__select {
    flex: 0 0 auto;
    width: auto;
    min-width: 115px;
    max-width: 150px;
    padding: 12px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.formulario__grupo--precio .formulario__select.formulario__select--corto {
    min-width: 140px;
    max-width: 180px;
}
.formulario__grupo--precio .formulario__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 120px;
}

@media (max-width: 480px) {
    .formulario__grupo--precio {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .formulario__grupo--precio .formulario__select,
    .formulario__grupo--precio .formulario__select.formulario__select--corto {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

/* --- CHECKBOXES Y RADIOS --- */
.formulario__checkbox,
.formulario__radio {
    width: auto;
    min-width: 0;
    padding: 0;
    height: auto;
    margin-right: 6px;
    box-shadow: none;
    cursor: pointer;
}

.formulario__checkbox--chico {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* --- SWITCHES (TOGGLES) --- */
.formulario__switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.formulario__switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.formulario__switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.formulario__switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 50%;
}

.formulario__switch-input:checked + .formulario__switch-slider {
    background-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.formulario__switch-input:checked + .formulario__switch-slider:before {
    transform: translateX(22px);
}

/* --- COLORES ESPECÍFICOS DE PASARELAS --- */
.formulario__input--pix { border-color: var(--color-pix-accent, #10b981); }
.formulario__input--pix:focus { box-shadow: 0 0 0 3px var(--color-pix-border, rgba(16, 185, 129, 0.15)); }

.formulario__input--primario { border-color: var(--color-primario); }

.formulario__input--zelle { border-color: var(--color-zelle-accent, #7b2cbf); }
.formulario__input--zelle:focus { box-shadow: 0 0 0 3px var(--color-zelle-border, rgba(123, 44, 191, 0.15)); }

/* ==========================================================================
   [🗂️] CLASE MAESTRA DE TARJETAS Y CONTENEDORES (BEM)
   ========================================================================== */

/* --- 1. TARJETA DE PRODUCTO --- */
.producto-tarjeta {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra-premium);
    text-align: left;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
    will-change: transform, box-shadow;
    transform: translateZ(0); 
    -webkit-font-smoothing: antialiased;
}
.producto-tarjeta:hover {
    transform: translateY(-5px);
    border-color: var(--color-primario);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

/* Modificador: Tienda Pública */
.producto-tarjeta--publica {
    background-color: #ffffff;
    border-color: #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    height: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.producto-tarjeta--publica:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

/* Modificador: Pausada */
.producto-tarjeta--pausada .contenedor-imagen-catalogo {
    filter: grayscale(100%);
    opacity: 0.6;
}
.producto-tarjeta--pausada .titulo-catalogo, 
.producto-tarjeta--pausada .desc-catalogo, 
.producto-tarjeta--pausada .precio-etiqueta {
    opacity: 0.5;
}

/* --- 2. TARJETA DE AUTENTICACIÓN ÉLITE --- */
.tarjeta-auth {
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    padding: 40px;
    border-radius: 28px;
    width: 100%;
    max-width: 440px;
    margin: 40px auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 992px) {
    .tarjeta-auth {
        max-width: 1080px;
        padding: 50px 60px;
    }
    .auth-split-wrapper {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 50px;
        align-items: center;
    }
    .auth-showcase-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-right: 40px;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
    .auth-form-column {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }
}

@media (max-width: 991px) {
    .auth-showcase-column {
        display: none;
    }
    .auth-split-wrapper {
        display: block;
    }
}

.auth-showcase-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 50px;
    width: fit-content;
}

.auth-showcase-badge-text {
    color: #60a5fa;
    font-size: 13px;
    font-weight: 700;
}

.auth-showcase-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-texto);
    margin: 0;
}

.auth-showcase-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

.auth-showcase-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 18px 20px;
    transition: all 0.3s ease;
}

.auth-showcase-card:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateX(6px);
}

.auth-showcase-card-title {
    color: var(--color-texto);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.auth-showcase-card-desc {
    color: var(--color-texto-suave);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.tarjeta-auth:hover {
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 
                0 0 35px rgba(99, 102, 241, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Glowing top border gradient line */
.tarjeta-auth::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #8b5cf6, #3b82f6);
    background-size: 200% 200%;
    z-index: 3;
    animation: authGlowBorder 4s ease infinite;
}

@keyframes authGlowBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Background Animated Blobs */
.auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(75px);
    opacity: 0.22;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.auth-orb-1 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
    top: -40px;
    left: -40px;
    animation: authOrbFloat1 10s ease infinite alternate;
}

.auth-orb-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
    bottom: -40px;
    right: -40px;
    animation: authOrbFloat2 10s ease infinite alternate;
}

@keyframes authOrbFloat1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 20px) scale(1.15); }
}

@keyframes authOrbFloat2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, -20px) scale(1.15); }
}

/* Ensure contents sit on top of orbs */
.btn-volver-inicio-auth,
.cabecera-auth,
.tarjeta-auth .formulario {
    position: relative;
    z-index: 2;
}

/* Custom premium styling for sso google button */
.tarjeta-auth .btn--google {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-auth .btn--google:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Custom inputs inside auth */
.tarjeta-auth .formulario__input {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: #ffffff;
    padding: 13px 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-auth .formulario__input:focus {
    background: rgba(15, 23, 42, 0.55);
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* Custom submit buttons inside auth */
.tarjeta-auth button[type="submit"] {
    border-radius: 12px;
    font-weight: 700;
    background: linear-gradient(135deg, #2563eb, #6366f1);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-auth button[type="submit"]:hover {
    background: linear-gradient(135deg, #3b82f6, #4f46e5);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

/* Modificador: Modo Planes */
.tarjeta-auth--modo-planes {
    max-width: 1200px;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-top: 10px;
}
.tarjeta-auth--modo-planes:hover {
    box-shadow: none;
}

/* --- 3. TARJETAS DE PLANES (ONBOARDING) --- */
.tarjeta-plan {
    width: 100%;
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    border-radius: 24px;
    padding: 35px 30px;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    will-change: transform, box-shadow;
    transform: translateZ(0);
}

/* Base modifications via CSS custom variables */
.tarjeta-plan--gratis {
    --plan-color: #10b981;
    --plan-color-rgb: 16, 185, 129;
}
.tarjeta-plan--basico {
    --plan-color: #2563eb;
    --plan-color-rgb: 37, 99, 235;
}
.tarjeta-plan--intermedio {
    --plan-color: #8b5cf6;
    --plan-color-rgb: 139, 92, 246;
}
.tarjeta-plan--premium {
    --plan-color: #f59e0b;
    --plan-color-rgb: 245, 158, 11;
    position: relative;
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tarjeta-plan--premium::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, #f59e0b, #3b82f6, #8b5cf6, #f59e0b);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    animation: gradientBorderGlow 6s ease infinite;
}

@keyframes gradientBorderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.tarjeta-plan--premium:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Premium solid CTA button style override */
.tarjeta-plan--premium .btn--pill {
    background-color: var(--plan-color);
    border-color: var(--plan-color);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.tarjeta-plan--premium:hover .btn--pill {
    background-color: #d97706;
    border-color: #d97706;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.4);
    transform: translateY(-2px);
}

/* Hover & Active Card styles */
.tarjeta-plan:hover,
.tarjeta-plan.tarjeta-plan--activo {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--plan-color);
    box-shadow: 0 20px 40px rgba(var(--plan-color-rgb), 0.15), 
                0 0 0 1px var(--plan-color);
    z-index: 5;
}

[data-theme="dark"] .tarjeta-plan {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] .tarjeta-plan:hover,
[data-theme="dark"] .tarjeta-plan.tarjeta-plan--activo {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 
                0 0 30px rgba(var(--plan-color-rgb), 0.25), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Card Badge */
.tarjeta-plan .etiqueta--popular {
    position: absolute;
    top: 15px;
    right: 20px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Subelement updates */
.plan-nombre {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--color-texto);
    display: flex;
    align-items: center;
    gap: 8px;
}
.plan-nombre::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 18px;
    border-radius: 3px;
    background-color: var(--plan-color);
}

.plan-precio {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--color-texto);
    display: flex;
    align-items: baseline;
    gap: 4px;
    letter-spacing: -1px;
}
.plan-precio span {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-texto-suave);
}

.plan-desc {
    font-size: 14px;
    color: var(--color-texto-suave);
    line-height: 1.5;
    margin-bottom: 25px;
    min-height: 42px;
}

/* Benefits list */
.lista-beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}
.lista-beneficios li {
    font-size: 14px;
    color: var(--color-texto-suave);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
    margin-bottom: 0;
}
.lista-beneficios li .check-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(var(--plan-color-rgb), 0.12);
    color: var(--plan-color);
    font-size: 10px;
    font-weight: bold;
    margin-top: 1px;
    transition: transform 0.2s ease;
}
.tarjeta-plan:hover .check-icon {
    transform: scale(1.15);
}

/* Card CTA button */
.tarjeta-plan .btn--pill {
    width: 100%;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: 1.5px solid rgba(var(--plan-color-rgb), 0.3);
    background-color: rgba(var(--plan-color-rgb), 0.05);
    color: var(--plan-color);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    outline: none;
    user-select: none;
}
.tarjeta-plan:hover .btn--pill {
    background-color: var(--plan-color);
    border-color: var(--plan-color);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(var(--plan-color-rgb), 0.25);
    transform: translateY(-2px);
}

/* Active CTA button variant */
.tarjeta-plan.tarjeta-plan--activo .btn--pill,
.tarjeta-plan .btn--pill.btn-plan--activo {
    background-color: var(--color-exito, #10b981);
    border-color: var(--color-exito, #10b981);
    color: #ffffff;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* --- 4. TARJETAS LANDING PAGE (FILTRADO ACRÍLICO ACELERADO) --- */
.beneficio-tarjeta, .bento-tarjeta, .u-glassmorphism {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.beneficio-tarjeta {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 30px;
}
[data-theme="dark"] .beneficio-tarjeta {
    background-color: rgba(30, 41, 59, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* Estructura base de las bento-tarjetas: usa variables de tema para ser agnóstico */
.bento-tarjeta {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: transform;
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}
.bento-tarjeta:hover {
    transform: translateY(-5px);
    border-color: var(--color-primario);
}
@media (min-width: 769px) {
    .bento-tarjeta--ancha {
        grid-column: span 2;
    }
}
/* Las bento-tarjetas dentro de la landing siempre son oscuras (fondo dark hardcoded) */
.vista-landing .bento-tarjeta {
    background-color: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}
.vista-landing .bento-tarjeta:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- 5. TARJETAS ESTUDIO IA --- */
.tarjeta-ia {
    width: 100%;
    margin-top: 20px;
    padding: 30px;
    border-radius: var(--radio-borde);
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: var(--sombra-premium);
}

/* --- 6. CAJAS DE CONFIGURACIÓN --- */
.caja-seguridad {
    background-color: var(--color-fondo);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-borde);
}

.caja-suscripcion-main,
.caja-soporte-main {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 30px;
    box-shadow: var(--sombra-premium);
    position: relative;
}

.caja-info-plan {
    background-color: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    padding: 20px;
    border-radius: 12px;
    position: relative;
}

.tarjeta-metrica-gigante {
    background-color: var(--color-fondo);
    border: 1px solid var(--color-borde);
    padding: 25px;
    border-radius: 16px;
    text-align: center;
}

.tarjeta-top-producto {
    background-color: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* ==========================================================================
   [🔤] CLASE MAESTRA DE TIPOGRAFÍA Y TEXTOS (BEM ESPAÑOL)
   ========================================================================== */

/* --- TAMAÑOS DE TEXTO --- */
.texto--muy-pequeno { font-size: 11px; }
.texto--pequeno { font-size: 13px; }
.texto--normal { font-size: 15px; }
.texto--grande { font-size: 18px; }
.texto--muy-grande { font-size: 22px; }
.texto--gigante { font-size: 30px; }
.texto--colosal { font-size: 40px; }

/* --- PESOS Y ESTILOS --- */
.texto--negrita { font-weight: 700; }
.texto--extranegrita { font-weight: 900; }
.texto--mono { font-family: monospace; }
.texto--mayusculas { text-transform: uppercase; }
.texto--tachado { text-decoration: line-through; }
.texto--subrayado-negrita { text-decoration: underline; font-weight: 800; }

/* --- ALINEACIÓN --- */
.texto--centrado { text-align: center; }
.texto--izquierda { text-align: left; }

/* --- COLORES DE TEXTO --- */
.texto--suave { color: var(--color-texto-suave); }
.texto--principal { color: var(--color-texto); }
.texto--primario { color: var(--color-primario); }
.texto--exito { color: var(--color-exito); }
.texto--error { color: var(--color-error); }
.texto--blanco { color: var(--color-blanco); }

/* --- ALTURA DE LÍNEA Y ESPACIADO --- */
.texto--altura-media { line-height: 1.5; }
.texto--altura-corta { line-height: 1.2; }
.texto--espaciado-1 { letter-spacing: 1px; }

/* ==========================================================================
   [🏷️] CLASE MAESTRA DE ETIQUETAS Y BADGES (BEM ESPAÑOL)
   ========================================================================== */

.etiqueta {
    display: inline-block;
    font-weight: 800;
    border-radius: 4px;
}

/* --- COMPONENTE CENTRALIZADO: ETIQUETAS FLOTANTES SOBRE CONTENEDORES --- */
.etiqueta--pausado, 
.etiqueta--agotado, 
.etiqueta--servicio {
    position: absolute;
    top: 10px;
    font-size: 11px;
    z-index: 20;
    color: var(--color-blanco);
}

/* --- ETIQUETAS DE ESTADO (PRODUCTOS) --- */
.etiqueta--descuento {
    background-color: var(--color-exito);
    color: var(--color-blanco);
    font-size: 10px;
    padding: 2px 6px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.etiqueta--pausado {
    right: 10px;
    background-color: rgba(0,0,0,0.85);
    padding: 6px 12px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.etiqueta--agotado {
    left: 10px;
    background-color: #e11d48;
    padding: 4px 8px;
    border-radius: 6px;
}

.etiqueta--servicio {
    left: 10px;
    background-color: rgba(16, 185, 129, 0.9);
    padding: 4px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.etiqueta--servicio-carrito {
    color: var(--color-exito);
    background-color: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* --- ETIQUETAS DE UI Y MARKETING --- */
.etiqueta--popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #8b5cf6;
    color: var(--color-blanco);
    font-size: 10px;
    padding: 4px 12px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-transform: uppercase;
}

.etiqueta--gratis {
    background-color: var(--color-exito);
    color: var(--color-blanco);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 15px;
}

.etiqueta--paso {
    background-color: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.etiqueta--oferta {
    color: var(--color-exito);
}

.etiqueta--principal {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background-color: rgba(0,0,0,0.7);
    color: var(--color-blanco);
    font-size: 9px;
    padding: 2px 4px;
}

/* --- ETIQUETAS DE PRECIO --- */
.etiqueta--precio {
    font-size: 18px;
    color: var(--color-primario);
}

.etiqueta--precio-exito {
    font-size: 18px;
    color: var(--color-exito);
}

/* --- ETIQUETAS DE CONFIGURACIÓN Y PANELES --- */
.etiqueta--canvas {
    font-size: 10px;
    color: var(--color-primario);
    background-color: rgba(37,99,235,0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.etiqueta--dias {
    position: absolute; 
    top: -10px; 
    right: -10px; 
    background-color: #10b981; 
    color: var(--color-blanco); 
    padding: 4px 10px; 
    border-radius: 20px; 
    font-size: 11px; 
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.etiqueta--clics {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.etiqueta--ia {
    background-color: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.etiqueta--sidebar {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--color-primario);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.etiqueta--premium {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #8b5cf6;
    color: var(--color-blanco);
    font-size: 10px;
    padding: 4px 12px;
    border-bottom-left-radius: 8px;
    text-transform: uppercase;
}

/* --- COMPONENTE CENTRALIZADO: BADGES DE PLANES UNIVERSALES --- */
.etiqueta--plan, .badge-plan-tema {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 8px;
    text-transform: uppercase;
    padding: 4px 0;
    letter-spacing: 1px;
    color: var(--color-blanco);
    z-index: 2;
    text-align: center;
}
.etiqueta--plan-gratis, .plan-gratis { background-color: #64748b; }
.etiqueta--plan-basico, .plan-basico { background-color: #10b981; }
.etiqueta--plan-avanzado, .plan-avanzado { background-color: #3b82f6; }
.etiqueta--plan-premium, .plan-premium { 
    background: linear-gradient(90deg, #d4af37, #aa8529); 
    color: #000; 
    box-shadow: 0 2px 5px rgba(212,175,55,0.4); 
}


/* ==========================================================================
   [📐] CLASE MAESTRA DE LAYOUTS Y UTILIDADES (BEM / OOCSS)
   ========================================================================== */

/* --- LAYOUTS (GRILLAS Y FLEXBOX) --- */
.l-flex-between { display: flex; justify-content: space-between; }
.l-flex-align-center { align-items: center; }
.l-flex-align-center2 { display: flex; align-items: center; }
.l-flex-gap-10 { display: flex; gap: 10px; }
.l-flex-gap-15 { display: flex; gap: 15px; }
.l-flex-2 { flex: 2; }
.l-flex-1 { flex: 1; }
.l-flex-wrap { flex-wrap: wrap; }
.l-flex-col { display: flex; flex-direction: column; }
.l-d-flex-col-bottom { display: flex; flex-direction: column; justify-content: flex-end; }
.l-alineacion-inferior { align-items: flex-end; grid-template-rows: auto 1fr; }
.l-justify-center { justify-content: center; }
.l-d-block { display: block; }

.l-grid-2-col { display: grid; grid-template-columns: 1fr 1fr; }
.l-grid-gap-15 { display: grid; gap: 15px; }
.l-grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.l-grid-auto-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.l-col-span-full { grid-column: 1 / -1; }

/* --- UTILIDADES DE ESPACIADO (MÁRGENES Y PADDINGS) --- */
.u-sin-margen { margin: 0; }
.u-m-0 { margin: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-5 { margin-bottom: 5px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-15 { margin-bottom: 15px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-25 { margin-bottom: 25px; }
.u-mb-30 { margin-bottom: 30px; }
.u-mb-40 { margin-bottom: 40px; }
.u-mb-45 { margin-bottom: 45px; }

.u-mt-3 { margin-top: 3px; }
.u-mt-5 { margin-top: 5px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-15 { margin-top: 15px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-25 { margin-top: 25px; }
.u-mt-30 { margin-top: 30px; }
.u-mt-auto { margin-top: auto; }

.u-ml-3 { margin-left: 3px; }

.u-p-10 { padding: 10px; }
.u-p-12 { padding: 12px; }
.u-p-14 { padding: 14px; }
.u-p-16 { padding: 16px; }
.u-p-18 { padding: 18px; }
.u-p-8-12 { padding: 8px 12px; }
.u-p-35-20 { padding: 35px 20px; }
.u-p-40-25 { padding: 40px 25px; }
.u-py-10 { padding-top: 10px; padding-bottom: 10px; }
.u-pb-25 { padding-bottom: 25px; }
.u-pt-0 { padding-top: 0; }

.u-gap-2 { gap: 2px; }
.u-gap-5 { gap: 5px; }
.u-gap-6 { gap: 6px; }
.u-gap-10 { gap: 10px; }
.u-gap-20 { gap: 20px; }

/* --- UTILIDADES DE DIMENSIONES --- */
.u-ancho-completo { width: 100%; }
.u-w-100 { width: 100%; }
.u-w-85 { width: 85px; }
.u-w-100px { width: 100px; }
.u-min-w-280 { min-width: 280px; }
.u-max-w-400 { max-width: 400px; }
.u-max-w-420 { max-width: 420px; }
.u-max-w-450 { max-width: 450px; }
.u-max-w-500 { max-width: 500px; }
.u-max-w-550 { max-width: 550px; }
.u-max-w-600 { max-width: 600px; }
.u-max-w-650 { max-width: 650px; }
.u-max-h-60vh { max-height: 60vh; }
.u-compensador-altura { height: 19px; }

/* --- UTILIDADES VISUALES Y POSICIONAMIENTO --- */
.u-pos-relative { position: relative; }
.u-pos-absolute { position: absolute; }
.u-z-2 { z-index: 2; }
.u-z-10 { z-index: 10; }
.u-z-20 { z-index: 20; }
.u-z-99999 { z-index: 99999; }
.u-z-100000 { z-index: 100000; }
.u-z-100005 { z-index: 100005; }
.u-z-100006 { z-index: 100006; }
.u-z-999999 { z-index: 999999; }

.u-radius-8 { border-radius: 8px; }
.u-radius-10 { border-radius: 10px; }
.u-radius-16 { border-radius: 16px; }

.u-bg-tarjeta { background-color: var(--color-tarjeta); }
.u-bg-fondo { background-color: var(--color-fondo); }
.u-bg-primario { background-color: var(--color-primario); }
.u-bg-transparent { background-color: transparent; }

.u-border-none { border: none; }
.u-borde-error { border-color: var(--color-error); }
.u-borde-exito { border-color: var(--color-exito); }

.u-opaco { opacity: 0.5; }
.u-opacidad-50 { opacity: 0.5; }
.u-cursor-pointer { cursor: pointer; }
.u-overflow-y-auto { overflow-y: auto; }
.u-resize-none { resize: none; }
.u-box-border { box-sizing: border-box; }
.u-transition-300 { transition: all 0.3s ease; }
.u-ios-repintado { transform: scale(0.9999); }
.u-oculto-reflow { display: none; }
.u-d-flex-important { display: flex; }

/* ==========================================================================
   [📐] ESCALA MAESTRA DE Z-INDEX Y ANIMACIONES OPTIMIZADAS
   ========================================================================== */

:root {
    /* Escala Semántica de Profundidad (Z-Index) */
    --z-fondo: -10;
    --z-base: 1;
    --z-elevado: 10;
    --z-flotante: 50;
    --z-sticky: 100;
    --z-overlay: 80000;
    --z-carrito: 85000;
    --z-modal: 90000;
    --z-visor: 95000;
    --z-toast: 99999;
}

/* --- REASIGNACIÓN DE Z-INDEX PURGADOS --- */
.modal-fondo {
    background-color: rgba(0,0,0,0.85); position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100dvh; display: flex; justify-content: center;
    align-items: center; z-index: var(--z-modal); overscroll-behavior: none;
    touch-action: none; padding: calc(15px + env(safe-area-inset-top)) calc(15px + env(safe-area-inset-right)) calc(15px + env(safe-area-inset-bottom)) calc(15px + env(safe-area-inset-left)); box-sizing: border-box;
}
.modal-contenido {
    background: var(--color-tarjeta); padding: 25px; border-radius: 16px;
    width: 100%; max-width: 600px; max-height: 85dvh; overflow-y: auto;
    box-shadow: var(--sombra-profunda); position: relative; z-index: calc(var(--z-modal) + 1);
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: auto;
}
.modal-legales-contenido {
    max-width: 850px;
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .modal-fondo { padding: calc(5px + env(safe-area-inset-top)) calc(5px + env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) calc(5px + env(safe-area-inset-left)); }
    .modal-contenido { padding: 15px; max-height: 95dvh; border-radius: 12px; }
}

.visor-fondo {
    position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
    background: rgba(0, 0, 0, 0.95); z-index: var(--z-visor);
    display: flex; justify-content: center; align-items: center;
    cursor: default; overscroll-behavior: none; touch-action: none;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.visor-abierto,
html.visor-abierto {
    overflow: hidden !important;
}

.toast-flotante {
    position: fixed; bottom: 24px; left: 50%;
    transform: translate3d(-50%, 30px, 0) scale(0.92);
    transform-origin: bottom center;
    /* Usa variables de tema para ser agnóstico al modo claro/oscuro */
    background: var(--color-tarjeta);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    padding: 12px 20px;
    border-radius: 20px; font-weight: 600; font-size: 13.5px; z-index: var(--z-toast);
    box-shadow: var(--sombra-premium);
    opacity: 0; pointer-events: none;
    display: flex; align-items: center; gap: 12px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    will-change: transform, opacity;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    line-height: 1.4; max-width: 90vw; word-break: break-word;
    font-family: 'Outfit', 'Inter', sans-serif;
}
/* En dark mode, el toast adopta el glassmorphism premium */
[data-theme="dark"] .toast-flotante {
    background: rgba(15, 23, 42, 0.82);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}
.toast-flotante.toast-exito {
    background: rgba(6, 78, 59, 0.75);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 15px rgba(16, 185, 129, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.toast-flotante.toast-error {
    background: rgba(127, 29, 29, 0.75);
    border-color: rgba(239, 68, 68, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 15px rgba(239, 68, 68, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.toast-flotante.toast-oro {
    background: rgba(69, 39, 0, 0.75);
    border-color: rgba(234, 179, 8, 0.35);
    color: #fef08a;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(234, 179, 8, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.toast-flotante .toast-icon {
    font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    transform: scale(0.8); animation: toastIconBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}
.toast-flotante .toast-text { flex: 1; }
@keyframes toastIconBounce { to { transform: scale(1.1); } }



.chip-icono { font-size: 24px; z-index: var(--z-base); position: relative; display: block; line-height: 1; }
.chip-nombre {
    font-size: 11px; font-weight: 800; color: var(--color-texto-principal); z-index: var(--z-base); position: relative;
    text-align: center; white-space: normal; line-height: 1.2; width: 100%; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.canvas-fusion-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-flotante); }

.cabecera-tienda {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 100%; max-width: 100%; background: #ffffff;
    padding: 100px 20px 80px 20px; text-align: center; border-radius: 0; margin: 0 0 50px 0;
    position: relative; top: auto; z-index: var(--z-elevado);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02); transition: all 0.5s ease;
}

.carrito-panel {
    position: fixed; top: 0; right: -400px; width: 100%; max-width: 400px; height: 100dvh;
    background: var(--color-tarjeta); box-shadow: -5px 0 25px rgba(0,0,0,0.1); z-index: var(--z-carrito);
    display: flex; flex-direction: column; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overscroll-behavior: none;
}
.overlay-carrito { 
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); 
    z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: 0.3s; 
    overscroll-behavior: none; touch-action: none;
}

.cinta-agotado-diagonal {
    position: absolute; top: 50%; left: 50%; width: 150%; transform: translate(-50%, -50%) rotate(-45deg);
    background: #e11d48; color: white; padding: 15px 0; text-align: center; font-weight: 900; letter-spacing: 3px; z-index: var(--z-flotante);
}
.overlay-agotado-fade { position: absolute; inset: 0; background: rgba(255,255,255,0.4); backdrop-filter: blur(2px); z-index: calc(var(--z-flotante) - 1); pointer-events: none; }

.tema-moda .cabecera-tienda::before, .tema-calzado .cabecera-tienda::before, .tema-gamer .cabecera-tienda::before, 
.tema-electronica .cabecera-tienda::before, .tema-perfumes .cabecera-tienda::before, .tema-ferreteria .cabecera-tienda::before, 
.tema-vehiculos .cabecera-tienda::before, .tema-inmuebles .cabecera-tienda::before, .tema-gourmet .cabecera-tienda::before, 
.tema-mascotas .cabecera-tienda::before, .tema-farmacia .cabecera-tienda::before, .tema-deportes .cabecera-tienda::before {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 12px; 
    background: linear-gradient(90deg, transparent 0%, var(--color-glow) 40%, #ffffff 50%, var(--color-glow) 60%, transparent 100%); 
    background-size: 200% 100%; filter: blur(8px); opacity: 0.7; pointer-events: none; z-index: var(--z-base);
    animation: barridoLaser 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; will-change: background-position; transform: translateZ(0);
}
.tema-moda .cabecera-tienda::after, .tema-calzado .cabecera-tienda::after, .tema-gamer .cabecera-tienda::after, 
.tema-electronica .cabecera-tienda::after, .tema-perfumes .cabecera-tienda::after, .tema-ferreteria .cabecera-tienda::after, 
.tema-vehiculos .cabecera-tienda::after, .tema-inmuebles .cabecera-tienda::after, .tema-gourmet .cabecera-tienda::after, 
.tema-mascotas .cabecera-tienda::after, .tema-farmacia .cabecera-tienda::after, .tema-deportes .cabecera-tienda::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1.5px; 
    background: linear-gradient(90deg, transparent 10%, var(--color-haz) 45%, #ffffff 50%, var(--color-haz) 55%, transparent 90%); 
    background-size: 200% 100%; z-index: calc(var(--z-base) + 1);
    animation: barridoLaser 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; will-change: background-position; transform: translateZ(0);
}

.tema-moda .contenedor-imagen-catalogo::before, .nicho-moda .mockup-imagen-fondo::before, 
.tema-calzado .contenedor-imagen-catalogo::before, .nicho-calzado .mockup-imagen-fondo::before, 
.tema-gamer .contenedor-imagen-catalogo::before, .nicho-gamer .mockup-imagen-fondo::before, 
.tema-electronica .contenedor-imagen-catalogo::before, .nicho-electronica .mockup-imagen-fondo::before, 
.tema-ferreteria .contenedor-imagen-catalogo::before, .nicho-ferreteria .mockup-imagen-fondo::before, 
.tema-vehiculos .contenedor-imagen-catalogo::before, .nicho-vehiculos .mockup-imagen-fondo::before, 
.tema-inmuebles .contenedor-imagen-catalogo::before, .nicho-inmuebles .mockup-imagen-fondo::before, 
.tema-gourmet .contenedor-imagen-catalogo::before, .nicho-gourmet .mockup-imagen-fondo::before, 
.tema-mascotas .contenedor-imagen-catalogo::before, .nicho-mascotas .mockup-imagen-fondo::before, 
.tema-farmacia .contenedor-imagen-catalogo::before, .nicho-farmacia .mockup-imagen-fondo::before, 
.tema-deportes .contenedor-imagen-catalogo::before, .nicho-deportes .mockup-imagen-fondo::before, 
.tema-gold .contenedor-imagen-catalogo::before, .nicho-gold .mockup-imagen-fondo::before, 
.tema-perfumes .contenedor-imagen-catalogo::before, .nicho-perfumes .mockup-imagen-fondo::before {
    content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: 0;
    animation: girarBordeRGB 8s linear infinite; will-change: transform; transform: translateZ(0);
}
.tema-moda .contenedor-imagen-catalogo::after, .nicho-moda .mockup-imagen-fondo::after, 
.tema-calzado .contenedor-imagen-catalogo::after, .nicho-calzado .mockup-imagen-fondo::after, 
.tema-gamer .contenedor-imagen-catalogo::after, .nicho-gamer .mockup-imagen-fondo::after, 
.tema-electronica .contenedor-imagen-catalogo::after, .nicho-electronica .mockup-imagen-fondo::after, 
.tema-ferreteria .contenedor-imagen-catalogo::after, .nicho-ferreteria .mockup-imagen-fondo::after, 
.tema-vehiculos .contenedor-imagen-catalogo::after, .nicho-vehiculos .mockup-imagen-fondo::after, 
.tema-inmuebles .contenedor-imagen-catalogo::after, .nicho-inmuebles .mockup-imagen-fondo::after, 
.tema-gourmet .contenedor-imagen-catalogo::after, .nicho-gourmet .mockup-imagen-fondo::after, 
.tema-mascotas .contenedor-imagen-catalogo::after, .nicho-mascotas .mockup-imagen-fondo::after, 
.tema-farmacia .contenedor-imagen-catalogo::after, .nicho-farmacia .mockup-imagen-fondo::after, 
.tema-deportes .contenedor-imagen-catalogo::after, .nicho-deportes .mockup-imagen-fondo::after, 
.tema-gold .contenedor-imagen-catalogo::after, .nicho-gold .mockup-imagen-fondo::after, 
.tema-perfumes .contenedor-imagen-catalogo::after, .nicho-perfumes .mockup-imagen-fondo::after {
    content: ''; position: absolute; inset: 3px; border-radius: inherit; z-index: var(--z-base);
}

.contenedor-3d-premium {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    perspective: 1200px; transform-style: preserve-3d; z-index: var(--z-elevado); pointer-events: none;
}
.producto-3d { position: relative; z-index: var(--z-elevado); object-fit: contain; pointer-events: auto; will-change: transform; }
.suelo-3d { display: none; z-index: var(--z-base); pointer-events: none; }

.mockup-telefono {
    width: 200px; height: 330px; background: #ffffff; border-radius: 30px;
    border: 8px solid #1e293b; box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    overflow: hidden; display: flex; flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: var(--z-base);
}
.mockup-tarjeta {
    background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0;
    overflow: visible; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: 0.4s; position: relative; z-index: calc(var(--z-base) + 1);
}
.mockup-textos {
    padding: 12px; position: relative; z-index: calc(var(--z-base) + 2);
    background: inherit; border-radius: 0 0 12px 12px;
}

.candado-tema-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); color: white; display: flex;
    justify-content: center; align-items: center; font-size: 11px;
    font-weight: 800; backdrop-filter: blur(2px); z-index: var(--z-elevado);
}

.radio-fondo-animado {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.08) 0%, transparent 60%);
    animation: rotarLuzIA 12s linear infinite; pointer-events: none; z-index: 0;
}
.radio-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; position: relative; z-index: var(--z-base); }
.radio-grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; position: relative; z-index: var(--z-base); }
.radio-chat-ia { display: flex; gap: 15px; align-items: flex-start; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255,255,255,0.05); padding: 15px; border-radius: 16px; position: relative; z-index: var(--z-base); }

.etiqueta--plan { position: absolute; top: 0; left: 0; width: 100%; font-size: 8px; text-transform: uppercase; padding: 4px 0; letter-spacing: 1px; color: var(--color-blanco); z-index: var(--z-base); text-align: center; }
.icono-candado-tema { position: absolute; top: 22px; right: 6px; font-size: 14px; z-index: var(--z-elevado); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }

/* --- ANIMACIONES CENTRALIZADAS Y OPTIMIZADAS (Solo Transform y Opacity) --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes girar { 
    to { transform: rotate(360deg); } 
}

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

@keyframes latido-magico {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes latidoOk {
    0% { transform: scale(1); box-shadow: 0 5px 15px rgba(16,185,129,0.4); }
    50% { transform: scale(1.15); box-shadow: 0 10px 30px rgba(16,185,129,0.8); background: #34d399; }
    100% { transform: scale(1); box-shadow: 0 5px 15px rgba(16,185,129,0.4); }
}

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

@keyframes latidoIAPunto {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

@keyframes pulsoAgotado { 
    0% { transform: scale(1); } 
    80% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   [🚀 UX-ELITE] MOTOR OMNI-COMERCIO: VARIANTES Y OPCIONES
   ========================================================================== */

/* --- 1. MODAL DE COMPRADOR: Selector de Píldoras --- */
.modal-detalle-omni {
    width: calc(100% - 40px); /* 🚀 FIX: Se encoge respetando los márgenes */
    max-width: 1160px;
    height: min(85dvh, 760px); /* 🚀 Definite height prevents cut-offs and enables internal scrolling */
    background: var(--color-fondo);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* 🚀 Balanced column layout on large screens */
    grid-template-rows: minmax(0, 1fr); /* 🚀 Keep rows constrained to container height */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-borde);
    animation: fadeIn 0.3s ease-out;
}
@media (max-width: 768px) {
    #modal-detalle-producto.modal-fondo {
        touch-action: auto;
        overflow-y: auto;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .modal-detalle-omni {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important; /* Allow auto height on mobile drawer */
        max-height: 95dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 20px 20px 0 0 !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
    }

    .omni-panel-img {
        padding: 15px;
        flex-shrink: 0;
        height: auto !important;
    }

    .omni-panel-controles {
        overflow-y: visible !important; /* 🚀 Prevent double scrollbar in mobile drawer */
        padding: 20px;
        padding-top: 10px;
        height: auto !important;
    }
}
.omni-panel-img {
    background: var(--color-superficie);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    height: 100%;
    min-height: 0; /* 🚀 Required for flex/grid shrink */
    box-sizing: border-box;
}
.omni-img-gran {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}
#detalle-img-producto {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
.omni-panel-controles {
    padding: 30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain; /* 🚀 FIX: Candado militar anti scroll-sangrante */
    height: 100%;
    min-height: 0; /* 🚀 Required for flex/grid shrink */
    box-sizing: border-box;
}
@media (min-width: 769px) {
    .omni-panel-controles {
        padding-top: 70px; /* 🚀 Evita colisión con el botón de cierre absolute en desktop */
    }
}
.detalle-separador {
    margin: 15px 0;
    border: 0;
    border-top: 1px solid var(--color-borde);
}
#btn-detalle-agregar-carrito {
    box-shadow: 0 10px 20px -5px var(--color-primario);
}

.omni-footer-acciones {
    margin-top: auto;
    padding-top: 20px;
    width: 100%;
}
.omni-footer-acciones .btn-group {
    display: flex;
    gap: 10px;
    width: 100%;
}
.omni-footer-acciones .btn {
    padding: 16px;
    font-size: 16px;
    border-radius: 12px;
    margin-top: 0;
}
.omni-footer-acciones .btn-half {
    flex: 1;
}
.omni-footer-acciones .btn-full {
    width: 100%;
}

.omni-titulo {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-texto);
    margin-bottom: 5px;
    line-height: 1.2;
    padding-right: 50px; /* 🛡️ Evita colisión con el botón de cierre */
}
.omni-precio {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 20px;
}
.omni-desc {
    font-size: 14px;
    color: var(--color-texto-suave);
    line-height: 1.6;
    margin-bottom: 20px;
    max-height: 100px;
    overflow-y: auto;
}

/* Píldoras Elegantes (Apple Style) */
.variante-grupo { margin-bottom: 15px; }
.variante-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--color-texto-suave);
    margin-bottom: 8px;
    display: block;
}
.pildora-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-variante-pildora {
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    color: var(--color-texto);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.btn-variante-pildora:hover {
    border-color: var(--color-texto-suave);
    transform: translateY(-2px);
}
.btn-variante-pildora.activo {
    background: var(--color-texto);
    color: var(--color-fondo);
    border-color: var(--color-texto);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: scale(1.05);
}

/* --- 2. VENDEDOR: Creador de Opciones (Cards) --- */
.card-opcion-elite {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 15px;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.2s ease;
}
.card-opcion-elite:hover { border-color: rgba(255, 255, 255, 0.1); }
.btn-borrar-card {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.btn-borrar-card:hover { background: #ef4444; color: white; }

.btn-guardar-plantilla-opcion {
    background: none;
    border: none;
    color: var(--color-primario);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    transition: color 0.2s ease;
}
.btn-guardar-plantilla-opcion:hover {
    color: #3b82f6; /* var(--color-primario-brillante) fallback */
}

.grid-matriz-elite {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 12px;
    margin-top: 15px;
}
/* Legacy matriz card classes removed in favor of clean table row (matriz-row) layout */

/* --- 3. CORRECCIÓN: FIX BUG IMAGEN CARRITO GIGANTE --- */
.item-carrito-elite {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 10px;
}
.img-item-carrito-elite {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    background: rgba(0,0,0,0.05) !important;
}
.info-item-carrito-elite { flex: 1; min-width: 0; }
.titulo-item-carrito-elite { font-size: 14px; font-weight: 600; color: var(--color-texto); margin: 0 0 4px 0; white-space: normal; overflow: visible; text-overflow: clip; }
.precio-item-carrito-elite { font-size: 13px; color: var(--color-texto-suave); margin: 0; }
.controles-cantidad-carrito-elite { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.05); padding: 4px; border-radius: 8px; }
.btn-qty-elite { background: transparent; border: none; color: var(--color-texto); width: 24px; height: 24px; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; }
.btn-qty-elite:hover { background: rgba(0,0,0,0.1); }
.txt-cantidad-elite { font-size: 13px; font-weight: 700; min-width: 16px; text-align: center; }

/* Excepciones de Background-Position (Requeridas para Gradientes Complejos) */
@keyframes moverFondoAdvance { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

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

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

/* ==========================================================================
   🧼 CONTROL CORE: ESCUDO DE INTERACTIVIDAD PARA CANDADO DE MONEDAS
   ========================================================================== */
.formulario__grupo .select-bloqueado {
  pointer-events: none; /* Bloquea el despliegue nativo manteniendo la flecha intacta */
  background-color: var(--color-fondo-bloqueado, #f1f5f9);
  color: var(--color-texto-suave, #64748b);
}

.formulario__grupo.grupo-moneda-bloqueado {
  cursor: pointer; /* Especificidad compuesta avanzada libre de !important */
}

/* ==========================================================================
   🚀 COMPONENTE ELITE: ONBOARDING WIZARD PREMIUM
   ========================================================================== */
.modal-contenido.modal-onboarding-box {
    max-width: 580px;
    max-height: 90dvh;
    padding: 40px 35px;
    border-radius: 28px;
    background: var(--color-tarjeta);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--color-borde);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    position: relative;
    flex: 0 0 auto;
}

.onboarding-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.onboarding-steps-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-borde);
    color: var(--color-texto-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.step-dot.active {
    background: linear-gradient(135deg, var(--color-primario), #8b5cf6);
    color: white;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
    transform: scale(1.15);
}

.step-dot.completed {
    background: var(--color-exito);
    color: white;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
    transform: scale(1);
}

.step-line {
    width: 40px;
    height: 3px;
    background: var(--color-borde);
    transition: all 0.4s ease;
    border-radius: 2px;
}

.step-line.active {
    background: linear-gradient(90deg, var(--color-primario), var(--color-exito));
}

.btn-skip-onboarding {
    background: transparent;
    border: none;
    color: var(--color-texto-suave);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.btn-skip-onboarding:hover {
    color: var(--color-error);
    background: rgba(239, 68, 68, 0.08);
}

/* Steps container and contents */
.onboarding-steps-container {
    flex: 1 1 auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    min-height: 0;
    padding-right: 8px; /* space for scrollbar */
    margin-right: -8px; /* offset padding so content uses full width */
}

/* Custom modern scrollbar for onboarding steps */
.onboarding-steps-container::-webkit-scrollbar {
    width: 6px;
}
.onboarding-steps-container::-webkit-scrollbar-track {
    background: transparent;
}
.onboarding-steps-container::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    transition: background 0.3s ease;
}
.onboarding-steps-container::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.45);
}

.onboarding-step-content {
    display: none;
    animation: slideInOnboard 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-step-content.active {
    display: block;
}

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

.onboarding-icon {
    font-size: 54px;
    margin-bottom: 20px;
    display: inline-block;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
}

.animation-celebrate {
    animation: bounceCelebrate 1.2s infinite alternate ease-in-out;
}

@keyframes bounceCelebrate {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-8px) scale(1.1); }
}

.input-slug-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-borde);
    background: var(--color-tarjeta);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-sizing: border-box;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.input-slug-wrapper:focus-within {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.slug-prefix {
    padding: 14px 12px 14px 16px;
    background: var(--color-fondo);
    color: var(--color-texto-suave);
    font-weight: 700;
    font-size: 15px;
    border-right: 1px solid var(--color-borde);
    user-select: none;
    white-space: nowrap;
}

.input-slug-wrapper .formulario__input {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 14px 16px;
    height: auto;
    font-size: 15px;
}

.input-error-msg {
    display: block;
    color: var(--color-error);
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    text-align: left;
}

/* Forms container */
.onboard-payment-form {
    display: none;
    background: rgba(139, 92, 246, 0.02);
    border: 1px solid var(--color-borde);
    border-radius: 18px;
    padding: 20px;
    margin-top: 15px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.01);
    animation: fadeInOnboardForm 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

[data-theme="dark"] .onboard-payment-form {
    background: rgba(139, 92, 246, 0.04);
}

.onboard-payment-form.active {
    display: block;
}

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

.onboarding-success-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 22px;
    text-align: left;
    margin-top: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.success-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-borde);
}

.success-preview-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.success-preview-item span {
    color: var(--color-texto-suave);
    font-weight: 600;
}

.success-preview-item strong {
    color: var(--color-primario);
    font-weight: 700;
    max-width: 60%;
    word-break: break-all;
    text-align: right;
}

/* Footer layout */
.onboarding-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--color-borde);
    padding-top: 25px;
    margin-top: 30px;
    flex: 0 0 auto;
}

.onboarding-footer-left,
.onboarding-footer-center,
.onboarding-footer-right {
    display: flex;
    align-items: center;
}

.onboarding-footer-left {
    flex: 1 1 0%;
    justify-content: flex-start;
}

.onboarding-footer-center {
    flex: 2 1 0%;
    justify-content: center;
}

.onboarding-footer-right {
    flex: 1 1 0%;
    justify-content: flex-end;
    gap: 12px;
}

/* Selector de idioma sutil en Onboarding */
.modal-onboarding-box #selector-idioma-onboarding {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-onboarding-box #selector-idioma-onboarding:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-texto-suave);
}

/* Checkbox Premium para Onboarding */
.onboarding-optout-container {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-texto-suave);
    transition: color 0.2s ease;
}

.onboarding-optout-container:hover {
    color: var(--color-texto);
}

.onboarding-optout-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.onboarding-optout-checkbox-custom {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid var(--color-borde);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.onboarding-optout-container:hover .onboarding-optout-checkbox-custom {
    border-color: var(--color-primario);
    background: rgba(139, 92, 246, 0.05);
}

.onboarding-optout-input:checked + .onboarding-optout-checkbox-custom {
    border-color: var(--color-exito);
    background: rgba(16, 185, 129, 0.1);
}

.onboarding-optout-checkmark {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--color-exito);
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.onboarding-optout-input:checked + .onboarding-optout-checkbox-custom .onboarding-optout-checkmark {
    opacity: 1;
    transform: scale(1);
}

/* Premium Button Overrides specifically for onboarding modal */
.modal-onboarding-box .btn-onboard-next,
.modal-onboarding-box .btn-onboard-back {
    padding: 12px 28px;
    min-height: 48px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.modal-onboarding-box .btn-onboard-next {
    background: linear-gradient(135deg, var(--color-primario), #8b5cf6);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.25);
}

.modal-onboarding-box .btn-onboard-next:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.45);
    filter: brightness(1.05);
}

.modal-onboarding-box .btn-onboard-next:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.2);
}

.modal-onboarding-box .btn-onboard-back {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
}

[data-theme="dark"] .modal-onboarding-box .btn-onboard-back {
    background: rgba(255, 255, 255, 0.05);
}

.modal-onboarding-box .btn-onboard-back:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-texto-suave);
    transform: translateY(-2px);
}

.modal-onboarding-box .btn-onboard-back:active:not(:disabled) {
    transform: translateY(1px);
}

.modal-onboarding-box .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive adjustment for Mobile (iOS & Android) */
@media (max-width: 480px) {
    .modal-contenido.modal-onboarding-box {
        padding: 25px 20px;
        border-radius: 22px;
        max-height: 95dvh;
    }
    .modal-onboarding-box .onboarding-header {
        margin-bottom: 20px;
    }
    .modal-onboarding-box .onboarding-icon {
        font-size: 44px;
        margin-bottom: 12px;
    }
    .modal-onboarding-box .onboarding-footer {
        padding-top: 15px;
        margin-top: 15px;
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    .modal-onboarding-box .onboarding-footer-left,
    .modal-onboarding-box .onboarding-footer-center,
    .modal-onboarding-box .onboarding-footer-right {
        justify-content: center;
        flex: none;
        width: 100%;
    }
    .modal-onboarding-box .onboarding-footer-right {
        gap: 10px;
    }
    .modal-onboarding-box .onboarding-footer-right .btn {
        flex: 1;
    }
    .modal-onboarding-box .btn-onboard-next,
    .modal-onboarding-box .btn-onboard-back {
        padding: 10px 20px;
        min-height: 44px;
        font-size: 14px;
        border-radius: 12px;
    }
}

/* --- CONMUTADOR DE TEMA GLOBAL NEXT-GEN --- */
/* El botón de cambio de tema se muestra por defecto en el panel del vendedor (Catálogo/Estudio IA)
   pero se oculta en la landing page y en la tarjeta de autenticación (login/registro). */
#btn-tema-global {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

#btn-tema-global .theme-toggle__text {
  display: none;
}

#seccion-app:has(#seccion-auth.activo) #btn-tema-global {
  display: none;
}

[data-theme="dark"] #btn-tema-global {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#btn-tema-global:hover {
  border-color: var(--color-primario);
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}

.theme-toggle__icon {
  display: inline-block;
  font-size: 15px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Efecto de rotación del ícono al cambiar de tema */
[data-theme="dark"] .theme-toggle__icon {
  transform: rotate(360deg) scale(1.1);
}

/* Transición suave para cambio de tema */
html.theme-in-transition,
html.theme-in-transition body,
html.theme-in-transition header,
html.theme-in-transition section,
html.theme-in-transition div,
html.theme-in-transition button,
html.theme-in-transition input,
html.theme-in-transition select,
html.theme-in-transition label,
html.theme-in-transition p,
html.theme-in-transition span,
html.theme-in-transition textarea,
html.theme-in-transition a {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   🚨 UX-ELITE: REAL-TIME VALIDATION AND INTERACTIVE HELPERS
   ========================================================================== */
.elite-validation-feedback {
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  display: block;
  transition: all 0.25s ease-in-out;
  text-align: left;
}
.elite-validation-feedback.checking {
  color: #f59e0b;
}
.elite-validation-feedback.success {
  color: var(--color-exito);
}
.elite-validation-feedback.error {
  color: var(--color-error);
}

.formulario__grupo .formulario__input.validator-checking {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.formulario__grupo .formulario__input.validator-success {
  border-color: var(--color-exito);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.formulario__grupo .formulario__input.validator-error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.formulario__grupo .input-slug-wrapper.validator-checking {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.formulario__grupo .input-slug-wrapper.validator-success {
  border-color: var(--color-exito);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.formulario__grupo .input-slug-wrapper.validator-error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   [🌙 DARK-SCOPE] MODO OSCURO PERMANENTE — PLANES & AUTH
   Los modales de planes y la sección de auth/login siempre se muestran
   en modo oscuro, independientemente de la preferencia global del usuario.
   Se aplica mediante colores hardcodeados por ID (NO via data-theme="dark",
   que causaría que las CSS custom properties se redefinan en cascada y
   contaminen el tema global del resto de la app).
   ========================================================================== */

/* El botón de tema está oculto globalmente (regla en #btn-tema-global).
   Esta regla de auth es redundante pero se conserva como referencia
   para cuando se quiera reactivar el toggle en contextos específicos. */

/* --- Fondo modal de planes (adaptable al tema) --- */
#modal-bienvenida .modal-contenido,
#modal-detalle-plan .modal-contenido {
  background-color: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-profunda);
}

/* --- Fondo del modal-fondo (overlay) --- */
#modal-bienvenida.modal-fondo,
#modal-detalle-plan.modal-fondo {
  background-color: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="dark"] #modal-bienvenida.modal-fondo,
[data-theme="dark"] #modal-detalle-plan.modal-fondo {
  background-color: rgba(2, 6, 23, 0.85);
}

/* --- Tarjetas de planes --- */
/* Estilos unificados en la sección de ONBOARDING (Sección 3) */

/* --- Modal de detalle de plan --- */
#modal-detalle-plan .modal-contenido {
  text-align: center;
}

/* --- AUTH SECTION (LOGIN/REGISTRO) --- */
#seccion-auth {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] #seccion-auth {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
  border-top: none;
  box-shadow: 0 -15px 40px rgba(37, 99, 235, 0.15), 0 30px 80px rgba(0, 0, 0, 0.6);
}
#seccion-auth:hover {
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 
              0 0 35px rgba(99, 102, 241, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] #seccion-auth:hover {
  box-shadow: 0 -20px 50px rgba(37, 99, 235, 0.25), 
              0 40px 80px rgba(0, 0, 0, 0.55),
              0 0 35px rgba(99, 102, 241, 0.15);
}

/* Caja de credenciales dentro de auth - Simplificada para evitar doble contenedor y lograr Glassmorphism premium */
#seccion-auth .caja-credenciales {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
[data-theme="dark"] #seccion-auth .caja-credenciales {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Inputs dentro del auth - Diseño premium translúcido */
#seccion-auth .formulario__input {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #ffffff;
  padding: 13px 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#seccion-auth .formulario__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
#seccion-auth .formulario__input:focus {
  background: rgba(15, 23, 42, 0.6);
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
  color: #ffffff;
}
[data-theme="dark"] #seccion-auth .formulario__input {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
[data-theme="dark"] #seccion-auth .formulario__input:focus {
  background: rgba(15, 23, 42, 0.65);
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

/* Separador "o usa tu correo" */
#seccion-auth .separador-auth {
  color: var(--color-texto-suave);
  border-color: var(--color-borde);
  margin-top: 20px;
  margin-bottom: 20px;
}
#seccion-auth .separador-auth::before,
#seccion-auth .separador-auth::after {
  background-color: var(--color-borde);
}
[data-theme="dark"] #seccion-auth .separador-auth {
  color: #475569;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] #seccion-auth .separador-auth::before,
[data-theme="dark"] #seccion-auth .separador-auth::after {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Botón Google - Estilo premium translúcido */
#seccion-auth .btn--google {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#seccion-auth .btn--google:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}
[data-theme="dark"] #seccion-auth .btn--google {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
[data-theme="dark"] #seccion-auth .btn--google:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.20);
}

/* Cabecera auth */
#seccion-auth .cabecera-auth h1 {
  color: var(--color-texto);
}
#seccion-auth .cabecera-auth p {
  color: var(--color-texto-suave);
}
[data-theme="dark"] #seccion-auth .cabecera-auth h1 {
  color: #f8fafc;
}
[data-theme="dark"] #seccion-auth .cabecera-auth p {
  color: #94a3b8;
}

/* Enlace "ir a registro / ir a login" */
#seccion-auth .cambio-vista {
  color: var(--color-texto-suave);
}
#seccion-auth .cambio-vista .texto-resaltado {
  color: var(--color-primario);
}
#seccion-auth .cambio-vista:hover {
  color: var(--color-texto);
}
[data-theme="dark"] #seccion-auth .cambio-vista {
  color: #64748b;
}
[data-theme="dark"] #seccion-auth .cambio-vista .texto-resaltado {
  color: #60a5fa;
}
[data-theme="dark"] #seccion-auth .cambio-vista:hover {
  color: #94a3b8;
}

/* Labels de formulario */
#seccion-auth .formulario__label {
  color: var(--color-texto);
}
[data-theme="dark"] #seccion-auth .formulario__label {
  color: #94a3b8;
}

/* Hint de contraseña */
#seccion-auth .formulario__hint {
  color: var(--color-texto-suave);
}
[data-theme="dark"] #seccion-auth .formulario__hint {
  color: #64748b;
}

/* Términos y condiciones */
#seccion-auth .label-terminos {
  color: var(--color-texto-suave);
}
#seccion-auth .enlace-terminos {
  color: var(--color-primario);
}
[data-theme="dark"] #seccion-auth .label-terminos {
  color: #94a3b8;
}
[data-theme="dark"] #seccion-auth .enlace-terminos {
  color: #60a5fa;
}

/* OTP input */
#seccion-auth .formulario__input--otp {
  background-color: var(--color-fondo);
  border-color: var(--color-primario);
  color: var(--color-primario);
  letter-spacing: 8px;
}
[data-theme="dark"] #seccion-auth .formulario__input--otp {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(37, 99, 235, 0.4);
  color: #60a5fa;
}

/* Botón secundario "Volver" */
#seccion-auth > .btn--secondary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}
#seccion-auth > .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}
[data-theme="dark"] #seccion-auth > .btn--secondary {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] #seccion-auth > .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Icono de ojo */
#seccion-auth .btn-ojo {
  color: var(--color-texto-suave);
}
#seccion-auth .btn-ojo:hover {
  color: var(--color-texto);
}
[data-theme="dark"] #seccion-auth .btn-ojo {
  color: #64748b;
}
[data-theme="dark"] #seccion-auth .btn-ojo:hover {
  color: #94a3b8;
}

/* Botón "¿Olvidaste tu contraseña?" */
#seccion-auth .btn--ghost {
  color: var(--color-primario);
}
#seccion-auth .btn--ghost:hover {
  color: var(--color-primario-hover);
}
[data-theme="dark"] #seccion-auth .btn--ghost {
  color: #60a5fa;
}
[data-theme="dark"] #seccion-auth .btn--ghost:hover {
  color: #93c5fd;
}

/* Fondo oscuro del contenedor de la app SOLO cuando muestra la sección auth/login */
#seccion-app:has(#seccion-auth.activo) {
  background: var(--color-fondo);
}
[data-theme="dark"] #seccion-app:has(#seccion-auth.activo) {
  background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);
}

/* Ensure the inner contenedor-3d-premium behaves correctly in the visor */
.visor-fondo .visor-caja-blanca .contenedor-3d-premium {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   [🛠️ FIX] ALINEACIÓN, ALTURA Y RESPONSIVIDAD DE LA BARRA DE FILTROS (100% ANCHO)
   ========================================================================== */

/* 1. Unificar alturas de buscador, botones y select a 46px */
.controles-catalogo .formulario__input--busqueda {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 45px;
    padding-right: 15px;
    box-sizing: border-box;
}

.controles-catalogo .btn--filter,
.controles-catalogo .btn--filter-clear,
.controles-catalogo .formulario__select--filtro-avanzado {
    height: 46px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

/* Permitir que el select se alinee correctamente */
.controles-catalogo .formulario__select--filtro-avanzado {
    display: inline-block;
}

/* 2. Responsividad Avanzada para Celulares y Tablets */
@media (max-width: 768px) {
    /* Forzar que el contenedor principal del filtro se apile verticalmente y se estire */
    .controles-catalogo {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }
    
    /* El input buscador ocupa todo el ancho */
    .controles-catalogo .caja-busqueda {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
    }
    
    /* El grupo de botones ocupa todo el ancho y distribuye sus elementos uniformemente */
    .controles-catalogo .l-flex-gap-10 {
        width: 100%;
        display: flex;
        flex-wrap: nowrap; /* Evita saltos de línea internos en pantallas angostas */
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    
    /* Mostrar Todos y Filtrar/Orden crecen equitativamente */
    .controles-catalogo .btn--filter,
    .controles-catalogo .formulario__select--filtro-avanzado {
        flex: 1 1 auto;
        width: auto;
        min-width: 0; /* Permite que encojan para evitar overflow */
        text-align: center;
    }
    
    /* La X roja de limpiar filtros mantiene su ancho compacto de botón de acción rápida */
    .controles-catalogo .btn--filter-clear {
        flex: 0 0 auto;
        width: auto;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ==========================================================================
   [❓ UX-ELITE] ESTILOS PARA LAS PESTAÑAS DE LA GUÍA DE INICIO RÁPIDA
   ========================================================================== */
.guia-tabs {
  display: flex;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.btn-guia-tab {
  flex: 1;
  padding: 12px 16px;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  color: var(--color-texto-suave);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  touch-action: manipulation;
  user-select: none;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.btn-guia-tab:hover {
  background: var(--color-borde);
  color: var(--color-texto);
}

.btn-guia-tab.active {
  background: var(--color-primario);
  color: var(--color-blanco);
  border-color: var(--color-primario);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* --- TÉRMINOS DE PROMOTORES PRIVADOS --- */
.scroll-legales {
  max-height: 55vh;
  min-height: 250px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border: 1px solid var(--color-borde);
  -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .scroll-legales {
  background: rgba(255, 255, 255, 0.04);
}

/* --- REDISEÑO DE VARIANTES ELITE (ESTILO PREMIUM & ACORDEÓN) --- */
.chip-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 6px 12px;
    min-height: 42px;
    transition: border-color 0.2s ease;
}
.chip-input-container:focus-within {
    border-color: var(--color-primario);
}
.chip-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-texto);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.chip-tag-delete {
    cursor: pointer;
    color: var(--color-texto-suave);
    font-size: 14px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: all 0.15s ease;
}
.chip-tag-delete:hover {
    background: #ef4444;
    color: var(--color-blanco) !important;
}
.chip-input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    flex: 1;
    min-width: 100px;
    color: var(--color-texto);
    font-size: 14px;
}

/* Acordeón de SKU por Color */
.acordeon-color-grupo {
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--color-superficie);
}
.acordeon-color-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}
[data-theme="dark"] .acordeon-color-cabecera {
    background: rgba(255, 255, 255, 0.02);
}
.acordeon-color-cabecera:hover {
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .acordeon-color-cabecera:hover {
    background: rgba(255, 255, 255, 0.04);
}
.acordeon-color-titulo {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-texto);
    display: flex;
    align-items: center;
    gap: 8px;
}
.acordeon-color-flecha {
    font-size: 12px;
    transition: transform 0.2s ease;
    color: var(--color-texto-suave);
}
.acordeon-color-grupo.active .acordeon-color-flecha {
    transform: rotate(180deg);
}
.acordeon-color-cuerpo {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.acordeon-color-grupo.active .acordeon-color-cuerpo {
    max-height: 1000px; /* Suficiente para las tallas */
    transition: max-height 0.3s ease-in;
}
.acordeon-color-contenido {
    padding: 15px;
    border-top: 1px solid var(--color-borde);
}

.tabla-compacta-variantes {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.grid-matriz-elite > .tabla-compacta-variantes {
    grid-column: 1 / -1;
}
.tabla-compacta-variantes th, .tabla-compacta-variantes td {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--color-borde);
}
.tabla-compacta-variantes th {
    font-weight: 700;
    color: var(--color-texto-suave);
}
.tabla-compacta-variantes th:first-child,
.tabla-compacta-variantes td:first-child {
    text-align: left;
    padding-left: 10px;
}
.tabla-compacta-variantes input {
    width: 80px;
    padding: 6px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    background: var(--color-superficie);
    color: var(--color-texto);
    text-align: center;
}
/* Ocultar botones de subir/bajar (spinners) en inputs numéricos */
.tabla-compacta-variantes input::-webkit-outer-spin-button,
.tabla-compacta-variantes input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tabla-compacta-variantes input[type=number] {
    -moz-appearance: textfield;
}

@media (max-width: 480px) {
    .tabla-compacta-variantes th, .tabla-compacta-variantes td {
        padding: 6px 8px;
        font-size: 12px;
    }
    .tabla-compacta-variantes input {
        width: 60px;
        padding: 4px;
        font-size: 12px;
    }
}

/* Vincular Fotos a Color */
.btn-foto-variante-link {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
[data-theme="dark"] .btn-foto-variante-link {
    background: rgba(255, 255, 255, 0.05);
}
.btn-foto-variante-link:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
    border-color: var(--color-primario);
}
.btn-foto-variante-link.vinculado {
    background: #10b981;
    color: var(--color-blanco);
    border-color: #10b981;
}

/* Candado dorado y Upsell de Plan */
.variantes-bloqueo-plan {
    position: relative;
}
.variantes-bloqueo-capa {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(var(--color-superficie-rgb, 255, 255, 255), 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 2px dashed rgba(217, 119, 6, 0.4);
}
[data-theme="dark"] .variantes-bloqueo-capa {
    background: rgba(30, 30, 30, 0.85);
}
.toast-upsell-dorado {
    border-left: 4px solid #d97706;
    background: #fef3c7 !important;
    color: #92400e !important;
    box-shadow: 0 10px 15px -3px rgba(217, 119, 6, 0.2);
}
[data-theme="dark"] .toast-upsell-dorado {
    background: #78350f !important;
    color: #fef3c7 !important;
}

/* Botón de ayuda */
.btn-ayuda-variantes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-texto-suave);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--color-borde);
    transition: all 0.2s ease;
    margin-left: 8px;
}
.btn-ayuda-variantes:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
    border-color: var(--color-primario);
}

/* 🔍 Botón de Zoom Dedicado en Tarjetas / Estudio (Lightbox directo) */
.btn-zoom-tarjeta {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 25;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.2s ease, 
                border-color 0.2s ease, 
                box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 0;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;
}

.btn-zoom-tarjeta svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    stroke-width: 2.5;
    fill: none;
    display: block;
    pointer-events: none;
}

.btn-zoom-tarjeta:hover {
    transform: scale(1.12);
    background-color: var(--color-primario);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
    color: #ffffff;
}

.btn-zoom-tarjeta:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .btn-zoom-tarjeta {
        display: none !important;
    }
}
[data-theme="dark"] .btn-ayuda-variantes {
    background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   📢 ESTILOS MODAL COMPARTIR TIENDA (ELITE DESIGN)
   ========================================================================== */
.modal-compartir-caja {
    background: var(--color-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 20px;
    box-shadow: var(--sombra-profunda);
    animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

@keyframes modalSlideUp {
    from {
        transform: scale(0.96) translateY(8px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.modal-compartir-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: 16px;
}

.modal-compartir-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-texto);
    letter-spacing: -0.5px;
}

.btn-cerrar-modal {
    background: transparent;
    border: none;
    font-size: 24px;
    font-weight: 300;
    color: var(--color-texto-suave);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-cerrar-modal:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-texto);
}

[data-theme="dark"] .btn-cerrar-modal:hover {
    background: rgba(255, 255, 255, 0.05);
}

.share-instructions {
    font-size: 13.5px;
    color: var(--color-texto-suave);
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.4;
}

.share-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.btn-share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border-radius: 14px;
    border: 1px solid var(--color-borde);
    background: rgba(0, 0, 0, 0.015);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .btn-share-option {
    background: rgba(255, 255, 255, 0.015);
}

.btn-share-option:hover {
    transform: translateY(-2px);
    border-color: var(--color-texto-suave);
    background: var(--color-tarjeta);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .btn-share-option:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.share-icon {
    font-size: 24px;
    margin-bottom: 6px;
    transition: transform 0.2s ease;
}

.btn-share-option:hover .share-icon {
    transform: scale(1.12);
}

.share-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-texto);
}

/* Colores específicos de marca de forma sutil */
.btn-share-option.share-wpp:hover {
    border-color: #25d366;
    background: rgba(37, 211, 102, 0.04);
}
.btn-share-option.share-tg:hover {
    border-color: #0088cc;
    background: rgba(0, 136, 204, 0.04);
}
.btn-share-option.share-fb:hover {
    border-color: #1877f2;
    background: rgba(24, 119, 242, 0.04);
}
.btn-share-option.share-native:hover {
    border-color: var(--color-primario);
    background: rgba(37, 99, 235, 0.04);
}

.share-copy-section {
    border-top: 1px solid var(--color-borde);
    padding-top: 18px;
    margin-top: 6px;
}

.share-copy-input-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.share-copy-input-group input {
    flex: 1;
    font-family: monospace;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid var(--color-borde);
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-texto-suave);
    outline: none;
    transition: border-color 0.2s ease;
}

[data-theme="dark"] .share-copy-input-group input {
    background: rgba(255, 255, 255, 0.025);
}

.share-copy-input-group input:focus {
    border-color: var(--color-texto-suave);
}

.share-copy-input-group button {
    white-space: nowrap;
    border-radius: 10px;
}

.resaltado-busqueda {
    background-color: rgba(37, 99, 235, 0.15); /* Azul translúcido suave */
    color: var(--color-primario);
    font-weight: 700;
    padding: 1px 0px; /* Sin padding horizontal para evitar brechas entre caracteres */
    border-radius: 0;
    box-shadow: none;
}

[data-theme="dark"] .resaltado-busqueda {
    background-color: rgba(96, 165, 250, 0.25); /* Azul translúcido más brillante para modo oscuro */
    color: #60a5fa;
    box-shadow: none;
}

/* --- SWATCHES DE COLORES EN TARJETAS DE PRODUCTOS --- */
.swatches-colores-tarjeta {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 9px;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}
[data-theme="dark"] .swatches-colores-tarjeta {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}
.producto-tarjeta:hover .swatches-colores-tarjeta {
    opacity: 1;
}
.swatch-circulo {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid var(--color-borde);
    background-color: #ffffff; /* Evita transparencias y recortes extraños de la miniatura */
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.swatch-circulo:hover {
    transform: scale(1.25);
    border-color: var(--color-primario);
}
.swatch-circulo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Muestra el producto completo dentro del swatch de forma premium */
    display: block;
    padding: 1px;
}
@media (hover: none) {
    .swatches-colores-tarjeta {
        opacity: 1;
        bottom: 8px;
    }
}

/* --- ADAPTACIONES DE TEMAS (CONTRASTE 100% CLARO/OSCURO) --- */

/* Temas Oscuros en Grillas de Tienda Pública y Catálogo */
.contenedor-imagen-catalogo.tema-dark .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-midnight .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-gamer .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-sunset .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-ocean .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-forest .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-royal .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-nebula .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-volcano .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-synthwave .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-cosmic .swatches-colores-tarjeta,
.contenedor-imagen-catalogo.tema-zen .swatches-colores-tarjeta,
body.tema-dark .swatches-colores-tarjeta,
body.tema-midnight .swatches-colores-tarjeta,
body.tema-gamer .swatches-colores-tarjeta,
body.tema-sunset .swatches-colores-tarjeta,
body.tema-ocean .swatches-colores-tarjeta,
body.tema-forest .swatches-colores-tarjeta,
body.tema-royal .swatches-colores-tarjeta,
body.tema-nebula .swatches-colores-tarjeta,
body.tema-volcano .swatches-colores-tarjeta,
body.tema-synthwave .swatches-colores-tarjeta,
body.tema-cosmic .swatches-colores-tarjeta,
body.tema-zen .swatches-colores-tarjeta,
[data-theme="dark"] .swatches-colores-tarjeta {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.contenedor-imagen-catalogo.tema-dark .swatch-circulo,
.contenedor-imagen-catalogo.tema-midnight .swatch-circulo,
.contenedor-imagen-catalogo.tema-gamer .swatch-circulo,
.contenedor-imagen-catalogo.tema-sunset .swatch-circulo,
.contenedor-imagen-catalogo.tema-ocean .swatch-circulo,
.contenedor-imagen-catalogo.tema-forest .swatch-circulo,
.contenedor-imagen-catalogo.tema-royal .swatch-circulo,
.contenedor-imagen-catalogo.tema-nebula .swatch-circulo,
.contenedor-imagen-catalogo.tema-volcano .swatch-circulo,
.contenedor-imagen-catalogo.tema-synthwave .swatch-circulo,
.contenedor-imagen-catalogo.tema-cosmic .swatch-circulo,
.contenedor-imagen-catalogo.tema-zen .swatch-circulo,
body.tema-dark .swatch-circulo,
body.tema-midnight .swatch-circulo,
body.tema-gamer .swatch-circulo,
body.tema-sunset .swatch-circulo,
body.tema-ocean .swatch-circulo,
body.tema-forest .swatch-circulo,
body.tema-royal .swatch-circulo,
body.tema-nebula .swatch-circulo,
body.tema-volcano .swatch-circulo,
body.tema-synthwave .swatch-circulo,
body.tema-cosmic .swatch-circulo,
body.tema-zen .swatch-circulo,
[data-theme="dark"] .swatch-circulo {
    border-color: rgba(255, 255, 255, 0.25);
    background-color: #ffffff; /* Evita transparencias y recortes extraños de la miniatura */
}

.contenedor-imagen-catalogo.tema-dark .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-midnight .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-gamer .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-sunset .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-ocean .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-forest .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-royal .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-nebula .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-volcano .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-synthwave .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-cosmic .swatch-circulo:hover,
.contenedor-imagen-catalogo.tema-zen .swatch-circulo:hover,
body.tema-dark .swatch-circulo:hover,
body.tema-midnight .swatch-circulo:hover,
body.tema-gamer .swatch-circulo:hover,
body.tema-sunset .swatch-circulo:hover,
body.tema-ocean .swatch-circulo:hover,
body.tema-forest .swatch-circulo:hover,
body.tema-royal .swatch-circulo:hover,
body.tema-nebula .swatch-circulo:hover,
body.tema-volcano .swatch-circulo:hover,
body.tema-synthwave .swatch-circulo:hover,
body.tema-cosmic .swatch-circulo:hover,
body.tema-zen .swatch-circulo:hover,
[data-theme="dark"] .swatch-circulo:hover {
    border-color: #ffffff;
}

/* --- SWATCHES DE COLORES EN EL VISOR STORY-STREAM --- */
.swatches-colores-visor {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
    pointer-events: auto;
}
.swatch-circulo-visor {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background-color: #ffffff;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
.swatch-circulo-visor:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}
.swatch-circulo-visor.activo {
    transform: scale(1.1);
    border-color: #ffffff;
    box-shadow: 0 0 0 2.5px #ff7a00, 0 4px 12px rgba(0, 0, 0, 0.6);
}
.swatch-circulo-visor img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 1px; /* Espacio mínimo para que el calzado se vea lo más grande posible */
}

@media (max-width: 480px) {
    .swatches-colores-visor {
        gap: 10px;
        margin-top: 12px;
    }
    .swatch-circulo-visor {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   [👟 ELITE-STYLE] GALERÍA, SECTOR DE COLORES Y TALLAS TACHADAS (COMPARTIDO GLOBAL)
   ========================================================================== */
.galeria-elite-container {
    display: flex;
    gap: 15px;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.galeria-elite-angulos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 60px;
    max-height: 100%;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}
/* Estilo del scrollbar de ángulos */
.galeria-elite-angulos::-webkit-scrollbar {
    width: 4px;
}
.galeria-elite-angulos::-webkit-scrollbar-track {
    background: transparent;
}
.galeria-elite-angulos::-webkit-scrollbar-thumb {
    background: var(--color-borde);
    border-radius: 4px;
}
.angulo-elite-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-superficie);
    flex-shrink: 0;
    position: relative;
}
.angulo-elite-thumb.contenedor-imagen-catalogo {
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
}
.angulo-elite-thumb .contenedor-3d-premium {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.angulo-elite-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}
.angulo-elite-thumb.modo-original-sin-padding img,
.angulo-elite-thumb img.img-cover-total {
    padding: 0;
    object-fit: cover;
}
.angulo-elite-thumb:hover {
    border-color: var(--color-texto-suave);
    transform: translateY(-1px);
}
.angulo-elite-thumb.activo {
    border-color: var(--color-primario);
}

/* Gradientes y Temas Básicos para las Miniaturas */
.angulo-elite-thumb.tema-blanco-puro .contenedor-3d-premium { background: #ffffff; background-image: none; }
.angulo-elite-thumb.tema-light .contenedor-3d-premium { background: #f8fafc; background-image: none; }
.angulo-elite-thumb.tema-dark .contenedor-3d-premium { background: #121212; background-image: none; }
.angulo-elite-thumb.tema-silver .contenedor-3d-premium { background: #e5e7eb; background-image: none; }
.angulo-elite-thumb.tema-menta .contenedor-3d-premium { background: var(--grad-menta); }
.angulo-elite-thumb.tema-rosa .contenedor-3d-premium { background: var(--grad-rosa); }
.angulo-elite-thumb.tema-lavanda .contenedor-3d-premium { background: var(--grad-lavanda); }
.angulo-elite-thumb.tema-durazno .contenedor-3d-premium { background: var(--grad-durazno); }
.angulo-elite-thumb.tema-cielo .contenedor-3d-premium { background: var(--grad-cielo); }
.angulo-elite-thumb.tema-aurora .contenedor-3d-premium { background: var(--grad-aurora); }
.angulo-elite-thumb.tema-sunset .contenedor-3d-premium { background: var(--grad-sunset); }
.angulo-elite-thumb.tema-ocean .contenedor-3d-premium { background: var(--grad-ocean); }
.angulo-elite-thumb.tema-forest .contenedor-3d-premium { background: var(--grad-forest); }
.angulo-elite-thumb.tema-royal .contenedor-3d-premium { background: var(--grad-royal); }
.angulo-elite-thumb.tema-midnight .contenedor-3d-premium { background: var(--grad-midnight); }
.angulo-elite-thumb.tema-gold .contenedor-3d-premium { background: var(--grad-gold); }
.angulo-elite-thumb.tema-nebula .contenedor-3d-premium { background: var(--grad-nebula); }
.angulo-elite-thumb.tema-volcano .contenedor-3d-premium { background: var(--grad-volcano); }
.angulo-elite-thumb.tema-synthwave .contenedor-3d-premium { background: var(--grad-synthwave); }
.angulo-elite-thumb.tema-zen .contenedor-3d-premium { background: var(--grad-zen); }
.angulo-elite-thumb.tema-cosmic .contenedor-3d-premium { background: var(--grad-cosmic); }
.angulo-elite-thumb.tema-original .contenedor-3d-premium { background: transparent; background-image: none; }

.galeria-elite-principal {
    flex: 1;
    aspect-ratio: 1 / 1;
    max-height: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}
.galeria-elite-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.15s ease-out;
}
.galeria-elite-principal.modo-original-sin-padding img,
.galeria-elite-principal img.img-cover-total {
    padding: 0;
    object-fit: cover;
}

@media (max-width: 768px) {
    .galeria-elite-container {
        flex-direction: column-reverse;
        gap: 10px;
        height: auto;
    }
    .galeria-elite-angulos {
        flex-direction: row;
        width: 100%;
        height: auto;
        max-height: 60px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .angulo-elite-thumb {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }
    .galeria-elite-principal {
        flex: none;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        max-height: min(300px, 50dvh);
    }
    .galeria-elite-principal img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
}

/* ==========================================================================
   📱 OPTIMIZACIONES DE COMPORTAMIENTO NATIVO HÍBRIDO (iOS/Android Élite UI)
   ========================================================================== */

/* 1. Bloqueo de selección de texto en controles interactivos (Native App feel) */
button,
select,
input[type="button"],
input[type="submit"],
.btn,
.btn--nav,
.menu-item-config,
.tab-fondo,
.tab-categoria,
.chip-resumen,
.pildora-filtro,
.swatch-circulo,
.angulo-elite-thumb,
.drawer-close,
.btn-help-drawer,
.btn-back-drawer,
.btn-close-omni,
.indicador-plan,
.indicador-creditos,
.chatbot-toggle,
.btn-stock-adjust,
.btn-toggle-variantes {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* 2. Estimulación háptica y visual táctil (Active Tap Feedback) */
.btn:active, 
.btn--nav:active, 
.menu-item-config:active,
.btn-back-drawer:active,
.btn-help-drawer:active,
.drawer-close:active,
.chatbot-toggle:active,
.chip-resumen:active,
.tab-categoria:active,
.btn-stock-adjust:active,
.auth-showcase-card:active {
    transform: scale(0.96);
    opacity: 0.9;
    transition: transform 0.05s ease, opacity 0.05s ease;
}

/* 3. Aislamiento inteligente de overscroll en secciones de aplicación privada */
#seccion-app,
#seccion-auth,
.contenedor-principal {
    overscroll-behavior-y: contain;
}

/* 4. Momentum y scroll inercial a 60fps en contenedores independientes */
.modal-contenido,
.drawer-content,
.seccion-config-content,
.scroll-trafico,
.categorias-lista-admin,
.visor-elite-lateral,
.chat-mensajes,
.grid-productos-admin {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.tabla-inventario-wrapper {
    -webkit-overflow-scrolling: touch;
}