:root {
    --color-gris-1: #bdbdbd;
    --color-azul-f-1: #060a2f;
    --color-verde-1: #16a34a;
    --color-gris-2: #4b5563;
    --color-dorado-1: #bd8d24;
    --color-gris-3: #7b7b7b;

}

.filtros{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 32px 0;

}

.filtros .contenedor{
    display:flex;
    flex-direction:row;
    justify-content: start;
    align-items: start;
    gap:16px;
}


.grupo-filtros{
    display:flex;
    flex-direction:column;
    border: 1px solid var(--color-gris-1);
    border-radius: 16px;
    padding:16px;
}

.titulo-filtros{
    font-size:1rem;
    font-weight:600;
    color: var(--color-azul-f-1);
}

.contenedor-botones{
    display:flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap:wrap;
    margin-top: 8px;
}

.btn-filtro,
.btn-area{
    display: inline-block;
    padding:10px 16px;
    border:1px solid var(--color-gris-1);
    border-radius:999px;
    background: white;
    cursor:pointer;
    transition:.25s;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-azul-f-1);
    transition:
        background .25s,
        color .25s,
        border-color .25s,
        transform .25s,
        box-shadow .25s;
}

.btn-filtro:hover{
    transform:translateY(-2px);
    box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.btn-area:hover{
    transform:translateY(-2px);
    box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.btn-filtro.activo{
    background:var(--color-azul-f-1);
    color:#fff;
    border-color:var(--color-azul-f-1);
}

.btn-area.activo{
    background:var(--color-dorado-1);
    color:#fff;
    border-color:var(--color-dorado-1);
}

/* estilos de busqueda */

.barra-herramientas {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 16px 0;
}


.barra-herramientas-grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

#contador-resultados{
    font-size:1rem;
    font-weight:700;
    color: var(--color-gris-2);
}

.ordenar{

    display:flex;

    align-items:center;

    gap:12px;

}

.ordenar label{
    color: var(--color-gris-2);
    font-weight:500;
}

#ordenar-select{
    padding:8px 12px;
    border-radius:10px;
    border:1px solid var(--color-gris-1);
    outline:none;
    cursor:pointer;
    transition:.25s;
}

#ordenar-select:focus{
    border-color:#2563eb;
}


@media (max-width:768px) {
    .filtros {
        margin: 0 0 24px 0;
    }

    .filtros .contenedor {
        display:flex;
        flex-direction:column;
        justify-content: start;
        align-items: start;
        gap:10px;
    }

    .grupo-filtros {
        width: 100%;
        padding:10px;
    }

    .titulo-filtros {
        font-size: .90rem;
    }

    .contenedor-botones {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 5px;
    }

    /*
    .contenedor-botones{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:6px;
    }
    */

    .btn-filtro,
    .btn-area {
        padding:8px 12px;
        font-size: 0.8rem;
    }

    .barra-herramientas-grid {
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    #contador-resultados{
        font-size:.90rem;
    }

    .ordenar{
        gap: 8px;
    }

    .ordenar label{
        font-size: .90rem;
    }


}