/*
 * MEB Tech — Login page
 *
 * Look inspirado en el componente "sign-in-card-2" (glass card + light beams
 * viajando por los bordes + corner glow) pero con branding MEB: rojo suavizado
 * var(--erp-primary, #4C7DFF), Montserrat, dark glass. Cero purple.
 * Se engancha vía `login_enqueue_scripts` en functions.php.
 */

/* ── Fondo: negro plano y silencioso (minimalista). El protagonismo lo
 *    llevan el spotlight y la escena 3D, no el lienzo. ── */
body.login {
	font-family: var(--meb-font);
	color: var(--meb-text);
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: #0A0A0B;
	overflow-x: hidden;
}

body.login::-webkit-scrollbar { width: 6px; }
body.login::-webkit-scrollbar-thumb { background: var(--meb-border); border-radius: 99px; }

/* ── Escena: spotlight + 3D, inyectada en login_footer. Capa de fondo. ── */
.meb-login-stage {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* Spotlight tipo Aceternity: una elipse difusa que entra una vez y se queda. */
.meb-login-spot {
	position: absolute;
	top: -28%;
	left: -18%;
	width: 70%;
	height: 130%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.10), transparent 62%);
	transform: rotate(-26deg);
	filter: blur(34px);
	opacity: 0;
	animation: meb-login-spot-in 1400ms var(--meb-ease, cubic-bezier(0.32, 0.72, 0, 1)) 120ms forwards;
}
@keyframes meb-login-spot-in {
	from { opacity: 0; transform: translate(-6%, -4%) rotate(-26deg); }
	to   { opacity: 1; transform: translate(0, 0) rotate(-26deg); }
}

/* La escena 3D ocupa la mitad derecha en escritorio; oculta en móvil. */
.meb-login-3d {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 56%;
	pointer-events: auto;           /* el robot sí es interactivo */
	opacity: 0;
	animation: meb-login-3d-in 900ms ease-out 300ms forwards;
}
@keyframes meb-login-3d-in { to { opacity: 1; } }
.meb-login-3d spline-viewer {
	width: 100%;
	height: 100%;
	display: block;
}
/* Tapa el badge "Built with Spline" de la esquina, fundiéndolo al fondo. */
.meb-login-3d::after {
	content: "";
	position: absolute;
	right: 0; bottom: 0;
	width: 230px; height: 100px;
	background: radial-gradient(125px 62px at 100% 100%, #0A0A0B 58%, transparent 100%);
	pointer-events: none;
	z-index: 5;
}
@media (max-width: 900px) {
	.meb-login-3d { display: none; }
	.meb-login-spot { width: 120%; left: -10%; opacity: 0; }
}

/* ── Contenedor ── */
#login {
	position: relative;
	z-index: 1;
	padding: 8vh 1.5rem 2rem;
	max-width: 400px;
	width: 92%;
	margin: 0 auto;
}
/* En escritorio el card se recuesta a la izquierda y la escena 3D respira
 * a la derecha (split tipo "Interactive 3D"). */
@media (min-width: 901px) {
	#login {
		margin: 0;
		margin-left: clamp(4vw, 9vw, 12rem);
		padding-top: 0;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* ── Logo MEB (h1 por defecto de WP) ── */
#login h1 {
	margin: 0 auto 1.4rem;
	text-align: center;
}
#login h1 a {
	display: inline-block;
	position: relative;
	filter: drop-shadow(0 1px 10px rgba(180, 220, 255, 0.12));
	animation: meb-logo-glow 3.6s ease-in-out 1.3s infinite;
	background-image: var(--meb-logo-url, none) !important;
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	width: 200px !important;
	height: 64px !important;
	margin: 0 auto !important;
	text-indent: -9999px;
	outline: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

/* ── Brillo "diamante" del logo ──
 * Un destello blanco (con leve tinte hielo) barre la FORMA del logo (lo usamos
 * como máscara), como un diamante captando la luz. Cada ~5s da un glint y espera. */
#login h1 a::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Refracción tipo diamante: doble destello prismático (cian → núcleo → magenta)
	 * que barre la forma del logo. El blanco no se ve sobre blanco; los fringes de
	 * color sí brillan y dan el efecto diamante. */
	background:
		linear-gradient(100deg, transparent 40%, rgba(70, 215, 255, 0.95) 46%, rgba(255, 255, 255, 1) 50%, rgba(255, 110, 230, 0.95) 54%, transparent 60%),
		linear-gradient(100deg, transparent 46%, rgba(255, 255, 255, 0.85) 50%, transparent 54%);
	background-repeat: no-repeat, no-repeat;
	background-size: 230% 100%, 230% 100%;
	background-position: 175% 0, 215% 0;
	-webkit-mask: var(--meb-logo-url, none) center / contain no-repeat;
	mask: var(--meb-logo-url, none) center / contain no-repeat;
	animation: meb-logo-shine 3.6s ease-in-out 1.3s infinite;
}
@keyframes meb-logo-shine {
	0%   { background-position: 175% 0, 215% 0; }
	24%  { background-position: -75% 0, -35% 0; }
	100% { background-position: -75% 0, -35% 0; }
}
@keyframes meb-logo-glow {
	0%, 100% { filter: drop-shadow(0 1px 10px rgba(180, 220, 255, 0.12)); }
	10%      { filter: drop-shadow(0 0 20px rgba(140, 220, 255, 0.65)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); }
	22%      { filter: drop-shadow(0 0 14px rgba(255, 150, 230, 0.45)); }
}
@media (prefers-reduced-motion: reduce) {
	#login h1 a { animation: none; }
	#login h1 a::after { animation: none; opacity: 0; }
}

