/* ═══════════════════════════════════════════════════════════════
   print.css — Tirilla térmica 58mm
   Activo en @media print Y en .print-preview (vista previa en app)
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables tirilla ──────────────────────────────────────────── */
:root {
  --tirilla-width:      58mm;
  --tirilla-font:       'Courier New', Courier, monospace;
  --tirilla-size:       9pt;
  --tirilla-size-total: 11pt;
  --tirilla-size-foot:  8pt;
  --tirilla-lh:         1.3;
}

/* ── Vista previa en pantalla ───────────────────────────────────── */
.print-preview {
  display: block;
  width: var(--tirilla-width);
  min-width: var(--tirilla-width);
  max-width: var(--tirilla-width);
  margin: 0 auto;
  padding: 4mm 2mm;
  background: #fff;
  color: #000;
  font-family: var(--tirilla-font);
  font-size: var(--tirilla-size);
  line-height: var(--tirilla-lh);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  border-radius: 2px;
  overflow: hidden;
  word-break: break-word;
  /* Oculta en pantalla normal — solo visible cuando se activa */
  display: none;
}

.print-preview.visible {
  display: block;
}

/* ── Secciones con page-break-inside: avoid ─────────────────────── */
.tirilla-header,
.tirilla-cliente,
.tirilla-lineas,
.tirilla-total,
.tirilla-footer {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* ── Separador de guiones ───────────────────────────────────────── */
.tirilla-sep {
  display: block;
  font-family: var(--tirilla-font);
  font-size: var(--tirilla-size);
  color: #000;
  white-space: pre;
  line-height: var(--tirilla-lh);
  overflow: hidden;
}

/* ── Header: empresa ────────────────────────────────────────────── */
.tirilla-header {
  text-align: center;
  margin-bottom: 1mm;
}

.tirilla-header__empresa {
  font-size: 11pt;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.tirilla-header__nit {
  font-size: var(--tirilla-size);
}

.tirilla-header__pedido {
  font-size: var(--tirilla-size);
  margin-top: 1mm;
  text-align: left;
}

.tirilla-header__fecha {
  font-size: var(--tirilla-size);
  text-align: left;
}

/* ── Cliente ────────────────────────────────────────────────────── */
.tirilla-cliente {
  margin: 1mm 0;
}

.tirilla-cliente__row {
  display: block;
  font-size: var(--tirilla-size);
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: var(--tirilla-lh);
}

.tirilla-cliente__nombre {
  font-weight: bold;
  text-transform: uppercase;
}

/* ── Cabecera de columnas ───────────────────────────────────────── */
.tirilla-col-header {
  display: block;
  font-size: var(--tirilla-size);
  font-weight: bold;
  white-space: pre;
  overflow: hidden;
  line-height: var(--tirilla-lh);
  margin-top: 1mm;
}

/* ── Líneas de productos ────────────────────────────────────────── */
.tirilla-lineas {
  margin: 0;
}

.tirilla-linea {
  display: block;
  font-size: var(--tirilla-size);
  white-space: pre;
  overflow: hidden;
  text-overflow: clip;
  line-height: var(--tirilla-lh);
}

/* ── Total ──────────────────────────────────────────────────────── */
.tirilla-total {
  margin-top: 1mm;
}

.tirilla-total__row {
  display: block;
  font-size: var(--tirilla-size-total);
  font-weight: bold;
  white-space: pre;
  text-align: right;
  line-height: var(--tirilla-lh);
}

/* ── Estado del pedido ──────────────────────────────────────────── */
.tirilla-estado {
  display: block;
  font-size: var(--tirilla-size);
  white-space: pre;
  line-height: var(--tirilla-lh);
}

/* ── Footer ─────────────────────────────────────────────────────── */
.tirilla-footer {
  margin-top: 1mm;
  text-align: center;
}

.tirilla-footer__linea {
  display: block;
  font-size: var(--tirilla-size-foot);
  line-height: var(--tirilla-lh);
}

.tirilla-footer__url {
  font-size: var(--tirilla-size-foot);
  font-weight: bold;
}

/* ── @media print — activo al imprimir ──────────────────────────── */
@media print {

  /* Ocultar todo el chrome de la app */
  body > *:not(.print-root) {
    display: none !important;
  }

  .print-root {
    display: block !important;
  }

  /* Reset de página */
  @page {
    size: 58mm auto;
    margin: 2mm;
  }

  html, body {
    width: 58mm;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
  }

  /* La tirilla en modo impresión */
  .print-preview {
    display: block !important;
    width: 58mm;
    max-width: 58mm;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    background: #fff;
    color: #000;
    font-family: var(--tirilla-font);
    font-size: var(--tirilla-size);
    line-height: var(--tirilla-lh);
  }

  /* Forzar negro sobre blanco en toda la tirilla */
  .print-preview * {
    color: #000 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Evitar cortes dentro de secciones */
  .tirilla-header,
  .tirilla-cliente,
  .tirilla-lineas,
  .tirilla-total,
  .tirilla-footer {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Sin links subrayados */
  a {
    text-decoration: none;
    color: #000 !important;
  }
}