/* Estilos para páginas de autenticação — registrar/login
   Objetivo: manter a aparência consistente com o site (cores, espaçamento e acessibilidade)
*/
:root{
  --primary:#0b5cff;
  --bg:#0f172a05; /* leve */
  --card-bg:rgba(255,255,255,0.9);
  --glass-border:rgba(11,92,255,0.06);
  --muted:#6b7280;
  --danger:#ef4444;
  --radius:12px;
  --shadow:0 12px 40px rgba(2,6,23,.08);
}

/* Layout centralizado */
.page-bg{position:fixed;inset:0;background:linear-gradient(180deg,#0b1220 0%, #071028 60%);opacity:.04;z-index:0}
.auth-card{position:relative;z-index:2;max-width:540px;margin:72px auto;padding:28px;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--glass-border);}
.login-header{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:8px;text-align:center}
.logo-large{width:84px;height:84px;object-fit:contain;border-radius:10px}
.glow{color:var(--primary);text-shadow:0 6px 30px rgba(11,92,255,.06)}

.muted{color:var(--muted);}
.lead{font-size:0.98rem}

/* Formulário */
.form-stack{display:flex;flex-direction:column;gap:12px}
.form-label{font-weight:600;font-size:.95rem;color:#0b172a}
.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:2px solid rgba(11,92,255,.14);box-shadow:0 6px 18px rgba(11,92,255,.06)}
.password-wrapper{position:relative;display:flex;align-items:center}
.toggle-password{position:absolute;right:8px;background:transparent;border:0;padding:8px;border-radius:8px;cursor:pointer}
.toggle-password:focus{outline:2px solid rgba(11,92,255,.14)}

/* Meta de senha e força */
.password-meta{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--muted)}
.pw-strength{font-weight:600}
#pw-strength-text{margin-left:6px;font-weight:700}

/* Botões */
.btn-primary{background:var(--primary);color:#fff;padding:12px 16px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.btn-primary:focus{outline:3px solid rgba(11,92,255,.16)}
.full{width:100%}

.separator{display:flex;align-items:center;gap:12px;justify-content:center;margin:8px 0;color:var(--muted)}
.separator span{background:#fff;padding:0 8px}
.separator:before,.separator:after{content:'';height:1px;background:linear-gradient(90deg,rgba(11,20,40,.06),rgba(11,20,40,0));flex:1}

/* Social */
.social-login{display:flex;gap:10px;flex-direction:column}
.btn-social{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:10px;border-radius:10px;border:1px solid rgba(11,20,40,0.06);background:#fff;cursor:pointer}
.btn-google img, .btn-facebook img{width:18px;height:18px}
.btn-social:focus{outline:2px solid rgba(11,92,255,.12)}

/* Erros e acessibilidade */
.error{color:var(--danger);font-weight:700;margin-top:6px}

/* Mobile */
@media (max-width:640px){
  .auth-card{margin:20px;padding:20px;border-radius:10px}
  .logo-large{width:68px;height:68px}
}

/* Pequenos detalhes para contraste e leitura */
.form-label small{color:var(--muted);font-weight:600}

/* Visually hidden already present in components.css, rely on it */