/* FUAM Donaciones 2.3 — barra única de cuatro pasos y separación editorial */

:root {
	--fuam-yellow: #ffbd24;
	--fuam-yellow-hover: #e5a817;
	--fuam-ink: #202b3d;
	--fuam-navy: #202b3d;
	--fuam-muted: #687184;
	--fuam-soft: #9ca3b1;
	--fuam-line: #dfe3e9;
	--fuam-white: #ffffff;
	--fuam-disabled: #d5d9e1;
	--fuam-disabled-text: #707887;
}

/* El selector incluye el contexto real del producto para superar el CSS previo
   de tres pasos sin depender del orden de carga. */
body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .gf_page_steps {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 760px !important;
	margin: 0 auto 64px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
	grid-template-columns: none !important;
}

body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .gf_page_steps::before,
body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .gf_page_steps::after {
	display: none !important;
	content: none !important;
}

.fuam-checkout-progress {
	display: block !important;
	width: 100% !important;
	margin: 0 0 42px !important;
	padding: 0 !important;
	border: 0 !important;
}

.fuam-donation-progress-grid {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	box-sizing: border-box !important;
}

.fuam-checkout-progress .fuam-donation-progress-grid {
	max-width: none !important;
}

.fuam-donation-progress-list {
	position: relative !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	align-items: start !important;
	gap: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	box-sizing: border-box !important;
}

.fuam-donation-progress-list::before,
.fuam-donation-progress-list::after {
	content: "" !important;
	position: absolute !important;
	top: 27px !important;
	left: 12.5% !important;
	height: 4px !important;
	border-radius: 999px !important;
	z-index: 0 !important;
	box-sizing: border-box !important;
}

.fuam-donation-progress-list::before {
	right: 12.5% !important;
	background: #e4e6ea !important;
}

.fuam-donation-progress-list::after {
	width: 0 !important;
	background: var(--fuam-yellow) !important;
}

.fuam-current-step-2 .fuam-donation-progress-list::after { width: 25% !important; }
.fuam-current-step-3 .fuam-donation-progress-list::after { width: 50% !important; }
.fuam-current-step-4 .fuam-donation-progress-list::after { width: 75% !important; }

.fuam-donation-progress-list > .fuam-gf-step {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	opacity: 1 !important;
	box-sizing: border-box !important;
}

.fuam-donation-progress-list > .fuam-gf-step::before,
.fuam-donation-progress-list > .fuam-gf-step::after,
.fuam-donation-progress-list > .fuam-gf-step .gf_step_number::before,
.fuam-donation-progress-list > .fuam-gf-step .gf_step_number::after {
	display: none !important;
	content: none !important;
}

.fuam-donation-progress-list > .fuam-gf-step .gf_step_number {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--fuam-white) !important;
	border: 1px solid #e0e3e8 !important;
	border-radius: 50% !important;
	box-shadow: 0 3px 8px rgba(20, 32, 50, 0.10) !important;
	color: var(--fuam-soft) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
}

.fuam-donation-progress-list > .fuam-gf-step.gf_step_active .gf_step_number,
.fuam-donation-progress-list > .fuam-gf-step.gf_step_completed .gf_step_number {
	background: var(--fuam-yellow) !important;
	border-color: var(--fuam-yellow) !important;
	box-shadow: none !important;
	color: var(--fuam-white) !important;
}

.fuam-donation-progress-list > .fuam-gf-step .gf_step_label {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fuam-soft) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

.fuam-donation-progress-list > .fuam-gf-step.gf_step_active .gf_step_label,
.fuam-donation-progress-list > .fuam-gf-step.gf_step_completed .gf_step_label {
	color: var(--fuam-ink) !important;
}

/* Espaciado equilibrado entre la barra, el título de frecuencia, el selector
   y la cuadrícula de montos. */
body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .fuam-frequency-field,
body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .fuam-frequency {
	margin-top: 0 !important;
	margin-bottom: 52px !important;
}

body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .fuam-frequency__title {
	margin-top: 0 !important;
	margin-bottom: 30px !important;
}

