/* =====================================================================
   Chihuahua Te Amo · Ventana «Envíanos un correo» (decisión 122,
   26-oct-2026; COMPONENTES.md §3.55)
   La abren los enlaces del correo de todo el sitio (ventana-correo.js).
   Se encola en todas las páginas con template-parts/ventana-correo.php
   (cta_ventana_correo_encolar(), inc/solicitud.php), al final de la página:
   la ventana está cerrada al cargar. Los campos, el aviso de envío, el
   respaldo y la confirmación usan los estilos de «Reservar por correo»
   (.cta-correo__*, calculadora-correo.css, que se encola antes); aquí va
   la ventana y el acomodo de los campos. La ventana es como «Cotizar»
   (tour.css §17), que solo se carga en los tours. Solo tokens: los modos
   claro y oscuro salen solos.
   ===================================================================== */

/* La página ya no se desplaza con un <dialog> abierto (componentes.css,
   html:has(dialog[open])). Con una barra de desplazamiento clásica (Chrome
   en Windows o Linux) se compensa su ancho para que la página y lo fijo
   (encabezado, barra de reserva y botón flotante) no brinquen. */
html.cta-ventana-correo-abierta {
	padding-right: var(--cta-barra-desplazamiento, 0px);
}
html.cta-ventana-correo-abierta .cta-header,
html.cta-ventana-correo-abierta .cta-barra-reserva {
	right: var(--cta-barra-desplazamiento, 0px);
}
html.cta-ventana-correo-abierta .cta-flotante {
	right: calc(16px + var(--cta-barra-desplazamiento, 0px));
}

/* ---------------------------------------------------------------------
   1. Ventana: centrada en computadora; hoja que sube desde abajo en
      celular (§3)
   --------------------------------------------------------------------- */
.cta-ventana-correo {
	width: min(680px, calc(100vw - 48px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--borde-fuerte);
	border-radius: 28px;
	background: var(--tarjeta);
	box-shadow: 0 24px 64px rgba(16, 24, 32, 0.35);
	color: var(--texto);
}
.cta-ventana-correo::backdrop {
	background: rgba(16, 24, 32, 0.64);
}
.cta-ventana-correo[open] {
	display: flex;
	animation: cta-ventana-correo-aparece 0.22s ease-out;
}
@keyframes cta-ventana-correo-aparece {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.985);
	}
}
.cta-ventana-correo__caja {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: min(900px, calc(100vh - 48px));
	max-height: min(900px, calc(100dvh - 48px));
}
.cta-ventana-correo__cabeza {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 28px 18px;
	border-bottom: 1px solid var(--borde);
}
.cta-ventana-correo__titulo {
	min-width: 0;
	font-size: 22px;
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.2;
	color: var(--titulo);
}
.cta-ventana-correo__titulo:focus:not(:focus-visible) {
	outline: none;
}
/* Orilla con el gris de los campos (--input-borde: 3.4:1 sobre blanco), no
   el --borde-fuerte de «Cotizar». */
.cta-ventana-correo__cerrar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--input-borde);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	color: var(--texto);
	cursor: pointer;
}
.cta-ventana-correo__cerrar:hover {
	border-color: var(--texto);
}
/* position: relative (revisión de cierre, 26-oct-2026, como el panel de
   «Reservar por correo», calculadora-correo.css §2): el campo trampa y los
   textos solo para lectores de pantalla van con position: absolute; sin
   esto se acomodaban respecto a la ventana (el <dialog>, fijo) y no al
   cuerpo que se desplaza, la hacían más alta por dentro y un
   scrollIntoView() la desplazaba (a pesar de su overflow: hidden): la
   cabeza con «Cerrar» se iba hacia arriba y quedaba un hueco abajo. */
.cta-ventana-correo__cuerpo {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 28px calc(28px + env(safe-area-inset-bottom));
}
.cta-ventana-correo .cta-correo__vista {
	gap: 16px;
}
/* Confirmación: arriba, sin tanto aire como en la calculadora. */
.cta-ventana-correo .cta-correo__listo {
	padding: 20px 0 8px;
}

