/* Auth surfaces — login, recovery, verify (misma familia visual que el contenido) */

/*
 * Fondo hero en auth: capas en body (viewport completo) para que imagen + oscuro
 * lleguen al footer sin corte; antes solo cubrían #base-content.
 */
body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) {
	--fnc-auth-bg-url: url('../images/background-20260523.jpg');
	--fnc-auth-bg-shift: 0px;
}

body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
)::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: var(--fnc-auth-bg-url);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transform: scale(1.08) translate3d(0, calc(var(--fnc-auth-bg-shift) * -1), 0);
	will-change: transform;
	pointer-events: none;
}

body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
)::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			165deg,
			rgba(10, 10, 12, 0.58) 0%,
			rgba(10, 10, 12, 0.76) 50%,
			rgba(6, 6, 8, 0.92) 100%
		),
		radial-gradient(ellipse 85% 65% at 50% 18%, rgba(124,58,237,0.14) 0%, transparent 58%);
	pointer-events: none;
}

body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-wrapper,
body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-footer {
	position: relative;
	z-index: 1;
}

#base-content:has(.login-wrapper, .registration-wrapper, .recovery-wrapper, .verify-wrapper, .message-wrapper) {
	background: transparent;
}

#base-content:has(.login-wrapper, .registration-wrapper, .recovery-wrapper, .verify-wrapper, .message-wrapper) > #overlay,
#base-content:has(.login-wrapper, .registration-wrapper, .recovery-wrapper, .verify-wrapper, .message-wrapper) > #fnc-navegation {
	position: relative;
	z-index: 1;
}

/* Footer auth: sin barra opaca; misma capa oscura de body cubre detrás */
body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-footer {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: none;
}

body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-footer nav.footer-menu ul a {
	color: rgba(235, 235, 245, 0.68);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}

body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-footer nav.footer-menu ul a:hover,
body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-footer nav.footer-menu ul a:focus-visible {
	color: var(--fnc-accent, #7c3aed);
}

body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-footer > #overlay {
	display: none !important;
	pointer-events: none !important;
}

body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-footer .copyright {
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

body:has(
	#base-content .login-wrapper,
	#base-content .registration-wrapper,
	#base-content .recovery-wrapper,
	#base-content .verify-wrapper,
	#base-content .message-wrapper
) #base-footer .icon-logo {
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

@media (prefers-reduced-motion: reduce) {
	body:has(
		#base-content .login-wrapper,
		#base-content .registration-wrapper,
		#base-content .recovery-wrapper,
		#base-content .verify-wrapper,
		#base-content .message-wrapper
	)::before {
		transform: scale(1.05);
	}
}

#base-content > .login-wrapper,
#base-content > .recovery-wrapper,
#base-content > .message-wrapper,
#base-content > .verify-wrapper {
	flex: 1;
	align-self: stretch;
	min-height: 0;
}

/*
 * Registro vive dentro de #fnc-navegation (no es hijo directo de #base-content).
 * Si el formulario es más alto que el viewport, el main desbordaba encima del footer:
 * scroll en #base-content y altura natural del wrapper.
 */
#base-content:has(.registration-wrapper) {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

#fnc-navegation:has(> .registration-wrapper) {
	flex: 1 1 auto;
	min-height: 0 !important;
	display: flex;
	flex-direction: column;
}

#fnc-navegation > .registration-wrapper {
	flex: 0 0 auto;
	align-self: stretch;
	width: 100%;
	min-height: 0;
}

.login-wrapper,
.recovery-wrapper,
.message-wrapper,
.verify-wrapper {
	display: flex;
	width: 100%;
	flex: 1;
	min-height: 0;
	justify-content: center;
	align-items: center;
	padding: 2rem 1.25rem;
	box-sizing: border-box;
}

.registration-wrapper {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	padding: 2rem 1.25rem 3.5rem;
	box-sizing: border-box;
}