/* Subtitle bajo el logo */
#login h1::after {
	content: "Acceso al panel de la escuela";
	display: block;
	margin-top: 0.7rem;
	font-family: var(--meb-mono);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--meb-muted-2);
}

/* ── Form card: glass + border glow ── */
.login form {
	position: relative;
	margin: 0 !important;
	padding: 1.9rem 1.6rem 1.6rem !important;
	background: rgba(10, 10, 12, 0.55) !important;
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 16px !important;
	box-shadow:
		0 30px 80px -20px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
	overflow: hidden;
	isolation: isolate;
}
@keyframes meb-login-card-in {
	0%   { opacity: 0; transform: perspective(1200px) translateY(64px) rotateX(20deg) scale(0.84); filter: blur(9px); }
	45%  { opacity: 1; }
	70%  { transform: perspective(1200px) translateY(-9px) rotateX(-3.5deg) scale(1.02); filter: blur(0); }
	88%  { transform: perspective(1200px) translateY(3px)  rotateX(1deg)    scale(0.995); }
	100% { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0deg) scale(1); filter: blur(0); }
}

/* ── Entrada secuenciada: PRIMERO el robot, LUEGO el form (chula) ──
 * Con JS ocultamos logo + card hasta que el robot termina de cargar (o un
 * fallback de seguridad), y entonces entran con animación. Sin JS, todo se
 * ve normal desde el principio (mejora progresiva). */
.meb-js #login h1,
.meb-js .login form { opacity: 0; }

body.meb-login-ready #login h1 {
	animation: meb-login-logo-in 720ms cubic-bezier(0.22, 0.7, 0.2, 1) 40ms both;
}
.login.meb-login-ready form {
	transform-origin: 50% 35%;
	animation: meb-login-card-in 980ms cubic-bezier(0.18, 0.7, 0.2, 1) 220ms both;
}
/* Doble destello que cruza el card al entrar (con leve tinte rojo MEB) */
.login.meb-login-ready form::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: linear-gradient(115deg,
		transparent 30%,
		rgba(255, 255, 255, 0.22) 47%,
		rgba(var(--erp-primary-rgb, 76, 125, 255), 0.16) 51%,
		rgba(255, 255, 255, 0.10) 55%,
		transparent 70%);
	transform: translateX(-140%);
	animation: meb-login-sheen 1500ms ease 720ms 2 both;
	pointer-events: none;
	z-index: 3;
}
@keyframes meb-login-logo-in {
	0%   { opacity: 0; transform: translateY(-22px) scale(0.92) rotate(-1.5deg); filter: blur(3px); }
	70%  { transform: translateY(2px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0)    scale(1)    rotate(0); filter: blur(0); }
}
@keyframes meb-login-sheen {
	0%   { transform: translateX(-140%); }
	55%  { transform: translateX(140%); }
	100% { transform: translateX(140%); }
}

/* Campos del form en cascada (fade) tras aterrizar el card */
.login.meb-login-ready form p { opacity: 0; animation: meb-login-field-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.login.meb-login-ready form p:nth-of-type(1) { animation-delay: 700ms; }
.login.meb-login-ready form p:nth-of-type(2) { animation-delay: 800ms; }
.login.meb-login-ready form p:nth-of-type(3) { animation-delay: 880ms; }
.login.meb-login-ready form p:nth-of-type(4) { animation-delay: 950ms; }
@keyframes meb-login-field-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* ── Labels ── */
.login form p > label,
.login .user-pass-wrap label,
.login .user-login-wrap label {
	display: block !important;
	font-family: var(--meb-mono) !important;
	font-size: 0.62rem !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.16em !important;
	color: var(--meb-muted-2) !important;
	margin-bottom: 0.45rem !important;
}

.login form p {
	position: relative;
	z-index: 1;
	margin-bottom: 0.9rem !important;
	line-height: 1.4;
}

/* ── Inputs con icono ── */
.login .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	width: 100% !important;
	padding: 0.72rem 0.85rem 0.72rem 2.5rem !important;
	font-family: var(--meb-font) !important;
	font-size: 0.92rem !important;
	font-weight: 500 !important;
	color: #fff !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	background-repeat: no-repeat !important;
	background-position: 0.9rem center !important;
	background-size: 16px 16px !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	line-height: 1.3 !important;
	box-sizing: border-box !important;
	outline: none !important;
	transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease !important;
}

/* Mail icon para el login (user/email) */
.login #user_login {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>") !important;
}
/* Lock icon para password */
.login #user_pass,
.login input.password-input {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") !important;
}

