/* ==========================================================================
   Páginas de entrada (login, cadastro, recuperação de senha, erros do login com Google).
   Fase 4 do redesign: design system (tokens --gm-*), tema claro ou escuro, sem CSS legado.
   ========================================================================== */

.auth-page {
  display: grid;
  justify-items: center;
  padding-block: var(--gm-space-7) var(--gm-space-8);
}

.auth-card {
  width: 100%;
  max-width: var(--gm-card-narrow);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gm-space-5);
  padding: var(--gm-space-6) var(--gm-space-5);
  background: var(--gm-color-surface);
  border: var(--gm-border-width) solid var(--gm-color-border);
  border-radius: var(--gm-radius-lg);
  box-shadow: var(--gm-shadow-2);
}
@media (min-width: 576px) {
  .auth-card { padding: var(--gm-space-7); }
}
.auth-card > *, .auth-card p { margin: 0; }

.auth-intro { display: grid; gap: var(--gm-space-2); }
.auth-title { font-size: var(--gm-font-size-2xl); margin: 0; }
.auth-heading { font-size: var(--gm-font-size-lg); margin: 0; }
.auth-subtitle, .auth-card p { color: var(--gm-color-text-muted); }

/* Botão do Google centralizado, com o tamanho das diretrizes (não estica) */
.auth-google, .auth-providers { display: flex; justify-content: center; }
.auth-providers { list-style: none; margin: 0; padding: 0; }

.auth-role, .auth-note {
  display: flex;
  align-items: flex-start;
  gap: var(--gm-space-3);
  font-size: var(--gm-font-size-sm);
}
.auth-role .gm-ico, .auth-note .gm-ico { margin-top: var(--gm-space-1); }
.auth-note {
  padding: var(--gm-space-3) var(--gm-space-4);
  border-radius: var(--gm-radius-md);
  background: var(--gm-color-success-soft);
}
.auth-card .auth-note { color: var(--gm-color-success-text); }

.login-privacy { font-size: var(--gm-font-size-sm); }

.auth-alerts { display: grid; gap: var(--gm-space-2); }

.auth-form { display: grid; gap: var(--gm-space-4); }
.auth-actions { display: grid; gap: var(--gm-space-3); }

/* Cadastro com e-mail e senha: recolhido, para o Google ter mais destaque (diretrizes do Google e B2) */
.auth-alternativa { border-top: var(--gm-border-width) solid var(--gm-color-border); padding-top: var(--gm-space-4); }
.auth-alternativa > summary {
  list-style: none;
  display: flex;
  align-items: center;
  min-height: var(--gm-target-min);
  color: var(--gm-color-primary-text);
  font-weight: var(--gm-font-weight-semibold);
  cursor: pointer;
}
.auth-alternativa > summary::-webkit-details-marker { display: none; }
.auth-alternativa > summary::after { content: '+' / ''; margin-left: auto; padding-left: var(--gm-space-3); }
.auth-alternativa[open] > summary::after { content: '−' / ''; }
.auth-alternativa[open] > summary { margin-bottom: var(--gm-space-3); }
.auth-alternativa__aviso { margin-bottom: var(--gm-space-4); font-size: var(--gm-font-size-sm); }

/* "ou crie uma conta com e-mail" entre o Google e o formulário */
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--gm-space-3);
  font-size: var(--gm-font-size-sm);
}
.auth-or::before, .auth-or::after {
  content: '';
  flex: 1;
  border-top: var(--gm-border-width) solid var(--gm-color-border);
}
.auth-divider { border: 0; border-top: var(--gm-border-width) solid var(--gm-color-border); margin: 0; }

.auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gm-space-2) var(--gm-space-5);
  font-size: var(--gm-font-size-sm);
}
.auth-links a { display: inline-flex; align-items: center; min-height: var(--gm-target-min); }