/* Formularios de JetFormBuilder.

   Se carga en los paneles y en cualquier página que lleve un formulario, que
   es el caso de «Contacto»: allí los campos se veían igual de desnudos que en
   el panel, y con peor efecto todavía, porque es la primera pantalla que ve un
   cliente potencial.

   JetFormBuilder no trae estilos propios de campo: pinta `<input>` y `<select>`
   con la apariencia por defecto del navegador. Sobre el fondo claro del sitio
   eso se lee como un formulario sin terminar —«espartano» fue la palabra de la
   revisión del 13 de agosto de 2026— y desentona con las tarjetas del resto de
   la pantalla, que sí están cuidadas.

   Todos los colores salen de las variables del sistema de diseño, que define
   CrocoBuilder en su CSS global. Importa: `--bt-green-600` cuelga de
   `--bt-brand-primary`, así que si la gestora cambia el color de marca desde
   los ajustes, el formulario la sigue sin tocar este fichero. Los valores de
   reserva son los de fábrica, por si el sistema de diseño no llegara a
   cargarse. */

/* ----------------------------------------------------------- El contenedor */

/*
 * Una sola columna, con ancho de lectura acotado.
 *
 * Un formulario a todo lo ancho de una pantalla de escritorio obliga a barrer
 * la mirada de lado a lado entre la etiqueta y el campo, y hace que un campo
 * corto —un código postal— parezca esperar un párrafo.
 */
.jet-fb-form-block {
	max-width: 62ch;
}

.jet-form-builder {
	display: grid;
	gap: var(--bt-space-5, 20px);
}

/*
 * Con especificidad de sobra a propósito (auditoría responsive de septiembre
 * de 2026): la hoja de JetForm declara la fila como flex column CON wrap y
 * gana por orden de carga. Con la altura que le da la rejilla del
 * formulario, ese wrap partía la fila en una segunda columna: la etiqueta se
 * quedaba y el campo saltaba fuera de la pantalla (en /contacto/ los campos
 * llegaban a 952px en un móvil de 375). La fila es una pila y punto.
 */
form.jet-form-builder .jet-form-builder-row {
	display: grid;
	gap: 6px;
}

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

