.catalog-title { 
    color: #2c2c2c; 
    font-weight: 800; 
    letter-spacing: -0.5px; 
}

.catalog-toolbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

@media (max-width: 768px){
    .catalog-toolbar{
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar{
        width: 100%;
    }

    .search-bar input{
        width: 100%;
        flex: 1;
    }

    .sort-bar{
        width: 100%;
        justify-content: flex-start;
    }

    .sort-bar select{
        width: 100%;
    }
}

.row {
    display: flex;
    align-items: flex-start; /* Importante para que el aside no herede la altura del main */
}

@media (min-width: 992px) {
    aside.sticky-lg-top {
        position: -webkit-sticky; /* Soporte para Safari */
        position: sticky;
        top: 20px; /* Distancia desde el borde superior de la ventana */
        height: auto; 
        max-height: calc(100vh - 40px); /* Evita que el filtro sea más largo que la pantalla */
        overflow-y: auto; /* Si el filtro es muy largo, permite scroll interno */
    }
}

/* Estilo unificado para todos los selectores y controles del catálogo */
.filter-sidebar .form-select,
.filter-sidebar .form-control,
.sort-bar .form-select {
    border: 1px solid #dee2e6 !important; /* Color gris suave */
    border-radius: 8px !important;        /* Bordes redondeados consistentes */
    padding: 10px 12px;
    font-size: 0.9rem;
    height: 42px;                         /* Altura fija para ambos */
    transition: all 0.2s ease;
    background-color: #ffffff;
}

/* Efecto Focus unificado (Amarillo/Naranja) */
.filter-sidebar .form-select:focus,
.filter-sidebar .form-control:focus,
.sort-bar .form-select:focus,
.search-bar input:focus {
    border-color: #f2b01e !important;
    box-shadow: 0 0 0 4px rgba(242, 176, 30, 0.15) !important;
    outline: none;
}

/* Ajuste específico para la barra de orden */
.sort-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}