/* auth.css : tela de login (standalone, fora da casca). */
.tela-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--fundo);
  padding: var(--sp-4);
}
.login-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  padding: var(--sp-6);
}
.login-marca { text-align: center; margin-bottom: var(--sp-5); }
.login-marca .marca-logo { width: 240px; max-width: 100%; height: auto; margin: 4px auto 10px; }
.login-marca-sub { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--texto-suave); }
.login-form { margin-top: var(--sp-3); }
.login-titulo { font-family: var(--font-titulo); font-size: 17px; font-weight: 700; margin: 0 0 var(--sp-2); }
.login-texto { font-size: 13.5px; color: var(--texto-secundario); margin: 0 0 var(--sp-3); }
.login-links { display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: var(--sp-4); font-size: 13.5px; }
.login-links a { color: var(--cor-primaria-texto); text-decoration: none; }
.login-links a:hover { text-decoration: underline; }
.form-sair { margin: 0; }