/* Enquadra o card de login em largura confortavel no centro da pagina. */
.login-wrapper {
  max-width: 540px;
  margin: 0 auto;
}

/* Organiza os elementos internos do card de login com espacamento uniforme. */
.login-card {
  display: grid;
  gap: 14px;
}

/* Centraliza titulo e frase principal no topo do card de login. */
.login-card h1,
.login-card > p {
  text-align: center;
}

/* Mantem labels dos campos alinhados a esquerda para leitura do formulario. */
.login-card form label {
  text-align: left;
}

/* Controle: area do captcha anti-robo no formulario de login. */
.captcha-container {
  display: flex;
  justify-content: center;
}

/* Botoes de acao secundaria em formato de link textual. */
.link-button {
  background: transparent;
  color: #9fc0ff;
  border: 0;
  text-align: center;
  padding: 2px 0;
  font-weight: 400;
  width: fit-content;
  margin: 0 auto;
}

/* Hover discreto para reforcar clicabilidade dos links secundarios. */
.link-button:hover {
  text-decoration: underline;
  background: transparent;
}

/* Area reservada para mensagens de feedback sem pular layout. */
.auth-feedback {
  min-height: 20px;
  margin: 0;
  font-size: 0.92rem;
}

/* Cor de feedback para erros de autenticacao. */
.auth-feedback.is-error {
  color: #fca5a5;
}

/* Cor de feedback para sucesso de autenticacao/recuperacao. */
.auth-feedback.is-success {
  color: #86efac;
}

/* Cor de feedback para mensagens informativas. */
.auth-feedback.is-info {
  color: #93c5fd;
}