/* Reservas Alojamiento — calendario público.
 * Hereda la tipografía del tema. Los colores se pueden cambiar
 * redefiniendo estas variables en el CSS del tema, p. ej.:
 *   .ra-reservas { --ra-acento: #E8792B; }
 */
.ra-reservas {
	/* Colores corporativos */
	--ra-acento: #E8792B;
	--ra-acento-hover: #D96A1D;
	--ra-acento-suave: #FDEEE3;
	--ra-neutro: #2B2926;
	/* Selección de fechas (neutros, el naranja queda para la acción principal) */
	--ra-sel: #2B2926;
	--ra-sel-texto: #FFFFFF;
	--ra-sel-suave: #E9E6E2;
	/* Disponibilidad */
	--ra-libre-fondo: #E6F2E9;
	--ra-libre-texto: #1E5A37;
	--ra-ocupado-fondo: #F6E0DD;
	--ra-ocupado-texto: #9A3A32;
	/* Apoyo */
	--ra-apagado: rgba(43, 41, 38, .38);
	--ra-borde: rgba(43, 41, 38, .16);
	--ra-radio: 8px;

	container-type: inline-size;
	container-name: ra;
	display: grid;
	gap: 24px;
	font-family: inherit;
	color: var(--ra-neutro);
	line-height: 1.45;
}

.ra-reservas *, .ra-reservas *::before, .ra-reservas *::after { box-sizing: border-box; }

/* Muchos temas dan estilos a todos los <button> (fondo y color al pasar el ratón o al
 * enfocar). Por eso las reglas de botones van prefijadas con .ra-reservas: así pesan más
 * que las del tema y mandan en todos los estados. */
.ra-reservas button { text-transform: none; letter-spacing: normal; text-shadow: none; }
.ra-reservas [hidden] { display: none !important; }

.ra-reservas .ra-dia:focus-visible, .ra-reservas .ra-nav:focus-visible, .ra-reservas .ra-link:focus-visible,
.ra-reservas .ra-link-texto:focus-visible, .ra-reservas .ra-enviar:focus-visible, .ra-reservas .ra-modal-cerrar:focus-visible {
	outline: 2px solid var(--ra-neutro);
	outline-offset: 2px;
}

/* ---------- Calendario ---------- */
.ra-cal { position: relative; min-width: 0; }

.ra-cal-nav {
	position: absolute;
	inset: 0 0 auto 0;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 1;
}
.ra-reservas .ra-nav {
	pointer-events: auto;
	box-shadow: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ra-borde);
	border-radius: 50%;
	background: #fff;
	color: var(--ra-neutro);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0 0 3px;
}
.ra-reservas .ra-nav:hover:not(:disabled) { background: var(--ra-sel-suave); color: var(--ra-neutro); border-color: var(--ra-borde); }
.ra-reservas .ra-nav:disabled { opacity: .3; cursor: default; background: #fff; }

.ra-meses {
	display: grid;
	grid-template-columns: repeat(var(--ra-cols, 1), minmax(0, 1fr));
	gap: 40px;
}

.ra-mes-titulo {
	margin: 0 0 14px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: 600;
	font-size: 1.05em;
	color: var(--ra-neutro);
}

.ra-semana, .ra-dias {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 5px;
}
.ra-semana span {
	text-align: center;
	font-size: .75em;
	color: var(--ra-neutro);
	opacity: .6;
	padding-bottom: 6px;
}

.ra-reservas .ra-dia {
	appearance: none;
	box-shadow: none;
	font: inherit;
	border: 0;
	border-radius: var(--ra-radio);
	min-height: 54px;
	padding: 6px 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	cursor: pointer;
}
.ra-num { font-weight: 600; font-size: .95em; line-height: 1.1; }
.ra-precio { font-size: .7em; line-height: 1.1; white-space: nowrap; }
.ra-min { font-size: .62em; line-height: 1.1; opacity: .8; white-space: nowrap; }

.ra-reservas .ra-dia.ra-libre { background: var(--ra-libre-fondo); color: var(--ra-libre-texto); }
.ra-reservas .ra-dia.ra-ocupado { background: var(--ra-ocupado-fondo); color: var(--ra-ocupado-texto); cursor: default; }
.ra-ocupado .ra-num { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .75; }

/* Día ocupado que sirve como día de salida (se sale por la mañana). */
.ra-reservas .ra-dia.ra-ocupado.ra-solo-salida {
	background: linear-gradient(135deg, var(--ra-libre-fondo) 50%, var(--ra-ocupado-fondo) 50%);
	color: var(--ra-libre-texto);
	cursor: pointer;
}
.ra-ocupado.ra-solo-salida .ra-num { text-decoration: none; opacity: 1; }

.ra-reservas .ra-dia.ra-pasado, .ra-reservas .ra-dia.ra-fuera { background: transparent; color: var(--ra-apagado); cursor: default; }
.ra-fuera .ra-precio, .ra-fuera .ra-min { display: none; }

/* Selección */
.ra-reservas .ra-dia.ra-en-rango { background: var(--ra-sel-suave); color: var(--ra-neutro); }
.ra-reservas .ra-dia.ra-inicio, .ra-reservas .ra-dia.ra-fin { background: var(--ra-sel); color: var(--ra-sel-texto); }

/* Al pasar el ratón: solo un borde neutro, sin cambiar el color del día. */
.ra-reservas .ra-dia:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--ra-neutro); }
.ra-reservas .ra-dia.ra-inicio:hover, .ra-reservas .ra-dia.ra-fin:hover { box-shadow: none; }
.ra-dia.ra-inicio .ra-num, .ra-dia.ra-fin .ra-num { text-decoration: none; opacity: 1; }

