/* =====================================================================
   Chihuahua Te Amo · «Reservar por correo» (decisión 90)
   Botón en el pie de la ventana «Cotizar» y formulario que cambia la
   calculadora por la solicitud (CALCULADORA.md §28). Se encola solo en las
   páginas con calculadora (cta_solicitud_encolar(), inc/solicitud.php).
   Solo tokens: los modos claro y oscuro salen solos.
   ===================================================================== */

/* Vista del formulario: la calculadora y su pie se esconden. No se toca el
   «hidden» de la interfaz: tour.js lo usa para saber si la calculadora
   arrancó (si no, «Cotizar» lleva a «Precios»). En los tours de un día
   (decisión 109, hoja 16), el formulario de fecha y viajeros. */
.cta-calc[data-cta-vista="correo"] .cta-calc__interfaz,
.cta-calc[data-cta-vista="correo"] .cta-calc__pie,
.cta-cotizar-dia[data-cta-vista="correo"] > .cta-cotizar {
	display: none !important;
}
/* El tema no tiene una regla global [hidden] (tour.css §4.5): en la
   calculadora la pone «.cta-calc [hidden]», pero el formulario de los tours
   de un día no está dentro de .cta-calc. Sin esta regla, el «display» de
   la vista, la confirmación y el respaldo anularía su «hidden». */
.cta-correo[hidden],
.cta-correo [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------
   1. Botón «Reservar por correo» (secundario, contorno, ícono de correo)
   Hoja de una columna (menos de 768 px): encima de «Reservar por
   WhatsApp», que sigue siendo el principal (verde, decisión 47). Desde
   768 px van lado a lado, del mismo alto; en computadora (dos columnas),
   el de correo bajo los controles y el de WhatsApp bajo el resultado.
   --------------------------------------------------------------------- */
.cta-dialogo .cta-calc__correo-boton {
	display: flex;
	margin-bottom: 8px;
}
@media (min-width: 768px) {
	.cta-dialogo .cta-calc__correo-boton {
		min-height: 56px;
		margin-bottom: 0;
		padding: 0 24px;
		font-size: var(--t-boton);
	}
}
@media (min-width: 768px) and (max-width: 899px) {
	.cta-dialogo--calc .cta-calc__pie {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 12px;
	}
	.cta-dialogo--calc .cta-calc__pie-precio {
		grid-column: 1 / -1;
	}
}
@media (min-width: 900px) {
	.cta-dialogo--calc .cta-calc__correo-boton {
		grid-column: 1;
	}
}
/* Celulares chicos: el pie no debe comerse la hoja (320 × 568; los dos
   botones de 48 px). */
@media (max-width: 359px) {
	.cta-dialogo .cta-calc__correo-boton {
		margin-bottom: 6px;
	}
}

/* ---------------------------------------------------------------------
   2. Panel del formulario (se desplaza por dentro, como la interfaz)
   --------------------------------------------------------------------- */
.cta-dialogo .cta-calc__correo {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 28px calc(28px + env(safe-area-inset-bottom));
}
.cta-correo__vista {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cta-correo__cabeza {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.cta-correo__volver.cta-btn--enlace {
	white-space: normal;
	text-align: left;
}
/* Títulos de 20 px en 700, como los rótulos de la calculadora (decisión
   99: todo el sitio en Montserrat; color de los títulos). */
.cta-correo__titulo {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	color: var(--titulo);
}
.cta-correo__titulo:focus:not(:focus-visible) {
	outline: none;
}
.cta-correo__intro {
	font-size: 15px;
	line-height: 1.5;
	color: var(--texto-2);
}
.cta-correo__columnas {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* La solicitud ya llenada: solo lectura, los mismos renglones que el
   mensaje de WhatsApp. */
.cta-correo__solicitud {
	min-width: 0;
	padding: 18px 20px;
	border-radius: var(--r-bloque);
	background: var(--tarjeta-alt);
}
.cta-correo__subtitulo {
	margin-bottom: 8px;
	font-family: var(--fuente-texto);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: none;
	color: var(--titulo);
}
.cta-correo__resumen {
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-line;
	overflow-wrap: anywhere;
	color: var(--texto);
}

/* Campos */
.cta-correo__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.cta-correo__ayuda {
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--texto-3);
}
.cta-correo__error {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--rojo-texto);
}
.cta-correo__error:empty {
	display: none;
}
.cta-correo .cta-campo__control[aria-invalid="true"] {
	border-color: var(--rojo-texto);
}
.cta-correo textarea.cta-campo__control {
	min-height: 96px;
}
/* Campo trampa: fuera de la vista y de Tab (aria-hidden en su renglón). */
.cta-correo__trampa {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.cta-correo__privacidad {
	font-size: 13px;
	line-height: 1.5;
	color: var(--texto-3);
	overflow-wrap: anywhere;
}
/* El enlace va dentro del texto; el relleno (anulado con margen) le da
   44 px de alto para tocarlo sin mover los renglones. */
.cta-correo__privacidad a {
	display: inline-block;
	margin: -13px 0;
	padding: 13px 0;
	color: var(--texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Mientras se envía (también en táctil, donde no hay cursor): el botón se
   apaga un poco y «Enviando tu solicitud…» queda a la vista debajo
   (calculadora-correo.js desplaza el panel). */
.cta-correo__enviar[aria-disabled="true"] {
	cursor: progress;
	opacity: 0.7;
}

/* Estado (región viva): vacía no suma el espacio entre renglones. */
.cta-correo__estado {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--texto);
}
.cta-correo__estado:empty {
	margin-top: -16px;
}

/* Respaldo si el envío falla: WhatsApp con el mismo mensaje y un correo
   ya escrito. */
.cta-correo__respaldo {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-bloque);
}
.cta-correo__respaldo-texto {
	font-size: 14px;
	line-height: 1.45;
	color: var(--texto-2);
}
.cta-correo__mailto {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	min-height: 44px;
	max-width: 100%;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--texto);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.cta-correo__mailto .cta-icono {
	flex: none;
}
.cta-correo__mailto:hover {
	color: var(--rojo-texto);
}

/* Confirmación */
.cta-correo__listo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 460px;
	margin: 0 auto;
	padding: 32px 0 8px;
	text-align: center;
}
.cta-correo__listo-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tarjeta-alt);
	color: var(--texto);
}
.cta-correo__listo-texto {
	font-size: 16px;
	line-height: 1.5;
	color: var(--texto-2);
}
.cta-correo__cerrar {
	min-width: 160px;
	margin-top: 6px;
}

