/* UmbralEduca – Pantalla de acceso (wp-login.php) */

body.login {
	position: relative;
	min-height: 100vh;
	overflow-x: hidden;
	background: linear-gradient(135deg, #2B2B5C 0%, #1A1A4E 100%) fixed;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #1E2230;
}

#login {
	position: relative; z-index: 1;
	width: 420px; max-width: calc(100% - 32px);
	padding: 6vh 0 24px;
}

/* Logo */
.login h1 a {
	width: 190px; height: 76px; margin: 0 auto 26px;
	background-size: contain; background-position: center; background-repeat: no-repeat;
	transition: transform .2s;
}
.login h1 a:hover { transform: scale(1.04); }
.login h1 a:focus { box-shadow: none; outline: 2px solid #1BD2DB; outline-offset: 6px; border-radius: 6px; }

/* Encabezado de la tarjeta */
.umbral-login-intro {
	background: #fff; border-radius: 20px 20px 0 0; padding: 30px 32px 4px; text-align: left;
	border-top: 6px solid #1BD2DB;
}
.umbral-login-intro h2 {
	font-family: Barlow, sans-serif; font-weight: 800; font-size: 28px; line-height: 1.1; color: #2B2B5C; margin: 0 0 8px; letter-spacing: -.01em;
}
.umbral-login-intro p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: #5C6578; }

/* Formularios */
.login form {
	margin: 0; padding: 22px 32px 30px; border: 0; border-radius: 0 0 20px 20px;
	background: #fff; box-shadow: 0 34px 44px -14px rgba(0, 0, 0, .35); overflow: visible;
}
.login h1 + form { border-radius: 20px; border-top: 6px solid #1BD2DB; }

.login label { font-size: 14px; font-weight: 600; color: #2B2B5C; margin-bottom: 6px; display: inline-block; }
.login form .input,
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
	min-height: 52px; margin: 0 0 18px; padding: 10px 16px;
	font-family: Inter, sans-serif; font-size: 16px; color: #1E2230;
	background: #F4F6F8; border: 2px solid transparent; border-radius: 12px; box-shadow: none;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.login form .input:hover { background: #fff; border-color: #C7EEF1; }
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	background: #fff; border-color: #1BD2DB; box-shadow: 0 0 0 4px rgba(27, 210, 219, .2); outline: none;
}
.login .wp-pwd { position: relative; }
.login .wp-pwd .input { padding-right: 56px; }
.login .button.wp-hide-pw { height: 52px; min-height: 52px; width: 52px; right: 0; top: 0; color: #2B2B5C; border-radius: 0 12px 12px 0; }
.login .button.wp-hide-pw:hover, .login .button.wp-hide-pw:focus { color: #14A8B0; background: transparent; box-shadow: none; }
.login .button.wp-hide-pw .dashicons { top: .5rem; }

.login .forgetmenot { float: none; margin: 0 0 18px; }
.login .forgetmenot label { font-weight: 500; color: #5C6578; }
.login input[type="checkbox"] {
	width: 20px; height: 20px; border-radius: 6px; border: 2px solid #B8C1CE; box-shadow: none; margin-right: 6px;
}
.login input[type="checkbox"]:checked { background: #1BD2DB; border-color: #1BD2DB; }
.login input[type="checkbox"]:checked::before { filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(1800%) hue-rotate(215deg); }
.login input[type="checkbox"]:focus { box-shadow: 0 0 0 4px rgba(27, 210, 219, .3); border-color: #1BD2DB; }

/* Botón principal */
.login .button-primary,
.login .submit .button-primary,
#login form p.submit .button-primary {
	float: none; width: 100%; min-height: 54px; height: auto; padding: 14px 28px;
	background: #1BD2DB; border: 0; border-radius: 50px; box-shadow: 0 8px 20px rgba(27, 210, 219, .3); text-shadow: none;
	color: #2B2B5C; font-family: Inter, sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .02em;
	transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.login .button-primary:hover,
.login .button-primary:focus,
#login form p.submit .button-primary:hover {
	background: #2B2B5C; color: #fff; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(27, 210, 219, .5);
}
.login .button-primary:active { transform: translateY(-1px); }
.login p.submit { margin: 0; }

/* Botones secundarios (p. ej. generar contraseña) */
.login .button:not(.button-primary):not(.wp-hide-pw) {
	border-radius: 50px; border: 2px solid #EBEBF7; color: #2B2B5C; background: #fff; font-weight: 700; transition: all .2s;
}
.login .button:not(.button-primary):not(.wp-hide-pw):hover { background: #2B2B5C; border-color: #2B2B5C; color: #fff; }

/* Mensajes y errores */
.login .message,
.login .notice,
.login #login_error {
	margin: 0; padding: 14px 32px; border: 0; box-shadow: none; background: #fff; font-size: 14px; line-height: 1.5; color: #1E2230;
}
.login .message,
.login .notice-info,
.login .notice-success { background: #fff; border-left: 0; }
.login .message > p,
.login .notice > p { margin: 0; padding: 12px 16px; border-radius: 12px; background: #D6F7F9; border-left: 5px solid #1BD2DB; }
.login #login_error > p,
.login .notice-error > p { background: #FFF1EF; border-left-color: #C8372D; color: #8F2219; }
.login #login_error { border-left: 0; }
.login h1 + .message, .login h1 + .notice, .login h1 + #login_error { border-radius: 20px 20px 0 0; border-top: 6px solid #1BD2DB; padding-top: 24px; }
.login .umbral-login-intro + .message, .login .umbral-login-intro + .notice { border-top: 0; border-radius: 0; }
.login a { color: #14A8B0; font-weight: 600; }
.login .message a, .login #login_error a { color: inherit; font-weight: 700; }

/* Enlaces bajo la tarjeta */
.login #nav {
	display: flex; flex-direction: column-reverse; align-items: center; gap: 14px;
	margin: 22px 0 0; padding: 0; font-size: 0; text-align: center;
}
.login #nav a { font-size: 15px; color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; transition: color .2s; }
.login #nav a:hover { color: #1BD2DB; }
.login .umbral-login-cta {
	display: block; width: 100%; box-sizing: border-box; padding: 16px 20px; border-radius: 16px;
	background: rgba(27, 210, 219, .1); border: 2px solid rgba(27, 210, 219, .45);
	font-size: 15px; color: rgba(255, 255, 255, .9); line-height: 1.4; transition: background .2s, border-color .2s, transform .2s;
}
.login .umbral-login-cta:hover { background: rgba(27, 210, 219, .18); border-color: #1BD2DB; transform: translateY(-2px); }
.login #nav .umbral-login-cta a { color: #1BD2DB; font-weight: 800; }
.login #nav .umbral-login-cta a:hover { color: #fff; }

.login #backtoblog { display: none; }

.login .privacy-policy-page-link { margin: 26px 0 0; text-align: center; }
.login .privacy-policy-page-link a { color: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 500; }
.login .privacy-policy-page-link a:hover { color: #1BD2DB; }

.umbral-login-foot {
	position: relative; z-index: 1; text-align: center; margin: 10px 0 32px;
	font-size: 13px; color: rgba(255, 255, 255, .6); letter-spacing: .02em;
}
.umbral-login-foot strong { color: #fff; }

.login .language-switcher { display: none; }

/* Indicador de fortaleza de contraseña (restablecer) */
.login #pass-strength-result { border-radius: 10px; border-width: 2px; margin-bottom: 14px; }
.login .indicator-hint, .login .description { color: #5C6578; font-size: 13px; }

@media (max-width: 480px) {
	#login { padding-top: 32px; }
	.umbral-login-intro { padding: 26px 22px 2px; }
	.login form { padding: 18px 22px 26px; }
	.login .message, .login .notice, .login #login_error { padding-left: 22px; padding-right: 22px; }
	.umbral-login-intro h2 { font-size: 24px; }
}
