/* =========================================================================
   Demandes de réservation.

   Les couleurs viennent des jetons du thème quand il est actif, avec un repli
   pour le jour où il ne l'est pas : un module de réservation ne doit pas
   devenir illisible parce qu'on a changé de thème.
   ========================================================================= */

.lcr {
	--lcr-fondo: var(--cal-pura, #fff);
	--lcr-linea: var(--piedra, #c9b394);
	--lcr-texto: var(--cueva, #211d19);
	--lcr-suave: var(--sombra, #5c5349);
	--lcr-acento: var(--azul, #1b5fa8);
	--lcr-acento-oscuro: var(--azul-hondo, #123f74);
	--lcr-arena: var(--arena, #ece0cb);

	/* Large pour que quatre mois tiennent côte à côte, et centré : le bloc
	   flottait à gauche d'une section deux fois plus large. */
	max-width: 60rem;
	margin-inline: auto;
	font-family: var(--fuente-texto, system-ui, sans-serif);
	color: var(--lcr-texto);
}

/* Seul le calendrier profite de toute la largeur. Les champs gardent une
   longueur de ligne confortable et se centrent au-dessus de lui : un champ
   « nom » de soixante rem ne se remplit pas mieux, il se lit moins bien. */
.lcr > *:not(.lcr__calendario) {
	max-width: 46rem;
	margin-inline: auto;
}

/* L'attribut « hidden » ne fait plus rien dès qu'une règle donne un display :
   celle du navigateur pèse moins lourd que la nôtre. Sans cette ligne, la
   boîte d'estimation reste affichée, vide et bordée, tant qu'aucune date
   n'est choisie. */
.lcr [hidden] {
	display: none;
}

.lcr__fechas,
.lcr__datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.lcr__campo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.25rem;
}

.lcr__fechas .lcr__campo,
.lcr__datos .lcr__campo {
	margin-bottom: 0;
}

.lcr__etiqueta {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lcr-suave);
}

.lcr input,
.lcr select,
.lcr textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--lcr-linea);
	border-radius: 2px;
	background: var(--lcr-fondo);
	color: inherit;
	font: inherit;
	/* Sans ça, Safari sur iPhone redessine les champs à sa façon. */
	-webkit-appearance: none;
	appearance: none;
}

.lcr select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1rem center, right 0.7rem center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.lcr input:focus-visible,
.lcr select:focus-visible,
.lcr textarea:focus-visible {
	outline: 2px solid var(--lcr-acento);
	outline-offset: 2px;
	border-color: transparent;
}

/* --- Le calendrier de lecture -------------------------------------------- */

.lcr__calendario {
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	background: var(--lcr-arena);
	border-radius: 2px;
}

.lcr__meses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.5rem;
}

/* --- La barre de navigation ---------------------------------------------- */

.lcr__nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.lcr__nav-titulo {
	flex: 1;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
}

.lcr__nav-boton {
	display: grid;
	place-items: center;
	/* 2,25rem : la cible reste confortable au doigt même sur un petit écran. */
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--lcr-texto);
	background: var(--lcr-fondo);
	border: 1px solid var(--lcr-linea);
	border-radius: 2px;
	cursor: pointer;
}

.lcr__nav-boton:hover:not([disabled]) {
	border-color: var(--lcr-acento);
	color: var(--lcr-acento);
}

.lcr__nav-boton[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* --- La grille ------------------------------------------------------------ */

.lcr__mes-titulo {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

.lcr__rejilla {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.lcr__semana {
	display: grid;
	place-items: center;
	padding-bottom: 0.3rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--lcr-suave);
	text-transform: uppercase;
}

/* Le jour et son prix, l'un sous l'autre. La hauteur minimale remplace le
   carré : une case doit rester confortable au doigt même quand elle porte
   deux lignes. */
.lcr__dia {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	min-height: 2.6rem;
	padding: 0.2rem 0;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--lcr-texto);
	background: none;
	border: 0;
	border-radius: 2px;
}

.lcr__dia-num {
	font-size: 0.75rem;
	line-height: 1.1;
}

.lcr__dia-precio {
	font-size: 0.5625rem;
	line-height: 1;
	color: var(--lcr-suave);
	white-space: nowrap;
}

/* Sur les bornes du séjour, le fond est plein : le prix doit repasser en
   clair pour rester lisible. */
.lcr__dia--entrada .lcr__dia-precio,
.lcr__dia--salida .lcr__dia-precio,
.lcr__dia--previo .lcr__dia-precio {
	color: inherit;
	opacity: 0.85;
}

.lcr__dia--rango .lcr__dia-precio {
	color: inherit;
	opacity: 0.75;
}

/* Sous cette largeur, sept colonnes de prix deviennent illisibles : on garde
   les jours et on laisse l'estimation dire le prix. */
@media (max-width: 22rem) {
	.lcr__dia-precio {
		display: none;
	}

	.lcr__dia {
		min-height: 2rem;
	}
}

/* --- Ce qu'on peut choisir ------------------------------------------------ */

button.lcr__dia {
	cursor: pointer;
	/* Le glissé ne doit pas sélectionner les chiffres au passage. */
	user-select: none;
	-webkit-user-select: none;
	transition: background-color 0.08s linear, color 0.08s linear;
}

button.lcr__dia[aria-disabled="true"] {
	cursor: default;
}

/* :where() ramène ce sélecteur au poids d'une simple classe. Sans lui,
   « --libre:hover » pesait plus lourd que « --salida » et repeignait en blanc
   la borne du séjour qu'on venait de cliquer — fond blanc, texte blanc, case
   vide. Les états choisis, déclarés plus bas, l'emportent maintenant. */
.lcr__dia--libre:where(:hover, :focus-visible) {
	background: var(--lcr-fondo);
	box-shadow: inset 0 0 0 1px var(--lcr-acento);
}

.lcr__dia:focus-visible {
	outline: 2px solid var(--lcr-acento);
	outline-offset: 1px;
}

/* Les deux bornes du séjour, pleines ; le milieu, en aplat léger. Le rayon
   arrondi sur l'extérieur dessine le ruban, comme sur un vrai calendrier. */
.lcr__dia--entrada,
.lcr__dia--salida {
	background: var(--lcr-acento);
	color: var(--lcr-fondo);
	font-weight: 600;
}

.lcr__dia--entrada {
	border-radius: 2px 0 0 2px;
}

.lcr__dia--salida {
	border-radius: 0 2px 2px 0;
}

.lcr__dia--rango {
	background: color-mix(in srgb, var(--lcr-acento) 30%, var(--lcr-fondo));
	color: var(--lcr-acento-oscuro, #123f74);
	font-weight: 600;
	border-radius: 0;
}

/* L'aperçu pendant qu'on glisse : même dessin, plus pâle, pour qu'on voie
   que rien n'est encore arrêté. */
.lcr__dia--previo {
	background: color-mix(in srgb, var(--lcr-acento) 55%, var(--lcr-fondo));
	color: var(--lcr-fondo);
	font-weight: 600;
	border-radius: 0 2px 2px 0;
}

/* Au-delà de la première nuit prise : le séjour ne peut pas aller jusque-là. */
.lcr__dia--fuera {
	opacity: 0.35;
}

.lcr__dia--pasado {
	opacity: 0.3;
}

.lcr__dia--ocupado {
	background: var(--lcr-acento);
	color: var(--lcr-fondo);
	/* La couleur seule ne suffit pas : elle échappe à qui ne la distingue
	   pas. La barre oblique dit la même chose sans dépendre de la teinte. */
	background-image: linear-gradient(135deg, transparent 45%, rgb(255 255 255 / 0.55) 45%, rgb(255 255 255 / 0.55) 55%, transparent 55%);
}

/* Pas encore ouvert à la location : ni pris, ni libre. Le trait barré le dit
   sans couleur, la teinte sourde le confirme. */
.lcr__dia--cerrado {
	background: var(--lcr-arena);
	color: var(--lcr-suave);
}

.lcr__dia--cerrado .lcr__dia-num,
.lcr__dia--pasado .lcr__dia-num {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.lcr__leyendas {
	margin-top: 1rem;
}

.lcr__resumen {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--lcr-texto);
}

.lcr__leyenda {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	font-size: 0.8125rem;
	color: var(--lcr-suave);
}

.lcr__muestra {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 2px;
	background: var(--lcr-acento);
	background-image: linear-gradient(135deg, transparent 45%, rgb(255 255 255 / 0.55) 45%, rgb(255 255 255 / 0.55) 55%, transparent 55%);
}

.lcr__muestra--cerrado {
	position: relative;
	background: var(--lcr-arena);
	background-image: none;
}

.lcr__muestra--cerrado::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	border-top: 1px solid var(--lcr-suave);
}

/* --- L'estimation --------------------------------------------------------- */

.lcr__presupuesto {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--lcr-linea);
	border-left: 3px solid var(--lcr-acento);
	background: var(--lcr-fondo);
}

.lcr__presupuesto-noches {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lcr-suave);
}

