/* =========================================================================== imprimir.css — lo que sale por la impresora del local --------------------------------------------------------------------------- Se carga con media="print", así que en pantalla no molesta. ⭐ LA IMPRESORA ES TÉRMICA DE 58mm (Cristian, ago-2026). Papel de 58mm ≈ 48mm imprimibles. Eso manda sobre todo el diseño: - NADA de dos columnas. `.h-cols` era un `flex` de dos tablas por renglón para que el cuadre cupiera en una hoja carta; en 48mm eso deja columnas de 24mm y los valores salen partidos o recortados. Aquí es `block`. - Sin bordes de tabla. En térmica de baja resolución las líneas de .5pt se comen el poco ancho útil y a veces ni salen. Se separa con espacio y con una raya punteada, que sí imprime bien. - Sin fondos negros ni grises. La térmica quema el papel: un `background:#111` sale como un bloque oscuro que se borra en semanas y gasta cabezal. - Monoespaciada. Es la única forma de que los pesos queden alineados a la derecha en un ancho fijo sin tabular. - `size: 58mm auto` → alto variable. La tirilla no tiene páginas: se corta donde termina. Si se pusiera un alto fijo, la impresora botaría papel en blanco al final de cada cuadre. Dos cosas distintas salen por este mismo papel, y el decide cuál: sin clase → #hoja (el cuadre de caja) .imprimiendo-recibo → #recibo (el recibo de turno que firma el empleado) =========================================================================== */ @page { size: 58mm auto; margin: 0; } body { background: #fff !important; color: #000 !important; margin: 0; padding: 0; width: 58mm; font-family: "Consolas", "Courier New", monospace; font-size: 8pt; line-height: 1.3; -webkit-print-color-adjust: exact; } /* Fuera todo lo interactivo. `.modal` va en esta lista porque es hijo directo de : no lo tapa el `main`. Si el cajero deja abierta la ventana de la clave del local y le da a imprimir, sin esto esa ventana saldría encima de la tirilla. */ .barra, .pasos, .nav-abajo, main, .acciones, .peligro, .modal { display: none !important; } /* Por defecto sale el CUADRE. La clase del body invierte el par. Que los dos estén siempre en el DOM y solo cambie cuál se muestra evita el bug clásico de imprimir con el contenido a medio armar. */ .hoja { display: block !important; } .recibo { display: none !important; } body.imprimiendo-recibo .hoja { display: none !important; } body.imprimiendo-recibo .recibo { display: block !important; } .hoja, .recibo { width: 48mm; margin: 0 auto; padding: 2mm 0 6mm; /* el 6mm de abajo es para que el corte no muerda texto */ color: #000; } /* ======================= EL CUADRE (#hoja) ============================== */ .h-cab { display: block; text-align: center; border-bottom: 1px dashed #000; padding-bottom: 2mm; margin-bottom: 2mm; } .h-cab h1 { font-size: 11pt; margin: 0 0 1mm; letter-spacing: .05em; } .h-cab p { margin: 0; font-size: 7pt; } .h-meta { text-align: center; margin-top: 1mm; } .h-meta p { margin: 0; font-size: 7.5pt; } /* En 48mm cada tabla va sola, una debajo de otra. */ .h-cols { display: block; margin: 0; } .h-cols > .h-tabla { width: 100%; } .h-tabla { width: 100%; border-collapse: collapse; margin: 0 0 2mm; break-inside: avoid; page-break-inside: avoid; } .h-tabla th, .h-tabla td { border: 0; padding: 0; font-size: 7.5pt; vertical-align: top; } .h-tabla thead th { text-align: left; font-size: 7.5pt; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px dashed #000; padding-bottom: .5mm; } /* El título del bloque no lleva fondo negro: en térmica es una mancha. */ .h-tabla thead tr:first-child th { background: none; color: #000; } .h-tabla td.n, .h-tabla th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* El detalle se recorta antes de empujar el valor fuera del papel: prefiero un nombre a medias que un número ilegible. El número es lo que se audita. */ .h-tabla td:first-child { max-width: 26mm; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El destino del domicilio va debajo del método, dentro de la misma celda: una quinta columna no cabe en 48mm. Esta celda SÍ puede envolver. */ .h-tabla td.d-cel { white-space: normal; overflow: visible; max-width: 22mm; } .h-tabla .d-dest { font-size: 6.5pt; } .h-tabla tr.tot td { font-weight: 700; background: none; border-top: 1px solid #000; padding-top: .5mm; } .h-tabla td.v { color: #000; font-style: italic; text-align: center; } .h-cierre { display: block; margin: 2mm 0; break-inside: avoid; } .h-cierre > div { display: flex; justify-content: space-between; align-items: baseline; border: 0; padding: .3mm 0; text-align: left; } .h-cierre span { display: inline; font-size: 7pt; letter-spacing: .04em; text-transform: uppercase; } .h-cierre b { display: inline; font-size: 9pt; font-variant-numeric: tabular-nums; } /* El renglón del descuadre se marca con un recuadro, no con negro sólido. */ .h-cierre > div:last-child { border: 1px solid #000; padding: 1mm; margin-top: 1mm; background: none; color: #000; } .h-cierre.cuadra > div:last-child, .h-cierre.descuadra > div:last-child { background: none; color: #000; outline: 0; } .h-cierre.descuadra > div:last-child { border-width: 2px; } /* Observaciones del turno. Enmarcadas y con el texto envolviendo (es lo único de la tirilla que NO es un número, así que aquí sí se deja fluir el renglón). Va pegado a la firma a propósito: es parte de lo que el cajero firma. */ .h-obs { border: 1px solid #000; padding: 1.5mm; margin: 2mm 0; break-inside: avoid; page-break-inside: avoid; } .h-obs-tit { font-size: 6.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .8mm; } .h-obs p { margin: 0; font-size: 7.5pt; line-height: 1.35; white-space: normal; overflow-wrap: break-word; word-break: break-word; } .h-firma { margin-top: 6mm; width: 100%; break-inside: avoid; } .h-linea { border-bottom: 1px solid #000; height: 8mm; } .h-firma p { margin: .5mm 0 0; font-size: 7.5pt; text-align: center; } .h-pie { font-size: 6.5pt; color: #000; margin-top: 2mm; text-align: center; } /* ================= EL RECIBO DE TURNO (#recibo) ========================= */ /* Sale en dos copias separadas por la línea de corte: una se la lleva quien recibe la plata y la otra queda firmada en la caja. Sin las dos, la firma no prueba nada — el empleado no tendría con qué reclamar y el local no tendría con qué sustentar la salida de efectivo. */ .r-tira { break-inside: avoid; page-break-inside: avoid; } .r-cab { text-align: center; font-weight: 700; font-size: 9pt; line-height: 1.2; } .r-tit { text-align: center; font-size: 8.5pt; letter-spacing: .1em; margin-top: 1mm; } .r-copia{ text-align: center; font-size: 6.5pt; letter-spacing: .08em; text-transform: uppercase; } .r-sub { font-size: 7pt; letter-spacing: .08em; text-transform: uppercase; margin: 1mm 0 .5mm; } .r-sep { border-top: 1px dashed #000; margin: 1.5mm 0; } .r-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; font-size: 7.5pt; } .r-fila > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r-fila > b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 400; } .r-fuerte { font-size: 9pt; margin-top: .5mm; } .r-fuerte > b { font-weight: 700; } /* La diferencia entre lo liquidado y lo pagado va enmarcada y centrada: es el renglón que el empleado tiene que poder leer de un vistazo, y el que hace que valga la pena imprimir el recibo en vez de solo entregar la plata. */ .r-dif { border: 2px solid #000; padding: 1.5mm; margin: 1.5mm 0; text-align: center; font-size: 8pt; font-weight: 700; line-height: 1.3; } .r-nota { font-size: 7pt; margin: 1mm 0; } .r-firma { margin-top: 4mm; font-size: 7pt; text-align: center; } .r-raya { border-bottom: 1px solid #000; height: 7mm; margin-top: 3mm; } .r-pie { font-size: 6.5pt; margin-top: 2mm; text-align: center; line-height: 1.3; } /* La línea de corte entre las dos copias. `break-inside: auto` a propósito: aquí SÍ puede romper, es justo donde se corta el papel. */ .r-corte { text-align: center; font-size: 7pt; letter-spacing: .1em; margin: 5mm 0; border-top: 1px dashed #000; padding-top: 1mm; } /* La previa de pantalla ("Ver el cuadre como se va a imprimir") usa estas MISMAS clases, pero este archivo entra con media="print" y allí no aplica. Sus estilos gemelos están en panel.css, bajo `.previa .h-*`. Si aquí se agrega o cambia una clase `h-`, hay que replicarla allá o la previa deja de parecerse a lo que sale por la impresora. */