/* ==========================================================================
   CÓDIGO 58 — FOTOS DEL ALOJAMIENTO ELEGIDO EN LA FICHA DEL PROGRAMA

   Acompaña a /inc/58-alojamiento-en-ficha.php.

   La ficha del programa ya es larga y lo que cierra la venta es el precio y el
   botón de cotizar. Estas fotos son una confirmación de lo que se acaba de
   elegir, no una galería: una fila de miniaturas pequeñas, pegada al
   desplegable, que solo existe cuando hay alojamiento elegido.

   Los colores son los del Código 57 para que las dos cosas se reconozcan como
   lo mismo en sitios distintos de la web.

   HISTORIAL: 4-sep-2026 creado.
   ========================================================================== */

/* ============================================================================
   LOS CAMPOS, A TODO EL ANCHO

   Los desplegables ocupaban 427 de los 960 px del formulario y las miniaturas
   salían a 65 px, demasiado chicas para que sirvieran de algo. Ahora los campos
   llegan de lado a lado, igual que los botones de Cotizar y Comprar, y las
   fotos pasan a ~140 px.

   De paso esto arregla solo un problema aparte: al fijar la anchura desde fuera,
   la celda ya no se mide por su contenido, así que ni las fotos al cargar ni la
   opción elegida pueden cambiarla. Antes hacía falta un guion que congelara el
   ancho del desplegable; ya no.

   Esta hoja solo se carga en los programas con alojamiento: no afecta a ninguna
   otra ficha del sitio.
   ============================================================================ */

form.variations_form table.variations,
form.variations_form table.variations tbody,
form.variations_form table.variations tr,
form.variations_form table.variations td.value {
	width: 100% !important;
	max-width: 100% !important;
}

form.variations_form table.variations td.value {
	flex: 1 1 auto;
	min-width: 0;
}


.raco-aloj-ficha {
	position: relative;
	margin: 10px 0 0;
	/* width: 0 + min-width: 100% es el truco para que esta tira NO cuente a la
	   hora de decidir cuánto mide la celda del formulario. Sin esto, en cuanto
	   las 6 fotos terminaban de cargar aportaban sus 150 px naturales cada una,
	   la celda se ensanchaba de 437 a ~940 px y el desplegable y las miniaturas
	   cambiaban de tamaño delante del cliente. La celda del formulario es un
	   elemento flexible, y por eso se dejaba llevar por el contenido. */
	width: 0;
	min-width: 100%;
}

/* Los huecos vacíos están desde que carga la página. Antes la tira aparecía al
   elegir alojamiento y el formulario daba un salto de golpe: el campo se
   alargaba delante del cliente. Reservando el sitio, no se mueve nada. */
.raco-aloj-hueco {
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: 9px;
	background: rgba(28, 69, 135, 0.055);
}

/* Seis columnas iguales alineadas con el desplegable de arriba: sueltas, a
   tamaño fijo, quedaban con un borde derecho irregular frente a un desplegable
   mucho más ancho y parecía sin terminar. Sin tope de anchura: la tira tiene
   que llegar exactamente al borde derecho del desplegable. */
/* El aviso va encima de los huecos, centrado. Se apaga solo en cuanto hay
   fotos: así los cuadros vacíos no parecen un error, explican para qué están. */
.raco-aloj-aviso {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 10px;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* El texto va sobre una pastilla blanca: suelto, los huecos y sus separaciones
   lo cortaban por la mitad y se leía mal. */
.raco-aloj-aviso-texto {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 8px 16px;
	font-size: 14.5px;
	line-height: 1.35;
	text-align: left;
	color: #63748a;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 2px 10px 0 rgba(28, 69, 135, 0.1);
}

.raco-aloj-aviso svg {
	flex: none;
	width: 17px;
	height: 17px;
	opacity: 0.7;
}

.raco-aloj-ficha.tiene-fotos .raco-aloj-aviso {
	opacity: 0;
}

.raco-aloj-tira {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}

/* Igual que en el bloque del destino: el tema pinta los botones de azul al
   pasar el ratón. Aquí la foto lo tapa, pero asomaría mientras carga o por las
   esquinas redondeadas. Se neutraliza en todos los estados. */
.raco-aloj-tira .raco-aloj-mini,
.raco-aloj-tira .raco-aloj-mini:hover,
.raco-aloj-tira .raco-aloj-mini:focus,
.raco-aloj-tira .raco-aloj-mini:active,
.raco-aloj-tira .raco-aloj-mini:focus-visible {
	background: none;
	background-color: transparent;
	color: inherit;
}

.raco-aloj-mini {
	aspect-ratio: 1 / 1;
	width: 100%;
	padding: 0;
	overflow: hidden;
	background: #eef1f1;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	box-shadow: 0 2px 7px 0 rgba(28, 69, 135, 0.1);
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.raco-aloj-mini img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.raco-aloj-mini:hover,
.raco-aloj-mini:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 15px 0 rgba(28, 69, 135, 0.2);
	outline: none;
}

.raco-aloj-mini:focus-visible {
	box-shadow: 0 0 0 3px rgba(1, 154, 163, 0.5);
}

/* Entrada suave de las fotos dentro de los huecos ya reservados. */
.raco-aloj-ficha.esta-dentro .raco-aloj-mini {
	animation: raco-aloj-entra 0.28s ease both;
}

@keyframes raco-aloj-entra {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.raco-aloj-ficha.esta-dentro .raco-aloj-mini {
		animation: none;
	}

	.raco-aloj-mini {
		transition: none;
	}
}

@media (max-width: 544px) {

	.raco-aloj-tira {
		gap: 6px;
	}

	.raco-aloj-aviso {
		padding: 0 6px;
	}

	.raco-aloj-aviso-texto {
		gap: 6px;
		padding: 5px 10px;
		font-size: 12px;
	}

	.raco-aloj-aviso svg {
		width: 15px;
		height: 15px;
	}
}