.jet-form-builder__label {
	display: block;
	font-size: var(--bt-fs-sm, 13px);
	font-weight: 560;
	color: var(--bt-ink-2, #34485e);
}

.jet-form-builder__required {
	margin-inline-start: 3px;
	color: var(--bt-danger-500, #c84b4b);
}

.jet-form-builder__desc {
	margin: 0;
	font-size: var(--bt-fs-sm, 13px);
	line-height: 1.45;
	color: var(--bt-ink-muted, #5c6c80);
}

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

.jet-form-builder__field:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
	width: 100%;
	padding: 11px var(--bt-space-3, 12px);
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 14px);
	background: var(--bt-surface, #fff);
	color: var(--bt-ink, #162638);
	font: inherit;
	font-size: var(--bt-fs-body, 15px);
	line-height: 1.4;
	/* Sin esto, el padding se suma al 100 % y el campo desborda su columna. */
	box-sizing: border-box;
	transition: border-color .14s ease, box-shadow .14s ease;
}

textarea.jet-form-builder__field {
	min-height: 120px;
	resize: vertical;
}

.jet-form-builder__field:hover:not(:disabled) {
	border-color: var(--bt-ink-muted, #5c6c80);
}

.jet-form-builder__field:focus {
	border-color: var(--bt-green-600, #13996f);
	box-shadow: 0 0 0 3px var(--bt-wash-green, rgba(19, 153, 111, .12));
	outline: none;
}

/*
 * El desplegable, con su flecha dibujada.
 *
 * `appearance: none` quita la flecha del sistema junto con el resto del estilo
 * nativo, así que hay que reponerla: sin ella el campo parece de texto y nadie
 * descubre que se despliega. Va como SVG en `background-image` para no
 * depender de ninguna fuente de iconos.
 */
select.jet-form-builder__field {
	appearance: none;
	padding-inline-end: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235c6c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/* Casillas y radios: el tamaño por defecto es demasiado pequeño para el dedo. */
.jet-form-builder__field[type="checkbox"],
.jet-form-builder__field[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--bt-green-600, #13996f);
}

/* --------------------------------------------------------------- Titulares */

.jet-form-builder__heading {
	margin: var(--bt-space-4, 16px) 0 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	font-size: 17px;
	font-weight: 640;
	color: var(--bt-ink, #162638);
}

/* ---------------------------------------------------------------- Botones */

/*
 * Los botones de paso y de envío comparten fila.
 *
 * «Atrás» va primero en el documento porque es lo que espera un lector de
 * pantalla, pero el botón principal debe quedar a la derecha, que es donde se
 * busca: `margin-inline-start: auto` en el de envío los coloca sin alterar el
 * orden del documento.
 */
.jet-form-builder__next-page-wrap,
.jet-form-builder__action-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bt-space-3, 12px);
	margin-top: var(--bt-space-4, 16px);
}

.jet-form-builder__next-page,
.jet-form-builder__prev-page,
.jet-form-builder__submit {
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--bt-radius-pill, 999px);
	font: inherit;
	font-size: var(--bt-fs-body, 15px);
	font-weight: 640;
	cursor: pointer;
	transition: background-color .14s ease, border-color .14s ease;
}

.jet-form-builder__next-page,
.jet-form-builder__submit {
	margin-inline-start: auto;
	background: var(--bt-green-600, #13996f);
	color: #fff;
}

.jet-form-builder__next-page:hover,
.jet-form-builder__submit:hover {
	background: var(--bt-green-700, #0f7a58);
}

/* «Atrás» es secundario: tiene que verse, pero no competir con el principal. */
.jet-form-builder__prev-page {
	border-color: var(--bt-line-strong, rgba(138, 158, 181, .28));
	background: var(--bt-surface, #fff);
	color: var(--bt-ink-2, #34485e);
}

.jet-form-builder__prev-page:hover {
	border-color: var(--bt-ink-muted, #5c6c80);
	background: var(--bt-bg, #f5f8f9);
}

/* --------------------------------------------------------------- Mensajes */

.jet-form-builder-message,
.jet-form-builder__fields-error {
	padding: 12px var(--bt-space-4, 16px);
	border-radius: var(--bt-radius-sm, 14px);
	font-size: 14.5px;
	line-height: 1.5;
}

.jet-form-builder-message--error,
.jet-form-builder__fields-error {
	border: 1px solid var(--bt-danger-500, #c84b4b);
	background: var(--bt-danger-050, #fff2f1);
	color: var(--bt-danger-500, #c84b4b);
}

.jet-form-builder-message--success {
	border: 1px solid var(--bt-green-300, #b4e0d0);
	background: var(--bt-green-050, #eef8f4);
	color: var(--bt-green-700, #0f7a58);
}

/* ------------------------------------------------------------------ Móvil */

@media (max-width: 767px) {
	.jet-fb-form-block {
		max-width: none;
	}

	/* A lo ancho y con el principal arriba: en un teléfono, primero la acción. */
	.jet-form-builder__next-page,
	.jet-form-builder__prev-page,
	.jet-form-builder__submit {
		flex: 1 1 100%;
		margin-inline-start: 0;
	}

	.jet-form-builder__prev-page {
		order: 2;
	}
}

/* ---------------------------------------------------------- Autocompletado */

/*
 * Sugerencias de provincia y localidad (requisito 12 del acta). El script
 * `autocompletar.js` envuelve el campo en `.bt-sugerencias` y pinta la lista
 * justo debajo; aquí sólo se viste. La lista flota sobre lo que venga después
 * para no empujar el resto del formulario a cada tecla.
 */
.bt-sugerencias {
	position: relative;
}

.bt-sugerencias__lista {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 4px);
	z-index: 40;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 260px;
	overflow-y: auto;
	background: var(--bt-surface, #fff);
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 10px);
	box-shadow: var(--bt-shadow-md, 0 16px 38px rgba(22, 38, 56, .075));
}

.bt-sugerencias__lista [role="option"] {
	padding: 8px 10px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 14px;
	color: var(--bt-ink, #162638);
}

.bt-sugerencias__lista [role="option"]:hover,
.bt-sugerencias__lista [role="option"].es-activa {
	background: var(--bt-green-050, #e9faf4);
	color: var(--bt-green-700, #0f7d5b);
}

.bt-sugerencias__resto {
	padding: 8px 10px;
	font-size: 12px;
	color: var(--bt-ink-muted, #5c6c80);
}