/**
 * IDENTIFICACIÓN DEL ARCHIVO
 * CÓDIGO 59 — LA TABLA MANDA (estilos)
 * Ver /inc/59-tabla-manda.php y /assets/js/59-tabla-manda.js
 *
 * Todo cuelga de la clase .raco-tabla-manda, que el JS solo pone cuando ha
 * comprobado precio por precio que la tabla y las variaciones dicen lo mismo.
 * Si no la pone, la ficha se ve exactamente igual que antes.
 *
 * POR QUÉ TANTO !important: el Código 23 pinta las casillas de precio con
 * `background: ... !important`, así que sin !important el resaltado al pasar
 * el ratón y el del elegido no se verían. Los colores son los mismos que usan
 * las pestañas de alojamiento (variables --raco-23-*), para que elegir un
 * precio se sienta igual que elegir un hotel.
 */

/* Los desplegables dejan de hacer falta: ahora se elige en la tabla.
   Selector largo a propósito: el tema trae reglas con !important sobre
   .variations y gana la última; así esta pesa más. */
form.variations_form table.variations.raco-variaciones-ocultas,
form.variations_form .variations.raco-variaciones-ocultas {
	display: none !important;
}


/* ==========================================================================
   Los precios se eligen igual que los hoteles
   ========================================================================== */

.raco-tabla-manda .raco-alojamiento-precio--elegible {
	cursor: pointer;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.raco-tabla-manda .raco-alojamiento-precio--elegible:hover {
		background: #f2f8f8 !important;
	}
}

