/* ========================================== */
                /* FASE 1 - CATÁLOGO Y SERVICIOS UI (PREMIUM) */
                /* ========================================== */
                .bloque-categoria-nexo {
                    margin-bottom: 25px;
                }

                .header-categoria-nexo {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 15px;
                    border-left: 4px solid #3b82f6;
                    padding-left: 10px;
                }

                .header-categoria-nexo h3 {
                    margin: 0;
                    font-size: 14px;
                    font-weight: 900;
                    color: var(--color-texto-sec);
                    letter-spacing: 0.5px;
                    opacity: 0.4;
                    text-transform: uppercase;
                }

                .header-servicios-nexo {
                    border-left-color: #10b981;
                }

                .badge-cantidad-nexo {
                    background: #3b82f6;
                    color: #fff;
                    padding: 4px 10px;
                    border-radius: 20px;
                    font-size: 11px;
                    font-weight: 800;
                    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
                }

                /* Grid de Productos */
                .grid-productos-nexo {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                    gap: 12px;
                }

                .tarjeta-prod-nexo {
                    background: var(--color-tarjeta);
                    border-radius: 12px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    border: 1px solid var(--color-borde);
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
                }

                .img-container-nexo {
                    width: 100%;
                    height: 140px;
                    background: var(--color-img-bg);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                }

                .img-container-nexo img {
                    max-width: 90%;
                    max-height: 90%;
                    object-fit: contain;
                    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
                }

                .info-prod-nexo {
                    padding: 12px;
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    flex-grow: 1;
                }

                .truncate-text-nexo {
                    margin: 0;
                    font-size: 14px;
                    font-weight: 800;
                    color: var(--color-texto);
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    line-height: 1.2;
                    min-height: 33px;
                }

                .precio-prod-nexo {
                    margin: 0 0 8px 0;
                    font-size: 16px;
                    font-weight: 900;
                    color: var(--color-texto);
                }

                .btn-nexo-add {
                    margin-top: auto;
                    background: #3b82f6;
                    color: #fff;
                    border: none;
                    padding: 10px;
                    border-radius: 8px;
                    font-weight: 800;
                    font-size: 13px;
                    cursor: pointer;
                    transition: 0.2s;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                }

                .btn-nexo-add:active {
                    transform: scale(0.95);
                }

                /* Lista de Servicios */
                .lista-servicios-nexo {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }

                .tarjeta-servicio-nexo {
                    background: var(--color-tarjeta);
                    border-radius: 12px;
                    padding: 12px 15px;
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    cursor: pointer;
                    transition: 0.2s;
                    border: 1px solid var(--color-borde);
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
                }

                .tarjeta-servicio-nexo:active {
                    transform: scale(0.98);
                    background: var(--color-hover);
                }

                .avatar-servicio-nexo {
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                    object-fit: cover;
                    border: 2px solid var(--color-fondo);
                }

                .info-servicio-nexo {
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                }

                .info-servicio-nexo h4 {
                    margin: 0;
                    font-size: 15px;
                    color: var(--color-texto);
                    font-weight: 900;
                    text-transform: uppercase;
                }

                .info-servicio-nexo p {
                    margin: 0;
                    font-size: 12px;
                    color: var(--color-texto-sec);
                    font-weight: 600;
                }

                .icon-arrow-nexo {
                    color: var(--color-texto-sec);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                /* ========================================== */
                /* FASE 1 - BANNERS DE CATEGORÍAS (CARTELES)  */
                /* ========================================== */
                .grid-categorias-root {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                }

                .banner-categoria-nexo {
                    position: relative;
                    height: 130px;
                    border-radius: 18px;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    cursor: pointer;
                    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(255, 255, 255, 0.05);
                    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .banner-categoria-nexo:active {
                    transform: scale(0.97);
                }

                .banner-categoria-nexo .bg-svg {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    background-size: 100px;
                    background-position: center;
                    pointer-events: none;
                }

                .banner-categoria-nexo .overlay {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
                    z-index: 2;
                    pointer-events: none;
                }

                .banner-categoria-nexo .content {
                    position: relative;
                    z-index: 3;
                    text-align: center;
                    color: white;
                    padding: 0 20px;
                    width: 100%;
                    box-sizing: border-box;
                    pointer-events: none;
                }

                .banner-categoria-nexo h3 {
                    margin: 0;
                    font-size: 26px;
                    font-weight: 900;
                    letter-spacing: -0.5px;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
                    text-transform: uppercase;
                }

                .banner-categoria-nexo p {
                    margin: 4px 0 0 0;
                    font-size: 13px;
                    font-weight: 700;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
                    color: rgba(255, 255, 255, 0.9);
                }

                .btn-volver-cat {
                    background: var(--color-tarjeta);
                    color: var(--color-texto);
                    border: 1px solid var(--color-borde);
                    padding: 10px 18px;
                    border-radius: 12px;
                    font-weight: 800;
                    font-size: 14px;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    margin-bottom: 20px;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
                    transition: 0.2s;
                }

                .btn-volver-cat:active {
                    transform: scale(0.96);
                }


                /* ========================================================
                                                    1. VARIABLES GLOBALES Y TEMAS (CLARO / OSCURO)
                                                    ======================================================== */
                :root {
                    --color-fondo: #f4f7f6;
                    --color-tarjeta: #ffffff;
                    --color-texto: #1e293b;
                    --color-texto-sec: #64748b;
                    --color-acento: #10b981;
                    --color-borde: #e2e8f0;
                    --color-img-bg: #ffffff;
                    --color-hover: #f1f5f9;
                    --bg-header: #111111;
                    --color-hamburguesa: #ffffff;
                    --bg-input-header: #ffffff;
                }

                :root[data-theme="dark"] {
                    --color-fondo: #121212;
                    --color-tarjeta: #1e1e1e;
                    --color-texto: #f4f4f5;
                    --color-texto-sec: #a1a1aa;
                    --color-acento: #10b981;
                    --color-borde: #2d2d2d;
                    --color-img-bg: #18181b;
                    --color-hover: #27272a;
                    --bg-header: #1e1e1e;
                    --color-hamburguesa: #ffffff;
                    --bg-input-header: #2d2d2d;
                }

                /* ========================================================
                                                    2. CONFIGURACIÓN BASE Y CUERPO (BODY)
                                                    ======================================================== */
                html {
                    background-color: var(--color-app-fondo, var(--color-fondo)) !important;
                    min-height: 100vh;
                }

                body.modo-inmersivo {
                    padding-bottom: 0 !important;
                }

                body {
                    font-family: 'Inter', sans-serif;
                    /* 🔥 FIX: Variable global para pintar toda la app */
                    background-color: var(--color-app-fondo, var(--color-fondo));
                    transition: background-color 0.3s ease;
                    color: var(--color-texto);
                    margin: 0;
                    padding-top: calc(135px + env(safe-area-inset-top)) !important;
                    padding-bottom: calc(75px + env(safe-area-inset-bottom)) !important;
                    /* 🔥 FIX: Bajamos de 95px a 75px al sacar el colchón de Android */
                    /* Agregamos transición suave para cuando entra y sale de un local */
                    transition: background-color 0.3s ease;
                    /* 🛡️ BLINDAJE NATIVO: Evitamos que el usuario seleccione texto o le salga el menú de copiar */
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;

                }

                .contenedor {
                    max-width: 1200px;
                    margin: 20px auto;
                    padding: 0 15px;
                }

                /* ========================================================
                                                    3. CABECERA SUPERIOR (TOP BAR Y SIDEBAR)
                                                    ======================================================== */
                .app-top-bar {
                    background-color: var(--bg-header) !important;
                    height: auto !important;
                    min-height: calc(120px + env(safe-area-inset-top)) !important;
                    padding: calc(15px + env(safe-area-inset-top)) 15px 25px 15px !important;
                    display: flex !important;
                    flex-direction: column !important;
                    /* COLUMNA: 2 PISOS EN CELULAR */
                    gap: 15px;
                    position: fixed !important;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100% !important;
                    z-index: 1000 !important;
                    border-bottom-left-radius: 24px;
                    border-bottom-right-radius: 24px;
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                    box-sizing: border-box !important;
                    transition: background-color 0.3s;
                }

                .top-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    position: relative;
                }

                .btn-menu {
                    background: none;
                    border: none;
                    color: var(--color-hamburguesa);
                    cursor: pointer;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    outline: none;
                    -webkit-tap-highlight-color: transparent;
                }

                .logo {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    align-items: center;
                    outline: none;
                    -webkit-tap-highlight-color: transparent;
                }

                .logo img {
                    height: 35px;
                    object-fit: contain;
                }

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

                .search-container {
                    width: 100%;
                    position: relative;
                    display: flex;
                    align-items: center;
                }

                .search-icon {
                    position: absolute;
                    left: 15px;
                    font-size: 16px;
                    color: #64748b;
                }

                .search-container input {
                    width: 100%;
                    background: var(--bg-input-header);
                    border: none;
                    border-radius: 50px;
                    padding: 14px 15px 14px 40px;
                    color: var(--color-texto);
                    font-size: 15px;
                    outline: none;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                }

                #user-info {
                    display: none;
                    align-items: center;
                    gap: 10px;
                    font-weight: 600;
                    font-size: 13px;
                    cursor: pointer;
                    padding: 0;
                    transition: 0.2s;
                }

                #user-info img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    border: 2px solid var(--color-acento);
                    object-fit: cover;
                }

                /* Estilos del Sidebar - FIX: Anclaje absoluto para evitar margen fantasma en Android */
                #sidebar-overlay {
                    display: none;
                    position: fixed;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: rgba(0, 0, 0, 0.6);
                    z-index: 10001;
                    backdrop-filter: blur(2px);
                }

                #sidebar {
                    position: fixed;
                    top: 0;
                    bottom: 0;
                    left: -320px;
                    width: 280px;
                    max-width: 80%;
                    background: var(--color-tarjeta);
                    z-index: 10002;
                    transition: 0.3s ease-in-out;
                    padding: calc(30px + env(safe-area-inset-top)) 20px 20px 20px;
                    box-sizing: border-box;
                    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
                    display: flex;
                    flex-direction: column;
                }

                /* 🔥 FIX ESCRITORIO: Logo a la izquierda, Buscador al centro, Perfil a la derecha */
                @media (min-width: 1024px) {
                    body {
                        padding-top: 100px !important;
                    }

                    /* Cabecera Estilo FB */
                    .app-top-bar {
                        flex-direction: row !important;
                        height: 65px !important;
                        min-height: 65px !important;
                        padding: 0 25px !important;
                        border-radius: 0 !important;
                        z-index: 10005 !important;
                        /* 🔥 Cabecera por encima de todo en PC */
                    }

                    /* Tiramos el Menú y el Logo a la izquierda */
                    .top-row {
                        width: 100% !important;
                        justify-content: flex-start !important;
                        gap: 20px;
                    }

                    .logo {
                        position: relative !important;
                        left: auto !important;
                        transform: none !important;
                        margin: 0 !important;
                    }

                    /* Empujamos la foto de perfil hacia la derecha del todo */
                    .header-actions {
                        margin-left: auto !important;
                    }

                    /* Buscador anclado al lado del Logo (como en Facebook) */
                    .search-container {
                        position: absolute !important;
                        width: 260px !important;
                        /* Lo achicamos un pelito para que no choque con el centro */
                        left: 290px !important;
                        /* 🔥 Distancia a prueba de balas, bien lejos del logo */
                        top: 50% !important;
                        transform: translateY(-50%) !important;
                        z-index: 10006 !important;
                    }

                    .search-icon {
                        top: 50%;
                        transform: translateY(-50%);
                        display: flex;
                        align-items: center;
                    }

                    .search-container input {
                        box-sizing: border-box !important;
                        /* 🔥 Evita que se deforme el ancho */
                    }
                }

           /* 📱 BARRA BASE CON CUNA MATEMÁTICA */
                .bottom-nav-nexo {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    box-sizing: border-box;
                    height: calc(70px + env(safe-area-inset-bottom));
                    
                    /* 🔥 EL SECRETO: Una cuna asimétrica hacia la derecha.
                       Centro a 65px del borde, subido 10px para matar las puntas filosas */
                    background: radial-gradient(circle at calc(100% - 65px) -10px, transparent 44px, var(--color-tarjeta) 45px) !important;
                    
                    /* 🔥 TUS RADIUS: Puntas redondeadas como querías */
                    border-top-left-radius: 20px;
                    border-top-right-radius: 20px;
                    
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    z-index: 10000;
                    padding-bottom: env(safe-area-inset-bottom);
                    filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, 0.08));
                }

                /* 🎛️ CONTENEDOR DE LOS ÍCONOS (Ocupa la izquierda) */
                .nav-icons-left {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    flex-grow: 1;
                    /* 🔥 Margen vital para que los íconos no se caigan al pozo del carrito */
                    padding-right: 120px; 
                    height: 100%;
                }

                .nav-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: var(--color-texto-sec);
                    cursor: pointer;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    -webkit-tap-highlight-color: transparent;
                    opacity: 0.5; /* Íconos apagados por defecto */
                }

                .nav-item.activo {
                    color: var(--color-app-acento, var(--color-acento));
                    opacity: 1; /* Prende el ícono activo */
                }

                .nav-icon {
                    width: 26px;
                    height: 26px;
                    display: block;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .nav-item.activo .nav-icon {
                    transform: translateY(-2px); /* Pequeño salto del ícono activo */
                }

                /* 🛒 CARRITO SUSPENDIDO A LA DERECHA */
                .cart-fixed-right {
                    position: absolute;
                    /* 🔥 COORDENADAS EXACTAS para levitar en el centro del hueco */
                    right: 36px; 
                    top: -39px; 
                    z-index: 10005;
                    cursor: pointer;
                    -webkit-tap-highlight-color: transparent;
                }

                .cart-btn-flotante {
                    background-color: var(--color-app-acento, var(--color-acento));
                    color: white;
                    width: 58px;
                    height: 58px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-shadow: 0 6px 15px rgba(16,185,129,0.35);
                    transition: transform 0.2s ease, box-shadow 0.2s ease;
                    position: relative;
                }

                .cart-btn-flotante:active {
                    transform: scale(0.93);
                    box-shadow: 0 3px 10px rgba(16,185,129,0.25);
                }

                /* 🔴 NOTIFICACIÓN DEL CARRITO */
                .badge-nav {
                    position: absolute;
                    top: -2px;
                    right: -2px;
                    background: #ef4444;
                    color: white;
                    font-size: 11px;
                    font-weight: 900;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 2px solid var(--color-fondo);
                    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                }
        

               
           
                /* ========================================================
                                                        5. GRILLA DE PRODUCTOS Y TARJETAS (VERSIÓN COMPACTA PRO)
                                                        ======================================================== */
                .grilla-productos {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                    gap: 12px;
                    padding: 0 5px;
                }

                @media (max-width: 600px) {

                    /* En celulares pegamos más las tarjetas y reducimos el hueco */
                    .grilla-productos {
                        grid-template-columns: repeat(2, 1fr);
                        gap: 8px;
                    }
                }

                /* 🔥 FIX ESCRITORIO: Grilla de 3 columnas para el menú de Comidas */
                .grilla-template-comidas {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                @media (min-width: 1024px) {
                    .grilla-template-comidas {
                        grid-template-columns: repeat(3, 1fr);
                        gap: 20px;
                        padding: 0 5px;
                    }
                }

                /* 🔥 Grilla exclusiva para NEXO RED (Comparte el diseño pero vive aparte) */

                /* 🔥 FIX ESCRITORIO: Grilla para Template 3 (Comidas) */
                .grilla-template-3 {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 15px;
                }

                @media (min-width: 1024px) {
                    .grilla-template-3 {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }

                /* 🔥 Grilla exclusiva para NEXO RED (Comparte el diseño pero vive aparte) */
                .grilla-red {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                    gap: 12px;
                    padding: 0;
                }

                @media (max-width: 600px) {
                    .grilla-red {
                        grid-template-columns: repeat(2, 1fr);
                        gap: 8px;
                    }
                }

                /* 🔥 FASE 4: MODAL DE DETALLE DE PUBLICACIÓN - REDISEÑO PREMIUM */
                #modal-detalle-red .modal-contenido {
                    background: var(--color-tarjeta) !important;
                    border-radius: 0 !important;
                    /* Pantalla completa en celu */
                    padding: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    /* Pantalla completa en celu */
                    max-width: 100% !important;
                    border: none !important;
                    overflow-y: auto !important;
                    box-shadow: none !important;
                    display: flex;
                    flex-direction: column;
                }

                @media (min-width: 1024px) {
                    #modal-detalle-red .modal-contenido {
                        width: 90% !important;
                        max-width: 450px !important;
                        height: 90vh !important;
                        max-height: 800px !important;
                        border-radius: 20px !important;
                        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3) !important;
                        margin: auto !important;
                    }
                }

                #modal-detalle-red .btn-cerrar-sutil {
                    position: absolute;
                    right: 15px;
                    top: calc(15px + env(safe-area-inset-top));
                    /* Evita el flequillo del iPhone */
                    background: rgba(0, 0, 0, 0.6);
                    border: none;
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    font-size: 20px;
                    color: white;
                    cursor: pointer;
                    z-index: 100;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    backdrop-filter: blur(10px);
                }

                /* Ajuste estético del precio en las tarjetas */
                .precio-grande {
                    font-size: 18px !important;
                    font-weight: 900;
                    color: var(--color-acento);
                    margin: 0;
                }

                .moneda-chica {
                    font-size: 11px !important;
                    font-weight: 700;
                    color: var(--color-texto-sec);
                }

                #modal-detalle-red .btn-cerrar-sutil:hover {
                    background: rgba(0, 0, 0, 0.7);
                }

                #modal-detalle-red #detalle-red-foto-contenedor {
                    width: 100%;
                    height: 280px;
                    background: var(--color-hover);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    display: none;
                    /* Oculta la barra de scroll en Chrome/Safari */
                }

                /* Fondo con degradado sutil para la imagen */
                #modal-detalle-red #detalle-red-foto-contenedor::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 50%;
                    background: linear-gradient(180deg, rgba(var(--color-tarjeta-rgb), 0) 0%, rgba(var(--color-tarjeta-rgb), 1) 100%);
                    pointer-events: none;
                }

                #modal-detalle-red #detalle-red-foto {
                    max-width: 90%;
                    max-height: 90%;
                    object-fit: contain;
                    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.15));
                    z-index: 2;
                }

                #modal-detalle-red .detalle-info-bloque {
                    padding: 25px;
                    text-align: left;
                }

                #modal-detalle-red #detalle-red-titulo {
                    margin: 0;
                    font-size: 22px;
                    color: var(--color-texto);
                    font-weight: 800;
                    line-height: 1.2;
                    margin-bottom: 5px;
                }

                #modal-detalle-red #detalle-red-precio {
                    font-size: 32px;
                    font-weight: 900;
                    color: var(--color-acento);
                    margin-bottom: 25px;
                    letter-spacing: -1px;
                }

                #modal-detalle-red .operacion-caja {
                    background: var(--color-fondo);
                    border: none;
                    padding: 18px;
                    border-radius: 18px;
                    margin-bottom: 25px;
                }

                #modal-detalle-red .operacion-subtitulo {
                    font-size: 11px;
                    font-weight: bold;
                    color: var(--color-texto-sec);
                    margin-bottom: 12px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }

                #modal-detalle-red .operacion-item {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    font-size: 14px;
                    color: var(--color-texto);
                    margin-bottom: 8px;
                }

                #modal-detalle-red .operacion-item b {
                    font-weight: 700;
                }

                #modal-detalle-red .icono-svg-red {
                    width: 20px;
                    height: 20px;
                    color: var(--color-acento);
                    flex-shrink: 0;
                }

                #modal-detalle-red .btn-nexo-premium {
                    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
                    margin-top: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 12px;
                    font-weight: 700;
                    border-radius: 16px;
                    padding: 16px;
                }

                /* 🔥 FASE 5: Contador, Puntos Táctiles y Zoom */
                .feria-contador {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    gap: 8px;
                    font-size: 13px;
                    font-weight: 600;
                    color: var(--color-texto-sec);
                    margin-bottom: 25px;
                    padding: 10px 18px;
                    background: var(--color-fondo);
                    border-radius: 100px;
                    border: 1px solid var(--color-borde);
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
                    user-select: none;
                }

                #detalle-red-dots .dot-slider {
                    cursor: pointer;
                }

                @media (min-width: 768px) {
                    #detalle-red-dots .dot-slider {
                        width: 10px !important;
                        height: 10px !important;
                    }
                }

                #detalle-red-slider img {
                    cursor: zoom-in;
                }

                /* 🔥 Flechas del Slider (Solo Desktop) */
                .slider-arrow-red {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    background: rgba(0, 0, 0, 0.6);
                    color: white;
                    border: none;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                    z-index: 20;
                    display: none;
                    align-items: center;
                    justify-content: center;
                    backdrop-filter: blur(4px);
                    transition: 0.2s;
                }

                .slider-arrow-red:hover {
                    background: rgba(0, 0, 0, 0.9);
                }

                .slider-arrow-red.left {
                    left: 10px;
                }

                .slider-arrow-red.right {
                    right: 10px;
                }

                @media (min-width: 1024px) {
                    .slider-arrow-red {
                        display: flex;
                    }
                }

                #modal-zoom-foto {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.95);
                    z-index: 10020;
                    align-items: center;
                    justify-content: center;
                    cursor: zoom-out;
                    backdrop-filter: blur(10px);
                }

                #modal-zoom-foto img {
                    max-width: 95%;
                    max-height: 95%;
                    object-fit: contain;
                    cursor: zoom-out;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
                }

                

                /* 🔥 FOTOS Y TARJETAS UNIFICADAS (140px altura ideal) */
                .producto-card {
                    border-radius: 8px;
                    /* Bordes un poco más sutiles, menos redondos */
                    border: 1px solid var(--color-borde);
                    background: var(--color-tarjeta);
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                }

                .img-placeholder {
                    height: 140px !important;
                    background-color: var(--color-img-bg);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    border-radius: 8px 8px 0 0;
                    overflow: hidden;
                    flex-shrink: 0;
                }

                .img-placeholder img {
                    max-width: 90%;
                    max-height: 90%;
                }

                /* 🔥 Para la feria NEXO Red (Sobrescribe para ocupar todo el fondo sin afectar la Tienda) */
                .img-placeholder.img-red {
                    background-color: #e2e8f0 !important;
                }

                .img-placeholder.img-red img {
                    width: 100% !important;
                    height: 100% !important;
                    max-width: 100% !important;
                    max-height: 100% !important;
                    object-fit: cover !important;
                    filter: none !important;
                }

                /* Rellenos y Textos de las Tarjetas */
                .producto-info {
                    padding: 12px !important;
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }

                .producto-info p {
                    font-size: 13px !important;
                    margin-bottom: 4px !important;
                    line-height: 1.2;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                /* Precio corregido para no romperse (ARS chico, número grande) */
                .producto-precio {
                    font-size: 16px !important;
                    font-weight: 900;
                    color: var(--color-acento);
                    margin: 4px 0 8px 0 !important;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .moneda-chica {
                    font-size: 10px;
                    font-weight: 700;
                    color: var(--color-texto-sec);
                    margin-right: 2px;
                }

                /* Botón de agregar con menos "grasa" */
                /* Botón de agregar con menos "grasa" */
                .btn-agregar {
                    background: transparent !important;
                    /* 🔥 FIX: Lo hacemos transparente para que adapte el color del comercio */
                    color: var(--color-acento) !important;
                    border: 1px solid var(--color-acento) !important;
                    padding: 6px !important;
                    border-radius: 6px !important;
                    font-weight: 800 !important;
                    font-size: 11px !important;
                    transition: 0.2s !important;
                    cursor: pointer;
                    width: 100%;
                }

                .btn-agregar:hover {
                    background: var(--color-acento) !important;
                    color: white !important;
                }


                
                /* Corazón más sutil */
                .fav-btn {
                    position: absolute;
                    top: 6px;
                    right: 6px;
                    background: rgba(255, 255, 255, 0.9);
                    border: none;
                    border-radius: 50%;
                    width: 28px;
                    height: 28px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                    z-index: 10;
                }

                /* ========================================================
                                                        6. BURBUJAS DE COMERCIOS
                                                        ======================================================== */
                .burbujas-container {
                    display: flex;
                    gap: 15px;
                    overflow-x: auto;
                    padding: 10px 0 20px 0;
                    scroll-behavior: smooth;
                    margin-bottom: 10px;
                }

                .burbujas-container::-webkit-scrollbar {
                    display: none;
                }

                .burbuja {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    min-width: 70px;
                    cursor: pointer;
                    transition: 0.2s;
                    opacity: 0.6;
                }

                .burbuja.activa {
                    opacity: 1;
                    transform: scale(1.05);
                }

                .burbuja-img {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    padding: 3px;
                    border: 2px solid transparent;
                    object-fit: cover;
                    background: white;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                }

                .burbuja.activa .burbuja-img {
                    border-color: var(--color-acento);
                }

                .burbuja span {
                    font-size: 11px;
                    font-weight: 700;
                    margin-top: 5px;
                    text-align: center;
                    color: var(--color-texto);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 70px;
                }


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

                                                    7. MODALES, PERFIL Y BOTONES GLOBALES

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

                /* 🔥 FIX 1: Eliminamos las alturas para forzar el estiramiento mediante el anclaje top y bottom */

                .modal {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.6);
                    z-index: 10005;
                    justify-content: center;
                    align-items: center;
                    backdrop-filter: blur(4px);
                }

                .modal-contenido {
                    background: var(--color-tarjeta) !important;
                    color: var(--color-texto);
                    width: 90%;
                    max-width: 400px;
                    padding: 25px;
                    border-radius: 20px;
                    max-height: 85vh;
                    overflow-y: auto;
                    text-align: center;
                    border: 1px solid var(--color-borde);
                    position: relative;
                }



                .pedido-card,
                .btn-perfil-opcion,
                .input-nexo {
                    background: var(--color-fondo) !important;
                    color: var(--color-texto) !important;
                    border: 1px solid var(--color-borde) !important;
                }

                .btn-perfil-opcion {
                    width: 100%;
                    text-align: left;
                    padding: 12px;
                    border-radius: 12px;
                    font-size: 15px;
                    font-weight: 600;
                    cursor: pointer;
                    transition: background-color 0.2s ease !important;
                    margin-bottom: 8px;
                    border: 1px solid transparent !important;
                }

                .btn-perfil-opcion:hover {
                    background: var(--color-hover) !important;
                    border: 1px solid var(--color-borde) !important;
                }



                .input-nexo {
                    width: 100%;
                    padding: 12px;
                    margin: 8px 0;
                    border-radius: 10px;
                    font-size: 16px;
                    box-sizing: border-box;
                }

                .btn-nexo {
                    background: var(--color-acento);
                    color: white;
                    border: none;
                    width: 100%;
                    padding: 15px;
                    border-radius: 10px;
                    font-weight: 800;
                    cursor: pointer;
                    margin-top: 10px;
                    transition: 0.2s;
                }

                .btn-nexo:hover {
                    opacity: 0.9;
                    transform: scale(0.98);
                }

                .estado-pill {
                    padding: 4px 8px;
                    border-radius: 6px;
                    font-size: 11px;
                    font-weight: 800;
                    text-transform: uppercase;
                }



                #modalPerfil {
                    align-items: center !important;
                    justify-content: center !important;
                    padding: 0 !important;
                }

                #modalPerfil .modal-contenido {
                    position: relative !important;
                    top: auto !important;
                    right: auto !important;
                    margin: auto !important;
                    width: 90% !important;
                    max-width: 320px !important;
                    border-radius: 28px !important;
                    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
                    border: 1px solid var(--color-borde) !important;
                }

                /* 🔥 FIX DEFINITIVO (IOS + ANDROID): Eliminamos height para que el anclaje absoluto estire la caja a la perfección contra el marco de la pantalla */

                .modal-fullscreen {
                    position: absolute !important;
                    top: 0 !important;
                    bottom: 0 !important;
                    left: 0 !important;
                    right: 0 !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    height: 100% !important;
                    max-height: 100% !important;
                    border-radius: 0 !important;
                    border: none !important;
                    display: flex !important;
                    flex-direction: column !important;
                    padding: 0 !important;
                    background: var(--color-fondo) !important;
                    margin: 0 !important;
                }



                /* 📱 FIX PWA iOS: Empuja hacia abajo cualquier cabecera que esté como primer elemento en pantallas completas */

                .modal-fullscreen>div:nth-of-type(1),

                .header-app {

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

                    box-sizing: border-box !important;

                }



                .checkout-header {
                    flex-shrink: 0;
                    padding: calc(15px + env(safe-area-inset-top)) 20px 15px 20px !important;
                    background: var(--color-tarjeta);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid var(--color-borde);
                }



                /* 🛡️ FIX AULA: Asegura que el menú de selección de rol tampoco quede aplastado contra el reloj */

                #pantalla-aula-seleccion {

                    padding-top: calc(20px + env(safe-area-inset-top)) !important;

                }



                /* 🚀 EL GRAN FIX: Compensamos el margen de las pantallas del Aula para que el contenido baje al mismo ritmo que la cabecera */

                #modal-detalle-materia-alumno,
                #modal-examenes-alumno,
                #modal-rendir-examen-alumno,

                #modal-detalle-materia-profe,
                #modal-lista-configs-grupos,
                #panel-lista-tareas-profe,

                #panel-ver-asistencia-profe,
                #modal-tinder-asistencia,
                #modal-historial-clases,

                #modal-editor-asistencia-clase,
                #modal-modulo-examenes,
                #modal-crear-examen,

                #modal-historial-examenes,
                #modal-vigilancia-examen,
                #panel-notas-profe,

                #modal-tinder-notas,
                #modal-config-notas,
                #vista-profe-materias,
                #vista-profe-clase,

                #modal-notas-examen-sync,
                #contenedor-espia-rendir,
                #contenedor-revision-preguntas {

                    padding-top: calc(85px + env(safe-area-inset-top)) !important;

                }

                /* ... acá sigue .caja-opciones normal ... */



                .caja-opciones {
                    background: var(--color-tarjeta);
                    border-radius: 16px;
                    padding: 15px;
                    margin-bottom: 20px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
                    border: 1px solid var(--color-borde);
                }

                .caja-titulo {
                    font-size: 16px;
                    font-weight: 800;
                    margin: 0 0 15px 0;
                    color: var(--color-texto);
                }

                .radio-premium {
                    display: flex;
                    align-items: center;
                    padding: 12px;
                    border-radius: 12px;
                    border: 1px solid var(--color-borde);
                    margin-bottom: 10px;
                    cursor: pointer;
                    transition: 0.2s;
                }

                .radio-premium input[type="radio"] {
                    accent-color: var(--color-acento);
                    width: 20px;
                    height: 20px;
                    margin-right: 12px;
                }

                .radio-premium:has(input[type="radio"]:checked) {
                    border-color: var(--color-acento);
                    background: rgba(16, 185, 129, 0.05);
                }

                .radio-premium span {
                    font-size: 15px;
                    font-weight: 600;
                    color: var(--color-texto);
                }



                /* Estilos Tarjetas Cross-Sell (Otras personas llevaron) */



                /* 🔥 FIX ESCRITORIO: Barra oculta en celus, finita y elegante en PC */

                @media (max-width: 1023px) {

                    #cross-sell-container::-webkit-scrollbar {
                        display: none;
                    }

                }

                /* 🔥 FIX ESCRITORIO: Todo en una sola línea recta y limpia */

                @media (min-width: 1024px) {

                    body {
                        padding-top: 100px !important;
                    }

                    .app-top-bar {

                        flex-direction: row !important;
                        /* Vuelve a ser 1 sola fila */

                        height: 75px !important;

                        min-height: 75px !important;

                        padding: 0 40px !important;

                        border-radius: 0 !important;
                        /* Le sacamos la curva en PC */

                    }

                    .top-row {
                        width: 100% !important;
                        justify-content: space-between !important;
                    }

                    .logo {
                        position: relative !important;
                        left: auto !important;
                        transform: none !important;
                        margin-left: 20px;
                    }



                    /* El buscador se clava en el centro de la pantalla */

                    .search-container {

                        position: absolute !important;

                        width: 40% !important;

                        max-width: 500px !important;

                        left: 50% !important;

                        top: 50% !important;

                        transform: translate(-50%, -50%) !important;

                    }

                    .search-icon {
                        top: 50%;
                        transform: translateY(-50%);
                    }

                }



                .cross-card {
                    min-width: 130px;
                    background: var(--color-tarjeta);
                    border-radius: 12px;
                    padding: 10px;
                    border: 1px solid var(--color-borde);
                    flex-shrink: 0;
                    position: relative;
                }

                .cross-card img {
                    width: 100%;
                    height: 80px;
                    object-fit: contain;
                    margin-bottom: 8px;
                }

                .cross-card p {
                    font-size: 12px;
                    margin: 0 0 5px 0;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                .cross-card b {
                    font-size: 14px;
                    color: var(--color-texto);
                }

                .btn-cross-add {
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                    background: var(--color-hover);
                    border: 1px solid var(--color-borde);
                    border-radius: 50%;
                    width: 28px;
                    height: 28px;
                    font-weight: bold;
                    cursor: pointer;
                    color: var(--color-texto);
                }



                /* 🔥 ARREGLO PARA ESCRITORIO */

                @media (min-width: 1024px) {

                    .modal-fullscreen {

                        max-width: 450px !important;

                        height: 90vh !important;

                        max-height: 800px !important;

                        border-radius: 20px !important;

                        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3) !important;

                        margin: auto !important;
                        /* 🔥 Centra el modal en la pantalla */

                    }

                    .checkout-header {

                        padding-top: 15px !important;
                        /* En la PC sacamos el espacio del flequillo */

                    }





                }

                /* ========================================================
                                                        8. LIMPIEZA PROFUNDA DE MODALES (Forzar variables sobre JS)
                                                        ======================================================== */
                .modal-contenido div[style*="background: #f9f9f9"],
                .modal-contenido div[style*="background: #e0f2fb"],
                .modal-contenido div[style*="background: white"],
                .modal-contenido div[style*="background:#fff"],
                #opciones-entrega,
                #opciones-pago {
                    background: var(--color-fondo) !important;
                    border-color: var(--color-borde) !important;
                    color: var(--color-texto) !important;
                }

                .modal-contenido [style*="color: #333"],
                .modal-contenido [style*="color:#333"],
                .modal-contenido [style*="color: #666"],
                .modal-contenido [style*="color:#666"],
                .modal-contenido b,
                .modal-contenido td {
                    color: var(--color-texto) !important;
                }

                .modal-contenido [style*="border-bottom"],
                .modal-contenido table,
                .modal-contenido th,
                .modal-contenido td {
                    border-color: var(--color-borde) !important;
                }

                .modal-contenido button[style*="background:#f4f4f4"] {
                    background: var(--color-hover) !important;
                    color: var(--color-texto) !important;
                    border: 1px solid var(--color-borde) !important;
                }

                .modal-contenido button[style*="background: #3b82f6"],
                .modal-contenido button[style*="background:#00a650"] {
                    color: white !important;
                    border: none !important;
                }

                #total-carrito div[style*="color:#666"] {
                    color: var(--color-texto-sec) !important;
                }

                #total-carrito div[style*="font-size:22px"] {
                    color: var(--color-texto) !important;
                }

                /* ========================================================
                                                    9. COMPORTAMIENTO RESPONSIVO (PC vs CELULAR)
                                                    ======================================================== */
                /* Ocultos en celular por defecto */
                .desktop-nav-icons {
                    display: none;
                }

                /* Botón verde flotante (visible por defecto) */
                .btn-flotante {
                    display: block !important;
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    background: var(--color-acento);
                    color: white;
                    border: none;
                    border-radius: 50px;
                    padding: 15px 25px;
                    font-weight: 800;
                    box-shadow: 0 4px 15px rgba(0, 166, 80, 0.4);
                    cursor: pointer;
                    z-index: 1000;
                }

                .cart-desktop {
                    display: none;
                    position: relative;
                    cursor: pointer;
                    color: var(--color-texto-sec);
                    transition: 0.2s;
                    margin-right: 10px;
                }

                .cart-desktop:hover {
                    color: var(--color-acento);
                }

                .cart-desktop svg {
                    width: 24px;
                    height: 24px;
                }

                .badge-desktop {
                    position: absolute;
                    top: -6px;
                    right: -10px;
                    background: var(--color-acento);
                    color: white;
                    font-size: 10px;
                    font-weight: bold;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                /* MODO CELULAR */
                @media (max-width: 1023px) {
                    .btn-flotante {
                        display: none !important;
                    }

                    #cross-sell-container::-webkit-scrollbar {
                        display: none;
                    }
                }

                /* 🔥 MODO PC (Estilo Facebook Premium - Blindado) */
                @media (min-width: 1024px) {
                    .bottom-nav {
                        display: none !important;
                    }

                    .btn-flotante {
                        display: block !important;
                    }

                    body {
                        padding-bottom: 40px !important;
                        padding-top: 90px !important;
                    }

                    .burbujas-container {
                        justify-content: center !important;
                    }

                    /* Cabecera Base */
                    .app-top-bar {
                        display: block !important;
                        height: 65px !important;
                        min-height: 65px !important;
                        padding: 0 !important;
                        border-radius: 0 !important;
                        z-index: 10005 !important;
                    }

                    .top-row {
                        display: block !important;
                        width: 100% !important;
                        height: 100% !important;
                        position: relative !important;
                    }

                    .btn-menu {
                        display: none !important;
                    }

                    /* 1. Logo Centrado sobre el Sidebar */
                    .logo-wrapper {
                        position: absolute !important;
                        left: 140px !important;
                        /* 🔥 La mitad exacta de los 280px del sidebar */
                        top: 50% !important;
                        transform: translate(-50%, -50%) !important;
                        /* Lo centra perfectamente en su propio eje */
                    }

                    /* 2. Buscador Expandible (Lupa) Alineado al Sidebar */
                    .search-container {
                        position: absolute !important;
                        left: 310px !important;
                        /* 🔥 Alineado con el inicio del catálogo (fuera del sidebar) */
                        top: 50% !important;
                        transform: translateY(-50%) !important;
                        z-index: 10006 !important;
                        margin: 0 !important;
                        width: auto !important;
                    }

                    .search-icon {
                        top: 50%;
                        transform: translateY(-50%);
                        display: flex;
                        align-items: center;
                        pointer-events: none;
                        z-index: 2;
                        /* No bloquea el click */
                    }

                    .search-container input {
                        box-sizing: border-box !important;
                        width: 45px !important;
                        /* Botón circular por defecto */
                        height: 45px !important;
                        padding: 14px 15px 14px 40px !important;
                        border-radius: 50px !important;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                        cursor: pointer;
                        color: transparent !important;
                        /* Oculta el texto mientras está cerrado */
                    }

                    .search-container input::placeholder {
                        color: transparent !important;
                    }

                    .search-container input:focus,
                    .search-container input:not(:placeholder-shown) {
                        width: 260px !important;
                        /* Se estira al tocar o tener texto y no choca con el menú */
                        cursor: text;
                        color: var(--color-texto) !important;
                    }

                    .search-container input:focus::placeholder {
                        color: var(--color-texto-sec) !important;
                    }

                    /* 3. Íconos de Navegación Fijos al Centro */
                    .desktop-nav-icons {
                        display: flex !important;
                        gap: 10px;
                        position: absolute !important;
                        left: 50% !important;
                        top: 50% !important;
                        transform: translate(-50%, -50%) !important;
                    }

                    .nav-fb-btn {
                        background: transparent;
                        border: none;
                        color: #64748b;
                        width: 110px;
                        height: 60px;
                        border-radius: 12px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        transition: 0.2s ease-in-out;
                    }

                    .nav-fb-btn:hover {
                        background: rgba(255, 255, 255, 0.05);
                        color: #f4f4f5;
                    }

                    .nav-fb-btn.activo {
                        color: var(--color-acento);
                        border-bottom: 4px solid var(--color-acento);
                        border-radius: 0;
                    }

                    .nav-fb-btn svg {
                        width: 26px;
                        height: 26px;
                    }

                    /* 4. Perfil Fijo a la Derecha */
                    .header-actions {
                        position: absolute !important;
                        right: 25px !important;
                        top: 50% !important;
                        transform: translateY(-50%) !important;
                        z-index: 10 !important;
                    }

                    /* Sidebar Fijo */
                    #sidebar {
                        left: 0 !important;
                        width: 280px !important;
                        padding-top: 85px !important;
                        box-shadow: 1px 0 0 var(--color-borde) !important;
                        background: var(--color-fondo) !important;
                        z-index: 990 !important;
                    }

                    #sidebar-overlay,
                    #sidebar button[onclick="cerrarSidebar()"],
                    #sidebar>div:nth-child(2),
                    #sidebar-emergencias {
                        display: none !important;
                    }

                    .contenedor {
                        margin-left: 300px !important;
                        max-width: calc(100% - 320px) !important;
                    }

                    /* Ajustes Modales PC */
                    .modal-fullscreen {
                        max-width: 450px !important;
                        height: 90vh !important;
                        max-height: 800px !important;
                        border-radius: 20px !important;
                        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
                    }

                    .checkout-header {
                        padding-top: 15px !important;
                    }
                }


                /* ========================================================
                                                    10. ASISTENTE INTELIGENTE NEXO (UI CHATBOT) cata
                                                    ======================================================== */
                /* ========================================================
                                                    10. ASISTENTE INTELIGENTE NEXO (UI CHATBOT BLINDADA)
                                                    ======================================================== */
                /* Contenedor principal: Lo levantamos a 100px para que no choque con el menú inferior */
                .draggable-bot {
                    position: fixed;
                    bottom: 100px;
                    right: 20px;
                    z-index: 99999;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    pointer-events: none;
                }

                /* Globo de texto: Ahora no interfiere con el clic del botón */
                .bot-preview {
                    background: var(--color-tarjeta);
                    color: var(--color-texto);
                    border: 1px solid var(--color-borde);
                    padding: 10px 15px;
                    border-radius: 20px 20px 0 20px;
                    font-size: 13px;
                    font-weight: 600;
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                    max-width: 200px;
                    line-height: 1.3;
                    transition: opacity 0.3s, transform 0.3s;
                    opacity: 0;
                    transform: translateX(20px);
                    pointer-events: none;
                }

                .bot-preview.show {
                    opacity: 1;
                    transform: translateX(0);
                    pointer-events: auto;
                }

                /* 🔥 FIX HITBOX: El botón es estrictamente un círculo de 60x60, con el evento de clic habilitado */
                @keyframes latidoNexo {

                    /* 🔥 FIX: Sombras dinámicas usando el acento en curso. Usamos currentColor para el resplandor */
                    0% {
                        box-shadow: 0 0 5px var(--color-app-acento, #10b981), 0 5px 20px rgba(0, 0, 0, 0.3);
                        transform: scale(1);
                    }

                    50% {
                        box-shadow: 0 0 25px var(--color-app-acento, #10b981), 0 5px 20px rgba(0, 0, 0, 0.3);
                        transform: scale(1.05);
                    }

                    100% {
                        box-shadow: 0 0 5px var(--color-app-acento, #10b981), 0 5px 20px rgba(0, 0, 0, 0.3);
                        transform: scale(1);
                    }
                }

                /* 🔥 FIX: El borde también usa el acento global */
                .bot-bubble {
                    width: 60px;
                    height: 60px;
                    min-width: 60px;
                    min-height: 60px;
                    background: var(--bg-header);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    border: 3px solid var(--color-app-acento, var(--color-acento));
                    overflow: hidden;
                    pointer-events: auto;
                    cursor: grab;
                    touch-action: none;
                    -webkit-tap-highlight-color: transparent;
                    animation: latidoNexo 2.5s infinite ease-in-out;
                }

                .bot-bubble:active {
                    cursor: grabbing;
                }

                .bot-bubble img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 50%;
                    pointer-events: none;
                }

                .bot-bubble img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .bot-badge {
                    position: absolute;
                    top: -5px;
                    right: -5px;
                    background: #ef4444;
                    color: white;
                    width: 22px;
                    height: 22px;
                    border-radius: 50%;
                    font-size: 11px;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 2px solid var(--color-tarjeta);
                }

                /* Ventana de Chat */
                /* Ventana de Chat */
                .bot-window {
                    position: fixed;
                    z-index: 100000;
                    top: 0 !important;
                    /* 🔥 ESTE ERA EL ERROR: Antes decía bottom: 0. Al fijarlo arriba, cortamos el sobrante abajo */
                    left: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    /* El JS lo pisa con px exactos */
                    background: var(--color-fondo) !important;
                    display: flex !important;
                    flex-direction: column !important;
                    transform: translateY(100%);
                    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
                }

                .bot-window.open {
                    transform: translateY(0);
                }

                .bot-window-header {
                    padding: calc(15px + env(safe-area-inset-top)) 20px 15px;
                    background: var(--bg-header);
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-shrink: 0;
                }

                .bot-window-body {
                    flex-grow: 1;
                    padding: 20px;
                    overflow-y: auto;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    background: var(--color-fondo);
                }

                .bot-window-footer {
                    padding: 15px;
                    padding-bottom: calc(15px + env(safe-area-inset-bottom));
                    background: var(--color-tarjeta);
                    border-top: 1px solid var(--color-borde);
                    display: flex;
                    gap: 10px;
                    flex-shrink: 0;
                }

                @media (min-width: 1024px) {
                    .bot-window {
                        bottom: 90px;
                        right: 25px;
                        left: auto;
                        width: 380px;
                        height: 600px;
                        max-height: 80vh;
                        border-radius: 24px;
                        border: 1px solid var(--color-borde);
                        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
                        transform: translateY(120%);
                        opacity: 0;
                    }

                    .bot-window.open {
                        transform: translateY(0);
                        opacity: 1;
                    }

                    .bot-window-header {
                        padding: 20px;
                        border-radius: 24px 24px 0 0;
                    }
                }

                /* Estilo para el contador de ventas "Gamificado" (NEXO Red) */
                .gamified-counter-container {
                    display: inline-flex;
                    align-items: center;
                    background-color: #1a1a1a;
                    /* Negro oscuro como la captura 1 */
                    color: white;
                    font-family: 'Montserrat', sans-serif;
                    /* O la fuente que use tu app */
                    padding: 8px 12px;
                    border-radius: 8px;
                    font-size: 14px;
                    font-weight: 500;
                    margin-bottom: 20px;
                    border: 1px solid #333;
                }

                .gamified-counter-container .label {
                    color: #ccc;
                    margin-right: 8px;
                }

                .gamified-counter-container .number {
                    color: #10b981;
                    /* Verde esmeralda vibrante */
                    font-weight: 700;
                    font-size: 16px;
                }

                /* Estilo para los logos de las billeteras */
                .wallet-logos {
                    display: flex;
                    gap: 8px;
                    margin-top: 10px;
                    justify-content: center;
                }

                .wallet-logo {
                    height: 20px;
                    object-fit: contain;
                }


                /* 🔥 FASE 6: SWIPE CHATS (MOBILE) Y BOTONES (PC) */
             

                /* --- Animación de Resplandor Verde Suave para el Icono NexoRed (Sin fondo circular) --- */
                @keyframes pulsoNexoRedLimpio {

                    0%,
                    100% {
                        color: #71717a;
                        filter: drop-shadow(0 0 2px var(--color-app-acento, #10b981));
                        transform: scale(1);
                    }

                    50% {
                        /* 🔥 FIX: El logo de la Red también respira en el color del comercio actual */
                        color: var(--color-app-acento, var(--color-acento));
                        filter: drop-shadow(0 0 8px var(--color-app-acento, #10b981));
                        transform: scale(1.1);
                    }
                }


                .pulse-nexo-red {
                    animation: pulsoNexoRedLimpio 2.5s ease-in-out infinite;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    transition: 0.2s;
                    /* Le sacamos el border-radius y cualquier background por si acaso */
                    background: transparent !important;
                    border-radius: 0 !important;
                    box-shadow: none !important;
                }

                /* Corrección para que el perfil no tape la barra lateral en PC */
                @media (min-width: 1024px) {
                    #pantalla-perfil-comercio {
                        width: 100% !important;
                        max-width: calc(100% - 280px) !important;
                        margin: 0 0 0 280px !important;
                    }

                    #pantalla-perfil-comercio .perfil-portada {
                        margin-top: -35px !important;
                    }
                }

           

                .bot-window-body,
                .checkout-body {
                    flex-grow: 1 !important;
                    overflow-y: auto !important;
                    -webkit-overflow-scrolling: touch !important;
                }

                .bot-window-footer,
                .checkout-footer {
                    flex-shrink: 0 !important;
                    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
                    /* 🔥 FIX: Reducido a 12px para evitar el bloque blanco inferior */
                }
        /* 🔥 BLINDAJE PWA EXTREMO: Ocultar barras de scroll nativas en TODA la app */
                ::-webkit-scrollbar {
                    width: 0px !important;
                    height: 0px !important;
                    display: none !important;
                    background: transparent !important;
                    -webkit-appearance: none !important;
                }
                * {
                    scrollbar-width: none !important;
                    -ms-overflow-style: none !important;
                }

                /* (Tus estilos actuales) */
           /* 1. CREACIÓN LÁSER */
                    .nexo-wipe-reveal {
                        clip-path: inset(0 100% 0 0);
                        animation: wipeInNexo 1.6s cubic-bezier(0.7, 0, 0.3, 1) forwards 0.2s;
                    }

                    @keyframes wipeInNexo {
                        to {
                            clip-path: inset(0 0 0 0);
                        }
                    }

                    /* 2. EFECTO "X" (El logo se te viene encima y desaparece) */
                    .splash-zoom-reveal {
                        transform: scale(4);
                        opacity: 0;
                        filter: blur(10px);
                    }





           /* box-sizing soluciona el scroll horizontal */
                    .sb-item {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        padding: 10px 12px;
                        cursor: pointer;
                        color: var(--color-texto);
                        font-weight: 600;
                        font-size: 13px;
                        border-radius: 10px;
                        transition: background 0.2s;
                        background: transparent;
                        border: none;
                        width: 100%;
                        text-align: left;
                        box-sizing: border-box;
                        margin-bottom: 2px;
                    }

                    .sb-item:hover {
                        background: var(--color-hover);
                    }

                    .sb-item svg {
                        color: var(--color-texto-sec);
                        transition: color 0.2s;
                        width: 18px !important;
                        height: 18px !important;
                        flex-shrink: 0;
                    }

                    .sb-item:hover svg {
                        color: var(--color-acento);
                    }

                    .sb-title {
                        font-size: 10px;
                        font-weight: 900;
                        color: var(--color-texto-sec);
                        text-transform: uppercase;
                        margin: 15px 0 8px 10px;
                        letter-spacing: 0.5px;
                    }

                    .sb-emergencia {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 10px;
                        border-radius: 10px;
                        text-decoration: none;
                        color: var(--color-texto);
                        font-size: 13px;
                        font-weight: 600;
                        border: 1px solid var(--color-borde);
                        transition: 0.2s;
                        box-sizing: border-box;
                    }

                    .sb-emergencia:hover {
                        border-color: #ef4444;
                        background: rgba(239, 68, 68, 0.05);
                    }

                    /* 🔥 MAGIA SCROLL: Achica la cabecera cuando scrolleas hacia abajo */
                    /* 🛡️ FIX CIBERSEGURIDAD UI: Protegemos la transición de cierre para que no se congele */
                    #sidebar-perfil {
                        transition: right 0.3s ease-in-out, padding 0.3s ease !important;
                        overscroll-behavior: none;
                    }

                    #perfil-info-header {
                        transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease, padding 0.3s ease;
                        max-height: 200px;
                        overflow: hidden;
                        opacity: 1;
                    }

                    #perfil-wallet-container {
                        transition: padding 0.3s ease;
                    }

                    #perfil-wallet-container .wallet-inner {
                        transition: all 0.3s ease;
                    }

                    #perfil-wallet-container .wallet-actions {
                        transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
                        max-height: 50px;
                        overflow: hidden;
                        opacity: 1;
                    }

                    #sidebar-perfil.scrolled #perfil-info-header {
                        max-height: 0;
                        opacity: 0;
                        margin-bottom: 0 !important;
                        padding-bottom: 0 !important;
                        border: none !important;
                    }

                    #sidebar-perfil.scrolled #perfil-wallet-container {
                        padding-bottom: 5px !important;
                    }

                    #sidebar-perfil.scrolled #perfil-wallet-container .wallet-inner {
                        padding: 8px 15px !important;
                        border-radius: 16px;
                    }

                    #sidebar-perfil.scrolled #perfil-wallet-container .wallet-actions {
                        max-height: 0;
                        opacity: 0;
                        margin-top: 0 !important;
                    }






                     /* Estilos Premium para las Pestañas (Pills) Superiores */
                    /* Estilos Premium para las Pestañas (Pills) Superiores */
                    #pantalla-nexored .tags-red {
                        display: flex;
                        flex-wrap: nowrap;
                        /* 🔥 Obliga a que sea 1 sola fila siempre */
                        gap: 8px;
                        margin-bottom: 20px;
                        padding: 5px 2px;
                        overflow-x: auto;
                        /* 🔥 Permite deslizar con el dedo si no entran */
                        -webkit-overflow-scrolling: touch;
                        scrollbar-width: none;
                        justify-content: flex-start;
                    }

                    #pantalla-nexored .tags-red::-webkit-scrollbar {
                        display: none;
                    }

                    #pantalla-nexored .tag-red-item {
                        display: flex;
                        align-items: center;
                        gap: 5px;
                        padding: 8px 14px;
                        /* Achicamos un pelito el relleno */
                        background: var(--color-tarjeta);
                        border: 1px solid var(--color-borde);
                        border-radius: 50px;
                        color: var(--color-texto-sec);
                        font-weight: 700;
                        font-size: 12px;
                        /* Letra un poco más chica */
                        cursor: pointer;
                        transition: 0.2s ease-in-out;
                        white-space: nowrap;
                        /* Impide que el texto se rompa en dos renglones */
                        flex-shrink: 0;
                        /* Mantiene la forma original del botón */
                        -webkit-tap-highlight-color: transparent;
                    }

                    #pantalla-nexored .tag-red-item.activo {
                        background: rgba(16, 185, 129, 0.1);
                        border-color: rgba(16, 185, 129, 0.3);
                        color: var(--color-acento);
                    }

                    #pantalla-nexored .tag-red-item svg {
                        width: 16px;
                        height: 16px;
                        stroke-width: 2.2;
                    }

                    /* 🔥 ESTILOS PARA LA GALERÍA ASIMÉTRICA (MASONRY) */
                    .masonry-grid {
                        column-count: 2;
                        column-gap: 12px;
                        padding: 0 5px;
                    }

                    @media (min-width: 768px) {
                        .masonry-grid {
                            column-count: 3;
                        }
                    }

                    @media (min-width: 1024px) {
                        .masonry-grid {
                            column-count: 4;
                        }
                    }

                    .masonry-item {
                        break-inside: avoid;
                        margin-bottom: 12px;
                        position: relative;
                        border-radius: 16px;
                        overflow: hidden;
                        background: var(--color-tarjeta);
                        border: 1px solid var(--color-borde);
                        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
                        display: flex;
                        flex-direction: column;
                    }

                    .masonry-item video,
                    .masonry-item img.masonry-media {
                        width: 100%;
                        display: block;
                        object-fit: cover;
                        border-radius: 16px 16px 0 0;
                    }

                    .masonry-overlay {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
                        padding: 30px 12px 12px 12px;
                        pointer-events: none;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;

                    }

                    /* ========================================================
                                        11. PERFILES DE COMERCIOS / SERVICIOS (PREMIUM)
                                        ======================================================== */
                    /* 🔥 FIX: Fuerza la herencia de colores en todo el perfil */
                    #pantalla-perfil-comercio h2,
                    #pantalla-perfil-comercio h3,
                    #pantalla-perfil-comercio p {
                        color: var(--color-texto);
                    }

                    #pantalla-perfil-comercio p[style*="color: var(--color-texto-sec)"] {
                        color: var(--color-texto-sec) !important;
                    }

                    /* Portada subida para eliminar el espacio blanco */
                    .perfil-portada {
                        width: 100%;
                        height: 220px;
                        background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
                        position: relative;
                        margin-top: -20px;
                        /* Mata el espacio blanco de la app */
                        overflow: hidden;
                        /* 🔥 FIX: Corta el exceso del scale(1.15) para evitar el scroll horizontal */
                        /* 🔥 MAGIA: El degradado funde la imagen con el fondo de la app sin importar el tema */
                        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
                        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
                    }

                    .perfil-portada>img.img-fondo-portada {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        opacity: 0.8;
                        filter: blur(3px);
                        transform: scale(1.15);
                    }

                    /* Volamos el ::after negro viejo porque oscurecía demasiado la foto */
                    /* El Wrapper ahora contiene al Avatar para que no se corte */
                    .perfil-info-wrapper {
                        text-align: center;
                        padding: 0 20px 20px;
                        border-bottom: 1px solid var(--color-borde);
                        position: relative;
                        z-index: 11;
                    }

                    .perfil-avatar-container {
                        margin-top: -75px;
                        margin-bottom: 10px;
                        display: flex;
                        justify-content: center;
                        position: relative;
                        z-index: 12;
                    }

                    .perfil-avatar {
                        width: 110px;
                        height: 110px;
                        border-radius: 50%;
                        border: 4px solid var(--color-fondo);
                        background: white;
                        object-fit: cover;
                        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
                        filter: none !important;
                        transform: none !important;
                    }

                    /* 🔥 FIX: Animación de carga para cuando se sube una historia */
                    @keyframes spin-historia {
                        0% {
                            transform: rotate(0deg);
                        }

                        100% {
                            transform: rotate(360deg);
                        }
                    }

                    .cargando-historia {
                        border: 3px dashed var(--color-acento) !important;
                        animation: spin-historia 2s linear infinite !important;
                        box-shadow: 0 0 15px var(--color-acento) !important;
                    }

                    /* Botones de Acción (Reservar, Auxilio) */
                    .btn-accion-perfil {
                        margin-top: 5px;
                        margin-bottom: 15px;
                        padding: 14px 30px;
                        border-radius: 50px;
                        font-weight: 900;
                        font-size: 14px;
                        border: none;
                        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
                        color: white !important;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        cursor: pointer;
                        transition: 0.2s;
                        width: 100%;
                        max-width: 320px;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    }

                    .btn-accion-perfil:active {
                        transform: scale(0.96);
                    }

                    .btn-urgencia {
                        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
                    }

                    .btn-turno {
                        background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
                    }

                    /* Botón de seguir Minimalista */
                    .btn-seguir-perfil {
                        background: transparent;
                        border: 1px solid var(--color-acento);
                        color: var(--color-acento);
                        padding: 6px 20px;
                        border-radius: 50px;
                        font-weight: 700;
                        font-size: 13px;
                        cursor: pointer;
                        transition: 0.2s;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .btn-seguir-perfil.activo {
                        background: var(--color-acento);
                        color: white;
                        border-color: var(--color-acento);
                    }

                    .btn-volver-perfil {
                        position: fixed;
                        top: calc(15px + env(safe-area-inset-top));
                        left: 15px;
                        z-index: 1000;
                        background: rgba(0, 0, 0, 0.6);
                        color: white;
                        border: none;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        font-size: 24px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        backdrop-filter: blur(5px);
                    }




                     /* 🔥 FIX: Fondo oscuro infinito (Lo aclaramos un poco a un gris carbón para que coincida) */
                .leaflet-container {
                    background: #1e1e1e !important;
                }

                /* 🔥 MAGIA: Lente óptico para aclarar el mapa. 
                                                Sube el brillo al 160% y baja el contraste al 85% para lavar los negros y hacerlos grises visibles. */
                .leaflet-tile {
                    filter: brightness(1.6) contrast(0.85) !important;
                }

                /* Optimizaciones para Leaflet en móviles (Popups limpios) */
                .leaflet-popup-content-wrapper {
                    background: var(--color-tarjeta);
                    color: var(--color-texto);
                    border-radius: 16px;
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
                    border: 1px solid var(--color-borde);
                    padding: 0;
                    overflow: hidden;
                }

                .leaflet-popup-content {
                    margin: 0;
                    width: 220px !important;
                }

                .leaflet-popup-tip {
                    background: var(--color-tarjeta);
                }

                .leaflet-container a.leaflet-popup-close-button {
                    color: var(--color-texto-sec);
                    padding: 8px;
                    right: 4px;
                    top: 4px;
                    font-size: 20px;
                    font-weight: bold;
                }

                /* Tarjeta popup personalizada de cada Comercio */
                .nexo-popup-header {
                    background: var(--color-hover);
                    padding: 12px 15px;
                    border-bottom: 1px solid var(--color-borde);
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }

                .nexo-popup-img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    object-fit: cover;
                    border: 2px solid var(--color-acento);
                }

                .nexo-popup-body {
                    padding: 15px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }

                /* 🔥 FASE 3: ESTILO PREMIUM NEÓN PARA MAPAS (IMAGEN 2) */
                .pin-nexo-glowing {
                    width: 32px;
                    height: 32px;
                    /* Un poco más grandes para que entre bien el ícono */
                    border-radius: 50%;
                    border: 3px solid white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    color: white;
                }

                .pin-nexo-comercio {
                    background: #ef4444;
                    box-shadow: 0 0 15px 5px rgba(239, 68, 68, 0.5);
                    animation: latidoMapaNexo 2s infinite;
                }

                .pin-poi-esencial {
                    background: #3b82f6;
                    box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.6);
                    /* Estático, sin latido para que resalte NEXO */
                }

                .pin-nexo-partner {
                    background: #f59e0b;
                    box-shadow: 0 0 10px 2px rgba(245, 158, 11, 0.6);
                }

                .pin-poi-institucion {
                    background: #64748b;
                    box-shadow: 0 0 10px 2px rgba(100, 116, 139, 0.6);
                }

                .pin-cliente {
                    background: #10b981;
                    box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);
                    animation: latidoMapaNexo 2.5s infinite;
                }

                /* El puntito blanco en el centro para el Cliente */
                .pin-cliente::after {
                    content: '';
                    width: 10px;
                    height: 10px;
                    background: white;
                    border-radius: 50%;
                }

                @keyframes latidoMapaNexo {
                    0% {
                        transform: scale(0.9);
                        box-shadow: 0 0 10px 0px rgba(239, 68, 68, 0.6);
                    }

                    50% {
                        transform: scale(1.1);
                        box-shadow: 0 0 20px 8px rgba(239, 68, 68, 0.3);
                    }

                    100% {
                        transform: scale(0.9);
                        box-shadow: 0 0 10px 0px rgba(239, 68, 68, 0.6);
                    }
                }

                @keyframes latidoMapaNexoPoi {
                    0% {
                        transform: scale(0.9);
                        box-shadow: 0 0 10px 0px rgba(59, 130, 246, 0.6);
                    }

                    50% {
                        transform: scale(1.1);
                        box-shadow: 0 0 20px 8px rgba(59, 130, 246, 0.3);
                    }

                    100% {
                        transform: scale(0.9);
                        box-shadow: 0 0 10px 0px rgba(59, 130, 246, 0.6);
                    }
                }


                   .modal-armador-sheet {
                    transform: translateY(100%);
                    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
                }

                .modal-armador-sheet.open {
                    transform: translateY(0);
                }

                @keyframes dropStackSvg {
                    0% {
                        transform: translate(-50%, -80px) scale(1.2);
                        opacity: 0;
                        filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.8));
                    }

                    100% {
                        transform: translate(-50%, 0) scale(1);
                        opacity: 1;
                        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
                    }
                }

                .burger-capa-svg {
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%, 0);
                    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                    animation: dropStackSvg 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
                    width: 140px;
                    height: auto;
                }

                .armador-talle-btn {
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                    border: 2px solid #333;
                    background: transparent;
                    color: #fff;
                    font-weight: 900;
                    font-size: 14px;
                    cursor: pointer;
                    transition: 0.2s;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                }

                .armador-talle-btn.active {
                    background: var(--color-acento);
                    border-color: var(--color-acento);
                    transform: scale(1.1);
                    box-shadow: 0 0 15px var(--color-acento)40;
                    color: #000;
                }

                /* 🔥 FIX: Cajas del armador convertidas en píldoras dinámicas que no aplastan el texto */
                .armador-btn-cuadrado {
                    border: 1.5px solid #444;
                    border-radius: 16px;
                    padding: 10px 14px;
                    background: #1a1a1a;
                    color: white;
                    font-weight: 700;
                    cursor: pointer;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    transition: 0.2s;
                    min-width: 90px;
                    flex-shrink: 0;
                    line-height: 1.2;
                    box-sizing: border-box;
                }

                .armador-btn-cuadrado.active {
                    border-color: var(--color-app-acento, #10b981);
                    background: rgba(16, 185, 129, 0.15);
                }

                .armador-btn-cuadrado .nombre {
                    font-size: 12px;
                    margin: 0 0 4px 0;
                    text-align: center;
                    white-space: normal;
                }

                .armador-btn-cuadrado .precio {
                    font-size: 12px;
                    font-weight: 900;
                    color: var(--color-app-acento, #10b981);
                    margin: 0;
                }

                .armador-btn-cuadrado .badge-cant {
                    background: var(--color-app-acento, #10b981);
                    color: #000;
                    border-radius: 50%;
                    width: 22px;
                    height: 22px;
                    font-size: 12px;
                    font-weight: 900;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 5px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                }



                   .estrella:hover,
                .estrella.activa {
                    color: #f59e0b;
                    /* Color naranja/dorado */
                }