#fnc-login,
#fnc-registration,
#fnc-recovery,
#fnc-message:not(.fnc-message--open) {
	position: relative;
	flex: 0 1 32rem;
	width: 100%;
	max-width: 32rem;
	margin: 0 auto;
	text-align: center;
}

#fnc-login .captcha,
#fnc-registration .captcha,
#fnc-recovery .captcha {
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.85rem;
	padding: 1rem 1.1rem;
}

#fnc-login .captcha .render,
#fnc-registration .captcha .render,
#fnc-recovery .captcha .render {
	flex: 1 1 11rem;
	min-width: min(100%, 11rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

#fnc-login .captcha .render img,
#fnc-registration .captcha .render img,
#fnc-recovery .captcha .render img {
	max-width: 100%;
	height: auto;
}

#fnc-login .captcha .value,
#fnc-registration .captcha .value,
#fnc-recovery .captcha .value {
	flex: 1 1 12rem;
	min-width: min(100%, 10rem);
}

#fnc-login .captcha .value .form-group,
#fnc-registration .captcha .value .form-group,
#fnc-recovery .captcha .value .form-group {
	margin: 0;
	width: 100%;
}

.login-wrapper .box,
.registration-wrapper .box,
.recovery-wrapper .box,
.verify-wrapper .box,
#fnc-message .box.message {
	padding: 2rem 2rem 1.75rem;
	border-radius: calc(var(--fnc-radius-lg, 20px) + 2px);
	background: linear-gradient(180deg, rgba(28, 28, 32, 0.94) 0%, rgba(18, 18, 20, 0.96) 100%);
	backdrop-filter: blur(14px) saturate(1.12);
	-webkit-backdrop-filter: blur(14px) saturate(1.12);
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow:
		var(--fnc-shadow-card, 0 8px 32px rgba(0, 0, 0, 0.42)),
		0 0 80px rgba(124,58,237,0.08);
}

#fnc-login .alter,
#fnc-registration .alter {
	padding-bottom: 1.25rem;
	margin-bottom: 0.25rem;
	border-bottom: 1px solid var(--fnc-border, rgba(255, 255, 255, 0.09));
}

#fnc-login h2,
#fnc-registration h2,
#fnc-recovery h2 {
	justify-content: center;
	font-size: 1.75rem;
	margin-bottom: 0.25rem;
}

#fnc-login .box-row,
#fnc-registration .box-row,
#fnc-recovery .box-row {
	flex: 0 0 auto;
	text-align: center;
}

#fnc-login form,
#fnc-registration form,
#fnc-recovery form {
	text-align: left;
}

/* Ritmo vertical auth: anula margin 2rem de .form-group en base.css */
#fnc-login .auth-form-fields,
#fnc-registration .auth-form-fields,
#fnc-recovery .auth-form-fields {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	width: 100%;
}

#fnc-login .auth-form-fields > .form-group,
#fnc-registration .auth-form-fields > .form-group,
#fnc-recovery .auth-form-fields > .form-group {
	margin: 0;
}

#fnc-login .auth-form-fields > .checkbox-group,
#fnc-registration .auth-form-fields > .checkbox-group,
#fnc-recovery .auth-form-fields > .checkbox-group {
	margin: 0.1rem 0 0;
}

#fnc-login .auth-form-fields > span.error:not(.auth-field-error),
#fnc-registration .auth-form-fields > span.error:not(.auth-field-error),
#fnc-recovery .auth-form-fields > span.error:not(.auth-field-error) {
	display: block;
	margin: -0.25rem 0 0;
	min-height: 0;
	padding: 0;
	font-size: 0.88rem;
	line-height: 1.35;
}

#fnc-login .auth-form-fields > .auth-submit-block,
#fnc-registration .auth-form-fields > .auth-submit-block,
#fnc-recovery .auth-form-fields > .auth-submit-block,
#fnc-verify .auth-form-fields > .auth-submit-block {
	margin-top: 0.65rem;
}

#fnc-login input[type="submit"],
#fnc-registration input[type="submit"],
#fnc-recovery input[type="submit"],
#fnc-verify input[type="submit"] {
	display: inline-block;
	width: auto;
	min-width: 12rem;
}

