/*
 * 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
 * #FF3D50, 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: "Panel interno · acceso autorizado";
	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(255, 61, 80, 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(255, 61, 80, 0.5) !important;
	background-color: rgba(255, 255, 255, 0.07) !important;
	box-shadow: 0 0 0 3px rgba(255, 61, 80, 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(255, 61, 80, 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;
}

/* Ocultar la línea separadora + "¿Has olvidado tu contraseña?" (#nav) y el
 * enlace "← volver al sitio" (#backtoblog) bajo el formulario. */
.login #nav,
.login #backtoblog { display: none !important; }

/* ── 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; }
}