.raco-tabla-manda .raco-alojamiento-precio--elegible:focus-visible {
	outline: 2px solid var(--raco-23-primary, #0f787d);
	outline-offset: -2px;
}

/* El elegido, con el mismo relleno que la pestaña activa del hotel. */
.raco-tabla-manda .raco-alojamiento-precio.is-elegido,
.raco-tabla-manda .raco-alojamiento-precio.is-elegido:nth-child(even) {
	background: var(--raco-23-primary, #0f787d) !important;
	box-shadow: 0 3px 10px rgba(15, 120, 125, 0.16);
}

.raco-tabla-manda .raco-alojamiento-precio.is-elegido .raco-alojamiento-precio__pasajeros,
.raco-tabla-manda .raco-alojamiento-precio.is-elegido .raco-alojamiento-precio__valor {
	color: #ffffff !important;
}


/* ==========================================================================
   Bloques que se añaden debajo de los precios

   Los dos van FUERA de la rejilla de precios: metidos dentro se colocaban
   como una columna más y partían la fila por la mitad.
   ========================================================================== */

.raco-tabla-manda__pregunta,
.raco-tabla-manda__extras {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	background: #f6fafa;
	border: 1px solid var(--raco-23-border-soft, #e3eced);
	border-top: 0;
}

.raco-tabla-manda__pregunta[hidden] {
	display: none;
}

.raco-tabla-manda__extras {
	border-radius: 8px;
	border-top: 1px solid var(--raco-23-border-soft, #e3eced);
}

.raco-tabla-manda__extras[hidden] {
	display: none;
}

/* "Mas opciones" es una salida secundaria: no debe pesar lo mismo que los
   precios ni que la pista. Va suelta, sin caja de color. */
.raco-tabla-manda__cajon-extras {
	margin-top: 10px;
}

.raco-tabla-manda__cajon-extras .raco-tabla-manda__extras {
	background: transparent;
	border: 0;
	padding: 0;
}

.raco-tabla-manda__pregunta-texto,
.raco-tabla-manda__extras-texto {
	flex: 0 0 auto;
	margin-right: 4px;
	font-size: 12.5px;
	font-weight: 720;
	line-height: 1.3;
	color: var(--raco-23-ink-soft, #56676b);
}

.raco-tabla-manda__opcion,
.raco-tabla-manda__extra {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin: 0 !important;
	padding: 7px 16px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 720;
	line-height: 1.3;
	color: var(--raco-23-ink, #12343a) !important;
	background: var(--raco-23-surface, #ffffff) !important;
	border: 1px solid var(--raco-23-border, #d5e3e5) !important;
	border-radius: 8px !important;
	box-shadow: none;
	cursor: pointer;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease;
}

.raco-tabla-manda__opcion:hover,
.raco-tabla-manda__extra:hover,
.raco-tabla-manda__opcion:focus-visible,
.raco-tabla-manda__extra:focus-visible {
	border-color: var(--raco-23-primary, #0f787d) !important;
	background: #f2f8f8 !important;
	outline: none;
}

.raco-tabla-manda__opcion.is-elegido,
.raco-tabla-manda__extra.is-elegido {
	color: #ffffff !important;
	background: var(--raco-23-primary, #0f787d) !important;
	border-color: var(--raco-23-primary, #0f787d) !important;
	box-shadow: 0 3px 10px rgba(15, 120, 125, 0.16);
}


/* ==========================================================================
   Los dos pasos

   El numero no es adorno: hay que elegir hotel antes de que los precios
   signifiquen algo, asi que el orden es informacion real.
   ========================================================================== */

.raco-tabla-manda__paso {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 9px !important;
	padding: 0;
	font-size: 14px;
	font-weight: 720;
	line-height: 1.3;
	color: var(--raco-23-ink, #12343a);
}

.raco-tabla-manda__paso:first-child {
	margin-top: 4px !important;
}

.raco-tabla-manda__paso-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	font-size: 12px;
	font-weight: 720;
	line-height: 1;
	color: #ffffff;
	background: var(--raco-23-primary, #0f787d);
	border-radius: 999px;
}


/* ==========================================================================
   La linea de resumen

   Cerrada, dice que falta por hacer (por que los botones estan apagados).
   Elegida, repite en una linea que se lleva y cuanto cuesta.
   ========================================================================== */

.raco-tabla-manda__resumen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 12px 0 0 !important;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.45;
	background: #f2f8f8;
	border: 1px solid var(--raco-23-border, #d5e3e5);
	border-radius: 8px;
}

.raco-tabla-manda__resumen--pista {
	color: var(--raco-23-ink-soft, #56676b);
	background: transparent;
	border-color: transparent;
	border-left: 3px solid var(--raco-23-border, #d5e3e5);
	border-radius: 0;
	padding-left: 11px;
}

.raco-tabla-manda__resumen-etiqueta {
	font-size: 12.5px;
	font-weight: 720;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--raco-23-ink-soft, #56676b);
}

.raco-tabla-manda__resumen-que {
	font-weight: 720;
	color: var(--raco-23-ink, #12343a);
}

.raco-tabla-manda__resumen-precio {
	margin-left: auto;
	font-size: 16px;
	font-weight: 800;
	color: var(--raco-23-primary, #0f787d);
	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   La tira de fotos, ahora pegada a la tabla
   ========================================================================== */

/* Dice de que hotel son las fotos: antes se sabia por el desplegable. */
.raco-tabla-manda__pie-fotos {
	margin: 0 0 8px !important;
	font-size: 12.5px;
	font-weight: 720;
	letter-spacing: 0.02em;
	color: var(--raco-23-ink-soft, #56676b);
}


/*
 * Antes vivía dentro de la celda del desplegable de alojamiento y heredaba su
 * ancho. Al subirla junto a la tabla ocupa todo el ancho, así que las
 * miniaturas se reparten solas.
 */
/* Van entre el paso 1 (el hotel) y el paso 2 (los pasajeros): se elige, se
   ve, y despues se decide. */
.raco-aloj-ficha--junto-a-tabla {
	margin: 12px 0 4px;
}


/* ==========================================================================
   Los botones de abajo

   NO se repintan. Que el boton bloqueado sea rojo es una decision del sitio,
   no un error: viene de los Codigos 08 y 14 (--raco-buy-button-blocked) y
   significa "compra bloqueada". Lo que faltaba era decir POR QUE lo esta,
   porque al quitar los desplegables desaparecio la pista.
   ========================================================================== */

/*
 * Los dos botones van uno al lado del otro: el formulario es flex con
 * gap 16px y cada caja tiene max-width calc(50% - 8px), justo para que
 * quepan las dos. NO tocar su ancho: al forzarles width:100% pasaban de
 * 450 a 459 px, ya no cabian juntas y saltaban a filas distintas, cada
 * una con un margen izquierdo distinto. Ese era el descuadre.
 */
/*
 * EL DESCUADRE DE LOS BOTONES. Las dos cajas se reparten la fila con
 * calc(50% - 8px) y una separacion de 16 px: 459 + 16 + 459 = 934 en una fila
 * de 933. Se pasaban por UN pixel, la segunda saltaba de linea y cada una
 * quedaba con un margen distinto. Con un par de pixeles mas de holgura caben
 * juntas siempre, en cualquier ancho de pantalla.
 */
/*
 * LA CAUSA DE VERDAD. El formulario arrastra los dos pseudo-elementos de
 * limpieza de toda la vida (`content:" "; display:table`). En una caja normal
 * no se ven y no estorban, pero este formulario es flexible, y ahi CUENTAN
 * COMO UN ELEMENTO MAS: cada uno se lleva 16 px de separacion. Con esos 32 px
 * fantasma los dos botones ya no cabian en la fila y el segundo saltaba
 * abajo, descolocado. En una caja flexible el clearfix no sirve para nada,
 * asi que se retiran.
 */
body.single-product form.variations_form.cart.raco-tabla-manda-form::before,
body.single-product form.variations_form.cart.raco-tabla-manda-form::after {
	display: none !important;
	content: none !important;
}

/* Selector largo por necesidad: la regla del sitio es
   `body.single-product form.cart .woocommerce-variation-add-to-cart`, que pesa
   mas que un `form.clase .clase`. Con las dos llevando !important gana la de
   mas peso, no la ultima. */
body.single-product div.product form.variations_form.cart.raco-tabla-manda-form .raco-popup-maker-product-button-wrap,
body.single-product div.product form.variations_form.cart.raco-tabla-manda-form .woocommerce-variation-add-to-cart.variations_button {
	flex: 1 1 calc(50% - 12px) !important;
	max-width: calc(50% - 12px) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
}

/*
 * EL DESCUADRE DE LOS BOTONES. El formulario lleva un aviso invisible para
 * lectores de pantalla (.reset_variations_alert) que mide 1 px pero SIGUE
 * ocupando un hueco en la fila: 1 px + 16 px de separacion. Con eso las dos
 * cajas de 459 px ya no caben juntas, la segunda salta de fila y cada una
 * queda con un margen izquierdo distinto. Aqui se saca del flujo con la
 * receta habitual de "oculto pero legible por lectores de pantalla", asi que
 * no se pierde accesibilidad y los botones vuelven a quedar alineados.
 */
form.raco-tabla-manda-form .reset_variations_alert {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.raco-tabla-manda__falta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	/* El formulario de los programas es una rejilla de dos columnas: sin esto
	   el aviso ocupaba una celda y empujaba los botones a medias filas. */
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 12px !important;
	padding: 11px 14px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #8a3d3b;
	background: #fdf3f3;
	border: 1px solid #f0d9d8;
	border-radius: 8px;
}

.raco-tabla-manda__falta[hidden] {
	display: none;
}

.raco-tabla-manda__falta-ir {
	font-weight: 720;
	color: #8a3d3b;
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
}


/* ==========================================================================
   Las dos notas, ya juntas al final

   La aclaracion venia en negrita y centrada arriba del todo, pesando mas que
   el paso 1. Abajo y en peso normal se lee como lo que es: letra pequena.
   ========================================================================== */

/*
 * Las dos notas quedan una encima de la otra al final. Arriba, con su filete
 * turquesa y su caja, la aclaracion parecia un aviso importante y competia
 * con los pasos. Aqui abajo son lo que son: letra pequena. Se quitan la caja
 * y el filete y se juntan las dos en un mismo bloque discreto.
 */
.raco-tabla-manda .raco-tabla-aclaracion--al-final {
	margin: 16px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-weight: 400 !important;
	color: var(--raco-23-ink-soft, #56676b) !important;
	text-align: center !important;
}

.raco-tabla-manda .raco-tabla-aclaracion--al-final + .raco-tabla-nota {
	margin-top: 4px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	font-weight: 400 !important;
}


/* ==========================================================================
   El precio suelto de WooCommerce

   Lo pinta grande justo encima de los botones, repitiendo el numero que ya
   esta en la casilla elegida y en la linea de "Has elegido". Se oculta: el
   total vive ahora en esa linea, que es donde se esta decidiendo. La
   disponibilidad ("Disponible para reserva") se deja, que es otra cosa.
   ========================================================================== */

body.single-product form.variations_form.cart.raco-tabla-manda-form .woocommerce-variation-price {
	display: none !important;
}


/* La linea de "Has elegido" cierra el bloque, justo encima de los botones. */
.raco-tabla-manda__resumen--al-final {
	margin-top: 14px !important;
}


/*
 * Al ocultar el precio suelto, su caja se queda vacia pero sigue reservando
 * 30 px de margenes, y entre "Has elegido" y los botones aparecia un hueco
 * grande sin motivo. Se cierra. Si hay aviso de disponibilidad, se le devuelve
 * su respiro con :not(:empty), asi no queda pegado.
 */
body.single-product form.variations_form.cart.raco-tabla-manda-form .single_variation {
	margin: 0 !important;
}

body.single-product form.variations_form.cart.raco-tabla-manda-form .woocommerce-variation-availability:not(:empty) {
	margin: 10px 0 0 !important;
}


/* Los botones van pegados a la linea de "Has elegido": es lo ultimo que se
   lee antes de pulsar. La caja de la tabla dejaba 24 px por debajo. */
body.single-product div.summary .woocommerce-product-details__short-description.raco-tabla-manda-contenedor,
body.single-product .raco-tabla-manda-contenedor {
	margin-bottom: 6px !important;
	padding-bottom: 0 !important;
}

.raco-tabla-manda-contenedor .tabla-responsive {
	margin-bottom: 0 !important;
}


/* ==========================================================================
   Simetria y ritmo
   ========================================================================== */

/* Pestanas repartidas en filas parejas (el numero de columnas lo calcula el
   JS segun cuantos hoteles haya). Solo desde el ancho en el que el Codigo 23
   las convierte en rejilla. */
@media only screen and (min-width: 900px) {
	.raco-tabla-manda .raco-alojamiento-tabs {
		grid-template-columns: repeat( var( --raco-tabs-columnas, 4 ), minmax(0, 1fr) ) !important;
	}
}

/* Las notas se alinean como el resto del bloque, no centradas: centrar solo
   dos lineas dentro de una columna alineada a la izquierda las hace parecer
   sueltas. */
.raco-tabla-manda .raco-tabla-aclaracion--al-final,
.raco-tabla-manda .raco-tabla-aclaracion--al-final + .raco-tabla-nota {
	text-align: left !important;
}

/* Un mismo respiro entre bloques: el paso, su contenido y el siguiente paso. */
.raco-tabla-manda .raco-alojamiento-tabs,
.raco-tabla-manda .raco-alojamiento-paneles {
	margin-bottom: 0 !important;
}


/* ==========================================================================
   Las variaciones dentro del formulario de cotizacion

   Aparecen solo cuando se llega al formulario sin haber elegido en la tabla
   (tipico del boton flotante de WhatsApp). Son los hoteles y las
   combinaciones REALES de este programa, no una lista general.
   ========================================================================== */

.raco-form-variaciones__campo select {
	width: 100%;
	box-sizing: border-box;
}


/* Si se intenta enviar sin decir cuantos viajan, se marca el selector: los
   campos originales dejaron de ser obligatorios, asi que el aviso lo damos
   nosotros. */
.raco-form-variaciones--falta .raco-form-variaciones__campo:last-child select {
	border-color: #b94a48 !important;
	box-shadow: 0 0 0 3px rgba(185, 74, 72, 0.12) !important;
}


/* ==========================================================================
   MOVIL

   En pantalla angosta el Codigo 23 cambia las pestañas por un desplegable y
   la fila de precios por una lista vertical. Eso deja tres cosas repetidas y
   dos descuadradas.
   ========================================================================== */

@media only screen and (max-width: 899px) {

	/* 1. Rotulos repetidos. El paso 1 ya dice "Elige donde dormir" y el
	   desplegable ya muestra el hotel: no hacen falta ni el rotulo interno
	   del selector ni el titulo del hotel repetido sobre los precios. */
	.raco-tabla-manda .raco-alojamiento-selector__label,
	.raco-tabla-manda .raco-alojamiento-grupo__titulo {
		display: none !important;
	}

	/* 2. Las fotos median 54 px: seis columnas fijas metidas en 354 px. En el
	   telefono no se ve nada. Tres por fila, a todo el ancho. */
	.raco-aloj-ficha--junto-a-tabla .raco-aloj-tira {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}

	.raco-aloj-ficha--junto-a-tabla .raco-aloj-tira > * {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
	}

	.raco-aloj-ficha--junto-a-tabla .raco-aloj-tira img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}

	/* 3. Los botones se montaban uno sobre otro: a lo ancho y apilados. */
	/* Mismo peso de selector que la regla de escritorio (lleva `div.product`):
	   sin el, aquella ganaba tambien en el telefono y los botones seguian a
	   media anchura, montados uno sobre otro. */
	body.single-product div.product form.variations_form.cart.raco-tabla-manda-form .raco-popup-maker-product-button-wrap,
	body.single-product div.product form.variations_form.cart.raco-tabla-manda-form .woocommerce-variation-add-to-cart.variations_button {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	/* 4. En "Has elegido" el precio quedaba colgando solo a la derecha.
	   Apilado y alineado con el resto se lee de un golpe. */
	.raco-tabla-manda__resumen {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.raco-tabla-manda__resumen-precio {
		margin-left: 0;
		font-size: 19px;
	}
}