.login-body { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: #07111f; }
.login-scene { background: linear-gradient(110deg, rgba(2,8,23,.78), rgba(8,47,73,.55)), url('../images/quesafoto1.webp') center center / cover no-repeat; }
.login-grid { opacity: .08; background-size: 48px 48px; }
.login-wrapper { width: min(765px, 100%); max-width: 765px; min-height: 540px; grid-template-columns: minmax(0, 424px) minmax(0, 341px); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; box-shadow: 0 32px 90px rgba(2,8,23,.45); }
.login-showcase { min-height: 540px; padding: 36px 34px; background: linear-gradient(145deg, rgba(15,23,42,.93), rgba(14,116,144,.72)); backdrop-filter: blur(1px); }
.showcase-logo { width: 38px; height: 38px; display: grid; place-items: center; color: #062b2a; background: #5eead4; border-radius: 11px; }
.showcase-logo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.showcase-brand i { color: inherit; font-size: 20px; }
.showcase-copy .login-kicker { color: #f59e0b; }
.showcase-copy h1 { max-width: none; font-size: 29px; text-align: left; white-space: nowrap; }
.showcase-copy p { text-align: left; }
.showcase-copy p { color: #dbeafe; }
.showcase-features { color: #f8fafc; }
.showcase-features i { color: #5eead4; }
.showcase-footer { color: #cbd5e1; }
.status-dot { background: #2dd4bf; }
.login-card { padding: 34px 30px 24px; background: #fff; }
.login-brand { margin-bottom: 28px; }
.login-brand .login-icon { color: #0f766e; background: #ccfbf1; }
.login-brand .login-brand-logo { width: 58px; height: 58px; padding: 0; overflow: hidden; background: #fff; border: 1px solid #ccfbf1; box-shadow: 0 8px 22px rgba(15,118,110,.14); }
.login-brand-logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.login-brand .login-kicker { display: inline-flex; align-items: center; gap: 5px; color: #0f766e; }
.login-brand h2 { color: #172033; font-size: 25px; }
.login-brand p { color: #475569; font-weight: 500; }
.login-card .form-label { color: #243047; font-size: 12.5px; font-weight: 800; }
.login-card .input-group-text { color: #334155; background: #f8fafc; border-color: #94a3b8; }
.login-card .form-control { min-height: 48px; }
.login-card .form-control { color: #172033; border-color: #94a3b8; font-weight: 600; }
.login-card .form-control::placeholder { color: #64748b; opacity: 1; font-weight: 500; }
.login-card .form-control:focus { border-color: #2dd4bf; box-shadow: 0 0 0 .22rem rgba(15,118,110,.12); }
.login-password-toggle { color: #0f766e; background: #ecfdf5; border: 1px solid #99f6e4; border-radius: 8px; }
.login-password-toggle:hover, .login-password-toggle:focus { color: #fff; background: #0f766e; border-color: #0f766e; }
.login-options { min-height: 32px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: -2px 0 10px; }
.login-options .form-check { display: flex; align-items: center; gap: 7px; margin: 0; color: #334155; font-size: 12px; font-weight: 700; cursor: pointer; }
.login-options .form-check-input { width: 16px; height: 16px; margin: 0; border: 1.5px solid #64748b; }
.login-options .form-check-input:checked { background-color: #0f766e; border-color: #0f766e; }
.login-help { color: #94a3b8; font-size: 10.5px; white-space: nowrap; }
.login-submit { min-height: 49px; background: linear-gradient(135deg, #0f766e, #0e7490); border: 0; box-shadow: 0 8px 18px rgba(15,118,110,.22); }
.login-submit:hover { background: linear-gradient(135deg, #115e59, #155e75); transform: translateY(-1px); }
.login-trust { display: flex; justify-content: center; gap: 18px; margin-top: 22px; color: #52627a; font-size: 10.5px; font-weight: 700; }
.login-trust span { display: inline-flex; align-items: center; gap: 5px; }
.login-trust i { color: #0f766e; }
@media (max-width: 820px) { .login-body { padding: 16px; }.login-wrapper { width: min(480px,100%); min-height: 0; }.login-card { padding: 40px 34px 28px; } }
@media (max-width: 430px) { .login-card { padding: 34px 23px 24px; }.login-options { align-items: flex-start; flex-direction: column; gap: 6px; }.login-trust { gap: 10px; } }