/* ============================================================================
   login.css · pantalla de acceso de growth — namespace .lg-*
   Usa solo tokens --abk-* y componentes .abk-*. Sin hardcodes cromáticos.
   ============================================================================ */

.lg-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--abk-space-5);
  background:
    var(--abk-grad-hero),
    var(--abk-bg-shell);
  color: var(--abk-text);
}

.lg-wrap {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--abk-space-4);
}

.lg-card {
  padding: var(--abk-space-6) var(--abk-space-5);
  box-shadow: var(--abk-shadow-3);
}

.lg-head {
  text-align: center;
  margin-bottom: var(--abk-space-5);
}

.lg-glyph {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--abk-space-3);
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--abk-on-primary);
  border-radius: var(--abk-radius-lg);
  background: var(--abk-grad-primary);
  box-shadow: var(--abk-shadow-glow);
}

.lg-brand { margin: 0; }
.lg-tagline { margin-top: var(--abk-space-1); }

.lg-alert { margin-bottom: var(--abk-space-4); }

.lg-form { gap: var(--abk-space-4); }

/* honeypot — invisible para humanos, sin display:none (los bots lo rellenan).
   Patrón visually-hidden (clip) en su posición natural: NO usar left:-9999px,
   porque los gestores de contraseñas anclan su ícono al campo y saltaría fuera
   de pantalla al hacer hover. */
.lg-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lg-error { margin-top: calc(var(--abk-space-2) * -1); }

.lg-foot {
  text-align: center;
  font-size: var(--abk-font-size-sm);
}