/* ============================================
   AUTH.CSS (Login / Cadastro / Reset)
   Mobile-first, leve e consistente com o tema.
   ============================================ */

.auth-page{
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(107,92,231,0.10), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,107,53,0.08), transparent 60%),
    var(--color-gray-50);
  padding: var(--spacing-8) 0 var(--spacing-12);
}

/* seção central */
.auth-section{
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  padding: var(--spacing-8) 0;
}

/* card */
.auth-box{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-white);
  padding: var(--spacing-7);
  border-radius: var(--border-radius-2xl);
  border: 1px solid rgba(17,24,39,0.06);
  box-shadow: 0 18px 45px rgba(15,23,42,0.10);
}

.auth-title{
  font-size: var(--font-size-2xl);
  font-weight: 800;
  text-align: center;
  margin: 0 0 var(--spacing-2);
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
}

.auth-subtitle{
  text-align: center;
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-6);
}

.auth-form{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.auth-form .form-group{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.auth-form label{
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.password-input{
  position: relative;
}
.password-input .form-control{
  padding-right: 46px;
}
.toggle-password{
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-500);
  padding: 6px;
  border-radius: 10px;
}
.toggle-password:hover{
  background: rgba(107,92,231,0.08);
  color: var(--color-primary);
}
.toggle-password svg{
  width: 20px;
  height: 20px;
}

/* linha 2 colunas no cadastro */
.form-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}
@media (min-width: 520px){
  .form-row{ grid-template-columns: 1fr 1fr; }
}

/* links abaixo */
.auth-links{
  text-align: center;
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  justify-content: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
.auth-links span{ color: var(--color-gray-400); }

/* ajustes mobile */
@media (max-width: 420px){
  .auth-box{ padding: var(--spacing-6); border-radius: var(--border-radius-xl); }
}

/* Acessibilidade: foco visível */
.toggle-password:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(107, 92, 231, 0.22);
}