/* Computadora (dos columnas, como la calculadora): la solicitud a la
   izquierda, fija arriba mientras se desplaza; los campos a la derecha. */
@media (min-width: 900px) {
	.cta-dialogo--calc .cta-correo__columnas {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 0 40px;
	}
	.cta-dialogo--calc .cta-correo__solicitud {
		position: sticky;
		top: 0;
	}
}

/* Celular: hoja de una columna; 16 px en los campos (en iPhone un campo de
   menos de 16 px amplía la página al tocarlo). */
@media (max-width: 767px) {
	.cta-dialogo .cta-calc__correo {
		padding: 14px 20px calc(24px + env(safe-area-inset-bottom));
	}
	.cta-correo .cta-campo__control {
		font-size: 16px;
	}
	.cta-correo__solicitud {
		padding: 16px;
	}
}
@media (max-width: 359px) {
	.cta-dialogo .cta-calc__correo {
		padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
	}
	.cta-correo__titulo {
		font-size: 18px;
	}
}

@media (forced-colors: active) {
	.cta-correo__solicitud,
	.cta-correo__listo-icono {
		border: 1px solid CanvasText;
	}
}

/* <pantallas-grandes> Decisión 106 (19-oct-2026): desde 1440 px las medidas fijas
   de esta hoja crecen con la pantalla (× --u, tokens.css; ARQUITECTURA.md §3).
   GENERADO por herramientas/pantallas-grandes.py a partir de lo de arriba:
   no se edita a mano; después de cambiar la hoja, correr el script. Los
   ajustes propios de pantallas grandes van después de la marca de cierre. */
@media (min-width: 1440px) {
	.cta-dialogo .cta-calc__correo-boton {
		margin-bottom: calc(8 * var(--u));
	}
	.cta-dialogo .cta-calc__correo-boton {
		min-height: calc(56 * var(--u));
		margin-bottom: 0;
		padding: 0 calc(24 * var(--u));
	}
	.cta-dialogo .cta-calc__correo {
		min-height: 0;
		padding: calc(18 * var(--u)) calc(28 * var(--u)) calc(calc(28 * var(--u)) + env(safe-area-inset-bottom));
	}
	.cta-correo__vista {
		gap: calc(20 * var(--u));
	}
	.cta-correo__cabeza {
		gap: calc(6 * var(--u));
	}
	.cta-correo__titulo {
		font-size: calc(20 * var(--u));
	}
	.cta-correo__intro {
		font-size: calc(15 * var(--u));
	}
	.cta-correo__columnas {
		gap: calc(20 * var(--u));
	}
	.cta-correo__solicitud {
		padding: calc(18 * var(--u)) calc(20 * var(--u));
	}
	.cta-correo__subtitulo {
		margin-bottom: calc(8 * var(--u));
		font-size: calc(13 * var(--u));
	}
	.cta-correo__resumen {
		font-size: calc(14 * var(--u));
	}
	.cta-correo__form {
		gap: calc(16 * var(--u));
	}
	.cta-correo__ayuda {
		font-size: calc(13.5 * var(--u));
	}
	.cta-correo__error {
		font-size: calc(14 * var(--u));
	}
	.cta-correo textarea.cta-campo__control {
		min-height: calc(96 * var(--u));
	}
	.cta-correo__trampa {
		margin: -1px;
		padding: 0;
	}
	.cta-correo__privacidad {
		font-size: calc(13 * var(--u));
	}
	.cta-correo__privacidad a {
		margin: calc(-13 * var(--u)) 0;
		padding: calc(13 * var(--u)) 0;
	}
	.cta-correo__estado {
		font-size: calc(15 * var(--u));
	}
	.cta-correo__estado:empty {
		margin-top: calc(-16 * var(--u));
	}
	.cta-correo__respaldo {
		gap: calc(10 * var(--u));
		padding: calc(16 * var(--u));
	}
	.cta-correo__respaldo-texto {
		font-size: calc(14 * var(--u));
	}
	.cta-correo__mailto {
		gap: calc(8 * var(--u));
		min-height: calc(44 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-correo__listo {
		gap: calc(14 * var(--u));
		max-width: calc(460 * var(--u));
		margin: 0 auto;
		padding: calc(32 * var(--u)) 0 calc(8 * var(--u));
	}
	.cta-correo__listo-icono {
		width: calc(64 * var(--u));
		height: calc(64 * var(--u));
	}
	.cta-correo__listo-texto {
		font-size: calc(16 * var(--u));
	}
	.cta-correo__cerrar {
		min-width: calc(160 * var(--u));
		margin-top: calc(6 * var(--u));
	}
	.cta-dialogo--calc .cta-correo__columnas {
		gap: 0 calc(40 * var(--u));
	}
}
/* </pantallas-grandes> */