/* ============================================================
   Entrar con Face ID, Touch ID o la huella (js/core/llaves.js y
   llaves-equipos.js): el botón de la entrada, la pantalla de bloqueo,
   los equipos y el interruptor de Configuración. El globo que lo
   ofrece usa las piezas de css/instalar.css.
   ============================================================ */
.login__o {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-12); color: var(--text-muted);
}
.login__o::before, .login__o::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login__llave { gap: var(--s-2); }

/* ---- Bloqueo: la misma tarjeta de la entrada, con Nyc dormido ---- */
.bloqueo { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.bloqueo .login__hint { max-width: 34ch; margin: 0; }
.bloqueo .login__error { justify-self: stretch; text-align: left; }
.bloqueo .btn--block { justify-self: stretch; gap: var(--s-2); }
.bloqueo__nyc { display: block; width: 84px; aspect-ratio: 200 / 210; margin-bottom: calc(-1 * var(--s-2)); }
.bloqueo__nyc > img, .bloqueo__nyc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.login.is-bloqueo .login__logo { margin-bottom: var(--s-6); }
.bloqueo__clave { justify-self: stretch; margin-top: 0; text-align: left; }

/* ---- Equipos con llave ---- */
.llaves-modal { display: grid; gap: var(--s-4); }
.llaves-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.llaves-item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
  padding: var(--s-3); border-radius: var(--r-lg); background: var(--bg-muted);
}
.llaves-item__icono {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r); background: var(--brand-soft); color: var(--brand-ink);
}
.llaves-item__texto { min-width: 0; }
.llaves-item__texto b { font-size: var(--fs-14); font-weight: 600; color: var(--text-primary); margin-right: var(--s-2); }
.llaves-item__texto small { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--text-secondary); line-height: 1.4; }
.llaves-vacio { margin: 0; font-size: var(--fs-13); line-height: 1.45; color: var(--text-secondary); }
.llaves-activar { display: grid; gap: var(--s-3); }
.llaves-activar .btn { gap: var(--s-2); }
.llaves-activar p { margin: 0; }
.llaves-clave { display: flex; gap: var(--s-2); }
.llaves-clave .field__input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg-surface); color: var(--text-primary);
}
.llaves-clave .field__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.llaves-nota {
  margin: 0; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 14px); border-radius: var(--r);
  background: var(--bg-inset); display: grid; gap: 6px; list-style: disc;
  font-size: var(--fs-12); line-height: 1.45; color: var(--text-secondary);
}
.llaves-nota li::marker { color: var(--text-muted); }

/* ---- Configuración → Usuarios: el interruptor ---- */
.llaves-ajuste {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
  margin-bottom: var(--s-4); padding: var(--s-4); border-radius: var(--r-lg);
  background: var(--bg-surface); border: 1px solid var(--border);
}
.llaves-ajuste__icono {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r); background: var(--brand-soft); color: var(--brand-ink);
}
.llaves-ajuste__texto b { display: block; font-size: var(--fs-14); font-weight: 600; color: var(--text-primary); }
.llaves-ajuste__texto small { display: block; margin-top: 2px; font-size: var(--fs-12); line-height: 1.45; color: var(--text-secondary); }
.llaves-interruptor { position: relative; display: inline-block; width: 46px; height: 28px; cursor: pointer; }
.llaves-interruptor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.llaves-interruptor span {
  position: absolute; inset: 0; border-radius: var(--r-full); background: var(--border-strong);
  transition: background 200ms ease;
}
.llaves-interruptor span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; transition: transform 260ms cubic-bezier(0.3, 1.3, 0.5, 1);
}
.llaves-interruptor input:checked + span { background: var(--brand-btn, var(--brand)); }
.llaves-interruptor input:checked + span::after { transform: translateX(18px); }
.llaves-interruptor input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-ring); }
.llaves-interruptor input:disabled + span { opacity: .6; }
@media (max-width: 520px) {
  .llaves-ajuste { grid-template-columns: minmax(0, 1fr) auto; }
  .llaves-ajuste__icono { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .llaves-interruptor span, .llaves-interruptor span::after { transition: none; }
}