/* ============================================================
   HUF — Componente: QrPanel (.hd-qr-panel)
   ------------------------------------------------------------
   Código QR para escanear con un teléfono: vincular WhatsApp, portal
   de cliente, control de acceso.

   Las medidas de aquí son requisito del lector, no decoración:
   - fondo BLANCO siempre, también bajo tema oscuro — un QR invertido
     no lo lee la mayoría de cámaras;
   - margen de silencio alrededor del código (el "quiet zone" del
     estándar), que es lo que aporta el padding;
   - lado mínimo de 200px para que se lea a distancia de brazo.
   ============================================================ */

.hd-qr-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-space-2);
    text-align: center;
}

.hd-qr-panel__image {
    width: 100%;
    max-width: 15rem;   /* 240px */
    min-width: 12.5rem; /* 200px — por debajo, la cámara falla a distancia */
    aspect-ratio: 1;
    object-fit: contain;
    padding: var(--hd-space-3);
    background: #fff;
    border-radius: var(--hd-radius-md);
    border: 1px solid var(--hd-color-border);
}

/* Variante canvas: el QR no llega de imagen, lo dibuja qrcodejs en cliente
   dentro de este contenedor vacío. Mismo marco visual, ancho fijo por
   contenido (qrcodejs fija sus propios px al elemento que dibuja adentro). */
.hd-qr-panel__canvas {
    display: inline-block;
    padding: var(--hd-space-3);
    background: #fff;
    border-radius: var(--hd-radius-md);
    border: 1px solid var(--hd-color-border);
}

.hd-qr-panel__caption,
.hd-qr-panel__note {
    margin: 0;
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
}