/* ===== Login (aislado) ===== */
.mfa-login {
  min-height: calc(100vh - 64px);
  background: #f7f8fb;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 16px;
  box-sizing: border-box;
}
.mfa-login .mfa-card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 6px 24px rgba(2,12,27,.06);
}
.mfa-login h1 {
  margin: 0 0 4px;
  font: 600 24px/32px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color: #0f172a;
}
.mfa-login .mfa-subtitle {
  margin: 0;
  font: 14px/20px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color: #64748b;
}
.mfa-login .mfa-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 40px; padding: 0 12px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.mfa-login .mfa-btn:hover {
  border-color: #d1d5db; box-shadow: 0 1px 0 rgba(2,12,27,.04);
}
.mfa-login .mfa-divider { position: relative; margin: 3em 0; }
.mfa-login .mfa-divider::before { content: ""; display: block; height: 1px; background: #e2e8f0; }
.mfa-login .mfa-divider-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 999px; background: #fff;
  border: 1px solid #e2e8f0; display: grid; place-items: center;
  font: 600 13px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color: #94a3b8;
}
.fui-login-input {
  display: block; width: 100%; box-sizing: border-box;
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; background: #fff;
  outline: none; transition: box-shadow .15s, border-color .15s;
}
.fui-login-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.mfa-login label {
  display: block; margin: 16px 0 6px;
  font: 500 14px/20px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color: #334155;
}
.mfa-login .mfa-actions { margin-top: 1em; display: flex; justify-content: flex-start; }
.mfa-login .mfa-link { font: 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; color: #3b82f6; text-decoration: none; }
.mfa-login .mfa-link:hover { text-decoration: underline; }
.mfa-login .mfa-submit {
  margin-top: 16px; width: 100%; height: 44px; border-radius: 8px; border: 0;
  background: #4f5bd5; color: #fff; font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  cursor: pointer;
}
.mfa-login .mfa-submit:hover { background: #3d4bc7; }
.mfa-login .mfa-error { margin-top: 8px; font: 12px/1.3 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; color: #dc2626; }
.mfa-login .mfa-success { margin-top: 8px; font: 12px/1.3 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; color: #16a34a; }

/* ===== Página de cambio de contraseña ===== */
.mfa-pw .pw-hint {
  margin-top: 8px;
  font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  color: #475569;
}
.mfa-pw .pw-criteria { margin: 6px 0 0; padding-left: 20px; }
.mfa-pw .pw-criteria li {
  list-style: none; position: relative; margin: 4px 0; padding-left: 18px;
  color: #64748b;
}
.mfa-pw .pw-criteria li::before { content: "•"; position: absolute; left: 0; top: 0; opacity: .55; }
.mfa-pw .pw-criteria li.ok { color: #16a34a; }
.mfa-pw .pw-criteria li.ok::before { content: "✓"; opacity: 1; }

/* Select del step de Empresa */
.mfa-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ===== Toggle ojo en inputs password ===== */
.mfa-input-wrap { position: relative; }
.mfa-input-wrap > .fui-login-input { padding-right: 40px; }
.mfa-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #64748b; cursor: pointer;
}
.mfa-eye:hover { color: #334155; }
.mfa-eye svg { width: 18px; height: 18px; }

/* ===== Callout informativo (mockup) ===== */
.mfa-callout {
  margin-top: 16px;
  border: 1px solid #c7d2fe;          /* indigo-200 */
  background: #eef2ff;               /* indigo-50 */
  color: #1e293b;                    /* slate-800 */
  border-radius: 12px;
  padding: 14px 16px;
  font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
}

/* ===== Fix “doble ojo” (Edge/IE) ===== */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }