/**
 * HC_RAIL_V2 (2026-08-20) — la columna de búsqueda y la tira de hoteles.
 *
 * ── LO QUE CAMBIÓ RESPECTO A V1, Y POR QUÉ ──────────────────────────────────
 * V1 nació con una idea: una sola fórmula de ancho —clamp(112px, 30vw, 300px)—
 * y la MISMA rejilla de dos columnas en el teléfono y en el escritorio, con la
 * columna en miniatura y a la izquierda, para que el buscador se leyera primero
 * en el móvil.
 *
 * Visto en pantalla, no se sostiene. A 117 px de columna:
 *   · el desplegable de ciudad enseña «Elige ciuda» — cortado a media palabra;
 *   · los títulos de las tarjetas del contenido salen partidos («Alquile r…»);
 *   · y al contenido, que es a lo que la gente viene, no le queda ancho.
 *
 * Orden del dueño: el rail va a la DERECHA y en el móvil BAJA debajo del
 * contenido. La colocación la deciden ahora las hojas de cada pantalla —el
 * tablón, el catálogo, las dos fichas, «Mis reservas» y el tema—, cada una con
 * su propio punto de ruptura, porque cada una tiene un ancho útil distinto.
 * Aquí dentro ya solo vive el ASPECTO del rail, no dónde se coloca.
 *
 * ── TAMAÑO: SIGUE MANDANDO LA COLUMNA, NO LA VENTANA ────────────────────────
 * El `@container` se queda, y es lo mejor que dejó V1: la letra y las fotos se
 * miden contra el ancho de la PROPIA columna. Así el mismo rail se ve bien con
 * 240 px en la ficha, con 300 px en el catálogo y a pantalla completa cuando en
 * el móvil baja debajo del contenido — sin una sola media query.
 *
 * ── PALETA: OSCURA, COMO EL SITIO ───────────────────────────────────────────
 * V1 pintaba tarjetas blancas y títulos en tinta (#0B1014). El sitio es oscuro:
 * el título «En Valencia» salía NEGRO SOBRE FONDO OSCURO, ilegible. Ahora usa
 * la paleta de los bloques vecinos —`.hc-aside-lc` del tablón y `.lc-feed-hc`
 * del catálogo—: fondo #111820, borde dorado tenue, títulos en #E2C48E y texto
 * en #EAE6DD.
 *
 * ⚠️ Regla para el futuro: nada de `color` sin `background` en el mismo bloque.
 * Un color de texto heredando el fondo del tema es exactamente cómo se llegó al
 * título negro sobre negro.
 */

.hc-rail,
.hc-franja {
	--hc-rail-tinta: #0B1014;
	--hc-rail-fondo: #111820;
	--hc-rail-oro: #E2C48E;
	--hc-rail-texto: #EAE6DD;
	--hc-rail-apagado: #9aa3ad;
	--hc-rail-borde: rgba(226, 196, 142, .28);
}

/* ── La columna ─────────────────────────────────────────────────────────── */

/*
 * `width: 100%` Y NADA MÁS. Ni `flex-basis`, ni un ancho fijo, ni `sticky`.
 *
 * El rail nunca se coloca solo: cae dentro de una columna que YA tiene su ancho
 * y su `position: sticky` —el lateral del catálogo, el del tablón, el de las
 * dos fichas, el de «Mis reservas», el de las páginas normales del tema—.
 *
 * ⚠️ Aquí hubo un `flex: 0 0 var(--hc-rail-w)` pensado para el caso de caer
 * suelto en una fila flex. Es una trampa: TODOS esos laterales son
 * `flex-direction: column`, y en una columna flex el `flex-basis` no es el
 * ancho sino el ALTO — el rail habría quedado clavado a 300 px de alto, con los
 * hoteles desbordando por debajo.
 */
.hc-rail {
	container-type: inline-size;
	container-name: hcrail;
	width: 100%;
	min-width: 0;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
}

.hc-rail *,
.hc-franja * {
	box-sizing: border-box;
}

.hc-rail-titulo {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .2px;
	/* Dorado, no tinta: este título cae sobre el fondo OSCURO de la página, no
	   dentro de una caja clara. Es el fallo que corrige V2. */
	color: var(--hc-rail-oro);
	overflow-wrap: anywhere;
}

/* ── Buscador por pasos ─────────────────────────────────────────────────── */

