/**
 * Formidable Forms — integración con el sistema de diseño.
 *
 * El formulario de la página de Contacto lo genera el plugin, así que aquí no
 * hay marcado propio: solo se reviste el suyo. Se hace en dos capas.
 *
 * 1. VARIABLES. Desde la versión 6 Formidable construye su hoja sobre custom
 *    properties (--field-pad, --submit-bg-color…) declaradas en el contenedor
 *    del formulario. Redeclararlas es la vía limpia: no pelea con la cascada,
 *    no necesita !important y sigue funcionando cuando el plugin se actualice.
 *
 * 2. REGLAS. Unas pocas cosas el plugin las escribe con valores literales —el
 *    botón de envío y el resplandor azul del foco, sobre todo—, así que hay
 *    que ganarles por especificidad. Sus selectores llegan a (0,7,1); por eso
 *    todo lo de esta capa va prefijado con `body`, que suma un elemento y
 *    coloca las reglas justo por encima sin recurrir a !important.
 *
 * Lo que NO se toca: el campo trampa antispam (.frm_verify). El plugin lo
 * oculta con un <style> que inyecta por JavaScript usando un selector de id;
 * ninguna regla de aquí lo alcanza, y así debe seguir.
 *
 * @package SilviaGarcia
 */

/* 1. Variables ------------------------------------------------------------ */

body .frm_forms.with_frm_style {

	/* Estructura */
	--fieldset: 0;
	--fieldset-padding: 0;
	--field-margin: calc(var(--sg-unit) * 3);

	/*
	 * Etiquetas. Estas cuatro solo se ven cuando la etiqueta va encima del
	 * campo (Formidable → campo → Posición de la etiqueta: Arriba). Con la
	 * posición «Dentro», que es la configurada ahora, manda --field-font-size.
	 */
	--font-size: var(--sg-label);
	--label-color: var(--sg-form-text);
	--weight: 600;
	--label-padding: 0 0 var(--sg-unit) 0;
	--required-color: var(--sg-clay);
	--required-weight: 400;

	/* Textos de ayuda */
	--description-font-size: var(--sg-label);
	--description-color: var(--sg-form-text);
	--description-weight: 400;

	/*
	 * Campos. 16px no es capricho: por debajo de ese tamaño Safari en iPhone
	 * hace zoom al enfocar un campo y descoloca la página.
	 *
	 * --field-height tiene que seguir siendo una longitud: el plugin la usa
	 * dentro de calc() para colocar la etiqueta flotante. Con `auto` el
	 * cálculo no es válido y las etiquetas se amontonan.
	 */
	--field-font-size: var(--sg-body-md);
	--field-height: 48px;
	--field-pad: 0.75rem 0;
	--field-weight: 400;
	--text-color: var(--sg-form-text);

	/*
	 * Campos sin caja, solo con filete inferior, como en la maqueta. El borde
	 * se apaga por completo aquí y se vuelve a encender solo abajo, en una
	 * regla aparte: la variable del plugin es un único `border-width` para los
	 * cuatro lados y no permite distinguirlos.
	 */
	--bg-color: transparent;
	--bg-color-active: transparent;
	--border-color: var(--sg-form-line);
	--border-color-active: var(--sg-form-line);
	--field-border-width: 0;
	--border-radius: 0;
	--box-shadow: none;

	/* Casillas */
	--check-font-size: var(--sg-body-md);
	--check-label-color: var(--sg-form-text);
	--check-weight: 400;

	/* Error de validación */
	--text-color-error: var(--sg-form-text);
	--bg-color-error: var(--sg-white);
	--border-color-error: var(--sg-alert);
	--error-bg: var(--sg-alert-bg);
	--error-border: var(--sg-alert-border);
	--error-text: var(--sg-alert);
	--error-font-size: var(--sg-label);

	/* Aviso de envío correcto */
	--success-bg-color: var(--sg-form-notice-bg);
	--success-border-color: var(--sg-fir-25);
	--success-text-color: var(--sg-form-text);
	--success-font-size: var(--sg-body-md);

	/*
	 * Botón de envío. Ya no es el botón sólido del tema (Arcilla): sobre la
	 * tarjeta Salvia el Arcilla da 1,2:1 y desaparece. Ver --sg-form-btn-* en
	 * tokens.css.
	 */
	--submit-bg-color: var(--sg-form-btn-bg);
	--submit-border-color: var(--sg-form-btn-bg);
	--submit-text-color: var(--sg-form-btn-text);
	--submit-hover-bg-color: var(--sg-form-btn-bg-hover);
	--submit-hover-border-color: var(--sg-form-btn-bg);
	--submit-hover-color: var(--sg-form-btn-text-hover);
	--submit-active-bg-color: var(--sg-form-btn-bg-hover);
	--submit-active-border-color: var(--sg-form-btn-bg);
	--submit-active-color: var(--sg-form-btn-text-hover);
	--submit-border-radius: var(--sg-radius-button);
	--submit-font-size: var(--sg-button-size);
	--submit-weight: 500;
	--submit-shadow-color: transparent;
}

