/* ============================================
   SIDEBAR STICKY - CONSOLIDADO Y OPTIMIZADO
   Versión consolidada de 4 archivos duplicados
   Fecha: 2025-12-01

   ARCHIVOS REEMPLAZADOS:
   - tienda-sticky-fix.css
   - tienda-sticky-final.css
   - tienda-sticky-enhanced.css
   - tienda-sticky-force.css
============================================ */

/* ============================================
   SOLO DESKTOP (992px+)
============================================ */
@media screen and (min-width: 992px) {

    /* Preparar HTML y BODY para permitir scroll */
    html {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        height: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    /* Contenedor principal - overflow visible para sticky */
    .tienda-contenedor-principal {
        overflow: visible !important;
        overflow-x: hidden !important;
        position: relative !important;
        transform: none !important;
    }

    /* Container fluid */
    .tienda-contenedor-principal > .container-fluid,
    .tienda-contenedor-principal .tienda-container-fluid {
        overflow: visible !important;
        overflow-x: hidden !important;
        position: relative !important;
        transform: none !important;
    }

    /* Row principal */
    .tienda-contenedor-principal .row,
    .tienda-contenedor-principal .tienda-row-principal {
        overflow: visible !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        transform: none !important;
    }

    /* Columna de sidebar */
    .tienda-contenedor-principal .col-lg-2,
    .tienda-contenedor-principal .col-md-3 {
        overflow: visible !important;
        overflow-x: hidden !important;
        position: relative !important;
        align-self: flex-start !important;
        flex-shrink: 0 !important;
        transform: none !important;
    }

    /* ============================================
       STICKY EN LA BARRA LATERAL
       Máxima especificidad para sobrescribir todo
    ============================================ */
    body .tienda-contenedor-principal .col-lg-2 .tienda-barra-lateral,
    body .tienda-contenedor-principal .col-md-3 .tienda-barra-lateral,
    .tienda-contenedor-principal .tienda-barra-lateral,
    div.tienda-barra-lateral,
    .tienda-barra-lateral {
        /* STICKY POSITION - CRÍTICO */
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100px !important;

        /* Dimensiones */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 120px) !important;

        /* Overflow para scroll interno */
        overflow-x: hidden !important;
        overflow-y: auto !important;

        /* Display */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Z-index */
        z-index: 100 !important;

        /* RESETEAR TRANSFORMS - Rompen sticky */
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        will-change: auto !important;
        filter: none !important;
        perspective: none !important;

        /* Espaciado */
        margin: 0 !important;
        padding: 20px !important;
        padding-right: 15px !important;

        /* Alineación */
        align-self: flex-start !important;

        /* Estilo visual */
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
        transition: box-shadow 0.3s ease !important;
    }

    /* Hover effect */
    .tienda-barra-lateral:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    }

    /* Hijos de la sidebar no deben interferir */
    .tienda-barra-lateral > *,
    .tienda-barra-lateral .tienda-card-filtro {
        position: relative !important;
        transform: none !important;
        will-change: auto !important;
    }

    /* ============================================
       SCROLLBAR PERSONALIZADO
    ============================================ */
    .tienda-barra-lateral::-webkit-scrollbar {
        width: 6px;
    }

    .tienda-barra-lateral::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    .tienda-barra-lateral::-webkit-scrollbar-thumb {
        background: var(--primary-gold, #D4AF37);
        border-radius: 10px;
        transition: background 0.3s ease;
    }

    .tienda-barra-lateral::-webkit-scrollbar-thumb:hover {
        background: var(--dark-navy, #1a1f36);
    }

    /* Columna de productos debe tener altura suficiente */
    .tienda-contenedor-principal .col-lg-10,
    .tienda-contenedor-principal .col-md-9 {
        flex-grow: 1 !important;
        min-height: 100vh !important;
        position: relative !important;
    }
}

/* ============================================
   MÓVILES - Ocultar sidebar
============================================ */
@media screen and (max-width: 991px) {
    .tienda-barra-lateral {
        position: relative !important;
        display: none !important;
    }
}