/*
 * rf-busqueda.css — la página de búsqueda (P7.4, documento 03 §7.2) y el mapa de MapLibre de la búsqueda y la ficha.
 * Solo la cargan portal/buscar.html y portal/ficha.html.
 *
 * Revisión 4.5 (P7.11; D-1766): arriba, la barra como TIRA de campos con borde de tinta y, debajo, la barra de chips
 * (los filtros rápidos, el orden y «Todos los filtros»). Escritorio (≥ 992 px): a la izquierda la lista (7/12) de
 * tarjetas horizontales separadas por filetes y a la derecha el mapa fijo (5/12) con marcadores de tinta. Móvil: la
 * lista a pantalla completa y el botón flotante «Mapa» que alterna a la vista de mapa (con JavaScript). Todos los
 * filtros, en todos los anchos, en una HOJA de radio xl que se abre con el ancla #rf-busqueda-filtros (:target), así
 * que también sin JavaScript: a la derecha en escritorio, abajo en el móvil, con su velo.
 */

.rf-busqueda-pagina {
  width: 100%;
  padding-inline: var(--rf-espacio-4);
  padding-block: var(--rf-espacio-4) var(--rf-espacio-10);
}
@media (min-width: 768px) {
  .rf-busqueda-pagina { padding-inline: var(--rf-espacio-6); }
}

.rf-busqueda-disposicion { display: block; }

/* ============================================================================================
   La barra: qué, dónde, cuándo, hora, duración, cuántos, como una tira (§4.2). En el móvil, en dos columnas; desde
   1200 px, en una sola fila con el botón pegado al final.
   ============================================================================================ */
.rf-busqueda-barra {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rf-busqueda-barra .rf-tira-campo { padding: var(--rf-espacio-2) var(--rf-espacio-3); min-width: 0; }
.rf-busqueda-barra .rf-tira-campo:nth-of-type(odd):not(.rf-busqueda-campo-q):not(.rf-busqueda-campo-lugar) { border-right: 1px solid var(--rf-filete); }
.rf-busqueda-campo-q, .rf-busqueda-campo-lugar, .rf-busqueda-enviar { grid-column: 1 / -1; }
.rf-busqueda-barra .rf-tira-control { min-width: 0; }
.rf-busqueda-barra .rf-tira-boton { min-height: 48px; }
@media (min-width: 768px) {
  .rf-busqueda-barra {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, .7fr);
  }
  .rf-busqueda-campo-q, .rf-busqueda-campo-lugar { grid-column: auto; }
  .rf-busqueda-barra .rf-tira-campo { border-bottom: 0; border-right: 1px solid var(--rf-filete); }
  .rf-busqueda-barra .rf-busqueda-campo-ninos { border-right: 0; }
  .rf-busqueda-enviar { grid-column: 1 / -1; border-top: 1px solid var(--rf-filete); }
}
@media (min-width: 1200px) {
  .rf-busqueda-barra {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, .7fr) auto;
  }
  .rf-busqueda-barra .rf-busqueda-campo-ninos { border-right: 1px solid var(--rf-filete); }
  .rf-busqueda-enviar { grid-column: auto; border-top: 0; }
}

/* ============================================================================================
   La barra de chips (§7.2): «Todos los filtros», lo rápido con su cuenta y el orden, a la derecha en escritorio.
   ============================================================================================ */
.rf-barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rf-espacio-2);
  margin-top: var(--rf-espacio-4);
  padding-bottom: var(--rf-espacio-4);
  border-bottom: 1px solid var(--rf-filete);
}
.rf-busqueda-rapidos { display: contents; }
.rf-busqueda-abrir-filtros .rf-icono { width: 16px; height: 16px; }
.rf-busqueda-orden { display: inline-flex; align-items: center; gap: var(--rf-espacio-2); margin-left: auto; }
.rf-busqueda-orden-etiqueta { font-size: var(--rf-tipo-pequeno-movil-tamano); color: var(--rf-texto-secundario); white-space: nowrap; }
.rf-busqueda-orden-control {
  min-height: 36px;
  padding: 0 var(--rf-espacio-2);
  border: 1px solid var(--rf-color-neutro-400);
  border-radius: var(--rf-radio-md);
  background: var(--rf-superficie);
  color: var(--rf-texto);
  font-family: var(--rf-fuente-texto-pila);
  font-size: var(--rf-tipo-pequeno-movil-tamano);
}
.rf-busqueda-orden-control:focus-visible { outline: 3px solid var(--rf-color-primario-500); outline-offset: 2px; }