/* 2. Reglas --------------------------------------------------------------- */

/* Campos ------------------------------------------------------------------ */

/**
 * El filete inferior. --field-border-width se puso a 0 en las variables, así
 * que aquí se enciende un único lado. El selector repite el del plugin para
 * alcanzar los mismos tipos de campo.
 */
body .frm_forms.with_frm_style input[type="text"],
body .frm_forms.with_frm_style input[type="email"],
body .frm_forms.with_frm_style input[type="tel"],
body .frm_forms.with_frm_style input[type="url"],
body .frm_forms.with_frm_style input[type="number"],
body .frm_forms.with_frm_style input[type="search"],
body .frm_forms.with_frm_style select,
body .frm_forms.with_frm_style textarea {
	border-bottom: 1px solid var(--sg-form-line);
	transition: border-color var(--sg-transition);
}

body .frm_forms.with_frm_style textarea {
	min-height: 140px;
	line-height: 1.6;
	resize: vertical;
}

/* Al enfocar, el filete se engrosa (2px). */
body .frm_forms.with_frm_style .form-field input:not([type="file"]):not([type="range"]):not([readonly]):focus,
body .frm_forms.with_frm_style .form-field textarea:focus,
body .frm_forms.with_frm_style select:focus {
	border-bottom: 2px solid var(--sg-form-line);

	/*
	 * Compensa los 2px del filete para que el campo no dé un salto de 1px al
	 * enfocarlo.
	 */
	padding-bottom: calc(0.75rem - 1px);
}

/* El campo en error también se marca en el filete, no con una caja roja. */
body .frm_forms.with_frm_style .frm_blank_field input,
body .frm_forms.with_frm_style .frm_blank_field textarea,
body .frm_forms.with_frm_style .frm_blank_field select {
	border-bottom-color: var(--sg-alert);
}

/**
 * Anillo de foco. El del tema es Arcilla, que sobre Salvia no se ve (1,2:1);
 * dentro del formulario pasa a Abeto.
 */
body .frm_forms.with_frm_style :focus-visible {
	outline-color: var(--sg-form-text);
}

/* Los avisos sí conservan la esquina redondeada del sistema. */
body .frm_forms.with_frm_style .frm_error_style,
body .frm_forms.with_frm_style .frm_message {
	border-radius: var(--sg-radius);
}

/**
 * Foco. El plugin dibuja un resplandor azul con un valor literal, dentro de un
 * selector de (0,7,1) que ninguna variable puede tocar. Se apaga y se deja
 * trabajar al anillo de foco del tema (base.css, :focus-visible).
 */
body .frm_forms.with_frm_style .form-field input:not([type="file"]):not([type="range"]):not([readonly]):focus,
body .frm_forms.with_frm_style .form-field textarea:focus,
body .frm_forms.with_frm_style select:focus {
	box-shadow: none;
}

/* Etiquetas --------------------------------------------------------------- */

/**
 * La maqueta pide la etiqueta ENCIMA del campo, en versalita pequeña, y el
 * formulario está configurado con la etiqueta «Dentro» (flotante).
 *
 * Se resuelve en CSS y no cambiando el ajuste del plugin, por dos razones: no
 * se toca la configuración de la clienta, y así el resultado es el mismo tanto
 * si el campo está en «Dentro» como en «Arriba». Si algún día se cambia el
 * ajuste en Formidable, estas reglas se quedan sin efecto y no estorban.
 *
 * Lo que hay que deshacer del plugin: el hueco superior que reserva para la
 * etiqueta flotante, el posicionamiento absoluto de la propia etiqueta y el
 * ocultado del placeholder.
 */
body .frm_forms.with_frm_style .frm_inside_container {
	padding-top: 0;
}

body .frm_forms.with_frm_style .frm_form_field > .frm_primary_label,
body .frm_forms.with_frm_style .frm_inside_container > label {
	position: static;
	width: auto;
	padding: 0 0 var(--sg-unit);
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	pointer-events: auto;
	transition: none;
	font-size: var(--sg-label);
	font-weight: 600;
	letter-spacing: var(--sg-label-tracking);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--sg-form-text);
}

/*
 * Con la etiqueta fuera, el placeholder vuelve a ser útil: el plugin lo
 * escondía porque la etiqueta flotante ocupaba su sitio. En Abeto pleno (un
 * Abeto atenuado no llega a 4,5:1 sobre Salvia) y en cursiva, que es lo que
 * lo distingue del texto ya escrito.
 */
body .frm_forms.with_frm_style .frm_inside_container > input::placeholder,
body .frm_forms.with_frm_style .frm_inside_container > textarea::placeholder {
	opacity: 1;
	color: var(--sg-form-text);
	font-style: italic;
}

/* Casillas ---------------------------------------------------------------- */

