/**
 * Flow Forms for Elementor — estilos de frontend.
 *
 * FASE 5: las variables --ffe-* de .ffe-form son la base del Theme
 * Builder (Styling_Module / Theme_Registry). El valor por defecto de
 * CADA variable es EXACTAMENTE el color/medida que ya se usaba desde
 * las Fases 2-4 antes de que existieran — así que sin ningún tema
 * seleccionado, absolutamente nada cambia de aspecto. Un tema
 * simplemente redefine estas variables bajo `.ffe-theme-{slug} .ffe-form`.
 */

.ffe-form {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;

	--ffe-accent: #2563eb;
	--ffe-label: inherit;
	--ffe-text: inherit;
	--ffe-input-bg: #fff;
	--ffe-input-border: rgba(0, 0, 0, 0.15);
	--ffe-input-radius: 6px;
	--ffe-required: #d9364f;
	--ffe-control: #2563eb;
	--ffe-focus-ring: rgba(0, 0, 0, 0.35);
	--ffe-field-gap: 20px;
}

/*
 * Red de seguridad contra overflow horizontal: es la causa más común de
 * que un formulario "no se vea" en móvil — un solo hijo un poco más
 * ancho que la pantalla empuja todo lo demás fuera del viewport, y el
 * navegador no recorta ni envuelve nada solo. `border-box` heredado
 * hace que el padding nunca sume ancho de más, y `overflow-wrap` evita
 * que una palabra larga (una URL, un email) fuerce el ancho de su fila.
 */
.ffe-form,
.ffe-form *,
.ffe-form *::before,
.ffe-form *::after {
	box-sizing: border-box;
}

.ffe-form {
	overflow-wrap: break-word;
	word-break: break-word;
}

.ffe-sections,
.ffe-sections__body,
.ffe-section,
.ffe-section__header,
.ffe-section__grid {
	max-width: 100%;
	min-width: 0;
}

.ffe-form__placeholder {
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.03);
	color: #555;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* =====================================================================
 * FASE 3 — Secciones + Menú de navegación (Scroll Spy)
 * ---------------------------------------------------------------------
 * Igual que en la Fase 2, sin paleta de colores propia (eso es Styling,
 * Fase 5): estos valores (grises neutros, sombras suaves) son un
 * default razonable, no un sistema de temas.
 * ================================================================== */

.ffe-sections {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.ffe-sections--with-nav[data-ffe-sidebar-position="right"] {
	flex-direction: row-reverse;
}

.ffe-sections__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ffe-sections__nav {
	flex: 0 0 auto;
	width: 260px;
	max-width: 100%;
	box-sizing: border-box;
}

.ffe-sections[data-ffe-sidebar-mode="sticky"] .ffe-sections__nav {
	position: sticky;
	top: 20px;
	align-self: flex-start;
}

.ffe-sections[data-ffe-sidebar-mode="floating"] .ffe-sections__nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
}
.ffe-sections[data-ffe-sidebar-mode="floating"][data-ffe-sidebar-position="left"] .ffe-sections__nav {
	left: 20px;
}
.ffe-sections[data-ffe-sidebar-mode="floating"][data-ffe-sidebar-position="right"] .ffe-sections__nav {
	right: 20px;
}

