/**
 * Página de cotización (/cotizar/, plantilla page-cotizar.php).
 *
 * Se carga solo en esa página (inc/enqueue.php). Incluye el diseño de la
 * página (encabezado, bloque "Cómo funciona" y columna del formulario) y
 * los estilos del tema para el formulario de Fluent Forms: las hojas del
 * plugin se desactivan en inc/cotizacion.php, así que aquí se definen
 * campos, casillas, errores, botón y mensaje de éxito con los tokens de
 * variables.css (sin radios, foco con borde naranjo, error en rojo), igual
 * que los formularios de la tienda.
 *
 * Móvil: los pasos van arriba del formulario y resumidos (solo títulos).
 * Desde 768px se ven completos; desde 1024px el formulario queda a la
 * izquierda y los pasos a la derecha, fijos al hacer scroll.
 *
 * @package Induscore
 */

/* =========================================================
   PÁGINA
   ========================================================= */
.cotizacion {
	padding-top: var(--e-40);
	padding-bottom: var(--e-64);
}

.cotizacion__encabezado {
	max-width: var(--ancho-contenido-3xl);
	margin-bottom: var(--e-32);
}

.cotizacion__titulo {
	margin-bottom: var(--e-16);
}

.cotizacion__bajada {
	margin: 0;
	color: var(--color-texto-secundario);
	font-size: var(--fs-lg);
	line-height: var(--interlineado-base);
}

.cotizacion__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-32);
	align-items: start;
}

/* ---------------------------------------------------
   Bloque "Cómo funciona"
   --------------------------------------------------- */
.cotizacion__pasos {
	padding: var(--e-20);
	background-color: var(--color-gris-claro);
	border-top: var(--e-2) solid var(--color-naranjo);
}

.cotizacion__pasos-titulo {
	margin-bottom: var(--e-12);
	font-size: var(--fs-lg);
	font-weight: var(--peso-semi);
}

.cotizacion__pasos-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cotizacion__paso {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--e-12);
	align-items: baseline;
	padding: var(--e-8) 0;
}

.cotizacion__paso + .cotizacion__paso {
	border-top: var(--linea-divisoria);
}

.cotizacion__paso-numero {
	color: var(--color-naranjo-texto);
	font-size: var(--fs-sm);
	font-weight: var(--peso-negrita);
	letter-spacing: var(--letras-abiertas-md);
	/* Cifras de igual ancho: los títulos de los 3 pasos quedan alineados. */
	font-variant-numeric: tabular-nums;
}

.cotizacion__paso-titulo {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--peso-semi);
	line-height: var(--interlineado-medio);
}

/* Móvil: resumen, solo los títulos de los pasos. */
.cotizacion__paso-texto {
	display: none;
	margin: var(--e-4) 0 0;
	color: var(--color-texto-secundario);
	font-size: var(--fs-base);
	line-height: var(--interlineado-base);
}

.cotizacion__aviso-admin {
	padding: var(--e-16);
	border-left: var(--e-2) solid var(--color-error);
	background-color: var(--color-error-fondo);
	color: var(--color-error);
}

@media (min-width: 768px) {
	.cotizacion {
		padding-top: var(--e-56);
		padding-bottom: var(--e-80);
	}

	.cotizacion__encabezado {
		margin-bottom: var(--e-40);
	}

	.cotizacion__pasos {
		padding: var(--e-28);
	}

	.cotizacion__pasos-titulo {
		margin-bottom: var(--e-16);
		font-size: var(--fs-xl);
	}

	/* Tablet: los 3 pasos en una fila, con su texto. */
	.cotizacion__pasos-lista {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--e-24);
	}

	.cotizacion__paso {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--e-6);
		padding: 0;
	}

	.cotizacion__paso + .cotizacion__paso {
		border-top: none;
	}

	.cotizacion__paso-texto {
		display: block;
	}
}