/* Una opción es un chip con su radio oculto: elegida, con el aspecto de .rf-chip pulsado (revisión 4.5: relleno de
   tinta, documento 03 §4.5; P7.10). */
.rf-busqueda-opcion { cursor: pointer; }
.rf-busqueda-opcion:has(input:checked) {
  background: var(--rf-color-neutro-900);
  border-color: var(--rf-color-neutro-900);
  color: var(--rf-color-neutro-0);
  font-weight: 600;
}
.rf-busqueda-opcion:has(input:focus-visible) { outline: 3px solid var(--rf-color-primario-500); outline-offset: 2px; }
/* Facetas que dejarían cero (RF-BUS-19): atenuadas y pulsables. */
/* Una opción que hoy no daría resultados sigue siendo elegible: no puede bajar del contraste de texto (WCAG 1.4.3; con
   opacity .5 quedaba en 2,6:1, P14.4). Se atenúa con el gris secundario (7,60:1 sobre blanco) y un borde discontinuo,
   que la distingue sin depender solo del color. */
.rf-busqueda-atenuada { color: var(--rf-texto-secundario); border-style: dashed; }

/* ============================================================================================
   Todos los filtros: la hoja (§4.5, radio xl, sombra 3). Abajo en el móvil; a la derecha, a toda la altura, en
   escritorio. El velo de detrás la cierra al tocarlo.
   ============================================================================================ */
.rf-busqueda-filtros { display: none; }
.rf-busqueda-filtros:target {
  display: block;
  position: fixed;
  inset: auto 0 0 0;
  max-height: 85vh;
  overflow-y: auto;
  z-index: var(--rf-capa-hoja-modal);
  background: var(--rf-superficie);
  border-radius: var(--rf-radio-xl) var(--rf-radio-xl) 0 0;
  box-shadow: var(--rf-sombra-3);
  padding: var(--rf-espacio-4) var(--rf-espacio-4) 0;
}
@media (min-width: 768px) {
  .rf-busqueda-filtros:target {
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    max-height: none;
    border-radius: var(--rf-radio-xl) 0 0 var(--rf-radio-xl);
    padding: var(--rf-espacio-6) var(--rf-espacio-6) 0;
  }
}
.rf-busqueda-velo { display: none; }
.rf-busqueda-filtros:target ~ .rf-busqueda-velo {
  display: block;
  position: fixed;
  inset: 0;
  z-index: calc(var(--rf-capa-hoja-modal) - 1);
  background: color-mix(in srgb, var(--rf-color-neutro-900) 40%, transparent);
}
.rf-busqueda-filtros-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--rf-espacio-4);
}
.rf-busqueda-filtros-titulo { font-size: var(--rf-tipo-h3-movil-tamano); line-height: var(--rf-tipo-h3-movil-interlinea); margin: 0; }
.rf-busqueda-cerrar-filtros { text-decoration: none; }
.rf-busqueda-grupo { border: 0; margin: 0 0 var(--rf-espacio-5); padding: 0; min-width: 0; }
.rf-busqueda-grupo legend {
  font-weight: 600;
  font-size: var(--rf-tipo-pequeno-movil-tamano);
  margin-bottom: var(--rf-espacio-2);
}
.rf-busqueda-aplicar {
  width: 100%;
  position: sticky;
  bottom: 0;
  margin-bottom: var(--rf-espacio-4);
}
/* El botón pegado abajo tapaba el último filtro (el radio) al llegar a él con el tabulador (P14.4, WCAG 2.4.11): el
   navegador deja el foco por encima de su alto. */
html:has(.rf-busqueda-filtros:target) { scroll-padding-bottom: 72px; }

