/* seguridad.css — Seguridad de acceso del Portal de Socios (public/js/seguridad-ui.js y seguridad-login.js). Solo tokens de styles.css: sin colores sueltos. */

/* Sección «Seguridad» del perfil */
.seg-card .tabla-wrap { margin-top: var(--sp-2); }
.seg-card .tabla th, .seg-card .tabla td { height: auto; }
.seg-card .tabla th[scope="row"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
/* La tarjeta vive en una columna angosta: la tabla se apila en tarjetitas a cualquier ancho (la misma regla de .tabla-apila, que solo se activa bajo 600 px de pantalla). */
.seg-card .tabla-apila, .seg-card .tabla-apila tbody, .seg-card .tabla-apila tr, .seg-card .tabla-apila th, .seg-card .tabla-apila td { display: block; }
.seg-card .tabla-apila { background: transparent; border-radius: 0; }
.seg-card .tabla-apila thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg-card .tabla-apila tr { background: var(--overlay-soft); border-radius: var(--r-14); margin-bottom: var(--sp-2); padding: var(--sp-2); }
.seg-card .tabla-apila th, .seg-card .tabla-apila td { border: 0; padding: var(--sp-1) var(--sp-2); }
.seg-card .tabla-apila td::before { content: attr(data-l) ": "; font-weight: 700; color: var(--text-secondary); font-size: var(--t-12); }
.seg-card .tabla-apila td:last-child::before { content: ""; }
.seg-acc { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seg-card .club-btns { margin-top: var(--sp-3); }
.seg-card .pill { vertical-align: middle; }

/* QR vivo: una barra de luz recorre el QR sin parar y un borde late: una captura de pantalla queda con la barra quieta y se nota que es una foto. El texto «Cambia en N s» sigue marcando el tiempo. */
.qr-vivo .cn2-qr { overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok-fg) 55%, transparent); animation: seg-pulso 2s ease-in-out infinite; }
.qr-vivo .cn2-qr::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ok-fg) 38%, transparent), transparent);
  animation: seg-barrido 2.4s linear infinite;
}
.seg-qr-pill { align-self: center; margin: var(--sp-2) auto 0; }
/* El carnet es claro en los dos temas: el pill usa el verde fijo, no el del tema oscuro (1,5:1 sobre blanco). */
.qr-vivo .seg-qr-pill { color: var(--exito); background: color-mix(in srgb, var(--exito) 14%, transparent); }
@keyframes seg-barrido { from { transform: translateY(-100%); } to { transform: translateY(360%); } }
@keyframes seg-pulso { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok-fg) 30%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok-fg) 70%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .qr-vivo .cn2-qr { animation: none; }
  .qr-vivo .cn2-qr::after { animation: none; opacity: 0; }
}

/* «Ingresar con passkey» en el diálogo de ingreso */
.seg-login { margin-top: var(--sp-3); }
.seg-login[hidden] { display: none; }
.seg-login-o { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); color: var(--text-secondary); font-size: var(--t-13); }
.seg-login-o::before, .seg-login-o::after { content: ""; flex: 1; height: 1px; background: var(--sep); }
.seg-login .err { margin: var(--sp-2) 0 0; }