/*
 * Llaves de acceso / passkeys (DPO-71). Prefijo .pk-*. Reutiliza tokens de theme.css y el lenguaje
 * de account-security.css. Movimiento: transform/opacity, ease-out fuerte, salida más rápida,
 * hover solo con puntero fino y prefers-reduced-motion respetado.
 */
:root { --pk-accent-text: #0f766e; --pk-ring: rgba(13, 148, 136, 0.28); }
.dark { --pk-accent-text: #5eead4; --pk-ring: rgba(94, 234, 212, 0.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pk-accent-text: #5eead4; --pk-ring: rgba(94, 234, 212, 0.25); } }

.pk-card__icon { background: var(--color-accent-soft) !important; color: var(--pk-accent-text) !important; }
.pk-card__error:empty { display: none; }
.pk-card__error { padding: 0 20px 14px; }

/* ----- Estado vacío ----- */
.pk-empty { display: flex; gap: 20px; align-items: center; padding: 6px 20px 22px 72px; }
.pk-empty__art { position: relative; display: grid; place-items: center; width: 72px; height: 72px; flex-shrink: 0; border-radius: 22px; background: var(--color-accent-soft); color: var(--pk-accent-text); }
.pk-empty__art .sec-svg { width: 34px; height: 34px; position: relative; }
.pk-empty__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.pk-empty__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-on-surface); }
.pk-empty .btn-primary .sec-svg, .pk-invite__cta .sec-svg { width: 18px; height: 18px; }
.pk-unsupported { font-size: 0.8125rem; color: var(--color-muted); }

/* Anillo con pulso suave (decorativo; desaparece con movimiento reducido) */
.pk-ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--pk-ring); animation: pk-pulse 2.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; pointer-events: none; }
.pk-ring--2 { animation-delay: 1.4s; }
@keyframes pk-pulse {
  0% { transform: scale(0.92); opacity: 0.9; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* ----- Filas ----- */
.pk-provider { color: var(--pk-accent-text); }
.pk-provider--apple, .pk-provider--google { background: var(--color-accent-soft); border-color: transparent; }
.pk-edit { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--color-muted); cursor: pointer; opacity: 0.7; transition: opacity 150ms ease, background-color 150ms ease; }
.pk-edit .sec-svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .pk-edit:hover { opacity: 1; background: var(--color-surface-alt); color: var(--color-on-surface); } }
.pk-name-input { width: 100%; max-width: 320px; padding: 6px 10px !important; font-size: 0.875rem !important; }
.pk-row.is-new { animation: pk-row-in 320ms cubic-bezier(0.23, 1, 0.32, 1); background: linear-gradient(90deg, var(--color-accent-soft), transparent 70%); }
@keyframes pk-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ----- Consejo (iPhone) ----- */
.pk-tip { display: flex; gap: 12px; align-items: flex-start; margin: 0 20px 14px; padding: 12px 12px 12px 14px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface-alt); text-align: left; }
.pk-tip[hidden] { display: none; }
.pk-tip__icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--color-accent-soft); color: var(--pk-accent-text); }
.pk-tip__icon .sec-svg { width: 17px; height: 17px; }
.pk-tip__text { flex: 1; font-size: 0.8125rem; line-height: 1.5; color: var(--color-on-surface-sec); }
.pk-tip__title { font-weight: 600; color: var(--color-on-surface); margin-bottom: 2px; }