.ra-cargando { padding: 60px 0; text-align: center; opacity: .7; margin: 0; }

.ra-leyenda {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: .85em;
}
.ra-leyenda li { display: flex; align-items: center; gap: 8px; margin: 0; }
.ra-muestra { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.ra-muestra-libre { background: var(--ra-libre-fondo); box-shadow: inset 0 0 0 1px var(--ra-libre-texto); }
.ra-muestra-ocupado { background: var(--ra-ocupado-fondo); box-shadow: inset 0 0 0 1px var(--ra-ocupado-texto); }

/* ---------- Panel: resumen + formulario ---------- */
.ra-panel {
	scroll-margin-top: var(--ra-scroll-offset, 96px);
	border: 1px solid var(--ra-borde);
	border-radius: 12px;
	padding: 20px;
	min-width: 0;
	display: grid;
	gap: 20px;
}

.ra-estado { display: grid; gap: 14px; }

/* Tarjetas Entrada → Salida */
.ra-pasos { display: flex; align-items: stretch; gap: 10px; }
.ra-paso {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--ra-borde);
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s, background-color .15s;
}
.ra-paso-icono {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ra-sel-suave);
	color: var(--ra-neutro);
}
.ra-paso-icono svg { width: 19px; height: 19px; display: block; }
.ra-paso-texto { display: grid; gap: 1px; min-width: 0; }
.ra-paso-etiqueta { font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.ra-paso-valor { font-size: .95em; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-paso-valor::first-letter { text-transform: uppercase; }

/* El paso que toca rellenar ahora */
.ra-paso-activo { border-color: var(--ra-acento); background: var(--ra-acento-suave); box-shadow: 0 0 0 1px var(--ra-acento); }
.ra-paso-activo .ra-paso-icono { background: var(--ra-acento); color: #fff; }
.ra-paso-activo .ra-paso-valor { opacity: 1; font-weight: 600; }
/* Paso ya completado */
.ra-paso-lleno .ra-paso-valor { opacity: 1; font-weight: 700; }
.ra-paso-lleno .ra-paso-icono { background: var(--ra-sel); color: var(--ra-sel-texto); }

.ra-paso-flecha { flex: none; align-self: center; color: var(--ra-neutro); opacity: .35; }
.ra-paso-flecha svg { width: 20px; height: 20px; display: block; }

.ra-aviso { margin: 0; font-size: .9em; opacity: .75; }
.ra-aviso-alerta {
	opacity: 1;
	color: var(--ra-ocupado-texto);
	font-weight: 600;
	background: var(--ra-ocupado-fondo);
	border-radius: 8px;
	padding: 10px 14px;
}

.ra-resumen {
	background: var(--ra-acento-suave);
	border-radius: 10px;
	padding: 18px;
	align-self: start;
}
.ra-resumen dl { margin: 0; display: grid; gap: 10px; }
.ra-resumen dl > div { display: flex; justify-content: space-between; gap: 12px; }
.ra-resumen dt { opacity: .7; margin: 0; }
.ra-resumen dd { margin: 0; text-align: right; font-weight: 600; }
.ra-resumen dd::first-letter { text-transform: uppercase; }
/* Entrada y salida: etiqueta encima de la fecha, para que la fecha no se parta en dos líneas. */
.ra-resumen dl > div:not(.ra-total) { flex-direction: column; gap: 2px; }
.ra-resumen dl > div:not(.ra-total) dt { font-size: .85em; }
.ra-resumen dl > div:not(.ra-total) dd { text-align: left; }
.ra-resumen .ra-total {
	border-top: 1px solid rgba(43, 41, 38, .15);
	padding-top: 12px;
	margin-top: 4px;
	font-size: 1.15em;
}
.ra-resumen .ra-total dt { opacity: 1; }
.ra-resumen .ra-total dd { font-weight: 700; }

.ra-reservas .ra-link, .ra-reservas .ra-link-texto {
	appearance: none;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	line-height: inherit;
	min-height: 0;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--ra-neutro);
	text-decoration: underline;
	text-decoration-color: rgba(43, 41, 38, .35);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color .15s, text-decoration-color .15s;
}
.ra-reservas .ra-link { margin-top: 14px; font-size: .9em; }
.ra-reservas .ra-link:hover, .ra-reservas .ra-link:focus, .ra-reservas .ra-link:active,
.ra-reservas .ra-link-texto:hover, .ra-reservas .ra-link-texto:focus, .ra-reservas .ra-link-texto:active {
	background: transparent;
	color: var(--ra-acento-hover);
	text-decoration-color: currentColor;
	box-shadow: none;
}

.ra-form { display: grid; gap: 16px; min-width: 0; }
.ra-campos { display: grid; gap: 14px; }
.ra-campo { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ra-campo label { font-size: .88em; font-weight: 600; }
.ra-campo input, .ra-campo select, .ra-campo textarea {
	font: inherit;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ra-borde);
	border-radius: 6px;
	background: #fff;
	color: var(--ra-neutro);
}
.ra-campo textarea { resize: vertical; min-height: 64px; }
.ra-campo input:focus, .ra-campo select:focus, .ra-campo textarea:focus {
	outline: 2px solid var(--ra-acento);
	outline-offset: 0;
	border-color: transparent;
}

.ra-pie { display: grid; gap: 12px; }
.ra-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9em; line-height: 1.45; cursor: pointer; }
.ra-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ra-acento); cursor: pointer; }

