/* ============================================================
   CNTA · Login — estilos de formulario compartidos
   ------------------------------------------------------------
   Campos, errores en línea, avisos y enlaces de login.html y de
   las páginas de reset de contraseña. Layout, panel hero y
   botones viven en /static/login-hero.css.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--panel);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.login-form { width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.field-header .field-aside {
  font-size: 12px; color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.field-header .field-aside:hover { color: var(--ink); border-bottom-color: var(--ink-3); }
.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  height: 46px; padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
  font: inherit; font-size: 15px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
/* iOS hace zoom al enfocar inputs de menos de 16px */
@media (max-width: 767px) {
  .field input[type="email"],
  .field input[type="password"],
  .field input[type="text"] { font-size: 16px; }
}
.field input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(127,187,0,.18); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(198,74,63,.15); }
.field-error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 12px; line-height: 1.45; color: var(--danger);
  margin: 0;
}
.field-error[hidden], .field-hint[hidden] { display: none; }
.field-error svg { flex-shrink: 0; margin-top: 1px; }
.field-hint {
  font-size: 12px; line-height: 1.45; color: var(--warn);
  margin: 0;
}

/* Oculta los controles nativos del browser dentro del input de password
   ("ojo" reveal y "X" clear de Edge): solo nuestro botón Mostrar/Ocultar. */
.field input[type="password"]::-ms-reveal,
.field input[type="password"]::-ms-clear { display: none; }

.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 52px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 38px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--ink); background: var(--bg-soft); }
.pw-toggle .eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .eye-on { display: none; }
.pw-toggle[aria-pressed="true"] .eye-off { display: block; }

.btn-primary + .btn-primary,
.btn-secondary + .btn-secondary { margin-top: 8px; }

.sso-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 14px;
  color: #6e6e6e; font-size: 12px;
}
.sso-divider::before, .sso-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.login-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 13px; line-height: 1.5;
  margin: 0 0 20px;
}
.login-banner svg { flex-shrink: 0; margin-top: 2px; }
.login-banner.error {
  background: var(--danger-bg);
  border: 1px solid rgba(198, 74, 63, 0.25);
  color: #9b2e25;
}
.login-banner.notice {
  background: var(--info-bg);
  border: 1px solid rgba(0, 164, 153, 0.18);
  color: #0a5e57;
}

.login-meta { margin-top: 26px; font-size: 12px; color: var(--ink-3); }
.login-meta a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--ink-3);
}
.login-meta a:hover { border-bottom-color: var(--ink); }

/* ── Reset de contraseña ─────────────────────────────────────── */
.login-back {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 20px;
  font-size: 13px; color: #6e6e6e; text-decoration: none;
}
.login-back:hover { color: var(--ink); }

/* Estado "revisa tu correo": icono + texto, sin formulario. */
.state-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 0 20px;
  background: var(--lime-50); color: var(--brand-700);
}
.state-email { color: var(--ink); font-weight: 600; word-break: break-all; }
.state-tips {
  margin: 20px 0 24px; padding: 0; list-style: none;
  font-size: 13px; line-height: 1.55; color: #6e6e6e;
}
.state-tips li { display: flex; gap: 8px; }
.state-tips li + li { margin-top: 6px; }
.state-tips li::before {
  content: ""; flex-shrink: 0;
  width: 5px; height: 5px; margin-top: 8px; border-radius: 50%;
  background: var(--brand-500);
}

/* Regla de longitud: gris mientras no se cumple, verde al cumplirla. */
.pw-rule {
  display: flex; gap: 6px; align-items: center;
  margin: 0; font-size: 12px; line-height: 1.45; color: #6e6e6e;
}
.pw-rule svg { flex-shrink: 0; }
.pw-rule .ok { display: none; }
.pw-rule[data-met="true"] { color: var(--ok); }
.pw-rule[data-met="true"] .ok { display: block; }
.pw-rule[data-met="true"] .todo { display: none; }

.state-actions .btn-secondary { margin-top: 8px; }