/**
 * Filtros avanzados de búsqueda: selección múltiple (actividad/ciudad),
 * franja horaria y "cerca de mí" + radio. Compartido entre la portada
 * (dentro de .dp-search-form) y el buscador avanzado (dentro de
 * .dp-buscar-filters, que ya define .dp-filter-group/.dp-filter-tag-item
 * en search.css — este archivo reutiliza esas mismas clases para la lista
 * de checkboxes y solo añade lo que falta: chips, buscador de texto, fila
 * de día/horas y el bloque de cerca de mí + radio).
 */

.dp-multiselect {
    position: relative;
}

.dp-multiselect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 6px;
}

.dp-multiselect-chips:empty {
    margin: 0;
}

.dp-ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dp-turquesa, #08a9bd);
    color: #fff;
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.dp-ms-chip-remove {
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.dp-ms-chip-remove:hover {
    background: rgba(255, 255, 255, 0.4);
}

.dp-multiselect-search {
    width: 100%;
    box-sizing: border-box;
}

/* Visible por defecto (display:flex, no display:none) a propósito: sin
   JS, esta lista de checkboxes tiene que poder verse y usarse igual que la
   de etiquetas de search.css — el buscador de texto de arriba (data-dp-search)
   y las chips son una mejora encima, no un requisito para poder elegir
   actividad/ciudad. Ver cabecera de assets/search-filters.js. */
.dp-multiselect-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--dp-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}
/* En el hero de portada, más compacta (menos alto disponible). */
.dp-search-form .dp-multiselect-list {
    max-height: 160px;
}

