/* ==========================================================================
   hm-login.css — Login v2 corporativo (M0b-v2 · mockup owner · 2026-09-09)
   Split-screen 60/40: panel marketing (foto wan + overlay funcional #1E293B
   0.92→0.55 izq→der) + tarjeta login BLANCA tema-invariante.
   Spec: specs/M0-LOGIN.md § "UI — Login v2" + § "UX Pass" · 02-DESIGN §7.1.
   Iconografía: Bootstrap Icons inline SVG (CSP-safe, cero fuentes extra).
   Tema: NINGÚN color del login depende de [data-bs-theme] — la tarjeta es
   blanca en ambos temas (identidad mockup). hm-tokens.css queda INTACTO.
   M1: el placeholder dashboard (.hm-dash) migró a hm-app.css (shell real).
   M0b-v3 (UX pass Laws of UX 2e): ojo 44×44, forgot gap+padding, css
   reordenado por secciones TOKENS→RESPONSIVE (0 duplicados, solo reorden).
   ========================================================================== */

/* ===== TOKENS (login-only — skin de página, NO al global hm-tokens.css, D-5) ===== */
:root {
  --hm-login-overlay: #1E293B;      /* gradiente 0.92 → 0.55 */
  --hm-login-btn: #0F5151;          /* hover #134E4A · active #0A3F3F */
  --hm-login-feature: #374151;
  --hm-login-label: #1F2937;
  --hm-login-input-border: #D1D5DB;
  --hm-login-placeholder: #9CA3AF;
  --hm-login-subtitle: #CBD5E1;
  --hm-login-accent: #34D399;       /* énfasis titular sobre overlay */
}

/* ===== BASE ===== */
.hm-page {
  min-height: 100vh;
  background: var(--color-bg-alt);
  color: var(--color-body);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after { box-sizing: border-box; }

.hm-page :focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ===== LAYOUT-SPLIT (60/40 · ≥900px) ===== */
.hm-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

/* ===== MARKETING (IZQ) ===== */
.hm-login__marketing {
  /* Overlay FUNCIONAL de legibilidad (no decorativo) sobre foto wan comprimida.
     background-color DESPUÉS del shorthand = fallback pre-carga de la imagen. */
  background:
    linear-gradient(90deg, rgba(30, 41, 59, 0.92) 0%, rgba(30, 41, 59, 0.55) 100%),
    url("../img/login-bg.jpg") center/cover no-repeat;
  background-color: var(--hm-login-overlay);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 48px;
}

.hm-login__brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Marca hm (base 26px — dashboard; login escala a 40px abajo) */
.hm-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  position: relative;
  flex: none;
}

.hm-brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
}

.hm-brand-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 5px;
  background: #FFFFFF;
  transform: translate(-50%, -100%);
  transform-origin: bottom center;
}

/* Marca escalada a 40px SOLO en el panel marketing (dashboard usa 26px base) */
.hm-login__marketing .hm-brand-mark { width: 40px; height: 40px; }

.hm-login__marketing .hm-brand-mark::after { inset: 9px; }

.hm-login__marketing .hm-brand-mark::before { height: 7px; }

.hm-login__brand-name {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: #FFFFFF;
}

.hm-login__pitch { max-width: 600px; }

.hm-login__headline {
  font-size: 32px;
  line-height: 40px;
  font-weight: var(--font-weight-semibold);
  color: #FFFFFF;
  margin: 0 0 12px;
}

.hm-login__accent { color: var(--hm-login-accent); }

.hm-login__sub {
  color: var(--hm-login-subtitle);
  font-size: 15px;
  margin: 0;
}

.hm-login__features {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 480px;
}

.hm-login__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hm-login-feature);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: #FFFFFF;
  font-size: 14px;
}

.hm-login__feature svg { flex: none; }

.hm-login__rule {
  display: block;
  width: 35px;
  height: 3px;
  background: var(--color-primary);
  margin-bottom: 10px;
}

.hm-login__footer-text {
  color: var(--hm-login-subtitle);
  font-size: 13px;
  margin: 0;
}

/* ===== CARD (DER — columna centrada vertical, margen der ~8vw) ===== */
.hm-login__panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 40px 8vw 40px 24px;
}

/* Tarjeta tema-invariante: blanca SIEMPRE — cero var() que flipee con tema */
.hm-login__card {
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  padding: 48px 40px;
}

/* ===== FIELDS (patrón mockup: 48px + icono izq 44px + ojo der) ===== */
.hm-field { margin-bottom: 16px; }

.hm-field label {
  display: block;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--hm-login-label);
  margin-bottom: 6px; /* proximidad label-input: 6-8px (Leyes UX · serial) */
}

.hm-input-wrap { position: relative; }