.ffe-sections__nav ul {
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ffe-sections__nav li + li {
	margin-top: 2px;
}

.ffe-sections__nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.3;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ffe-sections__nav a:hover {
	background: rgba(0, 0, 0, 0.04);
}

.ffe-sections__nav a.is-active {
	background: rgba(0, 0, 0, 0.06);
	font-weight: 600;
}

.ffe-sections__nav svg,
.ffe-sections__nav i {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	font-size: 16px;
}

@media (max-width: 767px) {
	.ffe-sections[data-ffe-sidebar-hide-mobile="yes"] .ffe-sections__nav {
		display: none;
	}
	.ffe-sections {
		flex-direction: column;
	}
}

.ffe-section {
	scroll-margin-top: 20px;
}

/*
 * Modo "Título a la izquierda" (nuevo control en Sections): CSS Grid de
 * 2 columnas directamente sobre <section> — .ffe-section__header y
 * .ffe-section__grid ya son sus únicos hijos directos, así que alcanza
 * con ubicarlos explícitamente por grid-column (no por orden de
 * aparición: si una sección no tiene título/ícono/descripción,
 * .ffe-section__header ni se imprime, y sin esto los campos
 * ocuparían la columna 1 en vez de la 2).
 */
.ffe-section-layout-title-left .ffe-section {
	display: grid;
	grid-template-columns: 32% minmax(0, 1fr);
	column-gap: 40px;
	align-items: start;
}
.ffe-section-layout-title-left .ffe-section__header {
	grid-column: 1;
	margin-bottom: 0;
	padding-top: 2px;
}
.ffe-section-layout-title-left .ffe-section__grid {
	grid-column: 2;
}

/*
 * 1024px, no 767px: el mismo punto de quiebre "tablet y hacia abajo"
 * que usa Elementor por defecto para sus propios contenedores (la
 * opción "Dirección" que pasa de fila a columna). "Título a la
 * izquierda" solo tiene sentido con suficiente ancho de verdad — en
 * tablet, el título ya se ve apretado en una columna angosta al lado
 * de los campos, así que se apila igual que en móvil, no solo se
 * encoge quedándose lado a lado.
 */
@media (max-width: 1024px) {
	/*
	 * !important puntual y justificado: el control "Ancho de la
	 * columna del título" (Sections) genera su propia regla por
	 * breakpoint con más especificidad que esta (incluye la clase
	 * .elementor-element-XXX propia del widget), así que sin esto
	 * seguiría imponiendo su valor en tablet y el apilado de acá
	 * nunca se vería — es la única forma de garantizar que "apilar
	 * en tablet/móvil" gane siempre, sin importar qué ancho haya
	 * elegido el usuario para el escritorio.
	 */
	.ffe-section-layout-title-left .ffe-section {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 16px;
	}
	.ffe-section-layout-title-left .ffe-section__header,
	.ffe-section-layout-title-left .ffe-section__grid,
	.ffe-section-layout-title-left .ffe-section__details {
		grid-column: 1;
	}
}

.ffe-section__rule {
	border: none;
	border-top: 1px solid var(--ffe-input-border, rgba(0, 0, 0, 0.12));
	margin: 0;
	width: 100%;
}

.ffe-section__header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ffe-section__icon {
	display: inline-flex;
	color: var(--ffe-section-color, currentColor);
}
.ffe-section__icon svg,
.ffe-section__icon i {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

.ffe-section__image {
	max-height: 40px;
	width: auto;
}

.ffe-section__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--ffe-section-color, inherit);
}

.ffe-section__description {
	margin: 4px 0 0;
	flex-basis: 100%;
	font-size: 14px;
	opacity: 0.75;
}

/*
 * FASE 4: display:flex, no display:grid. El ancho de cada campo
 * (25/33/50/66/75/100%, o "automático" = 100 / columnas-de-la-sección)
 * se resuelve en PHP como un porcentaje concreto (Fields_Module::
 * resolve_width()) e viaja como flex-basis inline por campo — eso NO
 * puede expresarse con grid-template-columns de un número fijo de
 * pistas iguales, que es lo único que --ffe-columns podía describir en
 * la Fase 3. Flexbox con flex-wrap deja que cada campo declare su
 * propio ancho en % sin depender de cuántas "columnas" tenga la
 * sección. --ffe-columns sigue existiendo (variable ya asignada por
 * Sections en la Fase 3) solo como referencia para el cálculo del
 * ancho "automático", ya no como mecanismo de layout en el CSS.
 */
.ffe-section__grid {
	display: flex;
	flex-wrap: wrap;
	/*
	 * Field wrappers already use border-box, so their internal padding is
	 * included in the declared flex-basis. A negative grid margin would
	 * enlarge the grid beyond its parent and create uneven accordion insets.
	 */
	margin: 0;
}

/* Línea divisoria opcional entre preguntas/campos apilados a ancho
   completo — activable desde Estilo > Campos > "Línea entre campos",
   o campo por campo con "Línea superior (HR)" en Contenido > Campos. */
