:root {
	--login-ink: #172033;
	--login-muted: #6c7483;
	--login-line: #dfe4ec;
	--login-primary: #505393;
	--login-primary-dark: #3e417d;
	--login-focus: rgba(80, 83, 147, .16);
}

body.login-page { min-width: 320px; background: #f5f6f9; color: var(--login-ink); }
body.login-page #page-content.login-page-content { min-height: 100vh; padding: 0; background: #f5f6f9; }
.login-shell { display: grid; grid-template-columns: minmax(380px, 1.12fr) minmax(430px, .88fr); min-height: 100vh; }

.login-visual {
	position: relative; display: flex; min-height: 100vh; overflow: hidden;
	padding: clamp(42px, 6vw, 88px); color: #fff; align-items: flex-end;
}
.login-background, .login-visual-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-background {
	object-fit: cover; object-position: center; transform: scale(1.015);
	animation: login-image-in 1.2s cubic-bezier(.2, .7, .2, 1) both;
}
.login-visual-overlay {
	background: linear-gradient(180deg, rgba(14,19,36,.18), rgba(14,19,36,.48) 52%, rgba(14,19,36,.88)),
		linear-gradient(110deg, rgba(45,48,100,.45), transparent 65%);
}
.login-visual-content, .login-visual-foot { position: relative; z-index: 1; }
.login-visual-content { width: min(620px, 100%); padding-bottom: 54px; animation: login-copy-in .75s .15s ease-out both; }
.login-brand-mark { display: flex; gap: 7px; margin-bottom: 24px; }
.login-brand-mark span { display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.login-brand-mark span:nth-child(2) { opacity: .65; }
.login-brand-mark span:nth-child(3) { opacity: .35; }
.login-eyebrow, .login-mobile-eyebrow { margin: 0 0 13px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.login-eyebrow { color: rgba(255,255,255,.72); }
.login-visual h1 { margin: 0; color: #fff; font-size: clamp(40px,4.4vw,68px); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; text-shadow: 0 2px 22px rgba(0,0,0,.16); }
.login-visual-copy { max-width: 530px; margin: 26px 0 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; }
.login-visual-foot { position: absolute; left: clamp(42px,6vw,88px); bottom: 36px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.68); font-size: 12px; }
.login-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #78e6ad; box-shadow: 0 0 0 4px rgba(120,230,173,.13); }

body.login-page #login-container.login-panel {
	position: relative; top: auto; left: auto; display: flex; width: auto; min-width: 0; margin: 0;
	padding: clamp(42px,7vw,100px); align-items: center; justify-content: center; background: #f8f9fb; z-index: 2;
}
.login-card { width: min(430px, 100%); animation: login-card-in .65s .08s ease-out both; }
body.login-page #login-container .login-title { padding: 0; background: transparent; text-align: left; }
body.login-page #login-container .login-title .login-logo {
	display: block; width: auto; max-width: min(280px,78%); height: auto; max-height: 92px;
	margin: 0 0 46px; object-fit: contain; object-position: left center;
}
.login-mobile-eyebrow { display: none; color: var(--login-primary); }
.login-title h2 { margin: 0 0 10px; color: var(--login-ink); font-size: 31px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.login-subtitle { margin: 0 0 38px; color: var(--login-muted); font-size: 14px; line-height: 1.6; }

.login-form .form-group { margin-bottom: 22px; }
.login-form label { margin-bottom: 9px; color: #333c4e; font-size: 13px; font-weight: 600; }
.login-input-wrap { position: relative; }
.login-input-wrap > .fa:first-child { position: absolute; top: 50%; left: 17px; z-index: 2; width: 18px; color: #9299a8; font-size: 15px; text-align: center; transform: translateY(-50%); pointer-events: none; }
.login-input-wrap .form-control {
	width: 100%; height: 52px; padding: 0 48px; border: 1px solid var(--login-line); border-radius: 11px;
	background: #fff; box-shadow: 0 1px 2px rgba(21,31,51,.025); color: var(--login-ink); font-size: 14px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.login-input-wrap .form-control::placeholder { color: #a5abb6; }
.login-input-wrap .form-control:focus { border-color: var(--login-primary); box-shadow: 0 0 0 4px var(--login-focus); background: #fff; }
.login-form .has-error .form-control { border-color: #d95454; box-shadow: 0 0 0 4px rgba(217,84,84,.1); }
.login-form .help-block { margin: 7px 0 0; color: #bd4242; font-size: 12px; }
.login-password-toggle {
	position: absolute; top: 50%; right: 9px; display: grid; width: 36px; height: 36px; padding: 0;
	border: 0; border-radius: 8px; background: transparent; color: #8b93a1; place-items: center;
	transform: translateY(-50%); transition: color .2s ease, background .2s ease;
}
.login-password-toggle:hover, .login-password-toggle:focus { background: #f0f1f6; color: var(--login-primary); outline: none; }

.login-remember { display: inline-flex; margin: 0 0 26px !important; align-items: center; gap: 9px; color: var(--login-muted) !important; cursor: pointer; font-weight: 400 !important; user-select: none; }
.login-remember input { position: absolute; opacity: 0; pointer-events: none; }
.login-remember > span { display: grid; width: 18px; height: 18px; border: 1px solid #cbd1db; border-radius: 5px; background: #fff; color: transparent; font-size: 10px; place-items: center; transition: all .18s ease; }
.login-remember input:checked + span { border-color: var(--login-primary); background: var(--login-primary); color: #fff; }
.login-remember input:focus + span { box-shadow: 0 0 0 4px var(--login-focus); }

.login-submit, .passkey-login-button { display: flex; width: 100%; height: 52px; border-radius: 11px; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.login-submit { gap: 13px; border: 1px solid var(--login-primary); background: var(--login-primary); box-shadow: 0 9px 22px rgba(80,83,147,.22); color: #fff; }
.login-submit .fa { font-size: 12px; transition: transform .18s ease; }
.login-submit:hover .fa { transform: translateX(3px); }
.login-submit:hover, .login-submit:focus { background: var(--login-primary-dark); box-shadow: 0 12px 26px rgba(80,83,147,.27); color: #fff; outline: none; transform: translateY(-1px); }
.login-submit:disabled, .passkey-login-button:disabled { opacity: .65; cursor: wait; transform: none; }

.passkey-login-container[hidden], .passkey-login-container[style*="display:none"] { display: none !important; }
.passkey-login-container { padding: 0; }
.login-divider { display: flex; margin: 25px 0; align-items: center; gap: 15px; color: #9aa1ad; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.login-divider::before, .login-divider::after { content: ''; height: 1px; background: var(--login-line); flex: 1; }
.passkey-login-button { gap: 11px; border: 1px solid #d9dee7; background: #fff; box-shadow: 0 2px 7px rgba(21,31,51,.035); color: #323b4e; }
.passkey-login-button:hover, .passkey-login-button:focus { border-color: #bdc4d0; background: #fdfdfe; box-shadow: 0 7px 16px rgba(21,31,51,.08); color: var(--login-primary); outline: none; transform: translateY(-1px); }
#passkey-message { margin: 12px 0 0; border: 0; border-radius: 9px; font-size: 12px; }
#passkey-message[hidden] { display: none; }
.login-help { margin: 27px 0 0; color: #9aa1ad; font-size: 11px; text-align: center; }
.login-help .fa { margin-right: 5px; color: #7d8492; }

body.login-page > footer { position: fixed !important; right: 28px; bottom: 18px; left: auto; z-index: 5; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #9aa1ad; }
body.login-page > footer .pull-left { display: none; }
body.login-page > footer a { color: #8e95a2; }
body.login-page #calculadora, body.login-page #notas-widget, body.login-page .chat-toggle { display: none !important; }

@keyframes login-image-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1.015); } }
@keyframes login-card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes login-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 920px) {
	.login-shell { grid-template-columns: minmax(300px,.8fr) minmax(420px,1.2fr); }
	.login-visual { padding: 42px; }
	.login-visual-foot { left: 42px; }
	.login-visual h1 { font-size: 42px; }
	body.login-page #login-container.login-panel { padding: 54px; }
}
@media (max-width: 720px) {
	body.login-page #page-content.login-page-content, .login-shell { min-height: 100vh; min-height: 100svh; }
	.login-shell { display: block; }
	.login-visual { display: none; }
	body.login-page #login-container.login-panel { min-height: 100vh; min-height: 100svh; padding: 44px 24px 72px; }
	body.login-page #login-container .login-title .login-logo { max-width: min(245px,74%); max-height: 80px; margin-bottom: 38px; }
	.login-mobile-eyebrow { display: block; }
	.login-title h2 { font-size: 29px; }
	.login-subtitle { margin-bottom: 31px; }
	body.login-page > footer { right: 18px; bottom: 12px; }
}
@media (max-width: 390px) {
	body.login-page #login-container.login-panel { padding-right: 20px; padding-left: 20px; }
	.login-title h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
	.login-background, .login-visual-content, .login-card { animation: none; }
	.login-submit, .passkey-login-button { transition: none; }
}