/*
 * Finaurum — Login de Alumno (My Account, page id 43, guest view).
 *
 * Card renderizada por woocommerce/myaccount/form-login.php (wrapper, sin
 * cambios de fondo) + tutor/login-form.php (login NATIVO de Tutor LMS,
 * reemplazo del form de WooCommerce — Ronda "login-tutor-nativo",
 * 2026-07-27, revierte la decision de Ronda 11 de mantener Woo). El
 * header/footer del sitio (Elementor Theme Builder) ya envuelve la pagina
 * 43 como a cualquier pagina normal — no se toca aca.
 *
 * Enqueue condicional en functions.php: is_account_page() (WooCommerce helper).
 * Mockup: https://finaurum-459965135674.us-east1.run.app/ (CTA "Ingresar" del
 * header). Todos los valores de abajo fueron medidos con getComputedStyle
 * 1:1 contra el mockup en vivo (1440px) — ver Contexto_Finaurum.md, Ronda
 * "login-tutor-nativo" (2026-07-27), para la tabla completa.
 */

/*
 * Fix fidelidad mockup (Agente Gestor Web, 2026-07-27): el theme (Hello
 * Elementor) imprime su .page-header/.entry-title nativo ("My account",
 * titulo real de la pagina 43) ANTES del shortcode de WooCommerce. El
 * mockup de referencia no tiene ese titulo -- se oculta SOLO en la vista de
 * invitado (login) para no tocar la vista ya logueada de /my-account/, que
 * queda fuera de alcance de esta tarea.
 */
body.woocommerce-account:not(.logged-in) .page-header {
	display: none;
}

/*
 * Mismo criterio para /tutor-login/ (post 351, shortcode [tutor_login]):
 * Hello Elementor imprime su .page-header/.entry-title nativo ("Tutor
 * Login", el post_title real) antes del shortcode -- el mockup no lo tiene.
 * Agregado Agente Gestor Web, 2026-07-27 (ronda "ingresar-tutor-login").
 * El override tutor/shortcode/tutor-login.php ya redirige a un usuario
 * logueado a otra plantilla (nunca ve este form), pero se deja el mismo
 * guard :not(.logged-in) por consistencia con la regla de arriba.
 */
body.page-id-351:not(.logged-in) .page-header {
	display: none;
}

/*
 * Full-bleed (Ronda "login-tutor-nativo", 2026-07-27): el mockup tiene el
 * fondo crema + los circulos decorativos ocupando TODO el ancho de la
 * ventana (section w-full bg-[#FDFDFD]), no solo un contenedor centrado.
 * Truco vw (ya usado en otras plantillas de este theme) para escapar el
 * max-width del contenedor de la pagina sin tocar el Theme Builder.
 * Antes: .fin-login-wrap quedaba contenido a max-width:1360px con su propio
 * fondo #fdfdfd — el sitio (fondo #ffffff, 2 unidades RGB mas claro) se
 * asomaba a los costados como una costura vertical visible.
 */
