Error de conexión: SQLSTATE[HY000] [2002] Operation not permitted
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<style>
    :root {
        --color-principal:#DBCCB6;
        --color-secundario: #c98952;
        --color-oscuro: #7b5a3e;
        --color-oscuro-2: #5f4029;
        --color-claro: #fffaf5;
        --color-acento: #f5d67f;
        --color-texto: #ffffff;
        --color-texto-oscuro: #4f3827;
    }

    * {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .menu-principal {
        width: 100%;
        background: #E0CCC8;
        box-shadow: 0 4px 12px rgba(0,0,0,0.18);
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    /* PARTE SUPERIOR */
    .menu-top {
        width: 100%;
        background: var(--color-principal);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 12px 22px;
    }

    .menu-logo a {
        display: flex;
        align-items: center;
        text-decoration: none !important;
    }

    .menu-logo img {
        max-width: 230px;
        height: auto;
        display: block;
        transition: opacity 0.5s ease-in-out;
    }

    .menu-busqueda {
        flex: 1;
        max-width: 650px;
    }

    .busqueda-form {
        display: flex;
        align-items: center;
        width: 100%;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        border: 2px solid rgba(255,255,255,0.45);
        box-shadow: 0 8px 18px -14px rgba(0,0,0,0.35);
    }

    .busqueda-form input {
        flex: 1;
        border: none;
        outline: none;
        padding: 14px 16px;
        font-size: 1rem;
        background: transparent;
        color: var(--color-texto-oscuro);
        width: 100%;
    }

    .busqueda-form input::placeholder {
        color: #8b7b70;
    }

    .btn-buscar {
        border: none;
        background: var(--color-acento);
        color: var(--color-oscuro);
        width: 58px;
        height: 48px;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .menu-acciones {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .accion-btn {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: var(--color-oscuro);
        color: #fff;
        text-decoration: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        font-size: 1.1rem;
        transition: 0.2s ease;
    }

    .accion-btn:hover {
        background: var(--color-oscuro-2);
        color: #fff;
    }

    .accion-btn.favoritos i {
        color: #ffb08b;
    }

    .accion-btn.carrito {
        background: var(--color-acento);
        color: var(--color-oscuro);
    }

    .menu-toggle {
        display: none;
    }

    /* Botón de búsqueda exclusivo para móvil */
    .buscar-movil {
        display: none;
    }

    /* BARRA INFERIOR COMO COPPEL */
    .menu-bottom {
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0 18px;
        min-height: 58px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }

    .menu-link,
    .dropdown-boton {
        min-height: 58px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        background: transparent;
        color: var(--color-texto-oscuro);
        text-decoration: none !important;
        border: none;
        cursor: pointer;
        font-weight: 800;
        font-size: 0.98rem;
        white-space: nowrap;
        transition: 0.2s ease;
    }

    .menu-link i,
    .dropdown-boton i {
        color: var(--color-oscuro);
        font-size: 1rem;
    }

    .menu-link:hover,
    .dropdown-boton:hover {
        background: var(--color-claro);
        color: var(--color-oscuro);
    }

    .menu-dropdown {
        position: relative;
    }

    .dropdown-menu-custom {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 245px;
        background: #fff;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.22);
        padding: 8px 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: 0.2s ease;
        z-index: 2000;
    }

    .menu-dropdown:hover .dropdown-menu-custom,
    .menu-dropdown.activo .dropdown-menu-custom {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-menu-custom a {
        display: block;
        padding: 12px 16px;
        color: var(--color-texto-oscuro);
        text-decoration: none !important;
        font-weight: 700;
        font-size: 0.93rem;
        transition: 0.2s ease;
    }

    .dropdown-menu-custom a:hover {
        background: var(--color-claro);
        color: var(--color-oscuro);
    }

    /* MODAL BÚSQUEDA */
    .search-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }

    .search-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .search-modal-content {
        width: 90%;
        max-width: 500px;
        position: relative;
        animation: modalFadeIn .4s ease;
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(.95);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    .search-modal-form {
        display: flex;
        gap: 10px;
    }

    .search-modal-input {
        flex: 1;
        padding: 15px;
        border-radius: 0;
        border: none;
        font-size: 1.1rem;
        outline: none;
    }

    .search-modal-submit {
        width: 60px;
        border-radius: 0;
        border: none;
        background: #F2AB9D;
        color: #fff;
        cursor: pointer;
    }

    .search-modal-close {
        position: absolute;
        top: -90px;
        right: 0;
        background: none;
        border: none;
        color: white;
        font-size: 2.5rem;
        cursor: pointer;
    }

    /* TABLET */
    @media (max-width: 1100px) {
        .menu-top {
            flex-wrap: wrap;
        }

        .menu-logo {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .menu-busqueda {
            max-width: 100%;
            width: 100%;
        }

        .menu-acciones {
            width: 100%;
            justify-content: center;
        }

        .menu-bottom {
            overflow-x: auto;
            justify-content: flex-start;
        }
    }

    /* MÓVIL */
    @media (max-width: 768px) {
        .menu-top {
            width: 100%;
            padding: 0;
            gap: 0;
            flex-wrap: wrap;
        }

        .menu-logo {
            width: auto;
            flex: 1;
            padding: 10px 12px;
            justify-content: flex-start;
        }

        .menu-logo img {
            max-width: 160px;
        }

        .menu-toggle {
            display: flex;
            width: 54px;
            height: 54px;
            align-items: center;
            justify-content: center;
            background: var(--color-oscuro);
            color: #fff;
            border: none;
            font-size: 1.25rem;
            cursor: pointer;
        }

        .menu-acciones {
            width: auto;
            gap: 0;
        }

        .accion-btn {
            width: 54px;
            height: 54px;
            border-radius: 0;
        }
        /* En móvil se oculta el input del encabezado */
        .menu-busqueda {
            display: none !important;
        }

        /* Solo queda visible el botón de lupa */
        .buscar-movil {
            display: flex;
        }

        .menu-bottom {
            display: none;
            width: 100%;
            order: 5;
            padding: 0;
            min-height: auto;
            flex-direction: column;
            align-items: stretch;
            overflow: visible;
            border-top: none;
        }

        .menu-principal.menu-abierto .menu-bottom {
            display: flex;
        }

        .menu-link,
        .dropdown-boton {
            width: 100%;
            min-height: 54px;
            justify-content: flex-start;
            padding: 0 16px;
            border-top: 1px solid rgba(0,0,0,0.08);
            background: #fff;
        }

        .dropdown-boton {
            justify-content: space-between;
        }

        .menu-dropdown {
            width: 100%;
        }

        .dropdown-menu-custom {
            position: static;
            width: 100%;
            min-width: 100%;
            border-radius: 0;
            box-shadow: none;
            padding: 0;
            display: none;
            opacity: 1;
            visibility: visible;
            transform: none;
        }

        .menu-dropdown:hover .dropdown-menu-custom {
            display: none;
        }

        .menu-dropdown.activo .dropdown-menu-custom {
            display: block;
        }

        .dropdown-menu-custom a {
            padding: 13px 30px;
            background: #fffaf5;
            border-top: 1px solid #f1dfd2;
        }
    }

    @media (max-width: 420px) {
        .menu-logo img {
            max-width: 145px;
        }

        .accion-btn,
        .menu-toggle {
            width: 50px;
            height: 52px;
        }
    }
</style>

<nav class="menu-principal" id="menuPrincipal">

    <!-- PARTE SUPERIOR -->
    <div class="menu-top">

        <div class="menu-logo">
            <a href="home">
                <!-- ====================================================== -->
                <!-- LOGO DINÁMICO POR TEMPORADA (MODIFICADO) -->
                <img src="vistas/img/logo_siempre_ella_animado.gif" width="250" height="45" alt="Logo Siempre Ella">
                <!-- ====================================================== -->
            </a>
        </div>

        <!-- BUSCADOR PRINCIPAL FUNCIONANDO -->
        <div class="menu-busqueda">
            <form class="busqueda-form" action="index.php" method="GET">
                <input type="hidden" name="accion" value="resultados-busqueda">
                <input 
                    type="search" 
                    name="query" 
                    placeholder="Buscar por color, marca, detalle o largo"
                    required
                >
                <button type="submit" class="btn-buscar">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>

        <div class="menu-acciones">

            <!-- En móvil abre el buscador como modal -->
            <button
                type="button"
                class="accion-btn buscar-movil"
                id="searchToggle"
                title="Buscar"
                aria-label="Abrir buscador"
                aria-controls="searchOverlay"
                aria-expanded="false"
            >
                <i class="fas fa-search"></i>
            </button>

            <a href="lista-deseos" class="accion-btn favoritos" title="Favoritos">
                <i class="fas fa-heart"></i>
            </a>

            <a href="carrito" class="accion-btn carrito" title="Carrito" hidden>
                <i class="fas fa-cart-shopping"></i>
            </a>

            <button type="button" class="menu-toggle" id="btnMenuMovil">
                <i class="fa-solid fa-bars"></i>
            </button>

        </div>

    </div>

    <!-- ENLACES ABAJO COMO EN LA FOTO -->
    <div class="menu-bottom">

        <a href="home" class="menu-link">
            <i class="fa-solid fa-house"></i>
            Inicio
        </a>

        <div class="menu-dropdown">
            <button type="button" class="dropdown-boton">
                <span>
                    <i class="fa-solid fa-store"></i>
                    Boutiques
                </span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>

            <div class="dropdown-menu-custom">
                <a href="sucursal-santiago">Sucursal Santiago Ixc</a>
                <a href="sucursal-tepic">Sucursal Tepic</a>
                <a href="sucursal-villahermosa">Sucursal Villahermosa</a>
                <a href="sucursal-huimanguillo">Sucursal Huimanguillo</a>
            </div>
        </div>

        <div class="menu-dropdown">
            <button type="button" class="dropdown-boton">
                <span>
                    <i class="fa-solid fa-tags"></i>
                    Categoría
                </span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>

            <div class="dropdown-menu-custom">
                <a href="vestidos">Vestidos</a>
                <a href="conjuntos">Conjuntos</a>
                <a href="palazzos">Palazzos</a>
                <a href="faldas">Faldas</a>
            </div>
        </div>

        <a href="grupos" class="menu-link">
            <i class="fa-solid fa-users"></i>
            Grupos
        </a>

        <div class="menu-dropdown">
            <button type="button" class="dropdown-boton">
                <span>
                    <i class="fa-regular fa-circle-user"></i>
                    Mi cuenta                </span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>

            <div class="dropdown-menu-custom">
                                    <a href="login-cliente">Iniciar sesión</a>
                            </div>
        </div>

        <div class="menu-dropdown">
            <button type="button" class="dropdown-boton">
                <span>
                    <i class="fa-solid fa-circle-info"></i>
                    Nosotros
                </span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>

            <div class="dropdown-menu-custom">
                <a href="oportunidad-laboral">Oportunidad Laboral</a>
                <a href="ubicacion-sucursales">Ubicaciones de Sucursales</a>
            </div>
        </div>

        <a href="salon" class="menu-link" hidden>
            <i class="fa-solid fa-spa"></i>
            Nail Spa
        </a>

    </div>

</nav>

<!-- MODAL DE BÚSQUEDA -->
<div class="search-modal-overlay" id="searchOverlay" role="dialog" aria-modal="true" aria-hidden="true" aria-label="Buscador">
    <div class="search-modal-content">

        <form class="search-modal-form" action="index.php" method="GET">
            <input type="hidden" name="accion" value="resultados-busqueda">
            <input 
                type="search" 
                name="query" 
                id="searchInputModal"
                placeholder="Buscar prenda o modelo" 
                required
                class="search-modal-input"
            >
            <button type="submit" class="search-modal-submit">
                <i class="fas fa-search"></i>
            </button>
        </form>

        <button type="button" class="search-modal-close" id="closeSearch" aria-label="Cerrar buscador">&times;</button>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btnMenuMovil = document.getElementById('btnMenuMovil');
    const menuPrincipal = document.getElementById('menuPrincipal');

    if (btnMenuMovil && menuPrincipal) {
        btnMenuMovil.addEventListener('click', function () {
            menuPrincipal.classList.toggle('menu-abierto');

            const icono = btnMenuMovil.querySelector('i');

            if (menuPrincipal.classList.contains('menu-abierto')) {
                icono.classList.remove('fa-bars');
                icono.classList.add('fa-xmark');
            } else {
                icono.classList.remove('fa-xmark');
                icono.classList.add('fa-bars');
            }
        });
    }

    const dropdowns = document.querySelectorAll('.menu-dropdown');

    dropdowns.forEach(dropdown => {
        const boton = dropdown.querySelector('.dropdown-boton');

        boton.addEventListener('click', function (e) {
            if (window.innerWidth <= 768) {
                e.preventDefault();

                dropdowns.forEach(item => {
                    if (item !== dropdown) {
                        item.classList.remove('activo');
                    }
                });

                dropdown.classList.toggle('activo');
            }
        });
    });

    const toggle = document.getElementById('searchToggle');
    const overlay = document.getElementById('searchOverlay');
    const close = document.getElementById('closeSearch');
    const input = document.getElementById('searchInputModal');

    if (toggle && overlay && close && input) {

        const abrirBuscador = () => {
            if (menuPrincipal) {
                menuPrincipal.classList.remove('menu-abierto');
            }

            if (btnMenuMovil) {
                const icono = btnMenuMovil.querySelector('i');
                icono.classList.remove('fa-xmark');
                icono.classList.add('fa-bars');
            }

            overlay.classList.add('active');
            overlay.setAttribute('aria-hidden', 'false');
            toggle.setAttribute('aria-expanded', 'true');
            document.body.style.overflow = 'hidden';

            setTimeout(() => input.focus(), 250);
        };

        const cerrarBuscador = () => {
            overlay.classList.remove('active');
            overlay.setAttribute('aria-hidden', 'true');
            toggle.setAttribute('aria-expanded', 'false');
            document.body.style.overflow = '';
            toggle.focus();
        };

        toggle.addEventListener('click', e => {
            e.preventDefault();
            abrirBuscador();
        });

        close.addEventListener('click', cerrarBuscador);

        overlay.addEventListener('click', e => {
            if (e.target === overlay) {
                cerrarBuscador();
            }
        });

        document.addEventListener('keydown', e => {
            if (e.key === 'Escape' && overlay.classList.contains('active')) {
                cerrarBuscador();
            }
        });
    }

    // ============================================================
    // CAMBIO DE LOGO POR TEMPORADA (VERSIÓN JAVASCRIPT - RESPUESTA)
    // ============================================================
    function cambiarLogoPorTemporada() {
        const hoy = new Date();
        const mes = String(hoy.getMonth() + 1).padStart(2, '0');
        const dia = String(hoy.getDate()).padStart(2, '0');
        const fechaActual = `${mes}-${dia}`;
        
        // Configuración de temporadas con tus logos
        const temporadas = [
            {
                nombre: '15 años',
                inicio: '09-01',
                fin: '09-30',
                logo: 'vistas/img/logos_pagina_menu/logo_mexico.png'
            },
            {
                nombre: 'Diademuertos',
                inicio: '10-25',
                fin: '11-05',
                logo: 'vistas/img//logos_pagina_menu/logo_dia_muertos.png'
            },
            {
                nombre: 'Navidad',
                inicio: '12-01',
                fin: '01-10',
                logo: 'vistas/img//logos_pagina_menu/logo_navidad.png'
            }
        ];
        
        // Función para verificar si fecha está en rango
        function estaEnRango(fecha, inicio, fin) {
            if (inicio > fin) {
                // Para temporadas que cruzan año (Navidad)
                return fecha >= inicio || fecha <= fin;
            }
            return fecha >= inicio && fecha <= fin;
        }
        
        // Buscar temporada activa
        let logoEncontrado = null;
        for (const temp of temporadas) {
            if (estaEnRango(fechaActual, temp.inicio, temp.fin)) {
                logoEncontrado = temp.logo;
                break;
            }
        }
        
        // Si no hay temporada, usar logo normal
        const logoFinal = logoEncontrado || 'vistas/img/logo_siempre_ella_animado.gif';
        
        // Aplicar el cambio al logo
        const logoImg = document.querySelector('.menu-logo img');
        if (logoImg) {
            logoImg.src = logoFinal;
            console.log(`🔄 Logo cambiado a: ${logoFinal}`); // Para depuración
        }
    }

    // Ejecutar el cambio de logo
    cambiarLogoPorTemporada();
    // ============================================================
});
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Siempre Ella</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Free HTML Templates" name="keywords">
    <meta content="Free HTML Templates" name="description">

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

    <!-- Favicon -->
    <link href="vistas/img/iconos_pagina/Captus.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="../vistas/lib/animate/animate.min.css" rel="stylesheet">
    <link href="../vistas/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="../vistas/lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />

    <!-- Customized Bootstrap Stylesheet -->
    <link href="../vistas/css/style.css" rel="stylesheet">

    <link href="vistas/css/estilo_catalogo.css" rel="stylesheet">
    <link href="vistas/css/estilo_platilla_principal.css" rel="stylesheet">

    <style>
        /* Estilos para el contador de visitas */
        .contador-visitas {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0,0,0,0.85);
            color: white;
            padding: 12px 18px;
            border-radius: 10px;
            font-size: 13px;
            z-index: 9999;
            font-family: 'Poppins', sans-serif;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
            min-width: 180px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.1);
        }
        .contador-visitas .titulo {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.7;
            margin-bottom: 5px;
        }
        .contador-visitas .stat {
            display: flex;
            justify-content: space-between;
            padding: 3px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .contador-visitas .stat:last-child {
            border-bottom: none;
        }
        .contador-visitas .label {
            opacity: 0.8;
        }
        .contador-visitas .numero {
            color: #4ecdc4;
            font-weight: bold;
            font-size: 15px;
        }
        .contador-visitas .nuevo {
            color: #ff6b6b;
            font-size: 10px;
            animation: pulse 1.5s ease-in-out infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.3; }
            100% { opacity: 1; }
        }
        .contador-visitas .badge-nuevo {
            display: inline-block;
            background: #ff6b6b;
            color: white;
            font-size: 9px;
            padding: 2px 8px;
            border-radius: 10px;
            animation: pulse 1.5s ease-in-out infinite;
        }
        /* Estilo para mostrar la ubicación en el contador */
        .contador-visitas .ubicacion {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255,255,255,0.1);
            font-size: 10px;
            opacity: 0.9;
            text-align: center;
            color: #ffd93d;
            word-break: break-word;
        }
        .contador-visitas .ubicacion-icono {
            margin-right: 4px;
        }
    </style>

</head>

<body>

    
    <script>
        // Función para obtener la última notificación
        function obtenerNotificacion() {
            $.ajax({
                url: window.location.href,
                method: 'GET',
                data: { ajax: 1 },
                success: function(response) {
                    try {
                        let data = JSON.parse(response);
                        let idNotificacion = data.id;
                        let mensaje = data.mensaje;

                        let ultimoId = localStorage.getItem("ultimoIdNotificacion");

                        if (idNotificacion && idNotificacion !== parseInt(ultimoId)) {
                            new Notification("¡Hola Chicas!", {
                                body: mensaje,
                                icon: "../vistas/img/icono_pagina.ico"
                            });

                            localStorage.setItem("ultimoIdNotificacion", idNotificacion);
                        }
                    } catch (e) {
                        console.error('Error al procesar notificación:', e);
                    }
                },
                error: function() {
                    console.error('Error al obtener notificación');
                }
            });
        }

        // Verificar soporte de notificaciones
        if ("Notification" in window) {
            Notification.requestPermission().then(permission => {
                if (permission === "granted") {
                    obtenerNotificacion();
                    setInterval(obtenerNotificacion, 10000);
                }
            });
        }
    </script>

    <br>
    <br>

    <!-- Aquí va el contenido dinámico -->
    <div>
        
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<br>

<!-- Encabezado del detalle del producto -->
<div class="encabezado-detalle-lampara">
    <div class="row mx-0 justify-content-center text-center mb-4">
    <div class="col-lg-6">
        <div class="detalle-badge">
            <h4 class="detalle-titulo">
                <ion-icon name="flower-outline"></ion-icon>
                DETALLE DEL MODELO
                <ion-icon name="flower-outline"></ion-icon>
            </h4>
            <div class="detalle-underline"></div>
        </div>
    </div>
    </div>
</div>

<style>
/* Encabezado compacto sin la imagen decorativa */
.encabezado-detalle-lampara {
    position: relative;
    min-height: 0;
    padding: 18px 12px 0;
}
@media (max-width: 768px) {
    .encabezado-detalle-lampara {
        padding: 12px 8px 0;
    }
}

/* Layout compacto detalle + recomendaciones (sin alterar Bootstrap global) */
.detalle-layout-container { max-width: 1460px; }
.detalle-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 20px;
    align-items: start;
}
.detalle-layout-principal, .detalle-layout-recomendaciones { min-width: 0; }
.detalle-layout-principal .modern-detail-container { margin: 0; padding: 18px; border-radius: 22px; }
.detalle-layout-principal .modern-details-card { padding: 16px; }
.detalle-layout-principal .modern-descripcion,
.detalle-layout-principal .modern-price-container,
.detalle-layout-principal .modern-tallas-section { padding: 14px; margin-bottom: 12px; }
.detalle-layout-principal .modern-action-buttons { gap: 8px; }
.detalle-layout-principal .modern-btn { padding: 9px 13px; font-size: .86rem; }
@media (max-width: 1199.98px) {
  .detalle-layout-grid { grid-template-columns: minmax(0, 1fr) 245px; gap: 12px; }
  .detalle-layout-principal .modern-detail-container { padding: 12px; }
  .detalle-layout-principal .modern-details-card { padding: 12px; }
}
@media (max-width: 991.98px) {
  .detalle-layout-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .detalle-layout-principal .modern-detail-container { padding: 14px; }
  .detalle-layout-recomendaciones { width: 100%; }
}

