/* ============================================================
   SistemaNegocio V2
   print.css

   Impresión de pedidos / tickets.
   ============================================================ */


/* ============================================================
   CONFIGURACIÓN GENERAL DE IMPRESIÓN
   ============================================================ */

@media print {

  @page {
    margin: 0;
    size: auto;
  }


  html,
  body {
    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    color: #000000 !important;
  }


  /* ==========================================================
     OCULTAR TODO EL SISTEMA
     ========================================================== */

  body.printing-order > * {
    display: none !important;
  }


  /* ==========================================================
     MOSTRAR SOLAMENTE EL ÁREA DE IMPRESIÓN
     ========================================================== */

  body.printing-order #order-print-area {
    display: block !important;

    position: static !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    color: #000000 !important;

    visibility: visible !important;
  }


  body.printing-order #order-print-area * {
    visibility: visible !important;
  }


  /* ==========================================================
     TICKET
     ========================================================== */

  .order-ticket {
    width: 72mm;

    max-width: 72mm;

    margin: 0 auto;

    padding:
      4mm
      3mm;

    box-sizing: border-box;

    background: #ffffff !important;

    color: #000000 !important;

    font-family:
      Arial,
      Helvetica,
      sans-serif;

    font-size: 11px;

    line-height: 1.35;
  }


  /* ==========================================================
     NEGOCIO
     ========================================================== */

  .ticket-business {
    text-align: center;
  }


  .ticket-business h2 {
    margin:
      0
      0
      4px;

    padding: 0;

    font-size: 16px;

    line-height: 1.2;

    color: #000000 !important;
  }


  .ticket-business div {
    margin-top: 2px;

    font-size: 10px;
  }


  /* ==========================================================
     DIVISOR
     ========================================================== */

  .ticket-divider {
    width: 100%;

    margin:
      8px
      0;

    border-top:
      1px dashed
      #000000;
  }


  /* ==========================================================
     INFORMACIÓN DEL PEDIDO
     ========================================================== */

  .ticket-order-info {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    font-size: 10px;
  }


  .ticket-order-info strong {
    color: #000000 !important;
  }


  /* ==========================================================
     SECCIONES
     ========================================================== */

  .ticket-section {
    margin:
      6px
      0;
  }


  .ticket-section-title {
    margin-bottom: 5px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;
  }


  /* ==========================================================
     PRODUCTOS
     ========================================================== */

  .ticket-item {
    padding:
      5px
      0;

    border-bottom:
      1px dotted
      #999999;
  }


  .ticket-item:last-child {
    border-bottom: 0;
  }


  .ticket-item-name {
    margin-bottom: 2px;

    font-weight: 700;

    word-break: break-word;
  }


  .ticket-item-detail {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    font-size: 10px;
  }


  .ticket-item-detail strong {
    flex-shrink: 0;

    color: #000000 !important;
  }


  /* ==========================================================
     SIN PRODUCTOS
     ========================================================== */

  .ticket-empty {
    padding:
      8px
      0;

    text-align: center;

    font-style: italic;
  }


  /* ==========================================================
     TOTAL
     ========================================================== */

  .ticket-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    font-size: 14px;

    font-weight: 700;
  }


  .ticket-total strong {
    font-size: 15px;

    color: #000000 !important;
  }


  /* ==========================================================
     FOOTER
     ========================================================== */

  .ticket-footer {
    margin-top: 8px;

    text-align: center;

    font-size: 10px;
  }


  /* ==========================================================
     EVITAR CORTES INCÓMODOS
     ========================================================== */

  .ticket-item,
  .ticket-section,
  .ticket-total {
    break-inside: avoid;

    page-break-inside: avoid;
  }


  /* ==========================================================
     QUITAR ESTILOS DEL NAVEGADOR
     ========================================================== */

  a {
    color: #000000 !important;

    text-decoration: none !important;
  }


  button,
  input,
  select,
  textarea {
    display: none !important;
  }


  /* ==========================================================
     IMPRESORA TÉRMICA MÁS ANGOSTA
     ========================================================== */

  @media print and (max-width: 60mm) {

    .order-ticket {
      width: 56mm;

      max-width: 56mm;

      padding:
        3mm
        2mm;

      font-size: 10px;
    }


    .ticket-business h2 {
      font-size: 14px;
    }


    .ticket-total {
      font-size: 12px;
    }


    .ticket-total strong {
      font-size: 13px;
    }

  }

}