/* ============================================================================================
   Resultados: la cabecera con «Guardar» a la derecha, los chips de lo interpretado y la lista con filetes.
   ============================================================================================ */
.rf-busqueda-resultados { margin-top: var(--rf-espacio-5); min-width: 0; }
.rf-busqueda-cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rf-espacio-1) var(--rf-espacio-4);
  margin-bottom: var(--rf-espacio-3);
}
.rf-busqueda-cabecera {
  font-size: var(--rf-tipo-h2-movil-tamano);
  line-height: var(--rf-tipo-h2-movil-interlinea);
  font-variation-settings: "opsz" 24;
  margin: 0;
}
@media (min-width: 992px) {
  .rf-busqueda-cabecera { font-size: var(--rf-tipo-h2-escritorio-tamano); line-height: var(--rf-tipo-h2-escritorio-interlinea); }
}
.rf-busqueda-guardar { margin: 0; }
.rf-busqueda-guardar a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.rf-busqueda-guardar .rf-icono { width: 16px; height: 16px; }
.rf-busqueda-chips { list-style: none; padding: 0; margin: 0 0 var(--rf-espacio-4); }
.rf-busqueda-chips a { text-decoration: none; color: inherit; }
.rf-busqueda-chips .rf-icono { width: 16px; height: 16px; }
.rf-busqueda-chip-pisado { text-decoration: line-through; }
.rf-busqueda-lista { list-style: none; padding: 0; margin: 0; }
.rf-busqueda-lista.rf-lista-tarjetas { border-top: 1px solid var(--rf-filete); }
.rf-busqueda-lista.rf-lista-tarjetas > li { padding-block: var(--rf-espacio-4); margin: 0; }
.rf-busqueda-lista.rf-lista-tarjetas > li:last-child { border-bottom: 1px solid var(--rf-filete); }
.rf-busqueda-item { min-width: 0; }
.rf-busqueda-item.rf-resaltada .rf-tarjeta-media { outline: 2px solid var(--rf-color-neutro-900); outline-offset: 2px; }
@media (min-width: 576px) {
  .rf-busqueda-lista .rf-tarjeta-horizontal .rf-tarjeta-media { width: 176px; }
}
.rf-busqueda-escalera { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rf-espacio-2); justify-content: center; }
.rf-busqueda-escalera-pocos { margin-top: var(--rf-espacio-6); color: var(--rf-texto-secundario); }
.rf-busqueda-escalera-pocos .rf-busqueda-escalera { justify-content: flex-start; }
.rf-busqueda-paginacion { display: flex; justify-content: center; margin-top: var(--rf-espacio-6); }

/* ============================================================================================
   Mapa: fijo a la derecha en escritorio; en móvil, pantalla completa al pulsar «Mapa».
   ============================================================================================ */
.rf-mapa { width: 100%; height: 100%; min-height: 280px; background: var(--rf-color-neutro-100); border-radius: var(--rf-radio-lg); }
.rf-mapa-ficha { height: 280px; margin-top: var(--rf-espacio-3); }
/* La atribución de lo que se ve, que da el proveedor (Google, D-1740): pequeña, legible y sin tapar los controles. */
.rf-mapa-atribucion {
  max-width: 70%;
  padding: 0 var(--rf-espacio-1);
  font-size: 0.6875rem;
  line-height: 1.5;
  /* Integración de P0.7 con P7.10: el token `neutro-800` no existe y el `#333` de respaldo lo caza `PatronVisualTest`; el
     texto secundario (7,1:1 sobre el papel) es el papel que le toca a una atribución. */
  color: var(--rf-texto-secundario);
}
.rf-mapa-atribucion:empty {
  display: none;
}

