/* ===== Página de login ===== */
.login-body { background: var(--primary-deep); }
.login-page {
    position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow: hidden;
    background: linear-gradient(135deg, #07182a 0%, var(--navy) 50%, #2a2a8f 120%);
}
.login-page::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(14, 177, 198, .22), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(229, 0, 110, .16), transparent 45%);
}
.login-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle { position: absolute; bottom: -20px; border-radius: 50%; background: rgba(255, 255, 255, .25); animation: floatUp 9s linear infinite; }
@keyframes floatUp {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-110vh) scale(1.5); opacity: 0; }
}

.login-card {
    position: relative; z-index: 1; width: 100%; max-width: 460px;
    background: rgba(255, 255, 255, .98); border-radius: var(--r-xl); padding: 40px 36px 32px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .3);
}
.login-card.shake { animation: shake .5s ease; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); } 30% { transform: translateX(8px); }
    45% { transform: translateX(-6px); } 60% { transform: translateX(6px); }
    75% { transform: translateX(-4px); } 90% { transform: translateX(4px); }
}

.login-logos { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 24px; }
.logo-brasao { height: 64px; width: auto; border-radius: 8px; }
.login-sep { width: 1px; height: 44px; background: #CBD5E0; }
.logo-smarturb { display: flex; align-items: center; gap: 8px; }
.logo-smarturb img { height: 42px; width: auto; max-width: none; display: block; }

.login-lock {
    width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cyan), var(--indigo)); box-shadow: 0 8px 22px rgba(82, 64, 221, .35);
}
.login-title { text-align: center; font-size: 1.55rem; margin-bottom: 6px; }
.login-subtitle { text-align: center; font-size: .92rem; color: var(--text-3); margin-bottom: 28px; line-height: 1.5; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.input-wrapper { position: relative; }
.input-wrapper .lead-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .6; }
.input-wrapper input {
    width: 100%; padding: 13px 46px; border: 2px solid var(--border); border-radius: var(--r-md);
    font: inherit; font-size: 1rem; color: var(--text); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s;
}
.input-wrapper input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(14, 177, 198, .15); }
.toggle-password {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; padding: 8px; display: flex; opacity: .6; transition: opacity .2s;
}
.toggle-password:hover { opacity: 1; }

.login-error {
    display: none; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .3); color: #dc2626;
    padding: 10px 14px; border-radius: var(--r-sm); font-size: .86rem; text-align: center; margin-top: 12px;
}
.login-error.active { display: block; }

.btn-login {
    width: 100%; margin-top: 22px; padding: 15px; border: 0; border-radius: var(--r-md); cursor: pointer;
    font: inherit; font-size: 1.02rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--cyan), var(--indigo)); transition: transform .2s, box-shadow .2s, background .3s;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(82, 64, 221, .45); }
.btn-login.ok { background: linear-gradient(135deg, #12b886, #0b8f68); }
.btn-state { display: flex; align-items: center; justify-content: center; gap: 8px; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.login-badge span { font-size: .8rem; color: var(--text-3); }
.login-info { margin-top: 18px; padding: 14px; border-radius: var(--r-sm); text-align: center; background: rgba(14, 177, 198, .07); border: 1px solid rgba(14, 177, 198, .22); }
.login-info p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--text-3); }
.login-info strong { color: var(--primary); }
.login-info span { color: var(--accent); font-weight: 600; }

@media (max-width: 480px) {
    .login-card { padding: 30px 22px 26px; }
    .logo-brasao { height: 54px; }
    .logo-smarturb img { height: 32px; }
    .login-logos { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .particle { display: none; } }