/* ==========================================================================
   Cor-E Dark — bloques específicos de /login (public/css/login-dark.css)
   Namespace .lg-*. Tokens y componentes genéricos .hm-* viven en
   dark-base.css, cargado antes — incluidas las primitivas de formulario
   promovidas desde contact-dark.css (.hm-field, .hm-label, .hm-input).
   Ver prompt/loginNew.md para la especificación.
   ========================================================================== */

/* ==========================================================================
   La pantalla — split 7/5, sin hero de foto (designRules §10: LCP = texto)
   ========================================================================== */
.lg-screen {
  background: var(--dk-canvas);
  min-height: calc(100vh - var(--nav-h));    /* fallback */
  min-height: calc(100svh - var(--nav-h));   /* gana donde svh existe */
  display: grid;
  align-items: center;
  padding-block: clamp(56px, 9vw, 120px);
}
.lg-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.lg-intro { grid-column: span 7; }
.lg-panel { grid-column: span 5; }

/* --fs-d2, no el --fs-d1 por defecto de .hm-page-hero-title: en un split
   7/12, --fs-d1 (hasta 5.75rem) obligaría a cortar "Your portal." en dos
   líneas y desequilibraría el peso frente al panel (loginNew.md §4.1). */
.lg-title { font-size: var(--fs-d2); }

@media (max-width: 1023.98px) {
  .lg-intro, .lg-panel { grid-column: span 12; }
  .lg-screen { min-height: 0; }
  .lg-panel { max-width: 520px; }
}

/* ==========================================================================
   El panel — profundidad por escalón de superficie, cero sombra, radio 0
   ========================================================================== */
.lg-panel {
  background: var(--dk-surface-2);
  border: 1px solid var(--dk-line);
  border-radius: 0;
  padding: clamp(28px, 4vw, 48px);
}

.lg-form { margin: 0; }
.lg-form .hm-field:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   La salida para quien no puede entrar (hallazgo P de loginNew.md)
   ========================================================================== */
.lg-help {
  margin-top: clamp(28px, 4vw, 40px);
  max-width: 52ch;
}
.lg-help-title {
  color: var(--tx-1);
  font-weight: 600;
  margin: 0 0 8px;
}
.lg-help p {
  color: var(--tx-2);
  line-height: 1.65;
  margin: 0;
}
.lg-help a { color: var(--tx-1); }   /* neutraliza el #0d6efd de Bootstrap, hallazgo T */

/* ==========================================================================
   Mensajes de servidor — borde de acento, sin relleno (hallazgo E, I)
   ========================================================================== */
.lg-alert {
  border: 1px solid;
  border-left-width: 3px;
  padding: 14px 18px;
  margin: 0 0 clamp(20px, 3vw, 28px);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.lg-alert--error { border-color: var(--ac-red);  color: var(--tx-1); }
.lg-alert--ok    { border-color: var(--ac-blue); color: var(--tx-1); }

/* ==========================================================================
   El botón — único sólido de la vista
   ========================================================================== */
.lg-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-md);
  text-align: center;
  margin-top: clamp(24px, 3vw, 32px);
}

/* ==========================================================================
   Toggle de "mostrar contraseña" — lo inyecta public/js/login.js (§5.8)
   ========================================================================== */
.lg-password { position: relative; }
.lg-password .hm-input { padding-right: 84px; }   /* deja sitio al botón */
.lg-reveal {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  min-width: 64px;
  padding-inline: 14px;
  background: none;
  border: 0;
  color: var(--tx-3);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.lg-reveal:hover,
.lg-reveal:focus-visible { color: var(--tx-1); }