.ffe-fields-divided .ffe-field-wrap[data-full-width="yes"] {
	padding-top: calc(var(--ffe-field-gap, 20px) / 2 + 12px) !important;
	margin-top: 4px !important;
}

/*
 * Pseudo-elemento en vez de border-top directo: es puramente visual y
 * no ocupa espacio de layout, así que puede quedar inset (respetando
 * el padding del campo, como en la referencia de Figma) sin desplazar
 * el contenido real (label, input) de este campo respecto a sus
 * vecinos. `left:0; right:0` se alinean con el borde de PADDING del
 * field-wrap (no con su borde exterior) — por eso la línea nunca toca
 * el borde real del acordeón o la sección, se queda adentro.
 */
.ffe-field-wrap[data-full-width="yes"],
.ffe-field-wrap[data-divider="yes"] {
	position: relative;
}

.ffe-fields-divided .ffe-field-wrap[data-full-width="yes"]::before,
.ffe-field-wrap[data-divider="yes"]::before {
	content: '';
	position: absolute;
	top: 0;
	/*
	 * Inset FIJO y explícito (24px), no `left:0;right:0`: ese enfoque
	 * depende de que el borde de padding del contenedor posicionado
	 * (`.ffe-field-wrap`) coincida exactamente con donde "debería"
	 * quedar, algo que varía según cuántos paddings/márgenes negativos
	 * se acumulen alrededor (el propio del campo, el de la cuadrícula,
	 * el del acordeón si aplica) — difícil de verificar sin verlo
	 * renderizado. Un valor fijo es inequívoco: siempre 24px adentro
	 * del borde real del campo, se vea donde se vea.
	 */
	left: 24px;
	right: 24px;
	border-top: 1px solid var(--ffe-input-border, rgba(0, 0, 0, 0.12));
}

/*
 * Control "Línea superior (HR)" por campo (Contenido > Campos, dentro
 * de cada campo): "Sí" fuerza la línea en ESE campo puntual, tenga o
 * no el 100% de ancho, y sin necesitar el interruptor global
 * encendido. "No" la apaga ahí aunque el interruptor global esté
 * activo. "Heredar" (el valor por defecto, sin atributo) no agrega
 * ninguna regla propia — sigue el comportamiento de arriba tal cual.
 */
.ffe-field-wrap[data-divider="yes"] {
	padding-top: calc(var(--ffe-field-gap, 20px) / 2 + 12px) !important;
	margin-top: 4px !important;
}
.ffe-field-wrap[data-divider="no"] {
	padding-top: calc(var(--ffe-field-gap, 20px) / 2) !important;
	margin-top: 0 !important;
}
.ffe-field-wrap[data-divider="no"]::before {
	display: none;
}

@media (max-width: 767px) {
	.ffe-section__grid {
		margin: 0;
	}
	.ffe-section__grid > * {
		flex-basis: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}
}

.ffe-section__empty {
	flex: 1 1 100%;
	margin: 10px;
	padding: 16px;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	font-size: 13px;
	color: #777;
	text-align: center;
}

/* Animación al entrar en el viewport. El JS es quien decide ocultar la
   sección (añadiendo .ffe-anim-ready) justo antes de observarla, así
   que si el script no llega a cargar (red, bloqueadores, navegador
   muy antiguo sin IntersectionObserver) la sección se queda visible
   por defecto — nunca depende de JS para ser vista, solo para animarse. */