.lcr__presupuesto-total {
	font-family: var(--fuente-titulo, Georgia, serif);
	font-size: 1.5rem;
	color: var(--titulo-color, var(--lcr-acento));
}

.lcr__presupuesto-media {
	font-size: 0.875rem;
	color: var(--lcr-suave);
}

/* --- Messages ------------------------------------------------------------- */

.lcr__aviso {
	padding: 0.8rem 1rem;
	margin-bottom: 1.25rem;
	font-size: 0.9375rem;
	border-left: 3px solid var(--teja, #a4472c);
	background: color-mix(in srgb, var(--teja, #a4472c) 8%, transparent);
}

.lcr__gracias {
	padding: 1.5rem;
	border-left: 3px solid var(--lcr-acento);
	background: var(--lcr-arena);
	font-size: 1.0625rem;
}

.lcr__nota {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: var(--lcr-suave);
	text-align: center;
}

/* Un bouton est un inline-block : « margin-inline: auto » ne le centre pas,
   faute de largeur définie à répartir. fit-content la lui donne sans
   l'étirer sur toute la colonne. */
.lcr__enviar {
	display: block;
	width: fit-content;
	margin-inline: auto;
	cursor: pointer;
}

.lcr__enviar[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* Le piège à robots : hors écran plutôt que display:none, que certains
   automates savent détecter. */
.lcr__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lcr__presupuesto-rebaja {
	flex-basis: 100%;
	font-size: 0.875rem;
	color: var(--lcr-acento);
}

/* --- Réservation immédiate ------------------------------------------------ */

/* La part payée maintenant, et le solde. Écrit en toutes lettres sous
   l'estimation : personne ne doit découvrir le montant sur la page de Stripe. */
.lcr__presupuesto-arras {
	flex-basis: 100%;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--lcr-suave);
}

/* La règle d'annulation, sous le prix. En droit espagnol elle doit être
   lisible avant le paiement, et c'est aussi ce qui rassure le voyageur. */
.lcr__presupuesto-cancelacion {
	flex-basis: 100%;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	color: var(--lcr-suave);
}

/* Pourquoi ce séjour-là ne se paie pas en ligne. Même place et même ton que
   les arrhes : c'est la même information, dans l'autre sens. */
.lcr__presupuesto-cerca {
	flex-basis: 100%;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--lcr-suave);
}

/* Case à cocher des conditions. La cible reste confortable au doigt, et le
   texte reste aligné sur la première ligne quand il passe à la ligne. */
.lcr__acuerdo {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

.lcr__acuerdo input {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	accent-color: var(--lcr-acento);
}

.lcr__acuerdo a {
	color: var(--lcr-acento);
}