/* Fix para QR en móvil - Agregar al final del archivo styles.css */

/* Remueve bordes redondeados del QR en todas las versiones para mejor escaneo */
#qrcode canvas {
  border-radius: 0 !important;
}

/* Espacio entre botón y QR en desktop */
@media (min-width: 900px) {
  .qr-wrap {
    margin-top: 16px;
  }
}

/* QR responsive fix - solo en móvil vertical */
@media (max-width: 899px) and (orientation: portrait) {
  .qr-wrap {
    /* Asegura que el contenedor del QR tenga ancho completo disponible */
    width: 100%;
    max-width: 100%;
    /* Centra perfectamente el contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Padding balanceado */
    padding: 16px 8px;
    /* Previene desbordamiento */
    overflow: hidden;
    box-sizing: border-box;
  }
  
  #qrcode {
    /* Limita el ancho máximo del QR */
    max-width: calc(100vw - 80px); /* Resta padding del container + card */
    max-height: calc(100vw - 80px);
    width: auto;
    height: auto;
    /* Centra el QR */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Previene desbordamiento */
    overflow: hidden;
  }
  
  #qrcode canvas {
    /* Hace el canvas responsive */
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    /* Mantiene aspecto cuadrado */
    aspect-ratio: 1;
    /* Centra el canvas */
    display: block;
    margin: 0 auto;
  }
  
  /* Ajusta los textos debajo del QR */
  #qrStatus,
  #redeemUrl {
    text-align: center;
    word-break: break-word;
    max-width: 100%;
    padding: 0 8px;
  }
}

 /* Espacio entre los dos containers */
  .grid {
    gap: 32px; /* Incrementa el espacio entre containers */
  }
  
  /* Espacio entre el header Panel de Caja y el container Acceso */
  .header-card {
    margin-bottom: 32px;
  }