/* FIX DEFINITIVO: Layout sidebar + productos */

/* FORZAR GRID EN EL CONTENEDOR PRINCIPAL */
section#catalogo .container .contenedor {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: 
        "toggle toggle"
        "sidebar content" !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* TOGGLE MÓVIL EN LA PRIMERA FILA */
section#catalogo .container .contenedor > .filtros-mobile-toggle {
    grid-area: toggle !important;
    display: none !important;
}

/* BOTÓN CERRAR FILTROS - VISIBLE EN MÓVIL */
@media (max-width: 768px) {
    section#catalogo .container .contenedor > aside.filtros .cerrar-filtros-btn {
        display: block !important;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
    }
}

@media (min-width: 769px) {
    section#catalogo .container .contenedor > aside.filtros .cerrar-filtros-btn {
        display: none !important;
    }
}

/* OPCIONES DE FILTROS - CONTROL VIA JAVASCRIPT */
section#catalogo .container .contenedor > aside.filtros .filtro-opciones {
    transition: all 0.3s ease;
}
/* Estados de acordeón (aplican a todos los tamaños, controlado por clase) */
section#catalogo .container .contenedor > aside.filtros .filtro-opciones {
    display: none !important;
}

section#catalogo .container .contenedor > aside.filtros .filtro-opciones.abierto {
    display: block !important;
}

/* ICONOS DE FILTROS */
section#catalogo .container .contenedor > aside.filtros .filtro-titulo i {
    transition: transform 0.3s ease !important;
}

/* Botón Reset: oculto por defecto; visible solo con filtros activos */
section#catalogo .container .contenedor > aside.filtros .resetear-filtros-btn {
    display: none !important;
}

section#catalogo .container .contenedor > aside.filtros.tiene-filtros .resetear-filtros-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    section#catalogo .container .contenedor > aside.filtros .cerrar-filtros-btn {
        display: block !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        background: none !important;
        border: none !important;
        font-size: 1.5rem !important;
        color: var(--text-color) !important;
        cursor: pointer !important;
        z-index: 1001 !important;
    }
}

/* SIDEBAR EN LA SEGUNDA FILA, PRIMERA COLUMNA */
section#catalogo .container .contenedor > aside.filtros {
    grid-area: sidebar !important;
    width: 280px !important;
    max-width: 280px !important;
    position: sticky !important;
    top: 100px !important;
    height: fit-content !important;
    z-index: 10 !important;
}

/* Scroll interno del sidebar en desktop */
@media (min-width: 769px) {
    section#catalogo .container .contenedor > aside.filtros {
        /* El alto máximo será el alto de la ventana menos el offset sticky */
        max-height: calc(100vh - 120px) !important; /* 100px top + 20px margen aprox */
        overflow-y: auto !important;
        padding-right: 6px; /* espacio para scrollbar */
    }
}

/* Scrollbar oscuro del sidebar de filtros (WebKit/Chromium/Edge) */
section#catalogo .container .contenedor > aside.filtros::-webkit-scrollbar {
    width: 8px;
}

section#catalogo .container .contenedor > aside.filtros::-webkit-scrollbar-track {
    background: #1e1e1e; /* track oscuro */
    border-radius: 8px;
}

section#catalogo .container .contenedor > aside.filtros::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 8px;
}

section#catalogo .container .contenedor > aside.filtros::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Soporte Firefox */
section#catalogo .container .contenedor > aside.filtros {
    scrollbar-width: thin;           /* fino */
    scrollbar-color: #555 #1e1e1e;   /* thumb color, track color */
}

/* CATÁLOGO EN LA SEGUNDA FILA, SEGUNDA COLUMNA */
section#catalogo .container .contenedor > .catalogo {
    grid-area: content !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* GRID DE PRODUCTOS DENTRO DEL CATÁLOGO */
section#catalogo .container .contenedor > .catalogo #catalogo-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* RESPONSIVE: MÓVIL */
@media (max-width: 768px) {
    section#catalogo .container .contenedor {
        grid-template-columns: 1fr !important;
        grid-template-areas: 
            "toggle"
            "content" !important;
        /* NO INCLUIR "sidebar" en las áreas, lo manejará el CSS de móvil original */
    }
    
    section#catalogo .container .contenedor > .filtros-mobile-toggle {
        display: block !important;
    }
    
    /* RESETEAR GRID PARA FILTROS EN MÓVIL - que funcionen como overlay */
    section#catalogo .container .contenedor > aside.filtros {
        /* Anular grid positioning en móvil */
        grid-area: unset !important;
        /* Permitir que las reglas originales de móvil tomen control */
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 90% !important;
        max-width: 350px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
        background: var(--bg-light) !important;
        transition: left 0.3s ease !important;
        padding-top: 60px !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* FILTROS ACTIVOS EN MÓVIL */
    section#catalogo .container .contenedor > aside.filtros.activo {
        left: 0 !important;
        display: block !important;
    }
    
    /* OVERLAY CUANDO FILTROS ESTÁN ACTIVOS */
    body:has(section#catalogo .container .contenedor > aside.filtros.activo) {
        overflow: hidden !important;
    }
    
    section#catalogo .container .contenedor > .catalogo #catalogo-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
}