/* ----- Invitación tras el login ----- */
/* En celular manda la hoja inferior de .sec-dialog (ancho completo); el ancho fijo es solo para pantallas grandes. */
@media (min-width: 640px) { dialog.pk-invite { width: min(420px, calc(100vw - 32px)); } }
.pk-invite__body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 24px 22px; }
.pk-invite__body[hidden] { display: none; }
.pk-invite__close { position: absolute; top: 10px; right: 10px; }
.pk-hero-art { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 6px; border-radius: 999px; background: var(--color-accent-soft); color: var(--pk-accent-text); }
.pk-hero-art__icon { position: relative; display: grid; place-items: center; }
.pk-hero-art__icon .sec-svg { width: 44px; height: 44px; }
.pk-invite__title { font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; color: var(--color-on-surface); outline: none; }
.pk-invite__lead { font-size: 0.875rem; line-height: 1.5; color: var(--color-on-surface-sec); max-width: 32ch; }
.pk-benefits { display: grid; gap: 6px; margin: 6px 0 2px; text-align: left; }
.pk-benefits li { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-on-surface); }
.pk-benefits .sec-svg { width: 16px; height: 16px; padding: 2px; border-radius: 999px; background: var(--sec-ok-soft, rgba(16, 185, 129, 0.12)); color: var(--sec-ok, #047857); }
.pk-invite__actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; margin-top: 8px; }
.pk-invite__cta { width: 100%; min-height: 46px; font-size: 0.9375rem !important; }
.pk-link { align-self: center; margin-top: 2px; padding: 6px 8px; border: 0; background: none; font-size: 0.75rem; color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pk-link:hover { color: var(--color-on-surface); } }
.pk-invite__done .pk-tip { margin: 6px 0 0; }
.dark .pk-invite .btn-primary, .dark .pk-banner .btn-primary, .dark .pk-card .btn-primary { background-color: #0f766e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pk-invite .btn-primary, :root:not([data-theme="light"]) .pk-banner .btn-primary { background-color: #0f766e; } }

/* ----- Banner del dashboard ----- */
.pk-banner {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding: 14px 48px 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: radial-gradient(120% 160% at 0% 0%, var(--color-accent-glow) 0%, transparent 60%), var(--color-surface-elevated);
  opacity: 1; transform: none;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.pk-banner[hidden] { display: none; }
@starting-style { .pk-banner:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
.pk-banner.is-leaving { opacity: 0; transform: translateY(-4px); transition-duration: 160ms; }
.pk-banner__icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--color-accent-soft); color: var(--pk-accent-text); }
.pk-banner__icon .sec-svg { width: 24px; height: 24px; }
.pk-banner__text { flex: 1; min-width: 0; }
.pk-banner__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--color-on-surface); }
.pk-banner__lead { margin-top: 2px; font-size: 0.8125rem; color: var(--color-on-surface-sec); }
.pk-new { padding: 2px 8px; border-radius: 999px; background: var(--color-accent-soft); color: var(--pk-accent-text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.pk-banner__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pk-banner__close { position: absolute; top: 8px; right: 8px; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--color-muted); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pk-banner__close:hover { background: var(--color-surface-alt); color: var(--color-on-surface); } }
.pk-banner .sec-svg { width: 20px; height: 20px; flex-shrink: 0; }
.pk-banner__close .sec-svg { width: 18px; height: 18px; }
.pk-banner .pk-link { margin: 0; }

/* ----- Login (fondo oscuro del hero) ----- */
.pk-login[hidden] { display: none; }
.pk-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; font-size: 0.75rem; color: var(--_muted, #94a3b8); }
.pk-or::before, .pk-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.pk-login-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--_text, #f8fafc); font-size: 0.875rem; font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) { .pk-login-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); } }
.pk-login-btn:active { transform: scale(0.98); }
.pk-login-btn:focus-visible { outline: 2px solid var(--_accent, #2dd4bf); outline-offset: 2px; }
.pk-login-btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.pk-login-btn__icon { width: 20px; height: 20px; color: var(--_accent, #2dd4bf); }
.pk-login-error { min-height: 0; margin-top: 8px; font-size: 0.8125rem; text-align: center; color: #fca5a5; }
/* Este equipo ya tiene llave: va primero, como acción principal, y la contraseña queda debajo. */
.pk-login--first .pk-login-btn { min-height: 48px; border-color: transparent; background: var(--_accent, #2dd4bf); color: var(--_bg, #020617); font-weight: 600; }
.pk-login--first .pk-login-btn__icon { color: currentColor; }
@media (hover: hover) and (pointer: fine) { .pk-login--first .pk-login-btn:hover { background: var(--_accent, #2dd4bf); border-color: transparent; opacity: 0.92; } }
.pk-login--first .pk-or { margin: 18px 0 18px; }
.pk-login-error:empty { display: none; }

/* ----- Celular ----- */
@media (max-width: 639px) {
  .pk-empty { flex-direction: column; align-items: flex-start; padding: 0 16px 18px; }
  .pk-empty .btn-primary { width: 100%; min-height: 44px; }
  .pk-tip { margin: 0 16px 14px; }
  .pk-banner { flex-wrap: wrap; padding: 14px 44px 14px 14px; }
  .pk-banner__actions { flex-basis: 100%; flex-wrap: wrap; }
  .pk-banner__actions .btn-primary { flex: 1 1 auto; min-height: 44px; }
  .pk-banner__actions .btn-ghost { min-height: 44px; }
  .pk-edit { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-ring { animation: none; display: none; }
  .pk-row.is-new { animation: none; }
  .pk-banner, .pk-banner.is-leaving { transform: none !important; transition: opacity 150ms ease; }
}