.rf-mapa-sin-fondo {
  position: absolute;
  left: var(--rf-espacio-3);
  bottom: var(--rf-espacio-3);
  margin: 0;
  padding: 2px var(--rf-espacio-2);
  border-radius: var(--rf-radio-sm);
  background: var(--rf-superficie);
  border: 1px solid var(--rf-filete);
  color: var(--rf-texto-secundario);
  font-size: var(--rf-tipo-pequeno-movil-tamano);
}
.rf-mapa-contenedor-ficha { position: relative; }
.rf-busqueda-mapa-contenedor { position: relative; }
.rf-busqueda-mapa-contenedor[hidden] { display: none; }
/* «Buscar en esta zona» (§7.2): un chip blanco arriba, centrado, con la sombra de lo que flota sobre el mapa. */
.rf-busqueda-en-esta-zona {
  position: absolute;
  top: var(--rf-espacio-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--rf-superficie);
  border-color: var(--rf-color-neutro-900);
  box-shadow: var(--rf-sombra-2);
  white-space: nowrap;
}
.rf-busqueda-en-esta-zona:hover { background: var(--rf-color-neutro-100); }
.rf-busqueda-en-esta-zona[hidden] { display: none; }
.rf-busqueda-mapa-servicios {
  position: absolute;
  right: var(--rf-espacio-3);
  top: var(--rf-espacio-3);
  margin: 0;
  padding: 2px var(--rf-espacio-2);
  border-radius: var(--rf-radio-sm);
  background: var(--rf-superficie);
  border: 1px solid var(--rf-filete);
  font-size: var(--rf-tipo-pequeno-movil-tamano);
}
.rf-mapa .rf-marcador { cursor: pointer; text-decoration: none; white-space: nowrap; }
.rf-mapa .rf-marcador.rf-resaltado { background: var(--rf-color-neutro-900); color: var(--rf-color-neutro-0); }
.rf-mapa .rf-marcador-sin-hueco { opacity: .7; border-style: dashed; }

/* Móvil: el botón flotante alterna lista y mapa; se aparta del aviso de cookies mientras esté abierto (M-50, M-81). */
.rf-busqueda-alternar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--rf-espacio-4) + var(--rf-aviso-alto, 0px));
  transform: translateX(-50%);
  z-index: var(--rf-capa-barra-fija);
  box-shadow: var(--rf-sombra-3);
}
.rf-busqueda-alternar[hidden] { display: none; }
@media (max-width: 991.98px) {
  /* El botón flotante tapaba el corazón de las tarjetas de abajo al llegar a ellas con el tabulador (P14.4, WCAG
     2.4.11 «Foco no tapado», a 640 px): el navegador deja el foco por encima de este margen. */
  html:has(.rf-busqueda-alternar:not([hidden])) { scroll-padding-bottom: 88px; }
  .rf-busqueda-disposicion.rf-con-mapa .rf-busqueda { display: none; }
  .rf-busqueda-disposicion.rf-con-mapa .rf-busqueda-mapa-contenedor { height: calc(100vh - 140px); }
  .rf-busqueda-disposicion:not(.rf-con-mapa) .rf-busqueda-mapa-contenedor { display: none; }
}
@media (min-width: 992px) {
  .rf-busqueda-alternar { display: none; }
  /* La tira y la barra de chips a todo el ancho; debajo, la lista (7/12) y el mapa (5/12). El formulario y #rf-busqueda
     se «disuelven» en la rejilla (HTMX sustituye #rf-busqueda entero; el mapa queda fuera y no se vuelve a crear). */
  .rf-busqueda-disposicion {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "barra barra" "chips chips" "resultados mapa";
    column-gap: var(--rf-espacio-8);
    align-items: start;
  }
  .rf-busqueda, .rf-busqueda-formulario { display: contents; }
  .rf-busqueda-barra { grid-area: barra; }
  .rf-barra-filtros { grid-area: chips; }
  .rf-busqueda-resultados { grid-area: resultados; }
  .rf-busqueda-mapa-contenedor {
    grid-area: mapa;
    position: sticky;
    top: calc(64px + var(--rf-espacio-4));
    height: calc(100vh - 64px - var(--rf-espacio-8));
    margin-top: var(--rf-espacio-5);
  }
}

/* «Ampliar búsqueda» (RF-BUS-23, D-1540): el radio en vigor y los enlaces que lo amplían. */
.rf-ampliar { margin-top: var(--rf-espacio-4); }
.rf-ampliar-opciones { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rf-espacio-2); }