/* login.css — alinhado ao tema de `auth.css` para consistência visual e acessível */
:root{
  --primary:#0b5cff;
  --card-bg:rgba(255,255,255,0.96);
  --glass-border:rgba(11,92,255,0.06);
  --muted:#6b7280;
  --danger:#ef4444;
  --radius:12px;
  --shadow:0 30px 90px rgba(2,6,23,0.12);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:linear-gradient(180deg,#071428 0%, #071735 40%);-webkit-font-smoothing:antialiased;color:#081228}
.page-bg{position:fixed;inset:0;z-index:0;background:radial-gradient(800px 400px at 10% 10%, rgba(11,92,255,0.06), transparent), radial-gradient(600px 300px at 90% 90%, rgba(12,99,201,0.04), transparent);pointer-events:none}

/* Card */
.auth-card{position:relative;z-index:10;max-width:720px;margin:6vh auto;padding:28px;border-radius:var(--radius);background:var(--card-bg);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px;align-items:center;border:1px solid var(--glass-border)}
.login-header{text-align:center}
.logo-large{width:84px;height:84px;border-radius:10px}
.glow{font-size:1.8rem;margin:0;color:var(--primary);font-weight:900}

/* Form */
.form-stack{width:100%;max-width:540px;display:flex;flex-direction:column;gap:12px;padding-top:6px}
.form-label{font-weight:700;color:#0b172a;font-size:0.95rem}
.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(11,20,40,0.06);background:#fff;font-size:1rem}
.input:focus{outline:3px solid rgba(11,92,255,0.12);box-shadow:0 10px 30px rgba(11,92,255,0.06)}

.password-wrapper{position:relative;display:flex;align-items:center}
.toggle-password{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:8px;border-radius:8px;cursor:pointer}
.toggle-password:focus{outline:2px solid rgba(11,92,255,0.12)}

.form-row--small{display:flex;justify-content:space-between;align-items:center;gap:12px}
.checkbox{display:inline-flex;align-items:center;gap:8px}

/* Separador */
.separator{display:flex;align-items:center;gap:12px;width:100%;max-width:540px;margin:6px 0}
.separator::before,.separator::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(11,20,40,0.02),rgba(11,20,40,0.06))}
.separator span{font-weight:700;color:var(--muted)}

/* Botões */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(90deg,#7c3aed,var(--primary));color:#fff;padding:12px 16px;border-radius:10px;border:0;font-weight:800;cursor:pointer}
.btn-primary:focus{outline:3px solid rgba(11,92,255,0.14)}
.btn-social{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(11,20,40,0.06);background:#fff;cursor:pointer;font-weight:700}
.btn-social img{width:18px;height:18px}

/* Erros */
.error{color:var(--danger);min-height:1.2em;opacity:0;transition:opacity 160ms}
.error.visible{opacity:1}

.login-actions{display:flex;gap:12px;align-items:center}
.btn-link{color:var(--primary);font-weight:700;text-decoration:none}
.footer{margin:18px auto;text-align:center;color:rgba(11,20,40,0.6);font-weight:700}

/* Helpers */
.full{width:100%}
.visually-hidden{position:absolute!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;height:1px;width:1px;margin:-1px;padding:0;border:0;white-space:nowrap}

/* Responsividade */
@media(max-width:900px){
  .auth-card{margin:6vh 16px;padding:20px}
  .logo-large{width:72px;height:72px}
  .form-stack{max-width:100%}
}
