/* assets/css/catalogo.css - CORRECCIÓN DE ALINEACIÓN LADO A LADO */

.layout-principal {
    max-width: 1400px; /* Aumentamos un poco el ancho total */
    margin: 0 auto;
    padding: 20px;
    display: flex !important;
    flex-direction: row !important; /* Fuerza a que estén en fila */
    gap: 30px;
    align-items: flex-start;
    flex-wrap: nowrap !important; /* EVITA que los productos se vayan debajo del sidebar */
}

.sidebar-filtros { 
    width: 280px; 
    flex-shrink: 0; /* Prohíbe que el sidebar se achique o se mueva */
    background-color: white; 
    padding: 25px; 
    border-radius: 15px; 
    border: 1px solid var(--border-color); 
}

.area-productos {
    flex-grow: 1; /* Hace que los productos ocupen todo el espacio derecho restante */
    min-width: 0; /* Truco técnico para que el grid interno no rompa el flex */
}

.area-productos .grid-productos {
    display: grid !important; 
    /* Ajustamos el tamaño mínimo de la tarjeta para que quepan más en horizontal */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; 
    gap: 20px !important;
    width: 100% !important;
}

/* Ajuste de tarjeta para que no use el estilo de carrusel */
.area-productos .tarjeta-producto {
    width: 100% !important;
    flex: none !important;
}

/* =========================================
   RESPONSIVIDAD CATÁLOGO (MÓVILES Y TABLETS)
   ========================================= */
@media (max-width: 900px) {
    .layout-principal {
        flex-direction: column !important; /* Apila los filtros arriba y los productos abajo */
        padding: 10px;
    }

    .sidebar-filtros { 
        width: 100%; /* El sidebar toma todo el ancho */
        margin-bottom: 20px;
    }

    .area-productos {
        width: 100%;
    }

    .area-productos .grid-productos {
        /* Reduce el tamaño mínimo de la tarjeta para que entren 2 por fila en móviles */
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; 
        gap: 10px !important;
    }
}