.login .input::placeholder,
.login input::placeholder { color: rgba(255, 255, 255, 0.3) !important; }

.login .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: rgba(var(--erp-primary-rgb, 76, 125, 255), 0.5) !important;
	background-color: rgba(255, 255, 255, 0.07) !important;
	box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb, 76, 125, 255), 0.15) !important;
}

/* Contenedor password con botón "ojo" */
.login .wp-pwd { position: relative; }
.login .wp-pwd input { padding-right: 2.8rem !important; }
.login .wp-pwd .wp-hide-pw,
.login .wp-pwd .button {
	position: absolute !important;
	right: 4px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	color: rgba(255, 255, 255, 0.4) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: all 180ms ease !important;
}
.login .wp-pwd .wp-hide-pw:hover,
.login .wp-pwd .wp-hide-pw:focus,
.login .wp-pwd .button:hover,
.login .wp-pwd .button:focus {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.06) !important;
	outline: none !important;
}
.login .wp-pwd .dashicons { color: inherit !important; }

/* ── Remember me ── */
.login .forgetmenot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.1rem !important;
	margin-bottom: 1.1rem !important;
	float: none !important;
}
.login .forgetmenot label {
	font-family: var(--meb-font) !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin: 0 !important;
	cursor: pointer;
}
.login input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	accent-color: var(--meb-rojo);
	border-radius: 4px;
	cursor: pointer;
}

/* ── Submit button (rojo MEB con shine) ── */
.login .submit {
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}
.login .button.button-primary,
.login .button.button-large.button-primary {
	position: relative;
	width: 100% !important;
	height: 40px !important;
	padding: 0 1.2rem !important;
	font-family: var(--meb-font) !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--meb-rojo) !important;
	border: 1px solid transparent !important;
	color: #fff !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform 180ms ease, background 200ms ease !important;
}
.login .button.button-primary:hover {
	background: var(--meb-rojo-d, #D42D43) !important;
}
.login .button.button-primary:active {
	transform: scale(0.97);
	transition: transform 80ms ease !important;
}
.login .button.button-primary:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb, 76, 125, 255), 0.35) !important;
}

/* ── Footer links ── */
.login #nav,
.login #backtoblog,
.login .language-switcher {
	text-align: center;
	padding: 1rem 0 0 !important;
	margin: 0 !important;
	text-shadow: none !important;
}
.login #nav a,
.login #backtoblog a,
.login .language-switcher a {
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: color 180ms ease !important;
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login .language-switcher a:hover {
	color: var(--meb-rojo) !important;
}
.login #nav {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	margin-top: 1.2rem !important;
	padding-top: 0.85rem !important;
}

/* «← volver al sitio» sobra: el sitio ES el panel. «¿Has olvidado la
 * contraseña?» sí se queda: sin él, quien la olvida no tiene salida. */
.login #backtoblog { display: none !important; }
.login #nav { text-align: center; border-top: 0; }

/* ── Mensajes (errores, info, success) ── */
.login .message,
.login .notice,
.login #login_error {
	background: rgba(10, 10, 12, 0.6) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-left: 3px solid var(--meb-rojo) !important;
	border-radius: 10px !important;
	padding: 0.8rem 1rem !important;
	color: rgba(255, 255, 255, 0.8) !important;
	font-size: 0.84rem !important;
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5) !important;
	margin: 0 0 1rem !important;
}
.login .message a, .login .notice a, .login #login_error a { color: var(--meb-rojo) !important; }
.login .notice-success { border-left-color: var(--meb-success) !important; }
.login .notice-warning { border-left-color: var(--meb-warn) !important; }
.login .notice-error,
.login #login_error { border-left-color: var(--meb-rojo) !important; }

/* ── Selección ── */
body.login ::selection { background: var(--meb-rojo); color: #fff; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.login form,
	.login form p,
	.meb-js #login h1,
	.meb-js .login form,
	.meb-login-spot,
	.meb-login-3d { animation: none !important; opacity: 1 !important; transform: none !important; }
	.login form::before { display: none !important; }
}

/* ── Responsive ── */
@media (max-width: 520px) {
	#login { padding: 5vh 1rem 1.5rem; }
	#login h1 a { width: 170px !important; height: 56px !important; }
	.login form { padding: 1.4rem 1.15rem 1.25rem !important; }
}

/* ── Firma de Clickah, debajo del formulario ───────────────────────────── */
.meb-login-clickah { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; display: block; line-height: 0; }
#login .meb-login-clickah { position: static; transform: none; width: max-content; margin: 22px auto 0; }
.meb-login-clickah-logo { height: 22px; width: auto; opacity: 0.55; transition: opacity 0.2s; }
.meb-login-clickah:hover .meb-login-clickah-logo { opacity: 0.9; }


/* ── Sin logo: el nombre de la escuela, en texto ─────────────────────────── */
body.meb-sin-logo #login h1 a {
	background-image: none !important;
	text-indent: 0;
	width: auto !important;
	height: auto !important;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--meb-text) !important;
	line-height: 1.2;
}

