/*
 * Formularios de Fluent Forms con los tokens del tema (theme.json).
 * Solo se carga en páginas con un formulario de Fluent Forms.
 * Campos blancos con texto negro: se leen igual sobre el negro de la web y sobre la franja magenta (.ap-llamada).
 */
.fluentform .ff-el-group label,
.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	color: inherit;
}
.fluentform .ff-el-help-message { color: inherit; opacity: 0.85; font-size: var(--wp--preset--font-size--xs); font-style: normal; }

.fluentform .ff-el-form-control {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--negro);
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde-control);
	border-radius: 12px;
	padding: 0.85rem 1rem;
}
.fluentform select.ff-el-form-control { appearance: auto; }

.fluentform .ff-el-form-control:focus,
.fluentform input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--acento-texto);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--negro);
	box-shadow: none;
}
.ap-llamada .fluentform .ff-el-form-control:focus,
.ap-llamada .fluentform input[type="checkbox"]:focus-visible { outline-color: var(--wp--preset--color--negro); }

.fluentform .ff-el-is-required.asterisk-right label::after { color: inherit; }
.fluentform .ff-el-tc label, .fluentform .ff_t_c { font-weight: 400; }
.fluentform .ff_t_c a, .ap-llamada .fluentform a { color: inherit; text-decoration: underline; }

/* Errores: rosa claro sobre negro; amarillo claro sobre magenta (contraste suficiente en los dos) */
.fluentform .ff-el-is-error .ff-el-form-control { border: 2px solid #FF8A8A; }
.fluentform .error, .fluentform .text-danger { color: #FF8A8A; font-weight: 600; }
.ap-llamada .fluentform .ff-el-is-error .ff-el-form-control { border-color: #FFE8A3; }
.ap-llamada .fluentform .error, .ap-llamada .fluentform .text-danger { color: #FFE8A3; }

/* Botón: el principal del tema (magenta); dentro de la franja magenta, negro */
.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--blanco);
	background-color: var(--wp--preset--color--acento);
	border: 1.5px solid var(--wp--preset--color--acento);
	border-radius: 999px;
	padding: 0.95rem 1.75rem;
	opacity: 1;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
	color: var(--wp--preset--color--blanco);
	background-color: var(--wp--preset--color--acento-oscuro);
	border-color: var(--wp--preset--color--acento-oscuro);
	opacity: 1;
}
.ap-llamada .fluentform .ff-btn-submit,
.ap-llamada .fluentform .ff-btn-submit:not(.ff_btn_no_style) { background-color: var(--wp--preset--color--negro); border-color: var(--wp--preset--color--negro); }
.ap-llamada .fluentform .ff-btn-submit:hover,
.ap-llamada .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover { background-color: var(--wp--preset--color--blanco); border-color: var(--wp--preset--color--blanco); color: var(--wp--preset--color--negro); }
.fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--wp--preset--color--blanco); outline-offset: 3px; }

.ff-message-success {
	border-radius: 16px;
	border: 1px solid var(--wp--preset--color--borde);
	background-color: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto);
	box-shadow: none;
}

/* Formulario compacto: menos aire entre campos y, si hay sitio, nombre y correo, empresa y teléfono en dos columnas.
   Solo se reparte en columnas, sin cambiar el orden: el tabulador sigue el mismo recorrido. */
.fluentform .ff-el-group { margin-bottom: 14px; }
.fluentform .ff-el-input--label { margin-bottom: 4px; }
.fluentform .ff-el-form-control { padding: 0.65rem 0.9rem; }
.fluentform textarea.ff-el-form-control { min-height: 0; height: 6.5rem; }
.fluentform form.frm-fluent-form { container-type: inline-size; }
@container (min-width: 480px) {
	.fluentform form.frm-fluent-form > fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
	.fluentform form.frm-fluent-form > fieldset > * { grid-column: 1 / -1; }
	.fluentform form.frm-fluent-form > fieldset > .ff-el-group:has([name="nombre"], [name="email"], [name="empresa"], [name="telefono"]) { grid-column: auto; }
}