/* =============================================
   ESTILOS DE IMPRESIÓN PARA TICKETS
   - Compatible con impresoras térmicas 58mm/80mm
   - Auto-print sin vista previa
   ============================================= */

@media print {
  /* Ocultar todo excepto el ticket */
  body * {
    visibility: hidden !important;
  }
  
  .ticket-print,
  .ticket-print * {
    visibility: visible !important;
  }
  
  /* Configuración de página para impresora térmica */
  @page {
    size: 80mm auto; /* Ancho fijo, altura automática */
    margin: 0;
    padding: 0;
  }
  
  body {
    margin: 0;
    padding: 0;
    background: white !important;
    color: black !important;
  }
  
  .ticket-print {
    position: absolute;
    top: 0;
    left: 0;
    width: 80mm;
    padding: 5mm;
    font-family: 'Courier New', monospace;
    font-size: 10pt;
    line-height: 1.4;
  }
  
  /* Ocultar elementos de interfaz */
  .no-print,
  button,
  .btn,
  nav,
  header,
  footer,
  .main-header,
  .main-sidebar,
  .main-footer,
  .breadcrumb {
    display: none !important;
  }
}

/* Estilos para vista en pantalla del ticket */
.ticket-print {
  max-width: 300px;
  margin: 20px auto;
  padding: 15px;
  border: 2px dashed #999;
  background: white;
  color: black;
  font-family: 'Courier New', monospace;
}

.ticket-print h4 {
  text-align: center;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
}

.ticket-print .ticket-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  font-size: 11px;
}

.ticket-print .ticket-row strong {
  font-weight: bold;
}

.ticket-print hr {
  border: none;
  border-top: 1px dashed #aaa;
  margin: 8px 0;
}

.ticket-print .qr-container {
  text-align: center;
  margin: 10px 0;
}

.ticket-print .qr-container img {
  max-width: 140px;
  height: auto;
}

.ticket-print .ticket-footer {
  text-align: center;
  font-size: 9px;
  margin-top: 10px;
  color: #555;
}