/* ── Aviso de Bloq Mayús ─────────────────────────────────────────────────── */
.login .meb-login-mayus {
	margin: -0.4rem 0 0.9rem !important;
	font-size: 0.74rem;
	color: #fbbf24;
}
.login .meb-login-mayus[hidden] { display: none !important; }

/* ── Móvil: el formulario ocupa el ancho y respira ───────────────────────── */
@media (max-width: 480px) {
	#login { width: 100%; max-width: 100%; box-sizing: border-box; padding: 6vh 16px 2rem; }
	.login form { box-sizing: border-box; width: 100%; }
	.login form { padding: 1.5rem 1.2rem 1.3rem !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Rediseño 9-10-2026 — más legible y con más presencia
 *
 * Lo de antes era bonito de lejos y difícil de usar: etiquetas de 10 px en
 * mayúsculas de máquina de escribir, un recuadro estrecho perdido a la
 * izquierda y el robot comiéndose la pantalla. Ahora: el recuadro manda, los
 * textos se leen, el color de la escuela da el tono y el robot acompaña.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Un halo del color de la escuela detrás del formulario. */
body.login::before {
	content: "";
	position: fixed;
	z-index: 0;
	left: clamp(-10vw, -4vw, 0px);
	top: 50%;
	width: min(820px, 90vw);
	height: min(820px, 90vw);
	transform: translateY(-50%);
	background: radial-gradient(closest-side, rgba(var(--erp-primary-rgb, 76, 125, 255), 0.16), transparent 72%);
	pointer-events: none;
}

/* El robot acompaña: más estrecho y algo apagado, para que no compita. */
@media (min-width: 901px) {
	.meb-login-3d { opacity: 0.9; }
	#login { max-width: 440px; width: 440px; margin-left: clamp(5vw, 10vw, 14rem); }
}

/* Cabecera: logo (o nombre) y el saludo. */
#login h1 { margin: 0 0 1.1rem !important; width: auto !important; text-align: left; }
#login h1 a { margin: 0 !important; background-position: left center !important; }
#login h1::after { display: none; }
body.meb-sin-logo #login h1 a { display: block; text-align: left; font-size: 1.05rem; font-weight: 600; opacity: 0.75; letter-spacing: 0.01em; }

.meb-login-saludo { margin: 0 0 1.25rem; }
.meb-login-saludo strong { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.15; }
.meb-login-saludo span { display: block; margin-top: 0.35rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.62); }

/* El recuadro, con aire. */
.login form {
	padding: 1.7rem 1.6rem 1.5rem !important;
	border-radius: 18px !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	background: rgba(16, 16, 19, 0.72) !important;
}

/* Etiquetas que se leen. */
.login form p > label,
.login .user-pass-wrap label,
.login .user-login-wrap label {
	font-family: var(--meb-font) !important;
	font-size: 0.84rem !important;
	font-weight: 600 !important;
	text-transform: none;
	letter-spacing: 0 !important;
	color: rgba(255, 255, 255, 0.82) !important;
	margin-bottom: 0.4rem !important;
}

/* Campos más altos y cómodos. */
.login .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	padding-top: 0.85rem !important;
	padding-bottom: 0.85rem !important;
	font-size: 1rem !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background-color: rgba(255, 255, 255, 0.05) !important;
	border-radius: 12px !important;
}
.login form p { margin-bottom: 1rem !important; }
.login .forgetmenot label { font-size: 0.86rem !important; color: rgba(255, 255, 255, 0.72) !important; }

/* Botón grande, en minúsculas y con el color de la escuela. */
.login .button.button-primary,
.login .button.button-large.button-primary {
	height: 48px !important;
	font-size: 0.98rem !important;
	text-transform: none;
	letter-spacing: 0.01em;
	border-radius: 12px !important;
	box-shadow: 0 10px 30px -10px rgba(var(--erp-primary-rgb, 76, 125, 255), 0.7) !important;
}

/* «¿Has olvidado la contraseña?» y la firma, discretos y centrados. */
.login #nav { margin-top: 1.1rem !important; padding-top: 0 !important; }
.login #nav a { font-size: 0.86rem !important; color: rgba(255, 255, 255, 0.6) !important; }
.login #nav a:hover { color: #fff !important; }

/* Los mensajes (error, «has salido») con el mismo radio y legibles. */
.login .message,
.login .notice,
.login #login_error { border-radius: 12px !important; font-size: 0.9rem !important; }

@media (max-width: 900px) {
	#login h1, .meb-login-saludo, body.meb-sin-logo #login h1 a { text-align: center; }
	#login h1 { margin: 0 auto 1.1rem !important; }
	#login h1 a { background-position: center !important; margin: 0 auto !important; }
	body.login::before { left: 50%; transform: translate(-50%, -50%); }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Fondos del acceso: animación de baile (por defecto), foto, vídeo o robot.
 * Ocupan la mitad derecha en escritorio, como el robot; en móvil no se ven.
 * ════════════════════════════════════════════════════════════════════════════ */
.meb-login-media {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 56%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: meb-login-3d-in 900ms ease-out 200ms forwards;
}
/* Foto y vídeo: con velo, para que el formulario siga mandando y se funda con el negro. */
.meb-login-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.meb-login-fondo-foto .meb-login-media::after,
.meb-login-fondo-video .meb-login-media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, #0A0A0B 0%, rgba(10,10,11,.55) 35%, rgba(10,10,11,.35) 100%);
}
@media (max-width: 900px) { .meb-login-media { display: none; } }