/* ---------------------------------------------------------------------
   2. Campos: una columna; desde 768 px, Nombre y Correo lado a lado, y
      Fecha y Personas. Cada pareja es una rejilla de 2 columnas y 3
      renglones (etiqueta, campo y error) en la que los <p> no cuentan
      (display: contents): si una etiqueta ocupa dos renglones, los dos
      campos siguen a la misma altura. El orden de lectura y de Tab es el
      del HTML (izquierda y luego derecha).
   --------------------------------------------------------------------- */
.cta-ventana-correo__par {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
@media (min-width: 768px) {
	.cta-ventana-correo__par {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		gap: 0 16px;
		align-items: end;
	}
	.cta-ventana-correo__par > .cta-campo {
		display: contents;
	}
	.cta-ventana-correo__par > .cta-campo:first-child > * {
		grid-column: 1;
	}
	.cta-ventana-correo__par > .cta-campo:last-child > * {
		grid-column: 2;
	}
	.cta-ventana-correo__par .cta-campo__etiqueta {
		grid-row: 1;
		margin-bottom: 8px;
	}
	.cta-ventana-correo__par .cta-campo__control {
		grid-row: 2;
	}
	.cta-ventana-correo__par .cta-correo__error {
		grid-row: 3;
		align-self: start;
		margin-top: 8px;
	}
}

/* ---------------------------------------------------------------------
   3. Celular: hoja de una columna que sube desde abajo, como «Cotizar»
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.cta-ventana-correo {
		width: 100%;
		max-width: 100%;
		margin: auto 0 0;
		border-width: 1px 0 0;
		border-radius: 24px 24px 0 0;
	}
	.cta-ventana-correo[open] {
		animation-name: cta-ventana-correo-sube;
		animation-duration: 0.28s;
	}
	.cta-ventana-correo__caja {
		max-height: calc(100vh - 12px);
		max-height: calc(100dvh - 12px);
	}
	/* Asa de la hoja */
	.cta-ventana-correo__cabeza {
		padding: 22px 20px 14px;
	}
	.cta-ventana-correo__cabeza::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: var(--r-pildora);
		background: var(--borde-fuerte);
	}
	.cta-ventana-correo__titulo {
		font-size: 20px;
	}
	.cta-ventana-correo__cuerpo {
		padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
	}
}
@media (max-width: 359px) {
	.cta-ventana-correo__cabeza {
		padding: 20px 16px 12px;
	}
	.cta-ventana-correo__titulo {
		font-size: 19px;
	}
	.cta-ventana-correo__cuerpo {
		padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
	}
}
@keyframes cta-ventana-correo-sube {
	from {
		transform: translateY(100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cta-ventana-correo[open] {
		animation: none;
	}
}
@media (forced-colors: active) {
	.cta-ventana-correo {
		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) {
	html.cta-ventana-correo-abierta .cta-flotante {
		right: calc(calc(16 * var(--u)) + var(--cta-barra-desplazamiento, 0px));
	}
	.cta-ventana-correo {
		width: min(calc(680 * var(--u)), calc(100vw - calc(48 * var(--u))));
		border-radius: calc(28 * var(--u));
	}
	.cta-ventana-correo__caja {
		width: 100%;
		max-height: min(calc(900 * var(--u)), calc(100vh - calc(48 * var(--u))));
		max-height: min(calc(900 * var(--u)), calc(100dvh - calc(48 * var(--u))));
	}
	.cta-ventana-correo__cabeza {
		gap: calc(16 * var(--u));
		padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(18 * var(--u));
	}
	.cta-ventana-correo__titulo {
		font-size: calc(22 * var(--u));
	}
	.cta-ventana-correo__cerrar {
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-ventana-correo__cuerpo {
		padding: calc(20 * var(--u)) calc(28 * var(--u)) calc(calc(28 * var(--u)) + env(safe-area-inset-bottom));
	}
	.cta-ventana-correo .cta-correo__vista {
		gap: calc(16 * var(--u));
	}
	.cta-ventana-correo .cta-correo__listo {
		padding: calc(20 * var(--u)) 0 calc(8 * var(--u));
	}
	.cta-ventana-correo__par {
		gap: calc(16 * var(--u));
	}
	.cta-ventana-correo__par {
		gap: 0 calc(16 * var(--u));
	}
	.cta-ventana-correo__par .cta-campo__etiqueta {
		margin-bottom: calc(8 * var(--u));
	}
	.cta-ventana-correo__par .cta-correo__error {
		margin-top: calc(8 * var(--u));
	}
}
/* </pantallas-grandes> */