.ra-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.ra-error { margin: 0; color: var(--ra-ocupado-texto); font-weight: 600; }

.ra-reservas .ra-enviar {
	appearance: none;
	box-shadow: none;
	font: inherit;
	font-weight: 700;
	border: 0;
	border-radius: 8px;
	padding: 14px 28px;
	background: var(--ra-acento);
	color: #fff;
	cursor: pointer;
	width: 100%;
}
.ra-reservas .ra-enviar:hover:not(:disabled), .ra-reservas .ra-enviar:focus, .ra-reservas .ra-enviar:active {
	background: var(--ra-acento-hover);
	color: #fff;
	box-shadow: none;
}
.ra-reservas .ra-enviar:disabled { opacity: .6; cursor: progress; }

.ra-nota { margin: 0; font-size: .8em; opacity: .7; }
/* Alineada con el texto de la casilla de privacidad */
.ra-pie .ra-nota { padding-left: 28px; }

.ra-exito { outline: none; }
.ra-exito p { margin: 0 0 8px; }
.ra-exito-titulo { font-weight: 700; font-size: 1.15em; color: var(--ra-libre-texto); }

/* Formulario en dos columnas cuando hay sitio */
@container ra (min-width: 520px) {
	.ra-campos { grid-template-columns: 1fr 1fr; }
	.ra-campo-ancho { grid-column: 1 / -1; }
}

/* Escritorio: resumen a la izquierda y formulario a la derecha, bajo el calendario */
@container ra (min-width: 820px) {
	.ra-panel { grid-template-columns: 300px minmax(0, 1fr); column-gap: 32px; padding: 24px; }
	.ra-estado, .ra-exito { grid-column: 1 / -1; }
	/* Estado inicial: tarjetas a la izquierda, ayuda a la derecha */
	.ra-estado { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: center; column-gap: 28px; }
	/* Pie: casilla y nota apiladas a la izquierda, botón a la derecha centrado en altura */
	.ra-pie { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; row-gap: 8px; }
	.ra-pie .ra-check, .ra-pie .ra-error, .ra-pie .ra-nota { grid-column: 1; }
	.ra-reservas .ra-pie .ra-enviar { grid-column: 2; grid-row: 1 / span 3; width: auto; min-width: 220px; }
}