.fin-login-wrap {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	padding: 64px 16px;
	display: flex;
	justify-content: center;
	background: var(--fin-bg, #fdfdfd);
}

/*
 * Circulos decorativos: 2, tamaño y color DISTINTO cada uno (medido del
 * mockup) — no simetricos como la version anterior (Ronda 5, ambos navy).
 */
.fin-login-wrap::before,
.fin-login-wrap::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.fin-login-wrap::before {
	top: 10%;
	left: 5%;
	width: 384px;
	height: 384px;
	border: 1px solid rgba(251, 211, 141, 0.2);
}
.fin-login-wrap::after {
	bottom: 10%;
	right: 5%;
	width: 400px;
	height: 400px;
	border: 1px solid rgba(0, 144, 84, 0.1);
}
@media (max-width: 700px) {
	.fin-login-wrap::before,
	.fin-login-wrap::after {
		width: 260px;
		height: 260px;
	}
}

.fin-login-card {
	position: relative;
	z-index: 1;
	background: #ffffff;
	width: 100%;
	max-width: 448px;
	border-radius: 24px;
	border: 1px solid rgba(12, 60, 96, 0.05);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
	padding: 32px;
	text-align: center;
}
@media (min-width: 640px) {
	.fin-login-card { padding: 40px; }
}

.fin-login-icon {
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	background: rgba(0, 144, 84, 0.1);
	color: var(--fin-verde);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
}

.fin-login-title {
	font-family: var(--fin-font-heading);
	font-weight: 800;
	font-size: 24px;
	color: var(--fin-navy);
	margin: 0 0 32px;
}
@media (min-width: 640px) {
	.fin-login-title { font-size: 30px; }
}

/* Errores nativos de Tutor LMS (Ajax::process_tutor_login(), transient
   tutor_login_errors) — pintados por tutor/login-form.php. Extendido
   (Agente Gestor Web, 2026-07-28, ronda "retrieve-password") con el
   grupo generico .fin-login-alert -- mismo box model, reusado por los
   overrides tutor/template-part/{retrieve-password,form-retrieve-password}.php
   para sus 3 variantes (danger/success/warning) sin duplicar reglas. */
.fin-login-error,
.fin-login-alert {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
}
.fin-login-error,
.fin-login-alert-danger {
	background: #fde8e8;
	color: #dc2626;
}
.fin-login-error strong,
.fin-login-alert strong { font-weight: 800; }
.fin-login-error a,
.fin-login-alert a { color: inherit; text-decoration: underline; font-weight: 700; }
.fin-login-alert p { margin: 0; }
.fin-login-alert p + p { margin-top: 8px; }

/* Variante exito (paso 2 de "Recuperar contraseña": "te enviamos un mail") --
   mismo verde de marca que .fin-login-icon/--fin-verde, en tono legible. */
.fin-login-alert-success {
	background: #e3f3ea;
	color: #00703a;
}

/* Variante warning (spam-protection / validaciones previas al submit). */
.fin-login-alert-warning {
	background: #fdf3d9;
	color: #8a5a00;
}

/* Texto de ayuda arriba del campo (paso 1 y paso 3 de "Recuperar
   contraseña") -- mismo tratamiento que el resto de textos secundarios
   de la card. */
.fin-login-help {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fin-gray);
}

/* Link "Volver a Ingresar" debajo del form (paso 1 de "Recuperar
   contraseña") -- mismo tratamiento que .fin-login-forgot. */
.fin-login-back {
	margin: 20px 0 0;
	text-align: center;
}
.fin-login-back a {
	font-size: 12px;
	font-weight: 600;
	color: var(--fin-gray);
	text-decoration: underline;
	transition: color .15s ease;
}
.fin-login-back a:hover { color: var(--fin-verde); }

.fin-login-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
}

.fin-login-field label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--fin-navy);
	margin-bottom: 6px;
}

.fin-login-field-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.fin-login-field-row label { margin-bottom: 0; }
.fin-login-forgot {
	font-size: 11px;
	font-weight: 600;
	color: var(--fin-gray);
	text-decoration: underline;
	white-space: nowrap;
	transition: color .15s ease;
}
.fin-login-forgot:hover { color: var(--fin-verde); }

/*
 * Selector reforzado a ".fin-login-form input.fin-login-input" (Ronda
 * "login-tutor-nativo", 2026-07-27): hello-elementor/assets/css/reset.css
 * trae `input[type="text"], input[type="password"], ... { border: 1px solid
 * rgb(102,102,102); border-radius: 3px; padding: .5rem 1rem; }` con
 * especificidad (0,1,1) -- empata o gana contra un simple `.fin-login-input`
 * (0,1,0). Mismo patron de gotcha ya documentado en el Backlog (hover
 * magenta de hello-elementor/reset.css sobre botones fin-*). Subir a
 * (0,2,1) evita depender del orden de carga.
 */
.fin-login-form input.fin-login-input {
	display: block;
	width: 100%;
	height: 48px;
	background: transparent;
	border: 1px solid rgba(12, 60, 96, 0.1);
	border-radius: 12px;
	padding: 0 16px;
	font-family: var(--fin-font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--fin-gray);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fin-login-form input.fin-login-input::placeholder { color: var(--fin-gray); opacity: .6; }
.fin-login-form input.fin-login-input:focus {
	outline: none;
	border-color: var(--fin-verde);
	box-shadow: 0 0 0 2px rgba(0, 144, 84, 0.2);
}

.fin-login-submit {
	width: 100%;
	height: 48px;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

@media (max-width: 600px) {
	.fin-login-wrap { padding: 40px 16px; }
}