/*
 * Estilos específicos del generador de QR.
 * El resto de la interfaz (formularios, grid, tema) lo aporta Bootstrap 5.3.
 */

/* --- Grupos de contenido: solo se muestra el activo --- */
.payload-group {
    display: none;
}

.payload-group.is-active {
    display: block;
}

/* --- Marco de la vista previa del QR --- */
.qr-frame {
    display: inline-block;
    padding: 1rem;
    border-radius: 0.75rem;
    line-height: 0;
    max-width: 100%;
}

.qr-frame img {
    max-width: 320px;
    width: 100%;
    height: auto;
}

/* Fondo a cuadros para que se note la transparencia del QR. */
.qr-frame.checkerboard {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* --- Bloque de contenido codificado en el resultado --- */
.encoded-pre {
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.8rem;
    margin: 0;
}

/* --- Iconos del botón de tema: se muestra el del tema activo --- */
.theme-icon-light,
.theme-icon-dark {
    display: none;
}

[data-bs-theme="dark"] .theme-icon-dark {
    display: inline-block;
}

[data-bs-theme="light"] .theme-icon-light {
    display: inline-block;
}