.ffe-section.ffe-anim-ready {
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.ffe-section.ffe-anim-ready[data-animation="slide-up"] {
	transform: translateY(24px);
}
.ffe-section.ffe-anim-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ffe-section.ffe-anim-ready {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =====================================================================
 * FASE 4 — Campos
 * ---------------------------------------------------------------------
 * Mismo criterio que en las fases anteriores: valores neutros
 * razonables, no un sistema de temas (eso es Styling, Fase 5).
 * ================================================================== */

.ffe-field-wrap {
	box-sizing: border-box;
	min-width: 0;
	padding: calc(var(--ffe-field-gap, 20px) / 2);
	display: flex;
	flex-direction: column;
}

.ffe-field__label {
	margin-bottom: var(--ffe-label-field-gap, 6px);
	font-size: 14px;
	font-weight: 600;
	color: var(--ffe-label, inherit);
}

/* Texto de ayuda: entre la etiqueta y el input (Contenido > Campos). */
.ffe-field__helper {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--ffe-helper, rgba(0, 0, 0, 0.65));
}
.ffe-field__helper > *:first-child {
	margin-top: 0;
}
.ffe-field__helper > *:last-child {
	margin-bottom: 0;
}
.ffe-field__helper p {
	margin: 0 0 0.4em;
}
.ffe-field__helper ul,
.ffe-field__helper ol {
	margin: 0.2em 0 0.4em;
	padding-left: 1.2em;
}
.ffe-field__helper a {
	color: inherit;
	text-decoration: underline;
}

.ffe-field__required {
	color: var(--ffe-required, #d9364f);
	margin-left: 2px;
}

.ffe-input {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ffe-input-border, rgba(0, 0, 0, 0.15));
	border-radius: var(--ffe-input-radius, 6px);
	font-size: 14px;
	background: var(--ffe-input-bg, #fff);
	color: var(--ffe-text, inherit);
}

.ffe-input:focus {
	outline: none;
	border-color: var(--ffe-focus-ring, rgba(0, 0, 0, 0.35));
}

.ffe-radio-option input[type="radio"],
.ffe-checkbox-option input[type="checkbox"] {
	accent-color: var(--ffe-control, #2563eb);
}

.ffe-textarea {
	height: auto;
	padding: 10px 14px;
	resize: vertical;
}

.ffe-radio-group,
.ffe-checkbox-group {
	display: grid;
	/*
	 * BUG REAL corregido acá: `auto-fit` llena tantas columnas de
	 * 220px+ como entren — en un campo ancho (el caso típico de una
	 * pregunta de examen, ~750-900px) eso da 3 o 4 por fila, no las 2
	 * fijas que se pidieron. `repeat(2, ...)` fuerza SIEMPRE 2 columnas
	 * en desktop/tablet, y la media query de abajo las baja a 1 sola
	 * en móvil (donde 2 columnas de opciones ya no entran cómodas).
	 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	padding-top: 4px;
}

.ffe-radio-option,
.ffe-checkbox-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

@media (max-width: 480px) {
	.ffe-radio-group,
	.ffe-checkbox-group {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ffe-field-heading {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.ffe-field-html {
	font-size: 14px;
}

/* =====================================================================
 * FASE 6 — Submissions
 * ================================================================== */

.ffe-form__footer {
	margin-top: 28px;
}

/*
 * El pie global y el de sección viven DENTRO de .ffe-section__grid
 * (columna derecha en layout title-left). Como hijos flex del grid
 * necesitan ocupar el 100% de esa columna — mismo truco de margen que
 * .ffe-section__empty — o el botón quedaría a media fila / fuera de la
 * columna de campos.
 */
.ffe-section__grid > .ffe-form__footer,
.ffe-form__footer--section {
	flex: 1 1 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: calc(var(--ffe-field-gap, 20px) / 2);
	margin-top: calc(var(--ffe-field-gap, 20px) / 2 + 8px);
}

/* title-left: el details del acordeón también ocupa la columna derecha */
.ffe-section-layout-title-left .ffe-section__details {
	grid-column: 2;
	min-width: 0;
}

/* Fila del botón: derecha por defecto; Estilo > Botón permite left/center/right. */
.ffe-form__submit-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}
.ffe-form__submit-row--left { justify-content: flex-start; }
.ffe-form__submit-row--center { justify-content: center; }
.ffe-form__submit-row--right { justify-content: flex-end; }

.ffe-form__submit-above,
.ffe-form__submit-below {
	width: 100%;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(0, 0, 0, 0.72);
}
.ffe-form__submit-above {
	margin: 0 0 14px;
}
.ffe-form__submit-below {
	margin: 16px 0 0;
}
.ffe-form__submit-above > *:first-child,
.ffe-form__submit-below > *:first-child {
	margin-top: 0;
}
.ffe-form__submit-above > *:last-child,
.ffe-form__submit-below > *:last-child {
	margin-bottom: 0;
}
.ffe-form__submit-above ul,
.ffe-form__submit-below ul {
	margin: 0;
	padding-left: 1.2em;
}
.ffe-form__submit-above a,
.ffe-form__submit-below a {
	color: inherit;
	text-decoration: underline;
}

.ffe-form__submit {
	appearance: none;
	border: none;
	cursor: pointer;
	padding: 14px 32px;
	/*
	 * Radio propio, NO var(--ffe-input-radius, ...): esa variable es
	 * para inputs de texto — un botón de envío suele querer una forma
	 * de píldora aunque los campos del formulario tengan esquinas más
	 * rectas (así se ve en todos los diseños de referencia). Se puede
	 * sobreescribir por formulario desde Estilo > Botón de envío.
	 */
	border-radius: 999px;
	background: var(--ffe-accent, #2563eb);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ffe-form__submit:hover {
	filter: brightness(0.92);
}

.ffe-form__submit:disabled,
.ffe-form__submit.is-loading {
	opacity: 0.65;
	cursor: wait;
}

.ffe-form__message {
	margin-bottom: 20px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.ffe-form__success {
	background: var(--ffe-message-success-bg, rgba(22, 163, 74, 0.08));
	color: var(--ffe-message-success-text, #14532d);
}

.ffe-form__error {
	background: var(--ffe-message-error-bg, rgba(217, 54, 79, 0.08));
	color: var(--ffe-message-error-text, #7a1a2b);
}

/* =====================================================================
 * FASE 13 — Acordeones de sección + deslizador numérico
 * ================================================================== */

.ffe-section__details {
	border: 1px solid var(--ffe-input-border, rgba(0, 0, 0, 0.15));
	border-radius: 12px;
	background: #fff;
}

.ffe-section__summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 30px;
	font-weight: 700;
	font-size: 15px;
	color: var(--ffe-text, inherit);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* El triángulo nativo de <summary> se reemplaza por un signo propio,
   para que se vea igual en todos los navegadores. */
.ffe-section__summary::-webkit-details-marker {
	display: none;
}
.ffe-section__summary::after {
	content: '+';
	font-size: 20px;
	line-height: 1;
	color: var(--ffe-accent, #2563eb);
}
.ffe-section__details[open] > .ffe-section__summary::after {
	content: '−';
}

.ffe-section__summary:hover {
	background: rgba(0, 0, 0, 0.02);
}

/*
 * Sin el selector [open]: siempre lleva esta línea, esté abierto o
 * cerrado — cuando está cerrado no se ve nada de todos modos (no hay
 * contenido debajo), así que no cambia nada visualmente, pero es un
 * selector más simple y evita cualquier duda de si el atributo
 * `open` realmente está aplicando el estilo.
 */
/*
 * A propósito SIN línea acá: la línea bajo "Let's give it a try!" no
 * se quería — las líneas van solo entre campos/preguntas (ver
 * .ffe-fields-divided más arriba), no debajo del encabezado del
 * acordeón.
 */

.ffe-section__details > .ffe-section__grid {
	/*
	 * El contenido visible de cada campo ya trae 10px laterales desde
	 * .ffe-field-wrap. Si acá dejamos 30px, el inset visual real pasa a
	 * 40px por lado y el formulario se siente "encogido" dentro del
	 * acordeón. Con 20px aquí + 10px internos del field-wrap, el resultado
	 * visible vuelve a ser 30px exactos a izquierda y derecha.
	 */
	padding: 20px 20px;
}

/* Deslizador numérico */
.ffe-range {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ffe-range__input {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--ffe-accent, #2563eb);
}

.ffe-range__value {
	flex: 0 0 auto;
	min-width: 40px;
	text-align: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ffe-accent, #2563eb);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}

.ffe-range datalist {
	display: none;
}

/* Independent section submissions. */
.ffe-form__message--section {
	flex: 1 1 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: calc(var(--ffe-field-gap, 20px) / 2);
	margin-bottom: 16px;
}

.ffe-form__submit.is-submitted:disabled {
	cursor: default;
}

.ffe-section--submitted .ffe-form__message--section {
	margin-top: 4px;
}