/* La bailarina */
.meb-login-baile { display: flex; align-items: center; justify-content: center; }
.meb-baile { width: min(100%, 640px); height: auto; max-height: 92vh; overflow: visible; }
.meb-baile * { transform-box: view-box; }
.mb-foco { animation: mb-foco 6s ease-in-out infinite alternate; }
.mb-suelo { animation: mb-latido 0.9s ease-in-out infinite alternate; transform-origin: 300px 590px; }
.mb-bailarina { animation: mb-vaiven 3.2s ease-in-out infinite alternate; transform-origin: 300px 560px; }
.mb-brazo-d { animation: mb-brazo-d 1.6s ease-in-out infinite alternate; transform-origin: 317px 246px; }
.mb-brazo-i { animation: mb-brazo-i 1.6s ease-in-out infinite alternate; transform-origin: 283px 246px; }
.mb-pierna-i { animation: mb-pierna 3.2s ease-in-out infinite alternate; transform-origin: 294px 386px; }
.mb-falda { animation: mb-falda 1.6s ease-in-out infinite alternate; transform-origin: 300px 344px; }
.mb-notas text { font-size: 30px; opacity: 0; animation: mb-nota 6s linear infinite; }
.mb-notas text:nth-child(2) { animation-delay: 1.5s; }
.mb-notas text:nth-child(3) { animation-delay: 3s; }
.mb-notas text:nth-child(4) { animation-delay: 4.5s; }
@keyframes mb-foco   { from { opacity: .75; } to { opacity: 1; } }
@keyframes mb-latido { from { transform: scale(.94); opacity: .7; } to { transform: scale(1.04); opacity: 1; } }
@keyframes mb-vaiven { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes mb-brazo-d { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes mb-brazo-i { from { transform: rotate(10deg); } to { transform: rotate(-12deg); } }
@keyframes mb-pierna  { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes mb-falda   { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
@keyframes mb-nota {
	0%   { opacity: 0; transform: translateY(0); }
	15%  { opacity: .85; }
	80%  { opacity: .5; }
	100% { opacity: 0; transform: translateY(-160px); }
}
@media (prefers-reduced-motion: reduce) {
	.meb-baile *, .meb-baile { animation: none !important; }
	.meb-baile animate { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Acceso, tercera vuelta (9-10-2026): Clickah con presencia y acabado fino.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Marca del producto arriba a la izquierda. */
.meb-login-marca {
	position: fixed;
	top: 28px;
	left: clamp(20px, 4vw, 56px);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	line-height: 0;
}
.meb-login-marca-logo { height: 40px; width: auto; display: block; filter: drop-shadow(0 4px 18px rgba(0,0,0,.45)); }
.meb-login-marca-txt {
	line-height: 1.2;
	font-size: 0.82rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.meb-login-marca:hover .meb-login-marca-txt { color: rgba(255, 255, 255, 0.8); }

/* Firma al pie. */
.meb-login-pie {
	position: fixed;
	left: clamp(20px, 4vw, 56px);
	bottom: 18px;
	z-index: 6;
	margin: 0;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.38);
}
/* La firma pequeña de debajo del formulario sobra con la marca arriba. */
.meb-login-clickah { display: none !important; }

/* Fondo: una cuadrícula muy tenue en la mitad del formulario, que se apaga
 * hacia el robot. Da textura sin competir. */
body.login::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse 55% 70% at 22% 50%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 55% 70% at 22% 50%, #000 30%, transparent 75%);
}
/* El robot se funde con el fondo por la izquierda: sin corte. */
.meb-login-3d::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 28%;
	background: linear-gradient(90deg, #0A0A0B, transparent);
	z-index: 4;
	pointer-events: none;
}

/* Recuadro con borde fino que brilla en el color de la escuela. */
.login form {
	padding: 2rem 1.8rem 1.7rem !important;
	border: 1px solid transparent !important;
	background:
		linear-gradient(rgba(16,16,19,.86), rgba(16,16,19,.86)) padding-box,
		linear-gradient(140deg, rgba(var(--erp-primary-rgb, 76,125,255), .55), rgba(255,255,255,.06) 38%, rgba(255,255,255,.04) 70%, rgba(var(--erp-primary-rgb, 76,125,255), .25)) border-box !important;
	box-shadow: 0 30px 80px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.2) !important;
}
.meb-login-saludo strong { font-size: 2rem; }

/* «Recordarme» y «¿Has olvidado…?» en la misma fila. */
.login .forgetmenot { justify-content: flex-start; flex-wrap: wrap; row-gap: 6px; }
.login .meb-login-olvido { margin-left: auto; font-size: 0.84rem; color: rgba(255,255,255,.62); text-decoration: none; }
.login .meb-login-olvido:hover { color: #fff; text-decoration: underline; }

/* Botón con un degradado sutil del color de la escuela. */
.login .button.button-primary,
.login .button.button-large.button-primary {
	background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)) , var(--meb-rojo) !important;
}

@media (max-width: 900px) {
	.meb-login-marca { position: relative; z-index: 2; display: flex; justify-content: center; margin: 28px auto 26px; }
	#login { padding-top: 4vh !important; }
	.meb-login-marca-logo { height: 32px; }
	.meb-login-pie { position: static; text-align: center; padding: 18px 16px 24px; }
	body.login::after { -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 30%, transparent 75%); }
}

/* Pantallas medianas: el robot se aparta para no pisar el recuadro. */
@media (min-width: 901px) and (max-width: 1280px) {
	.meb-login-3d { width: 46%; right: -6%; }
}


/* El robot aparece cuando de verdad ha cargado, no antes (ver el JS del pie). */
.meb-login-3d { animation: none !important; opacity: 0; transition: opacity 700ms ease; }
.meb-login-3d.is-listo { opacity: 0.9; }

/* Sin logo no hay nada que hacer brillar: fuera la animación y su máscara. */
body.meb-sin-logo #login h1 a { animation: none !important; filter: none !important; }
body.meb-sin-logo #login h1 a::after { display: none !important; }


/* ════════════════════════════════════════════════════════════════════════════
 * Sin robot (por defecto desde el 9-10-2026): acceso centrado y dos luces del
 * color de la escuela que se mueven muy despacio. Nada que descargar.
 * ════════════════════════════════════════════════════════════════════════════ */
.meb-login-luces { position: absolute; inset: 0; overflow: hidden; }
.meb-login-luces span {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .55;
	will-change: transform;
}
.meb-login-luces span:nth-child(1) {
	width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax;
	background: radial-gradient(circle, rgba(var(--erp-primary-rgb, 76,125,255), .55), transparent 65%);
	animation: meb-luz-a 26s ease-in-out infinite alternate;
}
.meb-login-luces span:nth-child(2) {
	width: 46vmax; height: 46vmax; right: -12vmax; bottom: -20vmax;
	background: radial-gradient(circle, rgba(var(--erp-primary-rgb, 76,125,255), .38), transparent 65%);
	animation: meb-luz-b 32s ease-in-out infinite alternate;
}
@keyframes meb-luz-a { to { transform: translate(10vmax, 8vmax) scale(1.08); } }
@keyframes meb-luz-b { to { transform: translate(-8vmax, -6vmax) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .meb-login-luces span { animation: none; } }

/* Sin escena a la derecha, el acceso va en el centro, también en escritorio. */
@media (min-width: 901px) {
	body.login:has(.meb-login-fondo-ninguno) #login {
		margin: 0 auto !important;
		width: 440px;
		max-width: 440px;
	}
	body.login:has(.meb-login-fondo-ninguno) #login h1,
	body.login:has(.meb-login-fondo-ninguno) .meb-login-saludo,
	body.login:has(.meb-login-fondo-ninguno).meb-sin-logo #login h1 a { text-align: center; }
	body.login:has(.meb-login-fondo-ninguno) #login h1 a { margin: 0 auto !important; background-position: center !important; }
	/* La cuadrícula, centrada con el acceso. */
	body.login:has(.meb-login-fondo-ninguno)::after {
		-webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 25%, transparent 72%);
		mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 25%, transparent 72%);
	}
	/* El halo de antes, a la izquierda, sobra con las luces. */
	body.login:has(.meb-login-fondo-ninguno)::before { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Modo claro (si en el panel se eligió claro, el acceso también lo es).
 * ════════════════════════════════════════════════════════════════════════════ */
html:not([data-theme="light"]) .meb-logo-en-claro,
html[data-theme="light"] .meb-logo-en-oscuro { display: none !important; }

html[data-theme="light"] body.login { background: #F5F5F7; color: #1D1D1F; }
html[data-theme="light"] body.login::after {
	background-image:
		linear-gradient(rgba(15,15,20,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,15,20,.05) 1px, transparent 1px);
}
html[data-theme="light"] .meb-login-luces span { opacity: .35; }
html[data-theme="light"] .meb-login-marca-logo { filter: none; }
html[data-theme="light"] .meb-login-marca-txt { color: rgba(15,15,20,.55); border-left-color: rgba(15,15,20,.15); }
html[data-theme="light"] .meb-login-pie { color: rgba(15,15,20,.45); }
html[data-theme="light"] body.meb-sin-logo #login h1 a { color: #1D1D1F !important; }
html[data-theme="light"] .meb-login-saludo strong { color: #111114; }
html[data-theme="light"] .meb-login-saludo span { color: rgba(15,15,20,.6); }
html[data-theme="light"] .login form {
	background:
		linear-gradient(#FFFFFF, #FFFFFF) padding-box,
		linear-gradient(140deg, rgba(var(--erp-primary-rgb, 76,125,255), .45), rgba(15,15,20,.08) 38%, rgba(15,15,20,.06) 70%, rgba(var(--erp-primary-rgb, 76,125,255), .2)) border-box !important;
	box-shadow: 0 24px 60px -28px rgba(15,15,30,.28), 0 1px 2px rgba(15,15,30,.06) !important;
}
html[data-theme="light"] .login form p > label,
html[data-theme="light"] .login .user-pass-wrap label,
html[data-theme="light"] .login .user-login-wrap label { color: #2A2A2E !important; }
html[data-theme="light"] .login .input,
html[data-theme="light"] .login input[type="text"],
html[data-theme="light"] .login input[type="password"],
html[data-theme="light"] .login input[type="email"] {
	color: #111114 !important;
	background-color: #FAFAFB !important;
	border-color: rgba(15,15,20,.14) !important;
}
html[data-theme="light"] .login input::placeholder { color: rgba(15,15,20,.35) !important; }
html[data-theme="light"] .login #user_login {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-opacity='0.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>") !important;
}
html[data-theme="light"] .login #user_pass,
html[data-theme="light"] .login input.password-input {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-opacity='0.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") !important;
}
html[data-theme="light"] .login .wp-pwd .wp-hide-pw,
html[data-theme="light"] .login .wp-pwd .button { color: rgba(15,15,20,.45) !important; }
html[data-theme="light"] .login .forgetmenot label { color: rgba(15,15,20,.7) !important; }
html[data-theme="light"] .login .meb-login-olvido,
html[data-theme="light"] .login #nav a { color: rgba(15,15,20,.6) !important; }
html[data-theme="light"] .login .meb-login-olvido:hover { color: #111114 !important; }
html[data-theme="light"] .login .message,
html[data-theme="light"] .login .notice,
html[data-theme="light"] .login #login_error { background: #fff !important; color: #1D1D1F !important; border-color: rgba(15,15,20,.1) !important; }
html[data-theme="light"] .meb-login-3d::before { background: linear-gradient(90deg, #F5F5F7, transparent); }

/* ── El logo de la escuela, protagonista (9-10-2026) ────────────────────────
 * Más grande y con aire: es lo primero que se ve al entrar. Un halo muy suave
 * de su color detrás le da presencia sin recuadro. */
#login h1 { margin-bottom: 2rem !important; }
#login h1 a {
	width: min(380px, 80vw) !important;
	height: 120px !important;
	filter: drop-shadow(0 8px 30px rgba(var(--erp-primary-rgb, 76, 125, 255), 0.35)) !important;
}
@media (max-width: 480px) {
	#login h1 a { height: 92px !important; }
}
/* Sin logo, el nombre de la escuela también crece. */
body.meb-sin-logo #login h1 a { font-size: 1.6rem !important; opacity: 0.9 !important; height: auto !important; width: auto !important; }


/* ════════════════════════════════════════════════════════════════════════════
 * Dos mitades (9-10-2026): formulario a la izquierda, logo de la escuela en
 * grande a la derecha. Solo con el fondo por defecto («ninguno»).
 * ════════════════════════════════════════════════════════════════════════════ */
.meb-login-escaparate { display: none; }

@media (min-width: 901px) {
	/* La mitad derecha: luces de la escuela, cuadrícula y el logo. */
	.meb-login-fondo-ninguno .meb-login-escaparate {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 16px; right: 16px; bottom: 16px;
		width: calc(52% - 16px);
		border-radius: 28px;
		overflow: hidden;
		background:
			radial-gradient(120% 90% at 20% 10%, rgba(var(--erp-primary-rgb, 76,125,255), .35), transparent 60%),
			radial-gradient(90% 80% at 90% 100%, rgba(var(--erp-primary-rgb, 76,125,255), .22), transparent 60%),
			#0E0E11;
		border: 1px solid rgba(255,255,255,.06);
		pointer-events: none;
	}
	.meb-login-fondo-ninguno .meb-login-escaparate::before {
		content: "";
		position: absolute; inset: 0;
		background-image:
			linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
		background-size: 44px 44px;
		-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
		mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
	}
	/* Las luces, dentro del escaparate y no por toda la pantalla. */
	.meb-login-fondo-ninguno > .meb-login-luces { display: none; }
	.meb-login-escaparate .meb-login-luces { position: absolute; inset: 0; }

	.meb-login-escaparate-marca { position: relative; z-index: 2; text-align: center; padding: 0 8%; }
	.meb-login-escaparate-logo {
		display: block;
		width: min(440px, 70%);
		max-height: 220px;
		height: auto;
		margin: 0 auto;
		object-fit: contain;
		filter: drop-shadow(0 18px 50px rgba(0,0,0,.45));
	}
	/* Sin logo, las iniciales del componente, grandes. */
	.meb-login-escaparate .meb-logo-initials {
		display: inline-flex; align-items: center; justify-content: center;
		width: 160px; height: 160px; border-radius: 36px;
		font-size: 3.4rem; font-weight: 700; color: #fff;
		background: rgba(var(--erp-primary-rgb, 76,125,255), .25);
		border: 1px solid rgba(255,255,255,.12);
	}
	.meb-login-escaparate-nombre {
		margin: 22px 0 0;
		font-size: 1.05rem; font-weight: 500; letter-spacing: .01em;
		color: rgba(255,255,255,.7);
	}

	/* El formulario, en la mitad izquierda y centrado en ella. */
	body.login:has(.meb-login-fondo-ninguno) #login {
		margin: 0 !important;
		margin-left: calc((48% - 440px) / 2) !important;
		width: 440px; max-width: 440px;
	}
	/* El logo pequeño de encima del saludo sobra: el grande está a la derecha. */
	body.login:has(.meb-login-fondo-ninguno) #login h1 { display: none !important; }
	body.login:has(.meb-login-fondo-ninguno) .meb-login-saludo { text-align: left; }
	body.login:has(.meb-login-fondo-ninguno)::after {
		-webkit-mask-image: radial-gradient(ellipse 40% 60% at 24% 50%, #000 20%, transparent 75%);
		mask-image: radial-gradient(ellipse 40% 60% at 24% 50%, #000 20%, transparent 75%);
	}
}
/* Pantallas medianas: el escaparate algo más estrecho. */
@media (min-width: 901px) and (max-width: 1180px) {
	.meb-login-fondo-ninguno .meb-login-escaparate { width: calc(46% - 16px); }
	body.login:has(.meb-login-fondo-ninguno) #login { margin-left: calc((54% - 400px) / 2) !important; width: 400px; max-width: 400px; }
}

/* Claro: el escaparate en papel con las luces suaves. */
html[data-theme="light"] .meb-login-fondo-ninguno .meb-login-escaparate {
	background:
		radial-gradient(120% 90% at 20% 10%, rgba(var(--erp-primary-rgb, 76,125,255), .18), transparent 60%),
		radial-gradient(90% 80% at 90% 100%, rgba(var(--erp-primary-rgb, 76,125,255), .12), transparent 60%),
		#FFFFFF;
	border-color: rgba(15,15,20,.08);
	box-shadow: 0 24px 60px -30px rgba(15,15,30,.25);
}
html[data-theme="light"] .meb-login-escaparate::before {
	background-image:
		linear-gradient(rgba(15,15,20,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,15,20,.05) 1px, transparent 1px) !important;
}
html[data-theme="light"] .meb-login-escaparate-nombre { color: rgba(15,15,20,.6); }
html[data-theme="light"] .meb-login-escaparate-logo { filter: drop-shadow(0 14px 30px rgba(15,15,30,.15)); }

/* Minimalista: entrada con un fundido corto, sin destello ni giro 3D. */
.login.meb-login-ready form::before { display: none !important; }
.login.meb-login-ready form { animation: meb-login-fundido 420ms ease-out 60ms both !important; }
body.meb-login-ready #login h1 { animation: meb-login-fundido 420ms ease-out both !important; }
@keyframes meb-login-fundido { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* El escaparate, sin caja: el fondo es el de toda la pantalla (luces que se
 * mueven y cuadrícula) y a la derecha solo el logo, grande y limpio.
 * Minimalista en el logo, no en el fondo (Alex, 9-10-2026). */
@media (min-width: 901px) {
	.meb-login-fondo-ninguno .meb-login-escaparate {
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0;
		top: 0; right: 0; bottom: 0;
		width: 52%;
	}
	.meb-login-fondo-ninguno .meb-login-escaparate::before { display: none; }
	.meb-login-fondo-ninguno > .meb-login-luces { display: block; }
	.meb-login-escaparate-logo { filter: none !important; width: min(460px, 72%); }
	.meb-login-escaparate-nombre { display: none; }
	/* Sin logo: el nombre de la escuela en grande, sin baldosa de iniciales. */
	.meb-login-escaparate .meb-logo-initials { display: none; }
	body.meb-sin-logo .meb-login-escaparate-nombre {
		display: block; margin: 0;
		font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em;
		color: rgba(255,255,255,.88);
	}
	/* La cuadrícula, por toda la pantalla. */
	body.login:has(.meb-login-fondo-ninguno)::after {
		-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 30%, transparent 80%);
		mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 30%, transparent 80%);
	}
}
html[data-theme="light"] .meb-login-fondo-ninguno .meb-login-escaparate { background: none !important; box-shadow: none !important; }
html[data-theme="light"] body.meb-sin-logo .meb-login-escaparate-nombre { color: rgba(15,15,20,.85); }

/* Móvil y tableta: la marca va en el flujo, centrada y sin el desplazamiento
 * de cuando va fija arriba a la izquierda (se salía 24 px por la derecha y
 * dejaba hacer scroll lateral). */
@media (max-width: 900px) {
	.meb-login-marca { left: auto !important; top: auto !important; width: max-content; max-width: calc(100% - 32px); }
	html, body.login { overflow-x: hidden; }
	/* En tableta, el bloque centrado en vertical en vez de pegado arriba. */
	body.login { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; }
	#login { padding-top: 0 !important; }
}