#modalZoom {
    backdrop-filter: blur(5px);
    z-index:         999999;
    width:           100vw;
    height:          100vh;
    margin:          0;
    padding:         20px;
    box-sizing:      border-box;
}

#imageCounter {
    background:      rgba(0, 0, 0, 0.9);
    color:           white;
    padding:         8px 20px;
    border-radius:   12px;
    font-weight:     bold;
    font-size:       0.875rem;
    position:        absolute;
    top:             24px;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         1001;
    backdrop-filter: blur(5px);
    border:          1px solid rgba(255, 255, 255, 0.3);
}

#modalZoomImg {
    box-shadow:    0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-height:    90vh;
    max-width:     90vw;
    min-height:    200px;
    min-width:     200px;
    object-fit:    contain;
    margin:        auto;
    display:       block;
    background:    white;
    padding:       20px;
    border-radius: 12px;
    box-sizing:    border-box;
}

.nav-btn {
    background:      rgba(0, 0, 0, 0.7);
    border-radius:   50%;
    width:           60px;
    height:          60px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           white;
    font-size:       28px;
    cursor:          pointer;
    transition:      all 0.3s ease;
    backdrop-filter: blur(10px);
    border:          2px solid rgba(255, 255, 255, 0.3);
    z-index:         1001;
    position:        absolute;
}

.nav-btn:hover {
    background:   rgba(0, 0, 0, 0.9);
    transform:    scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

#modalCerrar {
    background:      rgba(0, 0, 0, 0.7);
    border:          2px solid rgba(255, 255, 255, 0.3);
    color:           white;
    font-size:       32px;
    font-weight:     bold;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index:         1001;
    position:        absolute;
    top:             24px;
    right:           24px;
    line-height:     1;
    padding:         0;
}

#modalCerrar:hover {
    background:   rgba(220, 38, 38, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
    color:        white;
    transform:    scale(1.1);
}

#prevImg {
    left: 30px;
}

#nextImg {
    right: 30px;
}

.contenedor-imagen {
    width:           100%;
    max-width:       280px;
    height:          400px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto;
    contain:         layout style paint;
}

.imagen-producto {
    max-width:           100%;
    max-height:          100%;
    width:               auto;
    height:              auto;
    object-fit:          contain;
    transition:          opacity 0.3s ease;
    backface-visibility: hidden;
    transform:           translateZ(0);
}

.imagen-producto:not([src]) {
    opacity: 0;
}

.imagen-producto[src] {
    opacity: 1;
}

.swiper-slide img {
    transition:          opacity 0.3s ease;
    backface-visibility: hidden;
}

.swiper.thumb .swiper-slide,
.swiper.thumb2 .swiper-slide {
    width:           80px !important;
    height:          112px !important;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #f8fafc;
    border:          2px solid transparent;
    border-radius:   8px;
    overflow:        hidden;
    box-sizing:      border-box;
    transition:      border-color 0.2s ease;
}

.swiper.thumb .swiper-slide img,
.swiper.thumb2 .swiper-slide img {
    width:               100% !important;
    height:              100% !important;
    object-fit:          contain !important;
    padding:             4px;
    box-sizing:          border-box;
    transition:          opacity 0.3s ease;
    backface-visibility: hidden;
    transform:           translateZ(0);
}

.swiper.thumb .swiper-slide.swiper-slide-thumb-active,
.swiper.thumb2 .swiper-slide.swiper-slide-thumb-active {
    border-color: #3b82f6;
    background:   #eff6ff;
}

.swiper.thumb .swiper-slide:hover,
.swiper.thumb2 .swiper-slide:hover {
    border-color: #93c5fd;
}

.swiper.thumb,
.swiper.thumb2 {
    margin-top: 16px;
    padding:    0 10px;
    box-sizing: border-box;
}

.swiper.thumb .swiper-wrapper,
.swiper.thumb2 .swiper-wrapper {
    align-items: center;
    box-sizing:  border-box;
}

@media (max-width: 768px) {
    .swiper.thumb .swiper-slide,
    .swiper.thumb2 .swiper-slide {
        width:  70px !important;
        height: 98px !important;
    }
}

@media (max-width: 480px) {
    .swiper.thumb .swiper-slide,
    .swiper.thumb2 .swiper-slide {
        width:  60px !important;
        height: 84px !important;
    }

    .swiper.thumb,
    .swiper.thumb2 {
        padding: 0 5px;
    }
}

@media (max-width: 768px) {
    #modalZoom {
        padding: 15px;
    }

    #modalZoomImg {
        max-height: 85vh;
        max-width:  90vw;
        min-height: 150px;
        min-width:  150px;
        padding:    15px;
    }

    .nav-btn {
        width:     50px;
        height:    50px;
        font-size: 24px;
    }

    #prevImg {
        left: 15px;
    }

    #nextImg {
        right: 15px;
    }

    #modalCerrar {
        top:       16px;
        right:     16px;
        width:     48px;
        height:    48px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    #modalZoom {
        padding: 10px;
    }

    #modalZoomImg {
        max-height: 80vh;
        max-width:  95vw;
        min-height: 120px;
        min-width:  120px;
        padding:    10px;
    }

    #modalCerrar {
        top:       12px;
        right:     12px;
        width:     44px;
        height:    44px;
        font-size: 24px;
    }
}
/* Para móvil - barra sticky que sigue al usuario */
@media (max-width: 640px) {
    /* Contenedor principal de la app necesita posición relativa */
    #contenedor-app {
        position: relative;
        min-height: 100vh;
        padding-bottom: 85px; /* Espacio para la barra sticky */
    }

    /* La barra sticky debe estar fija en la parte inferior */
    .sticky.bottom-0 {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100px;
        background-color: #f8fafc; /* bg-azul-fondo-claro */
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        margin: 0;
        transform: translateZ(0); /* Aceleración por hardware */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(248, 250, 252, 0.98);
    }

    /* Asegurar que el contenido no quede oculto detrás de la barra */
    .contenido-app {
        padding-bottom: 85px;
    }

    /* El main debe tener margen inferior para no chocar con la barra */
    main {
        margin-bottom: 0;
        min-height: calc(100vh - 200px); /* Ajusta según altura del header y footer */
    }

    /* Ajustes para el último elemento de la página */
    footer {
        margin-bottom: 85px;
        position: relative;
        z-index: 1;
    }
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 380px) {
    #contenedor-app {
        padding-bottom: 125px;
    }

    .sticky.bottom-0 {
        height: 125px;
    }

    .contenido-app {
        padding-bottom: 125px;
    }

    footer {
        margin-bottom: 125px;
    }
}

/* Animación de entrada */
@keyframes slideUpFixed {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.sticky.bottom-0 {
    animation: slideUpFixed 0.3s ease-out;
}

/* Sombra al hacer scroll */
.sticky.bottom-0.scrolled {
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.15);
}

/* Mejoras de usabilidad táctil */
@media (max-width: 640px) {
    .sticky.bottom-0 button {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Evitar que elementos con z-index alto tapen la barra */
    .fixed:not(.sticky.bottom-0) {
        z-index: 9998 !important; /* Un nivel por debajo de la barra */
    }
}