/* Móvil: celdas más compactas */
@container ra (max-width: 420px) {
	.ra-dia { min-height: 46px; }
	.ra-min { display: none; }
	.ra-precio { font-size: .62em; }
	.ra-semana, .ra-dias { gap: 3px; }
	/* Sin marco propio: el formulario aprovecha todo el ancho disponible */
	.ra-panel { padding: 0; border: 0; border-radius: 0; gap: 16px; }
	.ra-resumen { padding: 16px; }
	.ra-campos { gap: 12px; }
	/* Pie: casilla, botón y nota centrada debajo */
	.ra-pie { gap: 14px; }
	.ra-pie .ra-nota { padding-left: 0; text-align: center; font-size: .78em; line-height: 1.5; }
	.ra-paso { padding: 10px; gap: 8px; }
	.ra-paso-icono { display: none; }
	.ra-paso-valor { white-space: normal; font-size: .9em; line-height: 1.25; }
	.ra-paso-flecha svg { width: 16px; height: 16px; }
}

/* ---------- Modal de política de privacidad ---------- */
.ra-modal {
	width: min(680px, calc(100vw - 32px));
	max-height: min(85vh, 900px);
	padding: 0;
	border: 0;
	border-radius: 12px;
	color: var(--ra-neutro);
	background: #fff;
	box-shadow: 0 20px 60px rgba(43, 41, 38, .3);
	overflow: hidden;
}
.ra-modal[open] { display: flex; flex-direction: column; }
.ra-modal::backdrop { background: rgba(43, 41, 38, .55); }

.ra-modal-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--ra-borde);
}
.ra-modal-cabecera h2 { margin: 0; font-size: 1.25em; line-height: 1.3; color: var(--ra-neutro); }
.ra-reservas .ra-modal-cerrar {
	appearance: none;
	flex: none;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ra-neutro);
	box-shadow: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.ra-reservas .ra-modal-cerrar svg { display: block; width: 16px; height: 16px; }
.ra-reservas .ra-modal-cerrar:hover, .ra-reservas .ra-modal-cerrar:focus, .ra-reservas .ra-modal-cerrar:active {
	background: var(--ra-sel-suave);
	color: var(--ra-neutro);
	box-shadow: none;
}
/* Al abrir con el ratón, el foco cae en la X: que no se vea marcada salvo con teclado. */
.ra-reservas .ra-modal-cerrar:focus:not(:focus-visible) { background: transparent; }

.ra-modal-texto {
	outline: none;
	padding: 20px 24px;
	overflow-y: auto;
	font-size: .95em;
	line-height: 1.6;
}
.ra-modal-texto > :first-child { margin-top: 0; }
.ra-modal-texto > :last-child { margin-bottom: 0; }
.ra-modal-texto h2, .ra-modal-texto h3, .ra-modal-texto h4 { font-size: 1.05em; margin: 1.4em 0 .4em; }
.ra-modal-texto a { color: var(--ra-neutro); text-decoration-color: rgba(43, 41, 38, .35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ra-modal-texto a:hover { color: var(--ra-acento-hover); text-decoration-color: currentColor; }

.ra-modal-pie { padding: 14px 24px; border-top: 1px solid var(--ra-borde); text-align: right; }
.ra-reservas .ra-modal-pie .ra-enviar { width: auto; padding: 10px 24px; }

@media (prefers-reduced-motion: no-preference) {
	.ra-modal[open] { animation: ra-modal-entra .18s ease-out; }
	@keyframes ra-modal-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- Blindaje: el tema no debe cambiar bordes ni rellenos al pasar el ratón o enfocar ---------- */
.ra-reservas .ra-dia:hover, .ra-reservas .ra-dia:focus, .ra-reservas .ra-dia:active { border: 0; padding: 6px 2px; }
.ra-reservas .ra-nav:hover, .ra-reservas .ra-nav:focus, .ra-reservas .ra-nav:active { border: 1px solid var(--ra-borde); padding: 0 0 3px; }
.ra-reservas .ra-link:hover, .ra-reservas .ra-link:focus, .ra-reservas .ra-link:active,
.ra-reservas .ra-link-texto:hover, .ra-reservas .ra-link-texto:focus, .ra-reservas .ra-link-texto:active { border: 0; padding: 0; }
.ra-reservas .ra-enviar:hover, .ra-reservas .ra-enviar:focus, .ra-reservas .ra-enviar:active { border: 0; padding: 14px 28px; }
.ra-reservas .ra-modal-pie .ra-enviar:hover, .ra-reservas .ra-modal-pie .ra-enviar:focus, .ra-reservas .ra-modal-pie .ra-enviar:active { padding: 10px 24px; }
.ra-reservas .ra-modal-cerrar:hover, .ra-reservas .ra-modal-cerrar:focus, .ra-reservas .ra-modal-cerrar:active { border: 0; padding: 0; }
@container ra (max-width: 420px) {
	.ra-reservas .ra-dia:hover, .ra-reservas .ra-dia:focus, .ra-reservas .ra-dia:active { padding: 6px 2px; }
}