/*
 * Filtros de los listados (listado.blade.php y components/mini/sidebar/*).
 * Clases propias: el Tailwind servido está purgado y no trae utilidades nuevas.
 * Paleta de la web: azul oscuro 16 76 113 · azul fondo 212 222 229 · azul intenso 33 171 210 · gris 156 165 169
 */

/* ---------- Selector destacado de tipo de artículo (resultados de varios tipos) ---------- */
.selector-tipo-articulo {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(212 222 229);
    border-radius: 0.5rem;
    background-color: rgb(212 222 229 / 0.35);
}

.selector-tipo-articulo__titulo {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: rgb(16 76 113);
}

.selector-tipo-articulo__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.selector-tipo-articulo__opcion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid rgb(16 76 113);
    border-radius: 9999px;
    background-color: #fff;
    color: rgb(16 76 113);
    font-size: 0.875rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.selector-tipo-articulo__opcion:hover,
.selector-tipo-articulo__opcion:focus-visible {
    background-color: rgb(16 76 113);
    color: #fff;
}

.selector-tipo-articulo__numero {
    font-size: 0.75rem;
    opacity: 0.75;
}

/* ---------- Secciones plegables ---------- */
.filtros {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgb(212 222 229);
}

.filtro {
    border-bottom: 1px solid rgb(212 222 229);
}

.filtro__cabecera {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0;
    border: 0;
    background: none;
    color: rgb(16 76 113);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.filtro__cabecera:hover .filtro__titulo {
    color: rgb(33 171 210);
}

.filtro__cabecera:focus-visible {
    outline: 2px solid rgb(33 171 210);
    outline-offset: 2px;
}

.filtro__titulo {
    flex: 1 1 auto;
    min-width: 0;
    transition: color 0.15s ease;
}

.filtro__contador {
    flex: none;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    background-color: rgb(33 171 210);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.filtro__flecha {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.filtro--abierta > .filtro__cabecera .filtro__flecha {
    transform: rotate(180deg);
}

.filtro__cuerpo {
    display: none;
    padding-bottom: 0.875rem;
}

.filtro--abierta > .filtro__cuerpo {
    display: block;
}

/* ---------- Opciones ---------- */
.filtro-opcion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 -0.375rem;
    padding: 0.3125rem 0.375rem;
    border-radius: 0.25rem;
    color: rgb(31 41 55);
    font-size: 0.8125rem;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.filtro-opcion:hover {
    background-color: rgb(212 222 229 / 0.45);
    color: rgb(16 76 113);
}

.filtro-opcion__check {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid rgb(156 165 169);
    border-radius: 0.25rem;
    color: rgb(16 76 113);
    accent-color: rgb(16 76 113);
    cursor: pointer;
}

.filtro-opcion__check:focus {
    box-shadow: none;
    outline: 2px solid rgb(33 171 210);
    outline-offset: 1px;
}

/* Casilla dibujada para las opciones que son enlaces (tipo, disponibilidad, novedades) */
.filtro-opcion__marca {
    position: relative;
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgb(156 165 169);
    border-radius: 0.25rem;
    background-color: #fff;
}

.filtro-opcion--activa {
    color: rgb(16 76 113);
    font-weight: 600;
}

.filtro-opcion--activa .filtro-opcion__marca {
    border-color: rgb(16 76 113);
    background-color: rgb(16 76 113);
}

.filtro-opcion--activa .filtro-opcion__marca::after {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 0.1rem;
    width: 0.3rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filtro-opcion__texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.filtro-opcion__numero {
    flex: none;
    color: rgb(125 134 139);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* Marcado que ya no sale en la lista: se enseña para poder quitarlo */
.filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0.25rem 0.5rem 0;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background-color: rgb(212 222 229);
    color: rgb(16 76 113);
    font-size: 0.75rem;
    line-height: 1.2;
    text-decoration: none;
}

.filtro-chip:hover {
    background-color: rgb(16 76 113);
    color: #fff;
}

/* ---------- Buscar y ver más en listas largas ---------- */
.filtro-oculto {
    display: none !important;
}

.filtro-buscar {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid rgb(156 165 169);
    border-radius: 0.375rem;
    background-color: #fff;
    color: #000;
    font-size: 0.8125rem;
}

.filtro-buscar:focus {
    border-color: rgb(33 171 210);
    outline: 1px solid rgb(33 171 210);
    box-shadow: none;
}

.filtro-lista--expandida [data-filtro-items] {
    max-height: 16rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.filtro-ver-mas {
    margin-top: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(16 76 113);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.filtro-ver-mas:hover {
    color: rgb(33 171 210);
    text-decoration: underline;
}

.filtro-vacio {
    margin: 0.25rem 0;
    color: rgb(125 134 139);
    font-size: 0.75rem;
}

/* ---------- Rangos (precio, páginas) y fechas ---------- */
.filtro-rango {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.375rem;
}

.filtro-rango__campo {
    position: relative;
    display: block;
    min-width: 0;
}

.filtro-rango__input {
    display: block;
    width: 100%;
    padding: 0.375rem 1.375rem 0.375rem 0.5rem;
    border: 1px solid rgb(156 165 169);
    border-radius: 0.375rem;
    background-color: #fff;
    color: #000;
    font-size: 0.8125rem;
}

.filtro-rango__input--sin-unidad {
    padding-right: 0.5rem;
}

.filtro-rango__input:focus {
    border-color: rgb(33 171 210);
    outline: 1px solid rgb(33 171 210);
    box-shadow: none;
}

.filtro-rango__unidad {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    color: rgb(125 134 139);
    font-size: 0.75rem;
    pointer-events: none;
}

.filtro-rango__separador {
    color: rgb(125 134 139);
}

.filtro-rango .filtro-boton {
    grid-column: 1 / -1;
}

.filtro-fecha {
    display: grid;
    gap: 0.5rem;
}

.filtro-fecha__campo span {
    display: block;
    margin-bottom: 0.125rem;
    color: rgb(75 85 99);
    font-size: 0.75rem;
}

.filtro-boton {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(16 76 113);
    border-radius: 9999px;
    background-color: #fff;
    color: rgb(16 76 113);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.filtro-boton:hover,
.filtro-boton:focus-visible {
    background-color: rgb(16 76 113);
    color: #fff;
}

/* ---------- Atributos propios del tipo ---------- */
.filtros-grupo {
    margin-top: 1.5rem;
    border-top: 0;
}

.filtros-grupo__titulo {
    margin: 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgb(212 222 229);
    color: rgb(125 134 139);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.filtros-grupo__mas {
    align-self: flex-start;
    margin-top: 0.625rem;
}

/* ---------- Restablecer filtros ---------- */
.filtros-restablecer {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.625rem;
    color: rgb(16 76 113);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.filtros-restablecer:hover,
.filtros-restablecer:focus-visible {
    color: rgb(33 171 210);
    text-decoration: underline;
}

.filtros-restablecer svg {
    width: 0.9375rem;
    height: 0.9375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Cargando el listado sin recargar la página (listado-ajax.js) ---------- */
[data-listado-zona="resultados"],
[data-listado-zona="filtros"] {
    transition: opacity 0.15s ease 0.1s;
}

.listado-cargando [data-listado-zona="resultados"],
.listado-cargando [data-listado-zona="filtros"] {
    opacity: 0.5;
    pointer-events: none;
}