/* descubrir.css — la caja de filtros y la rejilla de resultados.
   La tarjeta que va dentro es un componente aparte (`componentes/tarjeta.css`)
   porque también se usa en la portada. */

.filtros{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radio);
  padding:1.1rem 1.25rem; margin-bottom:1.5rem; box-shadow:var(--sombra);
}
.filtros h2{font-size:1rem; margin-bottom:.9rem}
.filtros .fila{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
/* los dos números de edad, uno al lado del otro */
.filtros .edades{display:flex; gap:.5rem; align-items:center}
.filtros .acciones{margin-top:1rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}

.rejilla{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}

/* ── El control de distancia (2026-09-02) ────────────────────────────────────
   Dos controles para un valor: el deslizador para tantear y el número para
   pedir un kilometraje exacto. El número es estrecho a propósito — cabe «1200»
   y nada más — para que se lea como lo que es y no como otro campo de texto. */
.campo-radio .radio-controles{display:flex; align-items:center; gap:.5rem}
.campo-radio .radio-controles input[type=range]{flex:1; min-width:0}
.campo-radio .radio-controles input[type=number]{width:5.2rem; text-align:right}

/* El interruptor de la ubicación. Va debajo del deslizador y no al lado: es
   una decisión sobre un dato personal, y ponerla en la misma fila que los
   kilómetros invita a activarla sin leer lo que hace. */
.campo-radio .origen{margin-top:.5rem}
.campo-radio .interruptor{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.9rem; cursor:pointer; margin-right:.5rem;
}
.campo-radio .interruptor input{width:auto; margin:0}
/* Cuando la ubicación está en marcha, el «desde…» pasa a ser la información
   principal de la fila y deja de ser una nota al pie. */
.campo-radio .origen.activa #desde-donde{color:var(--brand); font-weight:600}