/* ============================================================
   HUF — Componente: PairingCode (.hd-pairing-code)
   ------------------------------------------------------------
   Un secreto de un solo uso que una persona tiene que LEER EN VOZ ALTA
   por teléfono, o copiar a mano en otra máquina. Primer consumidor: el
   código para vincular un PC con ImpresionAgente
   (/admin/configuracion/impresoras).

   No es un `<code>` ni una etiqueta: es el elemento más importante de
   la pantalla durante los 15 minutos que vive, y se dicta carácter por
   carácter. Por eso:
   - tamaño grande y peso alto — se lee desde lejos, en la pantalla de
     un local, no a 40cm en una oficina;
   - fuente monoespaciada y `letter-spacing` amplio — separa los
     caracteres para que nadie lea "RN" donde dice "M";
   - `tabular-nums` para que los dígitos no bailen;
   - `user-select: all` — un clic selecciona el código entero, sin
     arrastrar y sin arriesgar copiar de más o de menos.

   El alfabeto del código ya excluye los caracteres ambiguos (sin
   I/L/O/U/0/1, ver OtpService.AlfabetoLegible): el componente resuelve
   la legibilidad, el generador resuelve la ambigüedad.
   ============================================================ */

.hd-pairing-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-space-2);
    padding: var(--hd-space-4);
    border-radius: var(--hd-radius-md);
    border: 1px dashed var(--hd-theme-accent);
    background: var(--hd-theme-surface);
    text-align: center;
}

.hd-pairing-code__value {
    font-family: var(--hd-font-mono);
    font-size: var(--hd-text-indicator);
    font-weight: 700;
    letter-spacing: 0.18em;
    font-variant-numeric: tabular-nums;
    color: var(--hd-theme-text);
    user-select: all;
    /* El letter-spacing agrega un hueco después del último carácter que
       descentra visualmente el bloque; se compensa acá. */
    text-indent: 0.18em;
    word-break: break-all;
}

.hd-pairing-code__caption,
.hd-pairing-code__note {
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
    margin: 0;
}

.hd-pairing-code__note {
    font-variant-numeric: tabular-nums;
}