/* ============================================================
   AnalysAI — Mergulho: entrada (auth.php)
   ============================================================
   A tela antes do mergulho: o chão vai da superfície ao abismo, como a régua
   da ligação, e o formulário fica no centro, onde a luz ainda chega.
   ============================================================ */

.entrada {
  display: grid;
  /* Topo fixo em vez de centro: quando o erro aparece, o cartão cresce para
     baixo e a marca e os campos não saltam. */
  place-items: start center;
  min-height: 100vh;
  padding: max(var(--e-8), calc(50vh - 200px)) var(--e-4) var(--e-6);
  background: linear-gradient(180deg, var(--superficie) 0%, var(--abismo-1) 48%, var(--abismo-0) 100%);
}

.entrada-coluna { display: flex; flex-direction: column; gap: var(--e-6); width: min(400px, 100%); }

.entrada-marca { display: flex; align-items: center; justify-content: center; gap: 14px; }
.entrada-logo { width: auto; height: 44px; }
.entrada-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--t-6);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.entrada-sub { margin-top: 2px; font-size: var(--t-2); color: var(--texto-3); }

.entrada-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: 28px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--abismo-2);
}
.entrada-titulo { font-family: var(--fonte-titulo); font-size: var(--t-5); font-weight: 650; color: var(--texto); }

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

.campo-senha { position: relative; }
.campo-senha .input { padding-right: 48px; }
.ver-senha {
  position: absolute;
  top: 50%;
  right: var(--e-1);
  width: 32px;
  height: 32px;
  border-radius: var(--raio-1);
  transform: translateY(-50%);
}
.ver-senha:focus-visible { outline-offset: -2px; }

.entrada-botao { width: 100%; margin-top: var(--e-1); }
/* Entrando: continua ciano. A hachura quer dizer indisponível, não trabalhando. */
.entrada-botao[aria-busy="true"]:disabled {
  cursor: progress;
  color: var(--termoclina-tinta);
  background-color: var(--termoclina);
  background-image: none;
  border-color: transparent;
}

/* Erro do formulário: vermelho é resultado, e o login recusado é um resultado */
.entrada-erro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--reprovar);
  border-radius: var(--raio-2);
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--texto);
  background: var(--reprovar-fundo);
}
.entrada-erro .lucide { width: 18px; height: 18px; margin-top: 1px; color: var(--reprovar); }

/* Aviso de que algo deu certo (link enviado, senha definida). Ciano e não
   verde: verde é veredito sobre ligação, e isto é só o sistema dizendo que fez. */
.entrada-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--termoclina-linha);
  border-radius: var(--raio-2);
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--texto);
  background: var(--termoclina-fundo);
}
.entrada-aviso .lucide { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--termoclina); }

.entrada-texto { font-size: var(--t-3); line-height: 1.5; color: var(--texto-2); }
.entrada-texto strong { color: var(--texto); font-weight: 600; }
.entrada-titulo:focus { outline: none; }

/* Ação secundária do cartão: texto, não botão, para não disputar com o
   principal. Área de toque de 44px mesmo sendo só uma linha. */
.entrada-link {
  align-self: center;
  min-height: 44px;
  padding: 0 var(--e-2);
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--termoclina);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--mov-rapido);
}
.entrada-link:hover { text-decoration-color: currentColor; }
.entrada-link:focus-visible { outline: 2px solid var(--termoclina); outline-offset: 2px; border-radius: var(--raio-1); }

/* O cartão com botão de texto embaixo fica com um vão grande demais: o botão
   já traz a própria altura de toque. */
.entrada-cartao > .entrada-link { margin-top: calc(var(--e-5) * -0.5); }

.entrada-dica { font-size: var(--t-1); color: var(--texto-3); }
/* O link "Pedir um link novo" é um <a> com cara de botão principal. */
a.entrada-botao { text-decoration: none; }