@media (min-width: 1024px) {
	.cotizacion {
		padding-top: var(--e-64);
		padding-bottom: var(--e-90);
	}

	.cotizacion__grid {
		grid-template-columns: minmax(0, 1fr) var(--ancho-contenido-md);
		gap: var(--e-64);
	}

	/* En el HTML los pasos van antes (orden de móvil); en escritorio el
	   formulario pasa a la columna izquierda. */
	.cotizacion__formulario {
		grid-column: 1;
		grid-row: 1;
	}

	.cotizacion__pasos {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: calc(var(--alto-header-fijo) + var(--e-24));
		padding: var(--e-32);
	}

	.cotizacion__pasos-lista {
		display: block;
	}

	.cotizacion__paso {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--e-14);
		padding: var(--e-20) 0;
	}

	.cotizacion__paso:first-child {
		padding-top: 0;
	}

	.cotizacion__paso:last-child {
		padding-bottom: 0;
	}

	.cotizacion__paso + .cotizacion__paso {
		border-top: var(--linea-divisoria);
	}
}

/* =========================================================
   FORMULARIO (Fluent Forms con estilos del tema)
   ========================================================= */

/* Grilla de campos: una columna en móvil; desde 768px correo, teléfono,
   empresa y RUT van de a dos (clase --mitad asignada en inc/cotizacion.php). */
.cotizacion__formulario .frm-fluent-form fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-20) var(--e-20);
}

.cotizacion__formulario .ff-el-group {
	grid-column: 1 / -1;
	margin: 0;
}

@media (min-width: 768px) {
	.cotizacion__formulario .frm-fluent-form fieldset {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cotizacion__formulario .ff-el-group.cotizacion-formulario__campo--mitad {
		grid-column: auto;
	}
}

/* ---------------------------------------------------
   Etiquetas y campos
   --------------------------------------------------- */
.cotizacion__formulario .ff-el-input--label {
	margin-bottom: var(--e-6);
}

.cotizacion__formulario .ff-el-input--label label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--peso-semi);
	line-height: var(--interlineado-medio);
	color: var(--color-azul-oscuro);
}

.cotizacion__formulario .ff-el-is-required.asterisk-right label::after {
	content: ' *';
	color: var(--color-error);
}

.cotizacion__formulario .ff-el-form-control {
	display: block;
	width: 100%;
	min-height: var(--e-48);
	padding: var(--e-12) var(--e-14);
	border: 1px solid var(--color-gris-borde);
	border-radius: var(--radio-base);
	background-color: var(--color-blanco);
	color: var(--color-azul-oscuro);
	font-family: inherit;
	font-size: var(--fs-md);
	line-height: var(--interlineado-base);
	transition: border-color var(--transicion-base), box-shadow var(--transicion-base);
}

.cotizacion__formulario textarea.ff-el-form-control {
	min-height: var(--e-110);
	resize: vertical;
}

.cotizacion__formulario .ff-el-form-control::placeholder {
	color: var(--color-texto-secundario);
	opacity: 1;
}

.cotizacion__formulario .ff-el-form-control:focus {
	outline: none;
	border-color: var(--color-naranjo);
	box-shadow: inset 0 0 0 1px var(--color-naranjo);
}

/* ---------------------------------------------------
   Unidades de interés: casillas como opciones con borde
   --------------------------------------------------- */
.cotizacion__formulario .cotizacion-formulario__unidades .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e-8);
}

@media (min-width: 768px) {
	.cotizacion__formulario .cotizacion-formulario__unidades .ff-el-input--content {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cotizacion__formulario .ff-el-form-check {
	margin: 0;
}

.cotizacion__formulario .cotizacion-formulario__unidades .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: var(--e-8);
	min-height: var(--e-48);
	padding: var(--e-10) var(--e-12);
	border: 1px solid var(--color-gris-borde);
	background-color: var(--color-blanco);
	font-size: var(--fs-base);
	line-height: var(--interlineado-medio);
	cursor: pointer;
	transition: border-color var(--transicion-base), background-color var(--transicion-base);
}

.cotizacion__formulario .cotizacion-formulario__unidades .ff-el-form-check-label:has(input:checked) {
	border-color: var(--color-naranjo);
	background-color: var(--color-gris-claro);
}

.cotizacion__formulario .cotizacion-formulario__unidades .ff-el-form-check-label:focus-within {
	border-color: var(--color-naranjo);
	box-shadow: inset 0 0 0 1px var(--color-naranjo);
}

@media (hover: hover) {
	.cotizacion__formulario .cotizacion-formulario__unidades .ff-el-form-check-label:hover {
		border-color: var(--color-naranjo);
	}
}

.cotizacion__formulario .ff-el-form-check-input {
	flex-shrink: 0;
	width: var(--e-18);
	height: var(--e-18);
	margin: 0;
	accent-color: var(--color-naranjo);
	cursor: pointer;
}

/* ---------------------------------------------------
   Aceptación de la política de privacidad
   --------------------------------------------------- */
.cotizacion__formulario .ff-el-tc .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: var(--e-10);
	min-height: var(--e-44);
	font-size: var(--fs-base);
	line-height: var(--interlineado-base);
	cursor: pointer;
}

