body {
    background-color: #f3f4f6;
}



body {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Asegura que el contenedor del QR no se desborde y mantenga proporciones */
#qrcode, 
#horizontal-qrcode, 
#vertical-qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* Fuerza a que la imagen o canvas del QR se adapte al hueco disponible */
#qrcode img, 
#qrcode canvas,
div[id*="qrcode"] img,
div[id*="qrcode"] canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 250px !important; /* Ajusta este límite según lo grande que lo quieras */
  max-height: 250px !important;
  object-fit: contain;
}