.hc-rail-buscar {
	background: var(--hc-rail-tinta);
	color: var(--hc-rail-texto);
	border: 1px solid var(--hc-rail-borde);
	border-radius: 14px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* Las tres marcas de paso. Decorativas: el estado real lo dan los campos. */
.hc-rail-marcas {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-rail-marcas li {
	height: 3px;
	flex: 1;
	border-radius: 2px;
	background: rgba(244, 241, 234, .22);
	transition: background .15s ease;
}

.hc-rail-marcas li.on {
	background: var(--hc-rail-oro);
}

.hc-rail-paso {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hc-rail-paso[hidden] {
	display: none;
}

.hc-rail-paso label {
	font-size: 12px;
	line-height: 1.2;
	color: var(--hc-rail-apagado);
}

.hc-rail-paso select,
.hc-rail-paso input {
	width: 100%;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	padding: 9px 10px;
	border: 1px solid rgba(244, 241, 234, .22);
	border-radius: 10px;
	background: #141b22;
	color: var(--hc-rail-texto);
	/*
	 * `color-scheme: dark` NO es decoración: es lo que hace que el navegador
	 * pinte sus PROPIOS controles en oscuro — el iconito de calendario del
	 * `input[type=date]`, la flecha del `select` y el calendario que se abre al
	 * pulsarlo. Sin esto los dibuja en negro, y sobre un campo oscuro no se ven.
	 * Es preferible a invertir el icono con un `filter`: aquel truco arregla el
	 * icono y deja el calendario emergente en blanco.
	 */
	color-scheme: dark;
}

.hc-rail-paso :focus-visible {
	outline: 2px solid var(--hc-rail-oro);
	outline-offset: 1px;
}

.hc-rail-nav {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.hc-rail-nav button {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	line-height: 1.15;
	padding: 10px 8px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	background: var(--hc-rail-oro);
	color: var(--hc-rail-tinta);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hc-rail-nav .hc-rail-atras {
	background: transparent;
	color: var(--hc-rail-texto);
	border: 1px solid rgba(244, 241, 234, .28);
	flex: 0 0 auto;
	font-weight: 400;
}

.hc-rail-nav button[hidden] {
	display: none;
}

/* ── Hoteles en miniatura ───────────────────────────────────────────────── */

.hc-rail-hoteles {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * FOTO PEQUEÑA, A LA IZQUIERDA. Este es el aspecto por defecto.
 *
 * En V1 la tarjeta iba en columna, con la foto a 4/3 y a todo el ancho: tres
 * hoteles ocupaban media pantalla de móvil y la foto pesaba más que el dato que
 * el visitante busca, que es el PRECIO. Ahora es una fila con miniatura de
 * 64 px, igual que las filas del escaparate del tablón que tiene al lado.
 */
.hc-rail-hotel {
	display: flex;
	align-items: stretch;
	gap: 10px;
	text-decoration: none;
	color: var(--hc-rail-texto);
	background: var(--hc-rail-fondo);
	border: 1px solid var(--hc-rail-borde);
	border-radius: 12px;
	overflow: hidden;
	transition: background .15s ease;
}

.hc-rail-hotel:hover,
.hc-rail-hotel:focus-visible {
	background: #16202a;
}

.hc-rail-foto {
	display: block;
	flex: 0 0 64px;
	aspect-ratio: 1 / 1;
	background: #1a2029;
	overflow: hidden;
}

.hc-rail-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hc-rail-datos {
	display: block;
	padding: 8px 10px 8px 0;
	align-self: center;
	min-width: 0;
}

.hc-rail-nom {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--hc-rail-texto);
	overflow-wrap: anywhere;
}

.hc-rail-estrellas {
	display: block;
	color: var(--hc-rail-oro);
	font-size: 10px;
	letter-spacing: 1px;
}

.hc-rail-precio {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--hc-rail-oro);
}

/*
 * POR DEBAJO DE 220 px la fila ya no cabe: 64 de foto más 10 de hueco dejan
 * menos de 150 para el nombre y el precio. Ahí, y solo ahí, se apila.
 *
 * Hoy ninguna pantalla del sitio da al rail menos de 240 px, así que esto no
 * llega a usarse: es la red por si mañana cae en un hueco estrecho. Mide la
 * COLUMNA, no la ventana.
 */
@container hcrail (max-width: 219px) {
	.hc-rail-hotel {
		flex-direction: column;
		gap: 6px;
	}

	.hc-rail-foto {
		flex: none;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.hc-rail-datos {
		padding: 0 8px 8px;
		align-self: auto;
	}

	.hc-rail-nom {
		font-size: 12px;
	}
}

/* ── La tira ancha: lo que ocupa el sitio de los 970×90 ─────────────────── */

.hc-franja {
	container-type: inline-size;
	container-name: hcfranja;
	margin: 18px 0;
	padding: 14px 16px;
	background: rgba(33, 39, 48, .92);
	border: 1px solid var(--hc-rail-borde);
	border-radius: 18px;
}

.hc-franja-cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.hc-franja-cabecera .hc-rail-titulo {
	font-size: clamp(13px, 1.6vw, 15px);
}

.hc-franja-todos {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--hc-rail-oro);
	text-decoration: none;
}

.hc-franja-todos:hover {
	text-decoration: underline;
}

/*
 * Una fila que SIEMPRE es una fila. En el teléfono no se apila: se arrastra con
 * el dedo, con parada en cada tarjeta. Es el mismo bloque en las dos pantallas,
 * a distinto tamaño.
 */
.hc-franja-fila {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 4px;
}

.hc-franja-fila .hc-rail-hotel {
	flex: 0 0 clamp(150px, 34vw, 200px);
	flex-direction: column;
	gap: 0;
	scroll-snap-align: start;
}

.hc-franja-fila .hc-rail-foto {
	flex: none;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.hc-franja-fila .hc-rail-datos {
	padding: 8px 10px 10px;
	align-self: auto;
}

@media (prefers-reduced-motion: reduce) {
	.hc-rail-hotel,
	.hc-rail-marcas li {
		transition: none;
	}
}