/**
 * La aceptación de la política de privacidad es una línea de texto largo con
 * una casilla delante: flex para que la segunda línea no se meta debajo de la
 * casilla, y `gap` en lugar del margen de 4px del plugin.
 *
 * Y se deshace la versalita. base.css da a TODO `<label>` el aspecto de
 * etiqueta de campo —versalita, espaciado ancho, 600— pensando en la etiqueta
 * que va encima de un campo. Aquí el label no es una etiqueta: es la frase que
 * se acepta, texto corrido con un enlace dentro. Formidable sí redefine el
 * tamaño, el color y el peso (gana con (0,3,1)), pero no toca
 * `text-transform` ni `letter-spacing`, así que esos dos se colaban desde el
 * selector de elemento de base.css.
 */
body .frm_forms.with_frm_style .frm_checkbox label,
body .frm_forms.with_frm_style .frm_radio label {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--sg-unit) * 1.5);
	margin-bottom: 0;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.6;
	text-transform: none;
}

body .frm_forms.with_frm_style .frm_checkbox label input[type="checkbox"],
body .frm_forms.with_frm_style .frm_radio label input[type="radio"] {
	margin: 0.25em 0 0;
}

body .frm_forms.with_frm_style input[type="checkbox"],
body .frm_forms.with_frm_style input[type="radio"] {
	accent-color: var(--sg-form-text);
}

/* El enlace a la política: Abeto y subrayado (el Arcilla del tema no se lee sobre Salvia). */
body .frm_forms.with_frm_style .frm_checkbox label a {
	color: var(--sg-form-text);
	text-decoration: underline;
}

/* Botón de envío ---------------------------------------------------------- */

/**
 * El plugin escribe el fondo, el radio y el relleno del botón con valores
 * literales (#4199FD, 8px, 8px 16px) en (0,3,1), de modo que las variables
 * --submit-* no llegan a aplicarse en estado normal, solo en :hover. Se
 * reescribe entero con la geometría compartida de los botones del tema.
 */
body .frm_forms.with_frm_style .frm_submit button,
body .frm_forms.with_frm_style .frm_submit input[type="submit"],
body .frm_forms.with_frm_style .frm_submit input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	margin: 0;
	padding: var(--sg-button-padding);
	background: var(--sg-form-btn-bg);
	border: 1px solid var(--sg-form-btn-bg);
	border-radius: var(--sg-radius-button);
	box-shadow: none;
	color: var(--sg-form-btn-text);
	font-family: var(--sg-font-body);
	font-size: var(--sg-button-size);
	font-weight: 500;
	line-height: 1.25;
	transition: background-color var(--sg-transition), color var(--sg-transition),
		border-color var(--sg-transition), transform var(--sg-transition);
}

body .frm_forms.with_frm_style .frm_submit button:hover,
body .frm_forms.with_frm_style .frm_submit input[type="submit"]:hover,
body .frm_forms.with_frm_style .frm_submit input[type="button"]:hover {
	background: var(--sg-form-btn-bg-hover);
	border-color: var(--sg-form-btn-bg);
	color: var(--sg-form-btn-text-hover);
	transform: translateY(-2px);
}

/*
 * El plugin apaga el `outline` en :focus. Se devuelve en abeto, separado del
 * botón por 3px de fondo Salvia.
 */
body .frm_forms.with_frm_style .frm_submit button:focus-visible,
body .frm_forms.with_frm_style .frm_submit input[type="submit"]:focus-visible,
body .frm_forms.with_frm_style .frm_submit input[type="button"]:focus-visible {
	outline: 2px solid var(--sg-form-text);
	outline-offset: 3px;
}

body .frm_forms.with_frm_style .frm_submit {
	margin-top: calc(var(--sg-unit) * 3);
}

/* En móvil el botón ocupa el ancho, como en la maqueta. */
@media (max-width: 600px) {

	body .frm_forms.with_frm_style .frm_submit button,
	body .frm_forms.with_frm_style .frm_submit input[type="submit"] {
		width: 100%;
	}
}

/* Detalles ---------------------------------------------------------------- */

/*
 * Los campos de tipo HTML sin contenido dejan un hueco muerto del alto de
 * --field-margin. `:empty` no sirve porque el div lleva saltos de línea
 * dentro; lo que los distingue es no tener ningún hijo que sea un elemento.
 *
 * El selector empieza por `div` a propósito. El campo trampa antispam también
 * lleva la clase .frm_form_field y tampoco tiene hijos —es un <input>—, y no
 * queremos ocultarlo con `display: none`: el plugin lo esconde de otra forma
 * justamente para que los robots no puedan detectarlo por ahí.
 */
body .frm_forms.with_frm_style div.frm_form_field:not(:has(*)) {
	display: none;
}

/*
 * El mensaje de error de campo, alineado con el texto de ayuda. Va en una
 * pastilla de Lino: el rojo de alerta directamente sobre Salvia da 2,7:1.
 */
body .frm_forms.with_frm_style .frm_error {
	display: inline-block;
	margin-top: calc(var(--sg-unit) * 0.75);
	padding: calc(var(--sg-unit) * 0.5) calc(var(--sg-unit) * 1.5);
	background-color: var(--sg-form-notice-bg);
	border-radius: var(--sg-radius-sm);
}