/* EVBro — Fingerprint sign-in (passkeys): sign-in screen button and Ajustes → Sistema card.
   Standalone sheet: the load ORDER (templates/index.html) follows the original cascade; do not change it. */

/* ===== Sign-in screen ===== */
.auth-passkey { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; margin-top: 0.9rem; }
.auth-or {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.auth-passkey .btn-secondary {
  width: 100%; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.auth-passkey .btn-secondary:disabled { opacity: 0.6; cursor: progress; }

/* ===== Ajustes → Sistema ===== */
.passkey-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.passkey-list:empty { display: none; }
.passkey-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-color); border-radius: 12px;
}
.passkey-item > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.passkey-item strong { color: var(--text-primary); font-size: 0.95rem; overflow-wrap: anywhere; }
.passkey-item small { color: var(--text-muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.passkey-item button { min-height: 44px; flex: none; }
.passkey-empty { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.75rem; }
.passkey-add { width: 100%; min-height: 44px; }
.passkey-add:disabled { opacity: 0.5; cursor: not-allowed; }