/* ============================================================
   HospedaYa — style.css
   Estilos auxiliares e impresión de tickets térmicos 80mm
   ============================================================ */

/* Contenedor del ticket: oculto en pantalla, visible al imprimir */
#ticket-print {
  display: none;
}

/* Caja (PC): 6 tarjetas por método en una fila; en pantallas medianas, 2 filas de 3 */
.caja-metodos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 1280px) {
  .caja-metodos { grid-template-columns: repeat(3, 1fr); }
}

/* ── IMPRESIÓN ─────────────────────────────────────────────── */
@media print {
  /* Ocultar toda la app cuando se imprime */
  body.imprimiendo > *:not(#ticket-print) {
    display: none !important;
  }

  body.imprimiendo #ticket-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
    margin: 0;
    padding: 0;
    background: white;
    color: #000;
  }

  /* Tamaño de papel: rollo térmico 80mm de ancho, alto automático */
  @page {
    size: 80mm auto;
    margin: 0;
  }

  html, body {
    width: 80mm;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
  }

  /* Evitar cortes raros del QR y las líneas */
  #ticket-print img,
  #ticket-print canvas,
  #ticket-print table {
    page-break-inside: avoid;
  }
}

/* Fechas en español: "28 de setiembre de 2026" → solo la primera letra en
   mayúscula (text-transform:capitalize ponía "28 De Setiembre De 2026") */
[style*="text-transform:capitalize"] { text-transform: none !important; }
span[style*="text-transform:capitalize"] { display: inline-block; }
[style*="text-transform:capitalize"]::first-letter { text-transform: uppercase; }

/* El QR generado (qrcodejs) puede venir como <img> o <canvas>:
   lo centramos dentro de su caja */
#qr-ticket-box img,
#qr-ticket-box canvas {
  margin: 0 auto;
  display: block;
}