/* v1-pwa.css — lector de QR, QR personal, instalación de la PWA. Solo tokens existentes. */

/* ---------- Lector de QR (hoja a pantalla completa en móvil) ---------- */
.modal.qr-scan { max-width: 640px; }
@media (max-width: 639px) { .overlay:has(.qr-scan) { padding: 0; } .modal.qr-scan { height: 100dvh; max-height: none; border-radius: 0; border: 0; } .modal.qr-scan .modal__body { flex: 1; } }
.qrs { display: flex; flex-direction: column; gap: var(--s-3); }
.qrs__view { position: relative; background: #000; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; max-height: 56dvh; width: 100%; }
.qrs__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qrs__frame { position: absolute; inset: 14% 18%; border: 3px solid var(--accent); border-radius: var(--r-md); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38); pointer-events: none; }
.qrs__torch { position: absolute; right: var(--s-3); bottom: var(--s-3); }
.qrs__status { margin: 0; min-height: 3em; color: var(--ink-2); }
.qrs__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.qrs__actions .btn { flex: 1 1 160px; min-height: 44px; }
.qrs__manual { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.qrs__manual[hidden] { display: none; }

/* ---------- QR personal (Mi perfil › Fichar) ---------- */
.qrc__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); justify-items: center; margin-bottom: var(--s-4); }
@media (min-width: 640px) { .qrc__row { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); justify-items: stretch; align-items: center; } }
.qrc__code { background: #fff; padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--line-strong); line-height: 0; width: min(100%, 320px); }
.qr-svg { width: 100%; height: auto; display: block; }
.qrc__side { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.qrc__left { margin: 0; font: 600 var(--fs-md) var(--font-ui); font-variant-numeric: tabular-nums; }

/* ---------- Instalación ---------- */
.pwa-help { display: flex; flex-direction: column; gap: var(--s-3); }
.pwa-help__icon { border-radius: 18px; align-self: center; box-shadow: var(--shadow-1); }
.pwa-help ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--s-1); }
@media (display-mode: standalone) { .install-only-browser { display: none !important; } }