/* ===========================================================================
   Impresion del comprobante

   Lo que se imprime es el papel, no la aplicacion. Antes salian tres hojas con
   la cabecera, las pestañas y hasta el campo "Buscar por ID o destinatario"
   dibujado en el papel. Ahora sale una sola hoja con el comprobante.

   Nota: la fecha y la direccion que Chrome dibuja en el borde de la hoja son
   del navegador, no del sitio. Se sacan desde el dialogo de impresion, en
   Mas ajustes > Encabezados y pies de pagina.
   =========================================================================== */

@page {
  size: A4 portrait;
  margin: 12mm;
}

@media print {

  /* --- 1. Solo el comprobante llega al papel -----------------------------
     Se ocultan todos los elementos y se vuelve visible unicamente el
     comprobante y lo que tiene adentro. */
  body * { visibility: hidden !important; }
  .lfe-comprobante,
  .lfe-comprobante * { visibility: visible !important; }

  .lfe-comprobante {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    width: 100% !important;
    margin: 0 !important;
    border-width: 1.5pt !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* fuera del papel: navegador de comprobantes, botones, cabecera, pestañas */
  .lfe-navegador,
  #app div[style*="position:sticky"],
  #app button,
  #app .btn,
  #app a { display: none !important; }

  /* --- 2. Todo en una hoja ----------------------------------------------
     El comprobante esta dimensionado para pantalla (44px el ID, 64px el
     total). En papel eso ocupaba tres hojas. */
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .lfe-comprobante div { padding: 0 !important; }
  .lfe-comprobante > div { padding: 10pt 12pt !important; }
  .lfe-comprobante > div > div { padding: 8pt 12pt !important; }

  .lfe-comprobante * {
    color: #000 !important;
    background: transparent !important;
    line-height: 1.25 !important;
  }

  /* jerarquia tipografica, en puntos */
  .lfe-comprobante div[style*="font-size:44px"] { font-size: 20pt !important; }
  .lfe-comprobante div[style*="font-size:64px"] { font-size: 18pt !important; }
  .lfe-comprobante div[style*="font-size:48px"] { font-size: 15pt !important; }
  .lfe-comprobante div[style*="font-size:24px"],
  .lfe-comprobante div[style*="font-size:22px"] { font-size: 11pt !important; }
  .lfe-comprobante div[style*="font-size:18px"],
  .lfe-comprobante div[style*="font-size:16px"],
  .lfe-comprobante div[style*="font-size:15px"] { font-size: 9pt !important; }
  .lfe-comprobante div[style*="font-size:12px"],
  .lfe-comprobante span { font-size: 7.5pt !important; }

  /* el total deja de ser un bloque de color y pasa a ser un recuadro */
  .lfe-comprobante div[style*="background:var(--color-accent)"] {
    border: 1.5pt solid #000 !important;
  }

  /* los bordes finos del diseño, en grosor de imprenta */
  .lfe-comprobante div[style*="border-bottom:2px solid"] { border-bottom: 0.75pt solid #000 !important; }
  .lfe-comprobante div[style*="border-left:2px solid"] { border-left: 0.75pt solid #000 !important; }
  .lfe-comprobante div[style*="border-top:2px solid"] { border-top: 0.75pt solid #000 !important; }

  /* el logotipo impreso en negro, sin el cuadro azul */
  .lfe-comprobante svg path { fill: #000 !important; }
}