/*
 * Formulario público de la beca Jaime Vera.
 *
 * Estética heredada del tema del colegio (ADR-F2): la tipografía se hereda tal cual y los
 * colores salen de las variables globales de Elementor del kit 20, con los valores reales
 * del sitio como respaldo. Aquí no se inventa ningún color de marca; lo único que no
 * existe en el tema es el rojo de error, y está documentado en docs/design/tokens.md.
 *
 * Mobile-first de verdad: se diseña a 320 px y crece. Nada por debajo de 16 px en los
 * controles —iOS hace zoom al enfocar si el texto es menor— y ninguna zona de toque por
 * debajo de 48 px.
 */

.jrj-bjv {
	--jrj-bjv-tinta: var( --e-global-color-primary, #263162 );
	--jrj-bjv-tinta-suave: var( --e-global-color-7c42c20, #1f2a55 );
	--jrj-bjv-texto: var( --e-global-color-text, #5a6070 );
	--jrj-bjv-acento: var( --e-global-color-accent, #369259 );
	--jrj-bjv-boton-fondo: var( --e-global-color-aa242c0, #f4c542 );
	--jrj-bjv-boton-fondo-activo: var( --e-global-color-f342dc1, #ddbb55 );
	--jrj-bjv-error: #b3261e;
	--jrj-bjv-error-fondo: #fdf2f1;
	--jrj-bjv-borde: #c3c8d4;
	--jrj-bjv-superficie: #ffffff;
	--jrj-bjv-superficie-suave: #f4f5f8;
	--jrj-bjv-radio: 10px;
	--jrj-bjv-espacio: 1.5rem;

	box-sizing: border-box;
	color: var( --jrj-bjv-texto );
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	margin-inline: auto;
	max-width: 40rem;
	text-align: start;
}

.jrj-bjv *,
.jrj-bjv *::before,
.jrj-bjv *::after {
	box-sizing: inherit;
}

.jrj-bjv .jrj-bjv-titulo {
	color: var( --jrj-bjv-tinta );
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 0.5rem;
}

.jrj-bjv .jrj-bjv-subtitulo {
	color: var( --jrj-bjv-tinta );
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 2rem 0 0.75rem;
}

.jrj-bjv p {
	margin: 0 0 1rem;
}

/* --------------------------------------------------------------------------
 * Formulario
 * ----------------------------------------------------------------------- */

.jrj-bjv .jrj-bjv-intro {
	color: var( --jrj-bjv-texto );
	margin-bottom: 0.5rem;
}

.jrj-bjv .jrj-bjv-obligatorios-aviso {
	color: var( --jrj-bjv-texto );
	font-size: 0.9375rem;
	margin-bottom: var( --jrj-bjv-espacio );
	opacity: 0.85;
}

.jrj-bjv .jrj-bjv-campo {
	border-inline-start: 3px solid transparent;
	margin-bottom: var( --jrj-bjv-espacio );
	padding-inline-start: 0;
	transition: border-color 0.15s ease-out, padding 0.15s ease-out;
}

.jrj-bjv .jrj-bjv-campo--error {
	border-inline-start-color: var( --jrj-bjv-error );
	padding-inline-start: 0.75rem;
}

.jrj-bjv .jrj-bjv-etiqueta {
	color: var( --jrj-bjv-tinta );
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 0.25rem;
}

.jrj-bjv .jrj-bjv-ayuda {
	color: var( --jrj-bjv-texto );
	font-size: 0.9375rem;
	margin: 0 0 0.5rem;
}

.jrj-bjv .jrj-bjv-control {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --jrj-bjv-superficie );
	border: 1px solid var( --jrj-bjv-borde );
	border-radius: var( --jrj-bjv-radio );
	color: var( --jrj-bjv-tinta-suave );
	display: block;
	font-family: inherit;
	font-size: 1rem; /* Nunca menos: iOS hace zoom al enfocar. */
	line-height: 1.4;
	min-height: 3rem;
	padding: 0.7rem 0.85rem;
	width: 100%;
}

.jrj-bjv .jrj-bjv-control::placeholder {
	color: #8b91a1;
}

.jrj-bjv .jrj-bjv-control:focus-visible,
.jrj-bjv .jrj-bjv-casilla input:focus-visible,
.jrj-bjv .jrj-bjv-boton:focus-visible {
	outline: 3px solid var( --jrj-bjv-acento );
	outline-offset: 2px;
}

/*
 * Un campo en error enfoca en rojo, nunca en verde. El verde significa «correcto» para
 * casi todo el mundo y contradiría el borde rojo del propio control y el mensaje de
 * debajo, que es justo lo que la familia tiene que leer.
 */
.jrj-bjv .jrj-bjv-campo--error .jrj-bjv-control:focus-visible,
.jrj-bjv .jrj-bjv-campo--error .jrj-bjv-casilla input:focus-visible {
	outline-color: var( --jrj-bjv-error );
}

/*
 * Respaldo para navegadores viejos sin :focus-visible, aislado en @supports. Sin este
 * aislamiento el aro sale también al hacer clic con el ratón en un navegador moderno
 * —molesto sobre todo en el botón—, porque :focus casa siempre.
 */
@supports not selector( :focus-visible ) {
	.jrj-bjv .jrj-bjv-control:focus,
	.jrj-bjv .jrj-bjv-boton:focus {
		outline: 3px solid var( --jrj-bjv-acento );
		outline-offset: 2px;
	}

	.jrj-bjv .jrj-bjv-campo--error .jrj-bjv-control:focus,
	.jrj-bjv .jrj-bjv-campo--error .jrj-bjv-casilla input:focus {
		outline-color: var( --jrj-bjv-error );
	}
}

.jrj-bjv .jrj-bjv-campo--error .jrj-bjv-control {
	border-color: var( --jrj-bjv-error );
	border-width: 2px;
}

select.jrj-bjv-control {
	background-image: url( 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"%3E%3Cpath d="M5 8l5 5 5-5" fill="none" stroke="%23263162" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E' );
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
	padding-inline-end: 2.5rem;
}

/* --------------------------------------------------------------------------
 * Archivo
 * ----------------------------------------------------------------------- */

.jrj-bjv .jrj-bjv-archivo {
	background-color: var( --jrj-bjv-superficie-suave );
	border-style: dashed;
	cursor: pointer;
	line-height: 1.6;
	padding: 0.85rem;
}

.jrj-bjv .jrj-bjv-archivo::file-selector-button {
	background-color: var( --jrj-bjv-superficie );
	border: 1px solid var( --jrj-bjv-borde );
	border-radius: 6px;
	color: var( --jrj-bjv-tinta );
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	display: block;
	margin-block-end: 0.5rem;
	min-height: 2.75rem;
	padding: 0.6rem 0.9rem;
	width: 100%;
}

.jrj-bjv .jrj-bjv-archivo__elegido {
	/* Navy, no el verde del tema: en texto pequeño ese verde da 3,9:1 sobre blanco y
	   se queda por debajo del 4,5:1 de WCAG AA. El verde se reserva para lo que no es
	   texto —el foco y el círculo de la pantalla de éxito—. */
	color: var( --jrj-bjv-tinta );
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0.5rem 0 0;
}

.jrj-bjv .jrj-bjv-archivo__elegido:empty {
	display: none;
}

/* --------------------------------------------------------------------------
 * Casilla de consentimiento
 * ----------------------------------------------------------------------- */

.jrj-bjv .jrj-bjv-casilla {
	align-items: flex-start;
	color: var( --jrj-bjv-texto );
	cursor: pointer;
	display: flex;
	font-size: 0.9375rem;
	gap: 0.75rem;
	line-height: 1.45;
	min-height: 3rem;
	padding: 0.25rem 0;
}

.jrj-bjv .jrj-bjv-casilla input[type='checkbox'] {
	accent-color: var( --jrj-bjv-acento );
	flex: 0 0 auto;
	height: 1.5rem;
	margin: 0.1rem 0 0;
	width: 1.5rem;
}

.jrj-bjv .jrj-bjv-casilla a {
	color: var( --jrj-bjv-tinta );
	text-decoration: underline;
}

/*
 * El correo de librería, en la pantalla de éxito y en la de fuera de plazo. Va navy
 * (11,34:1 sobre el fondo suave) y subrayado. Un correo en texto plano hay que copiarlo a
 * mano desde el móvil, y la duda que cuesta trabajo preguntar acaba sin preguntarse.
 *
 * Se queda en `inline`: con `inline-block` el enlace es un bloque que no se parte, y a
 * 320 px se iba de línea dejando el paréntesis de apertura huérfano al final de la
 * anterior. El relleno vertical en un elemento en línea agranda la zona de toque sin
 * tocar el alto de la línea.
 */
.jrj-bjv .jrj-bjv-enlace-libreria {
	color: var( --jrj-bjv-tinta );
	font-weight: 600;
	overflow-wrap: anywhere;
	padding: 0.4em 0;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Errores
 * ----------------------------------------------------------------------- */

.jrj-bjv .jrj-bjv-error {
	color: var( --jrj-bjv-error );
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0.4rem 0 0;
}

.jrj-bjv .jrj-bjv-error::before {
	content: '⚠ ';
}

.jrj-bjv .jrj-bjv-error[hidden] {
	display: none;
}

.jrj-bjv .jrj-bjv-resumen-errores {
	background-color: var( --jrj-bjv-error-fondo );
	border: 1px solid var( --jrj-bjv-error );
	border-inline-start-width: 5px;
	border-radius: var( --jrj-bjv-radio );
	margin-bottom: var( --jrj-bjv-espacio );
	padding: 0.9rem 1rem;
}

.jrj-bjv .jrj-bjv-resumen-errores__titulo {
	color: var( --jrj-bjv-error );
	font-weight: 700;
	margin: 0;
}

.jrj-bjv .jrj-bjv-resumen-errores:focus-visible {
	outline: 3px solid var( --jrj-bjv-error );
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Acciones
 * ----------------------------------------------------------------------- */

.jrj-bjv .jrj-bjv-acciones {
	margin-top: 2rem;
}

.jrj-bjv .jrj-bjv-boton {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --jrj-bjv-boton-fondo );
	border: none;
	border-radius: var( --jrj-bjv-radio );
	/* Navy sobre el amarillo del tema: el blanco del kit no llega ni a 2:1. */
	color: var( --jrj-bjv-tinta );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	gap: 0.6rem;
	line-height: 1.2;
	min-height: 3.25rem;
	padding: 0.9rem 1.6rem;
	width: 100%;
}

/*
 * :focus-visible, no :focus: tras un clic con el ratón el botón se quedaba con el color
 * de «pulsado» hasta que la familia tocaba otra cosa. Con teclado sí tiene que verse.
 */
.jrj-bjv .jrj-bjv-boton:hover,
.jrj-bjv .jrj-bjv-boton:focus-visible {
	background-color: var( --jrj-bjv-boton-fondo-activo );
}

.jrj-bjv .jrj-bjv-boton[disabled] {
	cursor: progress;
	opacity: 0.8;
}

.jrj-bjv .jrj-bjv-boton[aria-busy='true']::after {
	animation: jrj-bjv-giro 0.8s linear infinite;
	border: 3px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	content: '';
	height: 1.15rem;
	width: 1.15rem;
}

@keyframes jrj-bjv-giro {
	to {
		transform: rotate( 360deg );
	}
}

.jrj-bjv .jrj-bjv-estado {
	color: var( --jrj-bjv-texto );
	font-size: 0.9375rem;
	margin: 0.75rem 0 0;
	min-height: 1.4em;
	text-align: center;
}

.jrj-bjv .jrj-bjv-estado:empty {
	margin-top: 0;
}

/* Trampa antispam: fuera de la vista, pero presente para los robots. */
.jrj-bjv .jrj-bjv-trampa {
	height: 1px;
	inset-inline-start: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* --------------------------------------------------------------------------
 * Éxito y avisos
 * ----------------------------------------------------------------------- */

.jrj-bjv .jrj-bjv-exito,
.jrj-bjv .jrj-bjv-aviso {
	background-color: var( --jrj-bjv-superficie-suave );
	border-radius: var( --jrj-bjv-radio );
	padding: 1.5rem 1.25rem;
}

.jrj-bjv .jrj-bjv-exito__cabecera {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.jrj-bjv .jrj-bjv-exito__cabecera .jrj-bjv-titulo {
	margin: 0;
}

.jrj-bjv .jrj-bjv-exito__marca {
	align-items: center;
	background-color: var( --jrj-bjv-acento );
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.jrj-bjv .jrj-bjv-exito__entrada {
	color: var( --jrj-bjv-texto );
}

.jrj-bjv .jrj-bjv-resumen {
	background-color: var( --jrj-bjv-superficie );
	border: 1px solid var( --jrj-bjv-borde );
	border-radius: var( --jrj-bjv-radio );
	margin: 0 0 1rem;
	padding: 0.5rem 1rem;
}

.jrj-bjv .jrj-bjv-resumen__fila {
	border-bottom: 1px solid var( --jrj-bjv-superficie-suave );
	padding: 0.7rem 0;
}

.jrj-bjv .jrj-bjv-resumen__fila:last-child {
	border-bottom: none;
}

.jrj-bjv .jrj-bjv-resumen dt {
	color: var( --jrj-bjv-texto );
	font-size: 0.875rem;
	margin: 0;
}

.jrj-bjv .jrj-bjv-resumen dd {
	color: var( --jrj-bjv-tinta );
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0.15rem 0 0;
	overflow-wrap: anywhere;
}

.jrj-bjv .jrj-bjv-pasos {
	margin: 0 0 1rem;
	padding-inline-start: 1.25rem;
}

.jrj-bjv .jrj-bjv-pasos li {
	margin-bottom: 0.5rem;
}

.jrj-bjv .jrj-bjv-destacado {
	background-color: var( --jrj-bjv-superficie );
	border-inline-start: 5px solid var( --jrj-bjv-boton-fondo );
	border-radius: 6px;
	color: var( --jrj-bjv-tinta-suave );
	margin: 0 0 1rem;
	padding: 0.9rem 1rem;
}

.jrj-bjv .jrj-bjv-pie {
	color: var( --jrj-bjv-texto );
	font-size: 0.9375rem;
	margin: 0;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * Pantallas medianas y grandes
 * ----------------------------------------------------------------------- */

@media ( min-width: 40em ) {
	.jrj-bjv .jrj-bjv-titulo {
		font-size: 1.75rem;
	}

	.jrj-bjv .jrj-bjv-boton {
		width: auto;
	}

	/* Con sitio de sobra, el botón del archivo vuelve a su línea junto al nombre. */
	.jrj-bjv .jrj-bjv-archivo::file-selector-button {
		display: inline-block;
		margin-block-end: 0;
		margin-inline-end: 0.75rem;
		width: auto;
	}

	.jrj-bjv .jrj-bjv-estado {
		text-align: start;
	}

	.jrj-bjv .jrj-bjv-resumen__fila {
		display: grid;
		gap: 1rem;
		grid-template-columns: 12rem 1fr;
	}

	.jrj-bjv .jrj-bjv-resumen dd {
		margin-top: 0;
	}

	.jrj-bjv .jrj-bjv-exito,
	.jrj-bjv .jrj-bjv-aviso {
		padding: 2rem 1.75rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.jrj-bjv *,
	.jrj-bjv *::after,
	.jrj-bjv *::before {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}