body.single-product .product_cat-donacion
.gform_wrapper form.fuam-donation-form .fuam-frequency__list {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

@media (max-width: 700px) {
	body.single-product .product_cat-donacion
	.gform_wrapper form.fuam-donation-form .gf_page_steps {
		max-width: 100% !important;
		margin-bottom: 46px !important;
	}

	.fuam-donation-progress-list::before,
	.fuam-donation-progress-list::after {
		top: 22px !important;
	}

	.fuam-donation-progress-list > .fuam-gf-step {
		gap: 10px !important;
	}

	.fuam-donation-progress-list > .fuam-gf-step .gf_step_number {
		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		font-size: 17px !important;
	}

	.fuam-donation-progress-list > .fuam-gf-step .gf_step_label {
		font-size: 12px !important;
		white-space: normal !important;
	}

	body.single-product .product_cat-donacion
	.gform_wrapper form.fuam-donation-form .fuam-frequency-field,
	body.single-product .product_cat-donacion
	.gform_wrapper form.fuam-donation-form .fuam-frequency {
		margin-bottom: 38px !important;
	}
}


/* Separación estable entre la barra y el contenido de cada página.
   No depende de la clase del producto ni de la plantilla de Elementor. */
.gform_wrapper form.fuam-donation-form .gf_page_steps,
.gform_wrapper form.fuam-donation-form .gform_page_steps {
	margin-top: 0 !important;
	margin-right: auto !important;
	margin-bottom: 64px !important;
	margin-left: auto !important;
}

@media (max-width: 700px) {
	.gform_wrapper form.fuam-donation-form .gf_page_steps,
	.gform_wrapper form.fuam-donation-form .gform_page_steps {
		margin-bottom: 46px !important;
	}
}

/* Corrección 2.5.0: el filtro gform_progress_steps puede sustituir el
   contenedor .gf_page_steps completo. Por eso el espacio se aplica también
   directamente a la cuadrícula FUAM, que siempre permanece en el DOM. */
.gform_wrapper form.fuam-donation-form .gf_page_steps,
.gform_wrapper form.fuam-donation-form .gform_page_steps,
form.fuam-donation-form .gf_page_steps,
form.fuam-donation-form .gform_page_steps {
	margin-bottom: 0 !important;
}

.gform_wrapper form.fuam-donation-form .fuam-donation-progress-grid,
form.fuam-donation-form .fuam-donation-progress-grid {
	margin-top: 0 !important;
	margin-right: auto !important;
	margin-bottom: 64px !important;
	margin-left: auto !important;
}


/* La clase propia basta para identificar la barra, aunque la plantilla retire
   o reescriba clases del formulario. */
.fuam-donation-progress-grid {
	margin-bottom: 64px !important;
}

.fuam-frequency-field,
.fuam-frequency {
	margin-top: 0 !important;
	margin-bottom: 52px !important;
}

.fuam-frequency__title {
	margin-top: 0 !important;
	margin-bottom: 30px !important;
}

.fuam-frequency__list {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* En checkout el margen lo controla el nav exterior. */
.fuam-checkout-progress .fuam-donation-progress-grid {
	margin-bottom: 0 !important;
}

/* Selectores sin dependencia de la categoría o de la plantilla del producto. */
.gform_wrapper form.fuam-donation-form .fuam-frequency-field,
.gform_wrapper form.fuam-donation-form .fuam-frequency,
form.fuam-donation-form .fuam-frequency-field,
form.fuam-donation-form .fuam-frequency {
	margin-top: 0 !important;
	margin-bottom: 52px !important;
}

.gform_wrapper form.fuam-donation-form .fuam-frequency__title,
form.fuam-donation-form .fuam-frequency__title {
	margin-top: 0 !important;
	margin-bottom: 30px !important;
}

.gform_wrapper form.fuam-donation-form .fuam-frequency__list,
form.fuam-donation-form .fuam-frequency__list {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Gravity Forms conserva el requisito mediante aria-required; el texto
   “(Required)” no necesita mostrarse en esta interfaz en español. */
.gform_wrapper form.fuam-donation-form .gfield_required,
form.fuam-donation-form .gfield_required {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* El botón final debe poder enviar el formulario cuando “No” está elegido;
   los campos fiscales ocultos se liberan de required mediante JS y PHP. */
.gform_wrapper form.fuam-donation-form .fuam-invoice-no-selected ~ .gform_page_footer .gform_button,
.gform_wrapper form.fuam-donation-form .gform_page_footer .gform_button[type="submit"],
form.fuam-donation-form .gform_page_footer .gform_button[type="submit"] {
	pointer-events: auto !important;
}

@media (max-width: 700px) {
	.fuam-donation-progress-grid,
	.gform_wrapper form.fuam-donation-form .fuam-donation-progress-grid,
	form.fuam-donation-form .fuam-donation-progress-grid {
		margin-bottom: 46px !important;
	}

	.gform_wrapper form.fuam-donation-form .fuam-frequency-field,
	.gform_wrapper form.fuam-donation-form .fuam-frequency,
	form.fuam-donation-form .fuam-frequency-field,
	form.fuam-donation-form .fuam-frequency {
		margin-bottom: 38px !important;
	}
}


/* FUAM 2.9.6 — Uso del CFDI fijo para recibos deducibles */
.fuam-donation-form .fuam-fixed-cfdi-value {
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 10px 14px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	background: #f7f7f7;
	font-weight: 600;
}

/* 2.9.7 — los pasos completados pueden usarse para regresar y editar. */
.fuam-donation-progress-list > .fuam-gf-step .fuam-progress-step-link {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	text-decoration: none !important;
	cursor: pointer !important;
	outline: 0 !important;
}

.fuam-donation-progress-list > .fuam-gf-step .fuam-progress-step-link:hover .gf_step_number {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 10px rgba(20, 32, 50, 0.16) !important;
}

.fuam-donation-progress-list > .fuam-gf-step .fuam-progress-step-link:hover .gf_step_label {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

.fuam-donation-progress-list > .fuam-gf-step .fuam-progress-step-link:focus-visible .gf_step_number {
	outline: 3px solid rgba(32, 43, 61, 0.28) !important;
	outline-offset: 4px !important;
}

@media (max-width: 700px) {
	.fuam-donation-progress-list > .fuam-gf-step .fuam-progress-step-link {
		gap: 10px !important;
	}
}


/* =========================================================
   FUAM 2.9.9 — VALIDACIÓN Y AVISOS CON IDENTIDAD DEL FLUJO
   ========================================================= */

/* Resumen de validación de Gravity Forms: tipografía heredada del sitio,
   tinta FUAM y acento rojo institucional. */
.gform_wrapper form.fuam-donation-form .gform_validation_errors,
form.fuam-donation-form .gform_validation_errors {
	margin: 0 0 42px !important;
	padding: 18px 22px 18px 54px !important;
	border: 1px solid rgba(239, 51, 47, 0.26) !important;
	border-left: 5px solid #ef332f !important;
	border-radius: 14px !important;
	background: #ffffff !important;
	box-shadow: 0 8px 24px rgba(32, 43, 61, 0.06) !important;
	font-family: inherit !important;
}

.gform_wrapper form.fuam-donation-form .gform_validation_errors > h2,
form.fuam-donation-form .gform_validation_errors > h2,
.gform_wrapper form.fuam-donation-form .gform_validation_errors .gform_submission_error,
form.fuam-donation-form .gform_validation_errors .gform_submission_error {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--fuam-ink) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
}

.gform_wrapper form.fuam-donation-form .gform_validation_errors .gform-icon,
form.fuam-donation-form .gform_validation_errors .gform-icon {
	color: #ef332f !important;
}

/* Avisos de WooCommerce dentro del flujo FUAM. El visitante no ve el concepto
   técnico de “carrito” ni el botón “Ver carrito”. */
body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-error,
body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-message,
body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-info,
body.fuam-donation-flow-page > .woocommerce-error,
body.fuam-donation-flow-page > .woocommerce-message,
body.fuam-donation-flow-page > .woocommerce-info {
	position: relative !important;
	margin: 0 0 32px !important;
	padding: 18px 22px 18px 54px !important;
	border: 1px solid rgba(239, 51, 47, 0.24) !important;
	border-top: 1px solid rgba(239, 51, 47, 0.24) !important;
	border-left: 5px solid #ef332f !important;
	border-radius: 14px !important;
	background: #ffffff !important;
	box-shadow: 0 8px 24px rgba(32, 43, 61, 0.06) !important;
	color: var(--fuam-ink) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}

body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-error::before,
body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-message::before,
body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-info::before,
body.fuam-donation-flow-page > .woocommerce-error::before,
body.fuam-donation-flow-page > .woocommerce-message::before,
body.fuam-donation-flow-page > .woocommerce-info::before {
	top: 50% !important;
	left: 20px !important;
	transform: translateY(-50%) !important;
	color: #ef332f !important;
}

body.fuam-donation-flow-page .woocommerce-notices-wrapper .button.wc-forward,
body.fuam-donation-flow-page .woocommerce-error .button.wc-forward,
body.fuam-donation-flow-page .woocommerce-message .button.wc-forward,
body.fuam-donation-flow-page .woocommerce-info .button.wc-forward {
	display: none !important;
}

@media (max-width: 700px) {
	.gform_wrapper form.fuam-donation-form .gform_validation_errors,
	form.fuam-donation-form .gform_validation_errors,
	body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-error,
	body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-message,
	body.fuam-donation-flow-page .woocommerce-notices-wrapper .woocommerce-info {
		padding: 16px 16px 16px 46px !important;
		border-radius: 12px !important;
		font-size: 15px !important;
	}
}