.cotizacion__formulario .ff_tc_checkbox {
	display: flex;
	align-items: center;
	/* Alinea la casilla con la primera línea del texto. */
	min-height: calc(var(--fs-base) * var(--interlineado-base));
}

.cotizacion__formulario .ff_t_c a {
	color: var(--color-naranjo-texto);
	text-decoration: underline;
}

.cotizacion__formulario .ff-el-form-check-input:focus-visible {
	outline: var(--e-2) solid var(--color-naranjo);
	outline-offset: var(--e-2);
}

/* ---------------------------------------------------
   Errores de validación (los agrega el JS de Fluent Forms)
   --------------------------------------------------- */
.cotizacion__formulario .ff-el-is-error .ff-el-form-control,
.cotizacion__formulario .ff-el-is-error .ff-el-form-check-label {
	border-color: var(--color-error);
	box-shadow: inset 0 0 0 1px var(--color-error);
}

.cotizacion__formulario .ff-el-is-error .ff-el-tc .ff-el-form-check-label {
	border: none;
	box-shadow: none;
}

.cotizacion__formulario .ff-el-is-error .ff-el-input--label label {
	color: var(--color-error);
}

.cotizacion__formulario .error.text-danger {
	margin-top: var(--e-6);
	color: var(--color-error);
	font-size: var(--fs-sm);
	line-height: var(--interlineado-medio);
}

/* Unidades: el mensaje ocupa toda la fila de la grilla de casillas. */
.cotizacion__formulario .cotizacion-formulario__unidades .error.text-danger {
	grid-column: 1 / -1;
	margin-top: 0;
}

/* Errores generales (no asociados a un campo), arriba del botón. */
.cotizacion__formulario .ff-errors-in-stack:not(:empty) {
	margin-top: var(--e-16);
	padding: var(--e-12) var(--e-16);
	border-left: var(--e-2) solid var(--color-error);
	background-color: var(--color-error-fondo);
	color: var(--color-error);
	font-size: var(--fs-sm);
}

.cotizacion__formulario .ff-errors-in-stack .error-clear {
	display: none;
}

/* ---------------------------------------------------
   Botón "Enviar solicitud" (.boton del tema)
   --------------------------------------------------- */
.cotizacion__formulario .ff_submit_btn_wrapper {
	margin-top: var(--e-4);
}

.cotizacion__formulario .ff-btn-submit.boton {
	width: 100%;
	min-height: var(--e-48);
	font-family: inherit;
	line-height: var(--interlineado-ajustado);
}

.cotizacion__formulario .ff-btn-submit.boton.ff-working {
	cursor: progress;
	opacity: 0.7;
}

@media (min-width: 768px) {
	.cotizacion__formulario .ff-btn-submit.boton {
		width: auto;
		min-width: var(--e-220);
	}
}

/* ---------------------------------------------------
   Mensaje de éxito (reemplaza al formulario, sin recargar)
   --------------------------------------------------- */
.cotizacion__formulario .ff-message-success {
	padding: var(--e-24);
	border-left: var(--e-2) solid var(--color-exito);
	background-color: var(--color-exito-fondo);
	color: var(--color-azul-oscuro);
}

.cotizacion__formulario .ff-message-success:focus {
	outline: none;
}

.cotizacion-exito__titulo {
	margin: 0 0 var(--e-8);
	color: var(--color-exito);
	font-size: var(--fs-2xl);
	font-weight: var(--peso-semi);
	line-height: var(--interlineado-medio);
}

.cotizacion-exito__texto {
	margin: 0;
	font-size: var(--fs-md);
	line-height: var(--interlineado-base);
}