.auth-submit-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	margin-top: 0;
}

.auth-submit-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding-top: 0.15rem;
}

#fnc-login .auth-field-error,
#fnc-registration .auth-field-error,
#fnc-recovery .auth-field-error {
	display: block;
	width: 100%;
	min-height: 1.25rem;
	margin: 0;
	padding: 0.15rem 0 0;
	text-align: center;
	line-height: 1.35;
}

#fnc-login input[type="submit"].onloader,
#fnc-registration input[type="submit"].onloader,
#fnc-recovery input[type="submit"].onloader {
	background-size: 1.35rem;
	background-position: center left 0.85rem;
	background-repeat: no-repeat;
	padding-left: 2.35rem;
}

#fnc-login .authplus-login-panel__send:disabled:not(.authplus-login-switch__btn) {
	position: relative;
	background-color: rgba(255, 255, 255, 0.06) !important;
	background-image: none !important;
	border: 1px solid var(--fnc-border, rgba(255, 255, 255, 0.12)) !important;
	color: var(--fnc-text-muted, rgba(235, 235, 245, 0.58)) !important;
	font-weight: 600 !important;
	cursor: wait !important;
	opacity: 0.72 !important;
	box-shadow: none !important;
	filter: none !important;
	transform: none !important;
	padding-left: 2.35rem !important;
}

#fnc-login .authplus-login-panel__send.onloader:disabled:not(.authplus-login-switch__btn)::before {
	content: '';
	position: absolute;
	left: 0.85rem;
	top: 50%;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: -0.675rem;
	background: url(../images/loader.gif) center center / contain no-repeat;
	pointer-events: none;
}

#fnc-login .box-row > a,
#fnc-registration .box-row > a,
#fnc-recovery .box-row > a {
	display: inline-block;
	margin-top: 0.85rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--fnc-accent-a, #c4b5fd);
}

#fnc-login .box-row > a:Hover,
#fnc-registration .box-row > a:Hover,
#fnc-recovery .box-row > a:Hover {
	color: var(--fnc-accent-ink, #fff);
}

#fnc-login .auth-recaptcha-legal,
#fnc-registration .auth-recaptcha-legal,
#fnc-recovery .auth-recaptcha-legal {
	display: block;
	margin-top: 0.75rem;
	visibility: visible;
	opacity: 1;
}

.login-wrapper #fnc-login .checkbox-group,
.registration-wrapper #fnc-registration .checkbox-group {
	justify-content: flex-start !important;
	width: 100% !important;
}

#fnc-login .checkbox-group label,
#fnc-registration .checkbox-group label {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	border-color: var(--fnc-border-strong, rgba(255, 255, 255, 0.14));
}

.login-wrapper #fnc-login .checkbox-group label input[type="checkbox"],
.login-wrapper #fnc-login .checkbox-group label input[type="radio"],
.registration-wrapper #fnc-registration .checkbox-group label input[type="checkbox"],
.registration-wrapper #fnc-registration .checkbox-group label input[type="radio"] {
	flex: 0 0 auto !important;
	width: 1.15rem !important;
	height: 1.15rem !important;
	padding: 0 !important;
}

@media screen and (max-width: 520px) {
	#fnc-login .captcha,
	#fnc-registration .captcha,
	#fnc-recovery .captcha {
		flex-direction: column;
	}

	#fnc-login .captcha .render,
	#fnc-registration .captcha .render,
	#fnc-recovery .captcha .render,
	#fnc-login .captcha .value,
	#fnc-registration .captcha .value,
	#fnc-recovery .captcha .value {
		flex: 1 1 100%;
		min-width: 100%;
	}
}

@media screen and (max-width: 799px) {
	.login-wrapper .box,
	.registration-wrapper .box {
		padding: 1.5rem 1.25rem;
	}

	#fnc-login,
	#fnc-registration,
	#fnc-recovery {
		max-width: 100%;
	}
}