/*
 * Formularios
 * ---------------------------------------------------------------------------
 * La piel de los seis formularios del sitio —Admisión, Traslado, registro de
 * exalumnos y los tres de Contacto—, en un solo archivo.
 *
 * Los formularios los pinta Forminator; el tema solo los viste. Antes esta piel
 * estaba repartida entre « paginas » y « admision », con dos juegos de medidas
 * distintos: un campo de Exalumnos no se parecía a uno de Traslado. Ahora hay
 * un sitio, y todo lo que cambia es la caja donde viven —columna, ficha ancha o
 * diálogo—, que sigue en la hoja de su familia.
 *
 * ---------------------------------------------------------------------------
 * Por qué hay tantos « !important »
 *
 * Porque Forminator apunta sus reglas con el identificador del formulario
 * —« .forminator-ui#forminator-module-108 … »— y contra un « id » no hay clase
 * que valga. Solo llevan « !important » las propiedades que el plugin declara
 * de esa manera; el resto lo gana el tema por peso normal.
 *
 * Va al final de la cadena de hojas, después de « admision »: es la última
 * palabra sobre los campos.
 */

.sjo-s__form-tarjeta {
	/* Las medidas del campo, en un sitio: las usan el borde, el alto, el radio
	   y el anillo del foco, y así un select2 —que Forminator monta con su
	   propio marcado— sale exactamente igual que un « input ». */
	--sjo-f-alto: 3rem;
	--sjo-f-radio: 0 12px 12px 12px;
	--sjo-f-borde: var( --wp--preset--color--azul-100, #e0e9f1 );
	--sjo-f-borde-fuerte: var( --wp--preset--color--celeste, #a7c6dd );
	--sjo-f-azul: var( --wp--preset--color--azul, #004078 );
	--sjo-f-rojo: var( --wp--preset--color--rojo, #e00026 );
	--sjo-f-tinta: var( --sjo-s-tinta, #14181f );
	--sjo-f-gris: var( --sjo-s-gris, #5a6472 );

	/* Forminator hereda la tipografía del tema, pero su hoja fija un tamaño y
	   un interlineado propios en el contenedor. */
	font-family: inherit;
}

/* ---------------------------------------------------------------------------
 * Las filas
 *
 * Forminator reparte los campos con su propia rejilla de doce columnas y
 * márgenes en píxeles. No se pelea con ella: solo se le dan los huecos del
 * tema, que son fluidos.
 * ------------------------------------------------------------------------ */

.sjo-s__form-tarjeta .forminator-row {
	margin-bottom: clamp( 1rem, 1.67vw, 1.5rem ) !important;
}

.sjo-s__form-tarjeta .forminator-row:last-of-type,
.sjo-s__form-tarjeta .forminator-row-last {
	margin-bottom: 0 !important;
}

/* El encabezado de sección —«DATOS DEL POSTULANTE»— con el rojo y el tracking
   de los rótulos del tema. Es un « h2 » del plugin, no un titular de la
   página: lo que hace es separar dos bloques de campos. */
/* El filete rojo corto sobre el rótulo —el de todas las secciones del sitio—
   va dibujado con un fondo y no con un « ::before »: la hoja de Forminator
   apaga los pseudoelementos de sus titulares con « display: none », y contra
   eso no se puede ni con « !important », porque no es la misma propiedad que
   uno quiere reclamar. Un fondo de 32 × 3 no lo puede apagar nadie. */
.sjo-s__form-tarjeta .forminator-title,
.sjo-s__form-tarjeta .forminator-section-title {
	margin: 0 !important;
	padding: clamp( 1.75rem, 2.78vw, 2.5rem ) 0 0 !important;
	background-image: linear-gradient( var( --sjo-f-rojo ), var( --sjo-f-rojo ) ) !important;
	background-repeat: no-repeat !important;
	background-size: 2rem 3px !important;
	background-position: 0 clamp( 0.75rem, 1.11vw, 1rem ) !important;
	color: var( --sjo-f-rojo ) !important;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif ) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.333 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
}

/* El primer bloque no necesita aire ni filete por encima: ya los da la
   tarjeta. Se apunta por el mensaje de respuesta, que es el hermano que
   Forminator imprime siempre delante de la primera fila —« :first-of-type » no
   sirve, porque ese mensaje también es un « div » y se lleva el turno—. */
.sjo-s__form-tarjeta .forminator-response-message + .forminator-row .forminator-title {
	padding-top: 0 !important;
	background-image: none !important;
}

/* Y por debajo, el aire que la maqueta deja entre el rótulo y el primer campo
   del bloque. */
.sjo-s__form-tarjeta .forminator-field-section {
	padding-bottom: clamp( 0.5rem, 0.83vw, 0.75rem );
}

/* ---------------------------------------------------------------------------
 * Las etiquetas
 * ------------------------------------------------------------------------ */

.sjo-s__form-tarjeta label,
.sjo-s__form-tarjeta .forminator-label {
	display: block;
	margin-bottom: 0.5rem !important;
	color: var( --sjo-f-tinta ) !important;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif ) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	line-height: 1.538 !important;
	letter-spacing: 0.008em;
}

.sjo-s__form-tarjeta .forminator-required {
	color: var( --sjo-f-rojo ) !important;
}

.sjo-s__form-tarjeta .forminator-description {
	margin: 0.5rem 0 0 !important;
	color: var( --sjo-f-gris ) !important;
	font-size: 0.75rem !important;
	line-height: 1.5 !important;
}

/* ---------------------------------------------------------------------------
 * Los campos
 *
 * El « select2 » que monta Forminator no es un « select »: es un « span » con
 * su propio marcado. Se le da la misma piel para que en pantalla no se note la
 * diferencia.
 * ------------------------------------------------------------------------ */

.sjo-s__form-tarjeta input[ type="text" ],
.sjo-s__form-tarjeta input[ type="email" ],
.sjo-s__form-tarjeta input[ type="tel" ],
.sjo-s__form-tarjeta input[ type="number" ],
.sjo-s__form-tarjeta input[ type="date" ],
.sjo-s__form-tarjeta input[ type="url" ],
.sjo-s__form-tarjeta select,
.sjo-s__form-tarjeta textarea,
.sjo-s__form-tarjeta .forminator-input,
.sjo-s__form-tarjeta .forminator-textarea,
.sjo-s__form-tarjeta .forminator-select .select2-selection {
	box-sizing: border-box !important;
	width: 100%;
	height: var( --sjo-f-alto ) !important;
	padding: 0 1.125rem !important;
	border: 1px solid var( --sjo-f-borde ) !important;
	border-radius: var( --sjo-f-radio ) !important;
	background-color: var( --wp--preset--color--base, #fff ) !important;
	box-shadow: none !important;
	color: var( --sjo-f-tinta ) !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	line-height: var( --sjo-f-alto ) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sjo-s__form-tarjeta textarea,
.sjo-s__form-tarjeta .forminator-textarea {
	height: auto !important;
	min-height: 7.5rem;
	padding: 0.875rem 1.125rem !important;
	line-height: 1.667 !important;
	resize: vertical;
}

.sjo-s__form-tarjeta ::placeholder {
	color: var( --sjo-f-borde-fuerte ) !important;
	opacity: 1;
}

/* Al señalar el campo con el cursor, el borde se marca un punto: es la misma
   señal que dan las tarjetas del sitio. */
.sjo-s__form-tarjeta input:hover,
.sjo-s__form-tarjeta textarea:hover,
.sjo-s__form-tarjeta .forminator-select .select2-selection:hover {
	border-color: var( --sjo-f-borde-fuerte ) !important;
}

/* El foco: borde azul y un anillo del mismo azul muy rebajado. Se ve con
   teclado y no depende del anillo del sistema, que cada navegador pinta a su
   manera y aquí se comería la esquina recta. */
.sjo-s__form-tarjeta input:focus,
.sjo-s__form-tarjeta select:focus,
.sjo-s__form-tarjeta textarea:focus,
.sjo-s__form-tarjeta .forminator-select.select2-container--focus .select2-selection,
.sjo-s__form-tarjeta .forminator-select.select2-container--open .select2-selection {
	border-color: var( --sjo-f-azul ) !important;
	box-shadow: 0 0 0 3px rgba( 0, 64, 120, 0.12 ) !important;
	outline: none !important;
}

/* El amarillo del autorrelleno de Chrome se lleva por delante el fondo del
   campo. No hay forma de quitarlo: se tapa con una sombra interior del color
   que toca. */
.sjo-s__form-tarjeta input:-webkit-autofill,
.sjo-s__form-tarjeta input:-webkit-autofill:hover,
.sjo-s__form-tarjeta input:-webkit-autofill:focus {
	-webkit-text-fill-color: var( --sjo-f-tinta );
	box-shadow: 0 0 0 100px var( --wp--preset--color--base, #fff ) inset !important;
}

/* --- El desplegable --- */

.sjo-s__form-tarjeta .forminator-select {
	width: 100% !important;
}

.sjo-s__form-tarjeta .forminator-select .select2-selection__rendered {
	padding: 0 !important;
	color: inherit !important;
	line-height: inherit !important;
}

/* Sin elegir nada, lo que se lee es el marcador de posición. */
.sjo-s__form-tarjeta .forminator-select .select2-selection__placeholder {
	color: var( --sjo-f-borde-fuerte ) !important;
}

/* La flecha: la de select2 es una punta hecha con bordes. Se cambia por un
   ángulo dibujado con dos filetes, que es el mismo que usa la cabecera. */
.sjo-s__form-tarjeta .forminator-select .select2-selection__arrow {
	top: 0 !important;
	right: 1.125rem !important;
	width: 0.5rem !important;
	height: var( --sjo-f-alto ) !important;
}

.sjo-s__form-tarjeta .forminator-select .select2-selection__arrow b {
	border: 0 !important;
	margin: 0 !important;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var( --sjo-f-azul ) !important;
	border-bottom: 2px solid var( --sjo-f-azul ) !important;
	transform: translate( -50%, -60% ) rotate( 45deg );
	transition: transform 0.2s ease;
}

.sjo-s__form-tarjeta .forminator-select.select2-container--open .select2-selection__arrow b {
	transform: translate( -50%, -30% ) rotate( -135deg );
}

/* La lista de opciones cuelga del final del documento, fuera de la sección: no
   se puede acotar por « .sjo-s__form-tarjeta ». En el front-end del sitio los
   únicos select2 son los de estos formularios, así que se le da la piel al
   desplegable de select2 a secas. */
.select2-container .select2-dropdown {
	border: 1px solid var( --wp--preset--color--azul-100, #e0e9f1 );
	border-radius: 0 12px 12px 12px;
	background: var( --wp--preset--color--base, #fff );
	box-shadow: 0 18px 40px rgba( 0, 64, 120, 0.12 );
	overflow: hidden;
}

.select2-container .select2-results__option {
	padding: 0.625rem 1.125rem;
	color: var( --sjo-s-tinta, #14181f );
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option--highlighted[ aria-selected ] {
	background: var( --wp--preset--color--azul-suave, #f0f5f9 ) !important;
	color: var( --wp--preset--color--azul, #004078 ) !important;
}

.select2-container .select2-results__option[ aria-selected="true" ] {
	background: var( --wp--preset--color--azul, #004078 ) !important;
	color: var( --wp--preset--color--base, #fff ) !important;
}

/* --- La fecha --- */

/* Forminator pone un emoji de calendario dentro del campo. Se cambia por un
   pictograma dibujado con CSS: un emoji lo pinta cada sistema con su propio
   estilo y rompe la tipografía del formulario. */
.sjo-s__form-tarjeta .forminator-input-with-icon {
	position: relative;
}

.sjo-s__form-tarjeta .forminator-input-with-icon .forminator-input {
	padding-left: 2.875rem !important;
}

.sjo-s__form-tarjeta .forminator-icon-calendar {
	position: absolute;
	top: 50%;
	left: 1.125rem;
	z-index: 1;
	width: 1rem;
	height: 0.9375rem;
	border: 1.5px solid var( --sjo-f-borde-fuerte );
	border-radius: 0 3px 3px 3px;
	font-size: 0;
	transform: translateY( -50% );
	pointer-events: none;
}

.sjo-s__form-tarjeta .forminator-icon-calendar::before,
.sjo-s__form-tarjeta .forminator-icon-calendar::after {
	content: "";
	position: absolute;
	background: var( --sjo-f-borde-fuerte );
}

/* La barra de arriba del calendario. */
.sjo-s__form-tarjeta .forminator-icon-calendar::before {
	top: 2px;
	left: 0;
	right: 0;
	height: 2px;
}

/* Y la anilla. */
.sjo-s__form-tarjeta .forminator-icon-calendar::after {
	top: -3.5px;
	left: 3px;
	width: 2px;
	height: 3px;
}

/* ---------------------------------------------------------------------------
 * El botón de enviar
 *
 * Es el botón del tema, aunque lo pinte el plugin: misma forma —recta arriba a
 * la izquierda y redonda en las otras tres—, mismo rojo y la misma flecha que
 * entra al pasar el cursor.
 * ------------------------------------------------------------------------ */

.sjo-s__form-tarjeta button[ type="submit" ],
.sjo-s__form-tarjeta .forminator-button-submit {
	display: inline-flex !important;
	align-items: center;
	gap: 0.625rem;
	height: 3.25rem !important;
	margin-top: clamp( 1.25rem, 2.22vw, 2rem );
	padding: 0 1.75rem !important;
	border: 0 !important;
	border-radius: 0 26px 26px 26px !important;
	background-color: var( --sjo-f-rojo ) !important;
	color: var( --wp--preset--color--base, #fff ) !important;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif ) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.013em;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sjo-s__form-tarjeta .forminator-button-submit::after {
	content: "\2192";
	display: inline-block;
	max-width: 0;
	opacity: 0;
	transform: translateX( -0.25rem );
	transition: max-width 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.sjo-s__form-tarjeta button[ type="submit" ]:hover,
.sjo-s__form-tarjeta .forminator-button-submit:hover,
.sjo-s__form-tarjeta .forminator-button-submit:focus-visible {
	background-color: var( --wp--preset--color--rojo-oscuro, #ad001d ) !important;
}

.sjo-s__form-tarjeta .forminator-button-submit:hover::after,
.sjo-s__form-tarjeta .forminator-button-submit:focus-visible::after {
	max-width: 1.5rem;
	opacity: 1;
	transform: translateX( 0 );
}

/* Mientras envía, el botón deja de invitar a pulsarlo. */
.sjo-s__form-tarjeta .forminator-button-submit[ disabled ],
.sjo-s__form-tarjeta .forminator-button-submit.forminator-button-onload {
	opacity: 0.7;
	cursor: progress;
}

/* ---------------------------------------------------------------------------
 * Los avisos
 * ------------------------------------------------------------------------ */

/* El mensaje de respuesta: rojo cuando algo falta, azul cuando se envió. Nace
   vacío y con « aria-hidden », así que no se pinta hasta que dice algo. */
.sjo-s__form-tarjeta .forminator-response-message {
	margin: 0 0 clamp( 1rem, 1.67vw, 1.5rem ) !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var( --sjo-f-radio ) !important;
	font-size: 0.875rem !important;
	line-height: 1.6 !important;
}

.sjo-s__form-tarjeta .forminator-response-message:not( [ aria-hidden="true" ] ) {
	padding: 0.875rem 1.125rem !important;
}

.sjo-s__form-tarjeta .forminator-response-message.forminator-error {
	background: var( --wp--preset--color--rojo-100, #fbdde1 ) !important;
	color: var( --wp--preset--color--granate, #9c001b ) !important;
}

.sjo-s__form-tarjeta .forminator-response-message.forminator-accessible,
.sjo-s__form-tarjeta .forminator-response-message.forminator-success {
	background: var( --wp--preset--color--azul-suave, #f0f5f9 ) !important;
	color: var( --sjo-f-azul ) !important;
}

/* El error de un campo suelto: una línea roja bajo el campo, y el campo con el
   borde rojo. */
.sjo-s__form-tarjeta .forminator-error-message {
	margin: 0.375rem 0 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var( --wp--preset--color--granate, #9c001b ) !important;
	font-size: 0.75rem !important;
	line-height: 1.5 !important;
}

.sjo-s__form-tarjeta .forminator-has_error .forminator-input,
.sjo-s__form-tarjeta .forminator-has_error .forminator-textarea,
.sjo-s__form-tarjeta .forminator-has_error .select2-selection {
	border-color: var( --sjo-f-rojo ) !important;
}

/* ---------------------------------------------------------------------------
 * Casillas y opciones
 *
 * Todavía no las usa ningún formulario del sitio, pero los de Contacto van a
 * pedir al menos el consentimiento de datos, y un cuadro sin vestir se ve
 * desde la otra punta de la página.
 * ------------------------------------------------------------------------ */

.sjo-s__form-tarjeta .forminator-checkbox,
.sjo-s__form-tarjeta .forminator-radio {
	align-items: center;
	color: var( --sjo-f-gris ) !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	line-height: 1.6 !important;
}

.sjo-s__form-tarjeta .forminator-checkbox-box,
.sjo-s__form-tarjeta .forminator-radio-box {
	border: 1.5px solid var( --sjo-f-borde-fuerte ) !important;
	background: var( --wp--preset--color--base, #fff ) !important;
}

.sjo-s__form-tarjeta .forminator-checkbox-box {
	border-radius: 0 5px 5px 5px !important;
}

.sjo-s__form-tarjeta input:checked + .forminator-checkbox-box,
.sjo-s__form-tarjeta input:checked + .forminator-radio-box {
	border-color: var( --sjo-f-azul ) !important;
	background: var( --sjo-f-azul ) !important;
}

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

@media ( max-width: 781px ) {

	/* Forminator reparte en columnas de seis también a 390 px: dos campos por
	   fila dejan cada uno en 150 px, y en un «Nombre y apellidos» no cabe ni el
	   nombre. A este ancho, un campo por fila. */
	.sjo-s__form-tarjeta .forminator-col {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	/* Y el hueco entre campos apilados lo pone la fila, que ya no reparte
	   nada. */
	.sjo-s__form-tarjeta .forminator-col + .forminator-col {
		margin-top: clamp( 1rem, 4.1vw, 1.25rem ) !important;
	}

	.sjo-s__form-tarjeta .forminator-button-submit {
		width: 100%;
		justify-content: center;
	}

	/* Los campos se quedan en 16 px aunque la raíz baje a 15: por debajo de 16,
	   Safari en iOS **hace zoom** al enfocar un campo y descoloca la página
	   entera. Es la única excepción a la escala de móvil, y va en píxeles a
	   propósito. */
	.sjo-s__form-tarjeta input,
	.sjo-s__form-tarjeta select,
	.sjo-s__form-tarjeta textarea,
	.sjo-s__form-tarjeta .forminator-input,
	.sjo-s__form-tarjeta .forminator-textarea,
	.sjo-s__form-tarjeta .forminator-select .select2-selection {
		font-size: 16px !important;
	}
}