.dp-multiselect .dp-filter-tag-item {
    padding: 5px 6px;
    border-radius: 6px;
}
.dp-multiselect .dp-filter-tag-item:hover {
    background: var(--dp-bg, #f9fafb);
}
.dp-multiselect .dp-filter-tag-item.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.dp-multiselect .dp-filter-tag-item[hidden] {
    display: none;
}

/* --- Franja horaria (día + horas), /buscar/ --- */

/* Día va en su propia fila (ronda "franja horaria no se ve", 16/09): en el
   sidebar estrecho de /buscar/, meterlo en la misma fila de 3 columnas que
   Desde/Hasta dejaba el <select> tan apretado que se veía cortado
   ("Miérco..."). "Miércoles" es la opción más larga, así que este campo es
   el que más ancho necesita. */
.dp-filter-horario-dia {
    margin-bottom: 8px;
}
.dp-filter-horario-row {
    display: flex;
    gap: 8px;
}
.dp-filter-horario-row > div {
    flex: 1;
    min-width: 0;
}
.dp-filter-horario-dia label,
.dp-filter-horario-row label {
    display: block;
    font-size: 12px;
    color: var(--dp-text-muted, #6b7280);
    margin-bottom: 4px;
}
.dp-filter-horario-dia select,
.dp-filter-horario-row select,
.dp-filter-horario-row input[type="time"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px;
    border: 1px solid var(--dp-border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
}

/* --- Cerca de mí + radio --- */

.dp-cerca-de-mi-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--dp-text, #111827);
}
.dp-cerca-de-mi-row input[type="checkbox"] {
    accent-color: var(--dp-turquesa, #08a9bd);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dp-radio-km-select {
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--dp-border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
}
.dp-radio-km-select:disabled {
    background: var(--dp-bg, #f9fafb);
    color: var(--dp-text-muted, #9ca3af);
    cursor: not-allowed;
}

/* --- Portada: el hero es horizontal y con fondo blanco, así que estos
   controles se adaptan (más compactos, en fila cuando cabe). --- */

.dp-search-form .dp-multiselect {
    flex: 1;
    min-width: 200px;
    text-align: left;
}

/* En la portada, la lista de checkboxes se comporta como el <select> que
   había antes: cerrada hasta que el usuario interactúa con el campo, y
   flotando encima del resto del hero en vez de empujarlo hacia abajo. Solo
   se activa cuando hay JS (clase "dp-js", añadida por
   DPSearchFilters.initForm() en search-filters.js) — sin JS la lista sigue
   viéndose siempre, según la regla general de .dp-multiselect-list de más
   arriba, para que el formulario siga funcionando igual. */
.dp-search-form.dp-js .dp-multiselect-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    margin-top: 6px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
}
.dp-search-form.dp-js .dp-multiselect.is-open .dp-multiselect-list {
    display: flex;
}
.dp-search-form .dp-multiselect-search {
    padding: 12px 14px;
    border: 1px solid var(--dp-border, #e5e7eb);
    border-radius: 8px;
    font-size: 15px;
}
.dp-search-form .dp-multiselect-chips:not(:empty) {
    background: #fff;
}
/* La fila principal (actividad + ciudad + botón Buscar) — antes eran hijos
   directos de .dp-search-form (que ya trae su propio flex/flex-wrap desde
   front.css); ahora van dentro de este wrapper para poder poner el
   <details> "¿Cuándo puedes ir?" debajo, como una segunda fila propia, sin
   tocar el CSS de base de .dp-search-form. */
.dp-search-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    flex-basis: 100%;
    width: 100%;
}

/* "Cerca de mí" y "¿Cuándo puedes ir?" comparten una misma fila (ronda "en
   la misma línea", 16/09) — antes "Cerca de mí" iba metido dentro del
   campo ¿Dónde? y ¿Cuándo? era una fila suelta debajo, con un hueco
   vertical grande entre las dos. justify-content:space-between (probado)
   empujaba "¿Cuándo puedes ir?" pegado al borde derecho, muy lejos de
   "Cualquier localidad" (ronda "más a la izquierda", 16/09) — con
   flex-start + el min-width de abajo en .dp-cerca-de-mi-wrap, "¿Cuándo
   puedes ir?" arranca aproximadamente donde empieza el campo ciudad de la
   fila de arriba, en vez de flotar suelto a la derecha. align-items:
   flex-start para que, si el aviso de geolocalización ocupa una segunda
   línea a la izquierda, no empuje hacia abajo el toggle de la derecha.
   flex-wrap por si el hueco es demasiado estrecho (portada estrecha en
   móvil). */
.dp-search-second-row {
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px 20px;
}

/* "Cerca de mí" ya no vive dentro del campo ¿Dónde? (ronda "en la misma
   línea", 16/09) — mismo aspecto que .dp-cerca-de-mi-row, solo más
   compacto. min-width aproxima el ancho del campo "actividad" de la fila
   de arriba (hero a max-width:720px, ver home.css), para que lo que viene
   después en esta fila (el toggle "¿Cuándo puedes ir?") arranque más o
   menos bajo "Cualquier localidad" en vez de pegado a "Cerca de mí". */
.dp-cerca-de-mi-inline {
    padding: 4px 0 2px;
    font-size: 13px;
}
.dp-cerca-de-mi-wrap {
    min-width: 260px;
}

/* "¿Cuándo puedes ir?" — franja horaria opcional detrás de un <details>
   nativo: cerrado por defecto para que la portada vuelva a verse
   minimalista (antes esta fila de día/horas iba siempre visible). Un
   <details> funciona sin JS (el propio navegador sabe abrirlo/cerrarlo) y
   sus campos se siguen mandando al enviar el formulario estén desplegados
   o no, así que no hace falta ningún JS para que esto sea usable. Cuando
   se abre, su contenido (.dp-cuando-body) es un desplegable flotante hacia
   abajo — no necesita ancho completo, solo lo justo. */
.dp-cuando-desplegable {
    text-align: left;
    position: relative;
}
/* Ronda "icono no intuitivo" (16/09): el triángulo de texto (▸) se leía
   como una viñeta decorativa, no como un botón, por más grande que se
   hiciera — no tenía fondo, ni borde, ni caja. Ahora el summary entero es
   un chip real (mismo estilo que .dp-chip de "Ciudades activas" en
   home.css: fondo, borde redondeado, hover), con icono de reloj delante
   (da contexto de "esto es horario") y un chevron SVG real al final
   (convención estándar de acordeón) en vez de un símbolo delante del
   texto. También se amplía el padding — más área de toque en móvil,
   que es donde más costaba acertar el clic. */
.dp-cuando-desplegable summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--dp-text, #111827);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--dp-bg, #f9fafb);
    border: 1px solid var(--dp-border, #e5e7eb);
    border-radius: 20px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dp-cuando-desplegable summary::-webkit-details-marker {
    display: none;
}
.dp-cuando-desplegable summary:hover {
    border-color: var(--dp-turquesa, #08a9bd);
    color: var(--dp-turquesa-dark, #079aae);
}
.dp-cuando-desplegable[open] summary {
    background: var(--dp-turquesa-light, #e6f7f9);
    border-color: var(--dp-turquesa-dark, #079aae);
    color: var(--dp-turquesa-dark, #079aae);
}
.dp-cuando-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--dp-turquesa-dark, #079aae);
}
.dp-cuando-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 2px;
    transition: transform 0.15s ease;
}
.dp-cuando-desplegable[open] .dp-cuando-chevron {
    transform: rotate(180deg);
}
.dp-cuando-opcional {
    font-weight: 700;
    color: var(--dp-text-muted, #9ca3af);
}
.dp-cuando-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--dp-border, #e5e7eb);
}
/* Mismo motivo que .dp-filter-horario-dia en /buscar/ (ronda "franja
   horaria no se ve", 16/09): Día en su propia fila — es el campo que más
   ancho necesita ("Miércoles" es la opción más larga) — y Desde/Hasta
   debajo, en una fila de solo 2 columnas. */
.dp-cuando-dia {
    margin-bottom: 12px;
}
.dp-cuando-horas-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.dp-cuando-horas-row > div {
    flex: 1;
    min-width: 120px;
}
.dp-cuando-dia label,
.dp-cuando-horas-row label {
    display: block;
    font-size: 12px;
    color: var(--dp-text-muted, #6b7280);
    margin-bottom: 4px;
    font-weight: 600;
}
.dp-cuando-dia select,
.dp-cuando-horas-row select,
.dp-cuando-horas-row input[type="time"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--dp-border, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}

/* --- /buscar/: grupo "sin horario confirmado o fuera de esa franja" ---
   Ver DP_Search::render() — antes esos lugares simplemente desaparecían de
   los resultados; ahora se pintan aparte, debajo de una separación clara,
   para que una franja horaria muy exigente no parezca "no hay nada aquí"
   cuando en realidad sí hay lugares, solo que sin ese dato confirmado. */
.dp-buscar-fuera-horario {
    margin-top: 32px;
}
.dp-buscar-fuera-horario hr {
    border: none;
    border-top: 1px dashed var(--dp-border, #e5e7eb);
    margin: 0 0 20px;
}
.dp-buscar-fuera-horario-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--dp-text, #111827);
    margin: 0 0 4px;
}
.dp-buscar-fuera-horario-nota {
    font-size: 13px;
    color: var(--dp-text-muted, #6b7280);
    margin: 0 0 16px;
}

/* Nº de lugares junto a cada filtro curado de Características/Ideal para/
   Servicios (ver DP_Search::FILTROS_CURADOS) — ayuda a saber si merece la
   pena marcarlo antes de aplicarlo. */
.dp-filter-tag-count {
    color: var(--dp-text-muted, #9ca3af);
    font-size: 12px;
}