/* ==========================================================================
   Filtros del listado.

   Cada casilla es un enlace a otra URL: se puede compartir, guardar en
   favoritos y volver atras con el navegador. El formulario solo existe para
   quien navegue sin JavaScript.
   ========================================================================== */

.filters {
    position: sticky;
    top: 5.5rem;
    align-self: start;
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
}

.filters__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
}

.filters__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.filters__clear {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--teal);
    border-bottom: 1px solid transparent;
}

.filters__clear:hover {
    border-bottom-color: currentColor;
}

.filters__group {
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--rule);
}

.filters__group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.filters__legend {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--teal);
}

.filters__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.45rem 0.5rem;
    margin-inline: -0.5rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    transition: background-color var(--dur) var(--ease);
}

.filters__option:hover {
    background: var(--teal-tint);
}

/* Casilla dibujada a mano para que herede los colores de la marca. */
.filters__box {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: 6px;
    background: var(--surface);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.filters__box svg {
    width: 0.7rem;
    height: 0.7rem;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.filters__option[aria-pressed='true'] .filters__box,
.filters__option[data-active='true'] .filters__box {
    background: var(--teal);
    border-color: var(--teal);
}

.filters__option[aria-pressed='true'] .filters__box svg,
.filters__option[data-active='true'] .filters__box svg {
    opacity: 1;
    transform: scale(1);
}

.filters__option-text {
    flex: 1;
}

.filters__count {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.filters__option[data-empty='true'] {
    opacity: 0.45;
}

/* Barra de filtros en movil: abre el panel lateral como hoja inferior. */
.filters-bar {
    display: none;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (max-width: 62rem) {
    .filters-bar {
        display: flex;
    }

    .filters {
        position: static;
        margin-bottom: var(--space-5);
    }

    .filters[hidden] {
        display: none;
    }
}

/* --- Provincias plegables ------------------------------------------------
   Las ciudades de una provincia van dentro de un <details>. Es nativo: se
   pliega sin JavaScript y los enlaces siguen en el HTML aunque este cerrado,
   que es lo que hace falta para que Google los rastree.
   ------------------------------------------------------------------------ */

.filters__fold {
    border-bottom: 1px solid var(--rule);
}

.filters__fold:last-of-type {
    border-bottom: 0;
}

.filters__fold-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: 0.55rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

/* El triangulo por defecto de Safari y Chrome, fuera: se dibuja el propio. */
.filters__fold-head::-webkit-details-marker {
    display: none;
}

.filters__fold-head:hover {
    color: var(--teal);
}

/* Chevron dibujado con dos bordes: un icono menos que cargar. */
.filters__fold-mark {
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.2rem;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg);
    transition: transform var(--dur) var(--ease);
}

.filters__fold[open] > .filters__fold-head .filters__fold-mark {
    transform: rotate(-135deg);
}

/* Con cien municipios hace falta tope y barra propia, o el panel se estira
   hasta dejar la pagina sin arriba ni abajo.

   overflow-x en hidden a proposito: al pedir overflow-y, el navegador deja de
   tratar el eje X como "visible" y lo pasa a "auto", asi que aparecia una barra
   horizontal sin que nada se saliera de verdad. */
.filters__fold-body {
    max-height: 17rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--space-3);
    padding-left: var(--space-3);
    padding-right: var(--space-2);
    border-left: 2px solid var(--teal-soft);
    margin-left: 0.2rem;
}

/* Las opciones del panel se salen medio rem por cada lado para que el fondo
   del hover llegue al borde. Aqui dentro no: hay una barra de scroll a la
   derecha y un filete a la izquierda, y ese desbordamiento era justo lo que
   empujaba el ancho. */
.filters__fold-body .filters__option {
    margin-inline: 0;
    font-weight: 500;
}

/* Un nombre largo (Soraluze-Placencia de las Armas) tiene que poder partirse:
   sin min-width, un elemento flexible no baja de su contenido y ensancharia la
   caja. */
.filters__fold-body .filters__option-text {
    min-width: 0;
    overflow-wrap: break-word;
}

.filters__fold-body .filters__option[data-active='true'] {
    background: var(--teal-tint);
    color: var(--teal);
    font-weight: 700;
}