/* Métodos de pago: presentación compacta y responsive */
.detalle-medios-pago {
    margin: 0 0 14px;
    padding: 15px;
    background: linear-gradient(135deg, #fffaf0, #fff6df);
    border: 1px solid rgba(184, 161, 110, .30);
    border-radius: 18px;
}
.detalle-medios-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    color: #8b7044;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: .85rem;
    font-weight: 700;
}
.detalle-medios-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.detalle-logo-tarjeta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e9dfca;
    border-radius: 14px;
    box-shadow: 0 2px 7px rgba(0,0,0,.04);
}
.detalle-logo-tarjeta--visa {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.5rem;
    letter-spacing: .5px;
    color: #1a1f71;
    line-height: 1;
    min-width: 120px;
}
.detalle-logo-tarjeta--mc {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}
.detalle-mc-simbolo {
    position: relative;
    width: 46px;
    height: 28px;
    flex: 0 0 auto;
}
.detalle-mc-circulo {
    position: absolute;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.detalle-mc-circulo--rojo { left: 0; background: #eb001b; }
.detalle-mc-circulo--amarillo { right: 0; background: #f79e1b; }
.detalle-mc-circulo--centro {
    left: 9px;
    background: rgba(255, 94, 0, .85);
    mix-blend-mode: multiply;
}
.detalle-mc-texto {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #222;
    line-height: 1;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .detalle-medios-pago { padding: 12px; }
    .detalle-medios-lista {
        gap: 8px;
        justify-content: center;
    }
    .detalle-logo-tarjeta {
        min-height: 48px;
        padding: 8px 10px;
        flex: 1 1 calc(50% - 8px);
    }
    .detalle-logo-tarjeta--visa {
        min-width: auto;
        font-size: 1.3rem;
    }
    .detalle-logo-tarjeta--mc {
        min-width: auto;
        gap: 8px;
    }
    .detalle-mc-simbolo {
        width: 40px;
        height: 24px;
    }
    .detalle-mc-circulo {
        width: 24px;
        height: 24px;
    }
    .detalle-mc-circulo--centro {
        left: 8px;
    }
    .detalle-mc-texto {
        font-size: .92rem;
    }
}

/* Opciones adicionales de pago debajo de Visa y Mastercard */
.detalle-otras-formas-pago {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(184, 161, 110, .25);
}
.detalle-forma-transferencia,
.detalle-forma-mercadopago {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .85);
    color: #66563c;
    font-size: .82rem;
    line-height: 1.35;
}
.detalle-forma-transferencia ion-icon {
    flex: 0 0 auto;
    font-size: 23px;
    color: #ad935e;
}
.detalle-forma-mercadopago img {
    display: block;
    width: 58px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 auto;
}
@media (max-width: 575.98px) {
    .detalle-forma-transferencia,
    .detalle-forma-mercadopago { padding: 9px; font-size: .77rem; }
    .detalle-forma-mercadopago img { width: 49px; height: 35px; }
}

/* Estilos modernos para detalle de producto */
.detalle-badge {
    position: relative;
    display: inline-block;
}

.detalle-titulo {
    background: linear-gradient(135deg, #B8A16E, #9E8658);
    display: inline-block;
    padding: 12px 32px;
    border-radius: 60px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 8px 20px rgba(184,161,110,0.3);
    margin-bottom: 0;
}

.detalle-titulo ion-icon {
    font-size: 1.2rem;
    margin: 0 8px;
}

.detalle-underline {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #B8A16E, #D4C4A8, #B8A16E);
    border-radius: 3px;
    margin: 15px auto 0;
}

/* Contenedor principal moderno */
.modern-detail-container {
    background: linear-gradient(135deg, #fff, #faf8f5);
    border-radius: 32px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    margin: 20px auto;
}

/* Imagen principal moderna */
.modern-main-image {
    border-radius: 24px;
    overflow: hidden;
    background: #f8f8f8;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.modern-main-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.modern-main-image:hover img {
    transform: scale(1.02);
}

/* Tamaño más compacto de la fotografía principal */
.detalle-layout-principal .modern-main-image {
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}
.detalle-layout-principal .modern-main-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
@media (max-width: 575.98px) {
    .detalle-layout-principal .modern-main-image {
        max-width: 290px;
    }
}

/* Animación de carga elegante para la fotografía del producto */
.modern-main-image {
    position: relative;
    min-height: 290px;
    isolation: isolate;
}
.modern-main-image img {
    display: block;
    opacity: 1;
    transition: opacity .28s ease, transform .4s ease;
}
.modern-main-image.is-loading img { opacity: 0; }
.detalle-imagen-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(110deg, #faf7ef 25%, #fffdf7 45%, #faf7ef 65%);
    background-size: 220% 100%;
    animation: detalle-brillo 1.7s linear infinite;
    color: #9e8658;
    font: 600 .83rem 'Poppins', sans-serif;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}
.modern-main-image.is-loading .detalle-imagen-loader {
    opacity: 1;
    visibility: visible;
}
.modern-main-image.has-image-error .detalle-imagen-loader {
    opacity: 1;
    visibility: visible;
    animation: none;
}
.modern-main-image.has-image-error .detalle-loader-circulo { display: none; }
.detalle-loader-circulo {
    height: 37px;
    width: 37px;
    border: 3px solid rgba(184, 161, 110, .22);
    border-top-color: #b8a16e;
    border-radius: 50%;
    animation: detalle-girar .85s linear infinite;
}
@keyframes detalle-girar { to { transform: rotate(360deg); } }
@keyframes detalle-brillo { to { background-position-x: -220%; } }
@media (prefers-reduced-motion: reduce) {
    .detalle-imagen-loader, .detalle-loader-circulo { animation: none; }
}

/* Miniaturas modernas */
.modern-thumbnail {
    width: 70px !important;
    height: 70px !important;
    border-radius: 16px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    object-fit: cover;
}

.modern-thumbnail:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(184,161,110,0.3);
}

.modern-thumbnail.active {
    border-color: #B8A16E;
    box-shadow: 0 0 0 3px rgba(184,161,110,0.3);
}

/* Tarjeta de detalles modernos */
.modern-details-card {
    background: white;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.modern-descripcion {
    background: linear-gradient(135deg, #FFF8DC, #FFF3C4);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.modern-descripcion h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #8B6914;
    margin: 0;
    font-size: 1.2rem;
}

/* Precios modernos */
.modern-price-container {
    background: linear-gradient(135deg, #FFF8DC, #FFF3C4);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

.modern-precio-promo {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    background: linear-gradient(135deg, #B8A16E, #9E8658);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.modern-precio-original {
    font-size: 1.2rem;
    color: #999;
    text-decoration: line-through;
    margin-right: 10px;
}

.modern-descuento-badge {
    background: #ff4757;
    color: white;
    padding: 5px 12px;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 700;
}

.modern-precio-normal {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    background: linear-gradient(135deg, #B8A16E, #9E8658);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

/* Botón de favoritos moderno */
.modern-fav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.modern-fav-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.modern-fav-btn ion-icon {
    font-size: 28px;
    transition: all 0.3s ease;
}

.modern-fav-btn:hover ion-icon {
    transform: scale(1.05);
}

/* Tallas modernas */
.modern-tallas-section {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

.modern-tallas-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #B8A16E;
    font-size: 1rem;
    margin-bottom: 12px;
}

.modern-talla-btn {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 40px;
    padding: 8px 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
    margin: 5px;
}

.modern-talla-btn:hover {
    border-color: #B8A16E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184,161,110,0.2);
}

.modern-talla-btn.selected {
    background: linear-gradient(135deg, #B8A16E, #9E8658);
    border-color: #B8A16E;
    color: white;
}

.modern-talla-ultimas {
    border-color: #ff4757;
    color: #ff4757;
}

.modern-talla-ultimas span {
    color: #ff4757;
}

/* Botones de acción modernos */
.modern-action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.modern-btn {
    background: linear-gradient(135deg, #B8A16E, #9E8658);
    border: none;
    border-radius: 40px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.modern-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(184,161,110,0.4);
    color: white;
}

.modern-btn-outline {
    background: transparent;
    border: 2px solid #B8A16E;
    color: #B8A16E;
}

.modern-btn-outline:hover {
    background: linear-gradient(135deg, #B8A16E, #9E8658);
    color: white;
}

/* Modal moderno */
.modern-modal-content {
    border-radius: 32px !important;
    border: none !important;
    overflow: hidden;
}

.modern-modal-header {
    background: linear-gradient(135deg, #B8A16E, #9E8658);
    color: white;
    border: none;
    padding: 20px;
}

.modern-modal-body {
    padding: 30px;
}

.modern-modal-footer {
    border: none;
    padding: 20px;
    background: #faf8f5;
}

/* Producto no encontrado */
.not-found-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fff, #faf8f5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.not-found-card {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 48px;
    box-shadow: 0 30px 50px rgba(0,0,0,0.1);
    max-width: 500px;
    margin: 20px;
}

.not-found-card img {
    max-width: 250px;
    margin-bottom: 30px;
}

.not-found-card h2 {
    font-family: 'Poppins', sans-serif;
    color: #B8A16E;
    margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .detalle-titulo {
        font-size: 1rem;
        padding: 10px 24px;
    }
    
    .modern-detail-container {
        padding: 15px;
    }
    
    .modern-precio-promo,
    .modern-precio-normal {
        font-size: 1.5rem;
    }
    
    .modern-thumbnail {
        width: 50px !important;
        height: 50px !important;
    }
    
    .modern-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}
</style>

<!-- VERIFICAR SI NO HAY PIEZAS DISPONIBLES -->

<div class="container-fluid py-4">
    <div class="container detalle-layout-container">
      <div class="detalle-layout-grid">
       <main class="detalle-layout-principal">
        <form method="POST" action="" id="formFavorito">
            <input type="hidden" name="toggle_favorito" value="1">
            <div class="modern-detail-container">
                <div class="row g-4">
                    <!-- Columna de imágenes -->
                    <div class="col-lg-6">
                        <div class="modern-main-image mb-3 is-loading" id="productImageContainer" aria-busy="true">
                            <div class="detalle-imagen-loader" id="productImageLoader" role="status" aria-live="polite">
                                <span class="detalle-loader-circulo" aria-hidden="true"></span>
                                <span id="productImageLoadingText">Cargando imagen...</span>
                            </div>
                            <img id="mainProductImage" src="https://www.siempreellasyste.com/vistas/img/img_6aa07219242be8.38475592_1788899865.jpg" alt="Imagen del producto" fetchpriority="high">
                        </div>
                        <div class="thumbnail-images d-flex justify-content-center flex-wrap gap-2 mt-3">
                                                            <img src="https://www.siempreellasyste.com/vistas/img/img_6aa07219242be8.38475592_1788899865.jpg" 
                                     class="modern-thumbnail" 
                                     onclick="changeMainImage(this.src, this)"
                                     data-index="0">
                                                            <img src="https://www.siempreellasyste.com/vistas/img/img_6aa07219246ff1.38696369_1788899865.jpg" 
                                     class="modern-thumbnail" 
                                     onclick="changeMainImage(this.src, this)"
                                     data-index="2">
                                                    </div>
                    </div>
                    
                    <!-- Columna de detalles -->
                    <div class="col-lg-6">
                        <div class="modern-details-card">
                            <!-- Descripción -->
                            <div class="modern-descripcion">
                                <h3>Crop Top Blanco INA Corto Manga Corta De Encaje Con Copas Simuladas</h3>
                            </div>
                            
                            <!-- Precio -->
                            <div class="modern-price-container">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                                                                    <div class="modern-precio-normal">$350 MXN</div>
                                                                                </div>
                                    
                                    <!-- Botón de favoritos -->
                                    <div class="modern-fav-btn" id="btnFavorito">
                                                                                   <ion-icon name="heart-outline" style="color: #B8A16E;"></ion-icon>
                                                                            </div>
                                </div>
                            </div>
                            
                            <!-- Tallas disponibles -->
                            <div class="modern-tallas-section">
                                                              
                                
                                                                    <div class="mt-3">
                                        <div class="modern-tallas-title" style="color: #ff4757;">⚠️ ÚLTIMAS PIEZAS:</div>
                                        <div class="d-flex flex-wrap">
                                                                                            <button type="button" class="modern-talla-btn modern-talla-ultimas talla-button" value="M">
                                                    <span>M</span>
                                                </button>
                                                                                    </div>
                                    </div>
                                                            </div>
                            
                            <!-- Tarjetas aceptadas -->
                            <section class="detalle-medios-pago" aria-label="Tarjetas aceptadas">
                                <p class="detalle-medios-titulo">
                                    <ion-icon name="card-outline" aria-hidden="true"></ion-icon>
                                    Se aceptan las siguientes tarjetas:
                                </p>
                                <div class="detalle-medios-lista">
                                    <span class="detalle-logo-tarjeta detalle-logo-tarjeta--visa" title="Visa" aria-label="Visa">
                                        VISA
                                    </span>
                                    <span class="detalle-logo-tarjeta detalle-logo-tarjeta--mc" title="Mastercard" aria-label="Mastercard">
                                        <span class="detalle-mc-simbolo" aria-hidden="true">
                                            <span class="detalle-mc-circulo detalle-mc-circulo--rojo"></span>
                                            <span class="detalle-mc-circulo detalle-mc-circulo--amarillo"></span>
                                            <span class="detalle-mc-circulo detalle-mc-circulo--centro"></span>
                                        </span>
                                        <span class="detalle-mc-texto">mastercard</span>
                                    </span>
                                </div>
                                <div class="detalle-otras-formas-pago">
                                    <div class="detalle-forma-transferencia">
                                        <ion-icon name="swap-horizontal-outline" aria-hidden="true"></ion-icon>
                                        <span>También aceptamos <strong>transferencias bancarias</strong>.</span>
                                    </div>
                                    <div class="detalle-forma-mercadopago">
                                        <img src="https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/mercado-pago/default.svg"
                                             alt="Logo Mercado Pago" loading="lazy" width="58" height="40">
                                        <span>Y <strong>link de pago de Mercado Pago</strong>.</span>
                                    </div>
                                </div>
                            </section>

                            <!-- Botones de acción -->
                            <div class="modern-action-buttons">
                                <button type="button" class="modern-btn modern-btn-outline" data-bs-toggle="modal" data-bs-target="#imageModal">
                                    <ion-icon name="card-outline"></ion-icon> Medios de Pago
                                </button>
                                
                                <a class="modern-btn modern-btn-outline" href="javascript:history.back();">
                                    <ion-icon name="return-up-back-outline"></ion-icon> Regresar
                                </a>
                                
                                <a href="javascript:void(0);" onclick="validarAntesDeModal()" class="modern-btn">
                                    <img width="20" height="20" src="https://img.icons8.com/3d-fluency/94/whatsapp.png" alt="whatsapp"/> Ordenar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
       </main>
       <aside class="detalle-layout-recomendaciones" aria-label="Prendas recomendadas">
          <style>
.reco-side {background:#fffdf9;border:1px solid #f0e6d2;border-radius:22px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.reco-side__title {font-size:1rem;font-weight:700;color:#927442;margin:0 0 14px;text-align:center;line-height:1.4}
.reco-side__list {display:flex; flex-direction:column;gap:10px}
.reco-side__item {display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #f2eadc;border-radius:15px;background:#fffaf0;color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s}
.reco-side__item:hover {transform:translateY(-2px);box-shadow:0 6px 15px rgba(184,161,110,.17);color:inherit}
.reco-side__image {width:76px;height:93px;object-fit:cover;object-position:center top;border-radius:10px;flex-shrink:0;background:#f3eee7}
.reco-side__info {min-width:0;flex:1}
.reco-side__name {font-size:.83rem;font-weight:600;line-height:1.35;margin:0 0 5px;color:#504739;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reco-side__price {font-weight:800;font-size:1rem;color:#9e8658;line-height:1.2}
.reco-side__old {font-size:.76rem;color:#8d8d8d;text-decoration:line-through;display:block}
.reco-side__discount {font-size:.7rem;color:#cf4e56;font-weight:700}
.reco-side__more {display:block;text-align:center;margin-top:12px;background:linear-gradient(135deg,#b8a16e,#9e8658);padding:10px 12px;border-radius:30px;color:white!important;text-decoration:none;font-size:.85rem;font-weight:600}
.reco-side__more:hover {filter:brightness(.95)}
@media(max-width:991.98px){.reco-side__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.reco-side__image{width:75px;height:92px}}
@media(max-width:480px){.reco-side{padding:12px}.reco-side__list{grid-template-columns:minmax(0,1fr)}.reco-side__image{width:85px;height:96px}.reco-side__name{font-size:.9rem}}
</style>
<section class="reco-side">
    <h3 class="reco-side__title">Prendas que te podrían gustar ✨</h3>
        <div class="reco-side__list">
                    <a class="reco-side__item" href="detalle-producto&amp;identificador=845947392">
                <img class="reco-side__image" src="https://www.siempreellasyste.com/vistas/img/img_6ac02c3ba35951.75967476_1790979131.jpeg" loading="lazy" alt="Vestido Cafe Rokoko Corto Manga Larga Estampado Flores Beiges ">
                <div class="reco-side__info">
                    <p class="reco-side__name">Vestido Cafe Rokoko Corto Manga Larga Estampado Flores Beiges </p>
                                        <div class="reco-side__price">$350.00</div>
                                    </div>
            </a>
                    <a class="reco-side__item" href="detalle-producto&amp;identificador=547902612">
                <img class="reco-side__image" src="https://www.siempreellasyste.com/vistas/img/img_6abfe114108527.57769357_1790959892.jpeg" loading="lazy" alt="Vestido Azul Chicways Largo Manga Corta Olan En Manga y Abajo">
                <div class="reco-side__info">
                    <p class="reco-side__name">Vestido Azul Chicways Largo Manga Corta Olan En Manga y Abajo</p>
                                        <div class="reco-side__price">$890.00</div>
                                    </div>
            </a>
                    <a class="reco-side__item" href="detalle-producto&amp;identificador=698946737">
                <img class="reco-side__image" src="https://www.siempreellasyste.com/vistas/img/img_6abee0a858e782.03983117_1790894248.jpeg" loading="lazy" alt="Vestido Azul Haute Monde Corto Sin Manga Corrugado Con Hombreras">
                <div class="reco-side__info">
                    <p class="reco-side__name">Vestido Azul Haute Monde Corto Sin Manga Corrugado Con Hombreras</p>
                                        <div class="reco-side__price">$490.00</div>
                                    </div>
            </a>
                    <a class="reco-side__item" href="detalle-producto&amp;identificador=698946737">
                <img class="reco-side__image" src="https://www.siempreellasyste.com/vistas/img/img_6abee0a858e782.03983117_1790894248.jpeg" loading="lazy" alt="Vestido Azul Haute Monde Corto Sin Manga Corrugado Con Hombreras">
                <div class="reco-side__info">
                    <p class="reco-side__name">Vestido Azul Haute Monde Corto Sin Manga Corrugado Con Hombreras</p>
                                        <div class="reco-side__price">$490.00</div>
                                    </div>
            </a>
            </div>
        <a href="catalogo-completo" class="reco-side__more">Ver más prendas <ion-icon name="arrow-forward-outline"></ion-icon></a>
</section>
       </aside>
      </div>
    </div>
</div>

<br><br><br><br>

<!-- Modal de origen moderno -->
<div id="modalOrigen" class="modal" style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px);">
    <div class="modal-content" style="background: white; margin: 10% auto; padding: 30px; width: 90%; max-width: 500px; border-radius: 32px; text-align: center; box-shadow: 0 30px 50px rgba(0,0,0,0.2);">
        <h3 style="font-family: 'Poppins', sans-serif; color: #B8A16E; margin-bottom: 20px;">📍 ¿Dónde deseas recibir tu pedido?</h3>
        
        <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 15px; margin: 30px 0;">
            <div>
                <p style="font-weight: 600;">🌴 Tabasco</p>
                <a href="javascript:void(0);" onclick="enviarWhatsApp('Tabasco')" class="modern-btn" style="padding: 8px 20px;">
                    <img width="18" height="18" src="https://img.icons8.com/3d-fluency/94/whatsapp.png" alt="whatsapp"/> Adquirir
                </a>
            </div>
            
            <div>
                <p style="font-weight: 600;">🇲🇽 Nacional</p>
                <a href="javascript:void(0);" onclick="enviarWhatsApp('Nacional')" class="modern-btn" style="padding: 8px 20px;">
                    <img width="18" height="18" src="https://img.icons8.com/3d-fluency/94/whatsapp.png" alt="whatsapp"/> Adquirir
                </a>
            </div>
            
            <div>
                <p style="font-weight: 600;">🏔️ Nayarit</p>
                <a href="javascript:void(0);" onclick="enviarWhatsApp('Nayarit')" class="modern-btn" style="padding: 8px 20px;">
                    <img width="18" height="18" src="https://img.icons8.com/3d-fluency/94/whatsapp.png" alt="whatsapp"/> Adquirir
                </a>
            </div>
        </div>
        
        <button onclick="cerrarModal()" class="modern-btn-outline" style="padding: 8px 30px;">Cerrar</button>
    </div>
</div>

<!-- Modal de medios de pago moderno -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modern-modal-content">
            <div class="modal-header modern-modal-header">
                <h5 class="modal-title" id="imageModalLabel">💳 Medios de Pago</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body modern-modal-body text-center">
                <img src="vistas/img/preventa.jpeg" class="img-fluid" style="border-radius: 20px;" alt="Medios de Pago">
            </div>
            <div class="modal-footer modern-modal-footer">
                <button type="button" class="modern-btn" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    let tallaSeleccionada = "";

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.talla-button').forEach(button => {
            button.addEventListener('click', function() {
                tallaSeleccionada = this.value;
                document.querySelectorAll('.talla-button').forEach(btn => btn.classList.remove('selected'));
                this.classList.add('selected');
            });
        });
        
       
        
        // Marcar primera miniatura como activa
        const firstThumb = document.querySelector('.modern-thumbnail');
        if (firstThumb) firstThumb.classList.add('active');
    });

    // Loader de la foto principal (también funciona al seleccionar miniaturas).
    const fotoPrincipal = document.getElementById('mainProductImage');
    const contenedorFoto = document.getElementById('productImageContainer');
    const textoCargaFoto = document.getElementById('productImageLoadingText');
    let solicitudImagen = 0;

    function mostrarCargaFoto() {
        contenedorFoto.classList.remove('has-image-error');
        contenedorFoto.classList.add('is-loading');
        contenedorFoto.setAttribute('aria-busy', 'true');
        textoCargaFoto.textContent = 'Cargando imagen...';
    }

    function finalizarCargaFoto(error = false) {
        contenedorFoto.classList.remove('is-loading');
        contenedorFoto.setAttribute('aria-busy', 'false');
        if (error) {
            textoCargaFoto.textContent = 'No se pudo cargar la imagen';
            contenedorFoto.classList.add('has-image-error');
        } else {
            contenedorFoto.classList.remove('has-image-error');
        }
    }

    // Al abrir la página, cubre tanto la carga normal como las imágenes en caché.
    fotoPrincipal.addEventListener('load', () => finalizarCargaFoto());
    fotoPrincipal.addEventListener('error', () => finalizarCargaFoto(true));
    if (fotoPrincipal.complete) finalizarCargaFoto(fotoPrincipal.naturalWidth === 0);

    function changeMainImage(src, miniatura) {
        const solicitudActual = ++solicitudImagen;
        mostrarCargaFoto();
        document.querySelectorAll('.modern-thumbnail').forEach(thumb => thumb.classList.remove('active'));
        if (miniatura) miniatura.classList.add('active');

        // Precarga para evitar imágenes a medio pintar al hacer el cambio.
        const precarga = new Image();
        precarga.onload = function () {
            if (solicitudActual !== solicitudImagen) return;
            fotoPrincipal.src = src;
            if (fotoPrincipal.complete && fotoPrincipal.naturalWidth > 0) finalizarCargaFoto();
        };
        precarga.onerror = function () {
            if (solicitudActual !== solicitudImagen) return;
            finalizarCargaFoto(true);
        };
        precarga.src = src;
    }

    function validarAntesDeModal() {
        if (tallaSeleccionada === "") {
            Swal.fire({
                title: "Selecciona una talla",
                text: "Por favor, elige una talla antes de continuar con tu pedido.",
                icon: "warning",
                confirmButtonColor: "#B8A16E",
                background: "#fff",
                color: "#333"
            });
            return;
        }
        mostrarModal();
    }

    function mostrarModal() {
        document.getElementById('modalOrigen').style.display = 'block';
    }

    function cerrarModal() {
        document.getElementById('modalOrigen').style.display = 'none';
    }

    function enviarWhatsApp(origen) {
        cerrarModal();
        
        let numeroWhatsApp;
        let ubicacionVendedor = "";
        
        if (origen === "Tabasco") {
            numeroWhatsApp = "9171099157";
            ubicacionVendedor = "Tabasco";
        } else if (origen === "Nacional") {
            numeroWhatsApp = "3111356590";
            ubicacionVendedor = "Nacional";
        } else {
            numeroWhatsApp = "3111356590";
            ubicacionVendedor = "Nayarit";
        }

        let mensaje = `Hola, quiero ordenar este producto:%0A`;
        mensaje += `- Talla: ${tallaSeleccionada}%0A`;
        mensaje += `- Origen: ${origen}%0A`;
        mensaje += `- Enlace: ${encodeURIComponent(window.location.href)}`;
        
        Swal.fire({
            title: `Redirigiendo a WhatsApp`,
            html: `Serás contactado con nuestro vendedor de <b style="color:#B8A16E">${ubicacionVendedor}</b><br><br>
                  <div style="text-align: left; background: #f8f9fa; padding: 15px; border-radius: 16px;">
                  <b>📋 Detalle de tu pedido:</b><br>
                  • Talla: ${tallaSeleccionada}<br>
                  • Origen: ${origen}<br>
                  • Enlace del producto
                  </div>`,
            icon: "",
            showCancelButton: false,
            confirmButtonColor: "#25D366",
            confirmButtonText: "Abrir WhatsApp",
            background: "#fff",
            color: "#333",
            allowOutsideClick: false
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = `https://wa.me/${numeroWhatsApp}?text=${mensaje}`;
            }
        });
    }

    window.onclick = function(event) {
        const modal = document.getElementById('modalOrigen');
        if (event.target == modal) {
            cerrarModal();
        }
    }
</script>

<script>
    const usuarioLogueado = false;

    document.getElementById('btnFavorito').addEventListener('click', function(e) {

        if (!usuarioLogueado) {

            Swal.fire({
                title: 'Ocupas una Cuenta',
                text: 'Debes iniciar sesión o crear una cuenta para agregar productos a tu Bolsita.',
                icon: 'info',
                showCancelButton: true,
                confirmButtonText: 'Iniciar sesión',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#B8A16E',
                cancelButtonColor: '#999',
                background: '#fff',
                color: '#333',
                reverseButtons: true
            }).then((result) => {

                if (result.isConfirmed) {
                    window.location.href = 'login-cliente';
                }

            });

            return;
        }

        // Si está logueado, continúa normalmente
        document.getElementById('formFavorito').submit();
    });
</script>    </div>

     <!-- Footer Start -->

<link rel="stylesheet" href="vistas/css/footer_cliente.css">

<footer class="footer-se texto-makina">

    <div class="footer-se-container">

        <div class="footer-se-grid">

            <!-- Columna principal -->
            <div class="footer-se-info">

                <a href="index.php?accion=home" class="footer-se-logo-link">
                    <img 
                        src="vistas/img/logo_normal.png" 
                        alt="Logo Siempre Ella" 
                        class="footer-se-logo"
                    >
                </a>

                <p class="footer-se-text">
                    Somos una cadena de cuatro boutiques en Nayarit y Tabasco, creadas para mujeres que buscan algo más que ropa, buscan estilo con alma.
                    Y el cuidado de sus manos y uñas con un toque muy natural.
                </p>

                <div class="footer-se-contacto">
                    <p>
                        <i class="fa fa-map-marker-alt"></i>
                        Sucursal Matriz, Santiago Ixcuintla, Nayarit
                    </p>

                    <p>
                        <i class="fa fa-phone-alt"></i>
                        311-171-0982
                    </p>

                    <p>
                        <i class="fa fa-envelope"></i>
                        boutiquesiempreella@gmail.com
                    </p>
                </div>

                <div class="footer-se-redes">
                    <a 
                        class="footer-se-social" 
                        href="https://www.facebook.com/siempreellaboutique" 
                        target="_blank"
                        aria-label="Facebook Siempre Ella"
                    >
                        <i class="fab fa-facebook-f"></i>
                    </a>

                    <a 
                        class="footer-se-social" 
                        href="https://www.instagram.com/siempreella_salonboutique" 
                        target="_blank"
                        aria-label="Instagram Siempre Ella"
                    >
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>

            </div>

            <!-- Servicios -->
            <div class="footer-se-servicios">

                <h5 class="footer-se-title">
                    Servicios que ofrecemos
                </h5>

                <div class="footer-se-links">
                    <a href="salon">
                        <i class="fa fa-angle-right"></i>
                        Siempre Ella Salon
                    </a>

                    <a href="ubicacion-sucursales">
                        <i class="fa fa-angle-right"></i>
                        Siempre Ella Boutique
                    </a>
                </div>

            </div>

        </div>

    </div>

</footer>

<div class="footer-se-bottom">
    <div class="footer-se-bottom-container">

        <div class="footer-se-copy">
            <p>
                &copy; 
                <a href="#">Derechos Reservados Siempre Ella</a>. 
                Versión 2.0
            </p>
        </div>

        <div class="footer-se-dev">
            <p>
                Desarrollado por el 
                <a href="">Ing. Angell Rafhael Aguirre Jimenez</a>
            </p>
        </div>

    </div>
</div>

<!-- Footer End -->
    <!-- CONTADOR DE VISITAS REALISTA -->
    <div class="contador-visitas" hidden>
        <div class="titulo">📊 Estadísticas en tiempo real</div>
        
                
        <div class="stat">
            <span class="label">👥 Visitantes únicos</span>
            <span class="numero">4,351</span>
        </div>
        <div class="stat">
            <span class="label">🟢 Activos ahora</span>
            <span class="numero">2</span>
        </div>
        <div class="stat">
            <span class="label">📅 Hoy</span>
            <span class="numero">332</span>
        </div>
        <div class="stat">
            <span class="label">📄 Esta página</span>
            <span class="numero">7</span>
        </div>
        <div class="stat" style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 3px; padding-top: 5px;">
            <span class="label" style="font-size: 10px; opacity: 0.5;">Total recargas</span>
            <span class="numero" style="font-size: 12px; opacity: 0.6;">12,542</span>
        </div>
        
        <!-- Mostrar ubicación del usuario actual -->
                <div class="ubicacion">
            <span class="ubicacion-icono">📍</span> Ubicación no disponible (error conexión)        </div>
                
        <!-- Mostrar ubicaciones más comunes (opcional) -->
                <div style="margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 9px; opacity: 0.5;">
            <div style="display: flex; justify-content: space-between;">
                <span>🌍 Ubicaciones populares:</span>
                <span>5</span>
            </div>
                                            <div style="display: flex; justify-content: space-between; padding: 1px 0;">
                    <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;">
                                            </span>
                    <span>3019</span>
                </div>
                                                            <div style="display: flex; justify-content: space-between; padding: 1px 0;">
                    <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;">
                        Mountain View, California, Uni                    </span>
                    <span>1997</span>
                </div>
                                                            <div style="display: flex; justify-content: space-between; padding: 1px 0;">
                    <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;">
                        Boydton, Virginia, United Stat                    </span>
                    <span>1338</span>
                </div>
                                                                                            </div>
            </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="vistas/lib/easing/easing.min.js"></script>
    <script src="vistas/lib/waypoints/waypoints.min.js"></script>
    <script src="vistas/lib/counterup/counterup.min.js"></script>
    <script src="vistas/lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="vistas/lib/tempusdominus/js/moment.min.js"></script>
    <script src="vistas/lib/tempusdominus/js/moment-timezone.min.js"></script>
    <script src="vistas/lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>

    <!-- Contact Javascript File -->
    <script src="vistas/mail/jqBootstrapValidation.min.js"></script>
    <script src="vistas/mail/contact.js"></script>

    <!-- Script para ocultar el contador en dispositivos móviles (opcional) -->
    <script>
        $(document).ready(function() {
            // Ocultar contador en pantallas muy pequeñas si es necesario
            if ($(window).width() < 576) {
                $('.contador-visitas').css('font-size', '11px');
                $('.contador-visitas').css('padding', '8px 12px');
                $('.contador-visitas').css('min-width', '150px');
                $('.contador-visitas').css('bottom', '10px');
                $('.contador-visitas').css('right', '10px');
            }
        });
    </script>

</body>
</html>