.hm-input {
  display: block;
  width: 100%;
  height: 48px;
  border: 1px solid var(--hm-login-input-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.2;
  padding: 0 12px 0 44px;
  color: var(--hm-login-label);
  background-color: #FFFFFF;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hm-input::placeholder { color: var(--hm-login-placeholder); opacity: 1; }

.hm-input:focus {
  outline: none;
  border-color: var(--hm-login-btn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hm-login-btn) 22%, transparent);
}

.hm-input--password { padding-right: 52px; }

.hm-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--hm-login-placeholder);
  pointer-events: none;
}

/* Ojo — toggle visibilidad contraseña (JS conmuta .is-on + aria-pressed).
   44×44 target táctil (Fitts · WCAG 2.5.8): cabe en el input de 48px con
   2px de aire vertical; right 4px deja 4px entre fin de texto y botón. */
.hm-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--hm-login-placeholder);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.hm-eye:hover { color: var(--hm-login-label); } /* solo color — 0 layout-shift */

.hm-eye svg { width: 18px; height: 18px; }

.hm-eye .hm-eye__hide { display: none; }

.hm-eye.is-on .hm-eye__show { display: none; }

.hm-eye.is-on .hm-eye__hide { display: block; }

/* ===== BUTTON ===== */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  min-height: 42px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.hm-btn:disabled { cursor: not-allowed; opacity: 0.7; }

.hm-btn--block { width: 100%; }

.hm-btn--ghost {
  background: transparent;
  color: var(--color-body);
  border-color: var(--color-border);
}

.hm-btn--ghost:hover:not(:disabled) {
  color: var(--color-heading);
  border-color: var(--color-muted);
}

/* Primario login v2: teal #0F5151 50px (dashboard conserva tokens globales) */
.hm-login__card .hm-btn--primary {
  background: var(--hm-login-btn);
  color: #FFFFFF;
  min-height: 50px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
}

/* Hover/active SOLO color — cero layout-shift */
.hm-login__card .hm-btn--primary:hover:not(:disabled) { background: #134E4A; }

.hm-login__card .hm-btn--primary:active:not(:disabled) { background: #0A3F3F; }

/* SVG sin width/height attrs colapsa a default 300×150 — dimensionar siempre */
.hm-btn__icon,
.hm-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Submit en carga: spinner CSS (solo si el UA tolera animación) */
.hm-btn[aria-busy="true"] { position: relative; color: transparent; }

.hm-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: hm-spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hm-btn[aria-busy="true"]::after { animation-duration: 2000ms; }
}

@keyframes hm-spin { to { transform: rotate(360deg); } }

/* ===== ERROR (danger light fijo — sobre tarjeta blanca en ambos temas) ===== */
.hm-login__error {
  display: none;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--radius-sm);
  background: #FEE2E2;
  color: #B91C1C;
  font-size: var(--font-size-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}

.hm-login__error.is-visible { display: flex; }

.hm-login__error svg { flex: none; margin-top: 1px; }

/* ===== HINT (textos auxiliares de la tarjeta) ===== */
/* Forgot: padding vertical amplia el target a ~26px (WCAG 2.5.8 ≥24px) y el
   margin 16px asegura separación del submit — sin mis-taps (Fitts). */
.hm-login__forgot {
  display: block;
  margin-top: 16px;
  padding: 4px 0;
  text-align: right;
  font-size: 12px;
  color: var(--hm-login-btn);
  text-decoration: none;
}

.hm-login__forgot:hover { text-decoration: underline; }

.hm-login__hint {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--hm-login-placeholder);
}

/* ===== RESPONSIVE ===== */
/* Móvil <900px — 1 columna: foto+overlay uniforme full, tarjeta centrada */
@media (max-width: 899.98px) {
  .hm-login {
    grid-template-columns: 1fr;
    /* Overlay uniforme vertical sobre la MISMA foto, ahora cubriendo todo */
    background:
      linear-gradient(rgba(30, 41, 59, 0.9), rgba(30, 41, 59, 0.9)),
      url("../img/login-bg.jpg") center/cover no-repeat;
    background-color: var(--hm-login-overlay);
  }

  .hm-login__marketing {
    background: none;
    justify-content: flex-start;
    gap: 24px;
    padding: 40px 22px 8px;
  }

  .hm-login__headline {
    font-size: 24px;
    line-height: 32px;
    max-width: none;
  }

  .hm-login__sub { font-size: 14px; }

  .hm-login__features,
  .hm-login__panel-footer { display: none; }

  .hm-login__panel {
    justify-content: center;
    padding: 24px 22px 32px;
  }

  .hm-login__card {
    max-width: 360px;
    padding: 28px 22px;
  }
}