/** * Thermal Voucher Print Stylesheet * Activated via: * * Optimized for 80mm thermal paper (72mm content + 4mm margins each side). * Uses Lucida Console monospace font per FR-026. * Spec references: FR-026, FR-027, research.md R-09 */ @media print { /* ── Page Setup ────────────────────────────────────────────────────── */ @page { size: 80mm auto; margin: 4mm; } /* ── Hide Non-Voucher UI ───────────────────────────────────────────── */ /* Navigation, headers, footers, FAB, sidebars all hidden during print */ nav, header, footer, aside, [data-sidebar], [data-bottom-nav], [data-top-header], [data-fab], [data-no-print], .sidebar, .bottom-nav, .top-header, .fab, .no-print { display: none !important; } /* ── Base Print Styles ─────────────────────────────────────────────── */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; background: white !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } body { font-family: 'Lucida Console', 'Courier New', Courier, monospace !important; font-size: 9pt !important; line-height: 1.3 !important; width: 72mm !important; margin: 0 !important; padding: 0 !important; } /* ── Voucher Container ─────────────────────────────────────────────── */ .voucher { width: 100%; font-family: 'Lucida Console', 'Courier New', Courier, monospace; font-size: 9pt; line-height: 1.3; } /* ── Voucher Header (brand + document type) ────────────────────────── */ .voucher-header { text-align: center; font-weight: bold; font-size: 10pt; border-bottom: 1px solid #000; padding-bottom: 3mm; margin-bottom: 3mm; } .voucher-header .brand-name { font-size: 11pt; font-weight: bold; display: block; } .voucher-header .doc-type { font-size: 9pt; display: block; margin-top: 1mm; } /* ── Voucher Number (prominent at top per FR-027) ──────────────────── */ .voucher-number { text-align: center; font-size: 11pt; font-weight: bold; border: 1px solid #000; padding: 2mm; margin-bottom: 3mm; letter-spacing: 0.5mm; } /* ── Voucher Field (label: value rows) ─────────────────────────────── */ .voucher-field { display: flex; justify-content: space-between; font-size: 8pt; line-height: 1.4; margin-bottom: 1mm; gap: 2mm; } .voucher-field .label { font-weight: bold; white-space: nowrap; min-width: 24mm; } .voucher-field .value { text-align: right; word-break: break-word; } /* ── Voucher Section Divider ───────────────────────────────────────── */ .voucher-divider { border-top: 1px dashed #000; margin: 2mm 0; } /* ── Voucher Amount (currency values) ──────────────────────────────── */ .voucher-amount { display: flex; justify-content: space-between; font-size: 10pt; font-weight: bold; margin-bottom: 1mm; } .voucher-amount.total { border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 1mm 0; margin-top: 2mm; } /* ── Voucher Footer (signature line) ───────────────────────────────── */ .voucher-footer { margin-top: 4mm; padding-top: 2mm; border-top: 1px solid #000; text-align: center; font-size: 8pt; } .voucher-footer .signature-line { border-top: 1px solid #000; margin-top: 8mm; padding-top: 1mm; font-size: 7pt; } } /* ── Operation voucher (single constancia, any status) ───────────────────── The component portals its root to , so hiding every other direct child of isolates the print output from the application shell. */ @media print { body > *:not(.operation-voucher) { display: none !important; } .operation-voucher { display: block !important; box-sizing: border-box; width: 100%; /* Inner safety margin on top of the @page margin so content never prints flush against the paper edge. */ padding: 3.5mm 3mm; font-family: Arial, Helvetica, 'Segoe UI', sans-serif; font-size: 7.5pt; line-height: 1.35; color: #000; } .operation-voucher .v-header { text-align: center; padding-bottom: 2mm; } .operation-voucher .v-logo { display: block; max-height: 12mm; margin: 0 auto 1mm; } .operation-voucher .v-brand { display: block; font-size: 15pt; font-weight: 800; letter-spacing: 0.4mm; } .operation-voucher .v-brand-subtitle { display: block; font-size: 8pt; font-weight: 600; } .operation-voucher .v-title { text-align: center; font-size: 9pt; font-weight: 800; white-space: nowrap; margin-top: 2mm; } .operation-voucher .v-tagline { text-align: center; font-size: 7.5pt; font-weight: 700; letter-spacing: 0.3mm; margin-top: 1mm; } .operation-voucher .v-line { border-top: 2.5px solid #000; margin: 2mm 0; } .operation-voucher .v-section-title { font-size: 8pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2mm; margin-bottom: 0.6mm; } .operation-voucher .v-section-title--center { text-align: center; } .operation-voucher .v-row { display: flex; align-items: baseline; gap: 1.5mm; margin-bottom: 0.4mm; } .operation-voucher .v-label { flex: 0 0 25mm; font-weight: 600; white-space: nowrap; } .operation-voucher .v-colon { flex: 0 0 auto; font-weight: 700; } .operation-voucher .v-value { flex: 1 1 auto; font-weight: 600; word-break: break-word; } .operation-voucher .v-amount { font-variant-numeric: tabular-nums; } .operation-voucher .v-value--upper { text-transform: uppercase; } .operation-voucher .v-row--strong .v-label, .operation-voucher .v-row--strong .v-value { font-weight: 800; } .operation-voucher .v-total { border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; padding: 1.2mm 0; margin: 1.5mm 0; } .operation-voucher .v-total .v-label { flex: 0 0 auto; font-size: 9.5pt; font-weight: 800; } .operation-voucher .v-total .v-value { font-size: 9.5pt; font-weight: 800; } .operation-voucher .v-divider { border-top: 1px dashed #000; margin: 2mm 0; } .operation-voucher .v-tracking-code { text-align: center; font-size: 16pt; font-weight: 800; letter-spacing: 0.6mm; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 1mm 0; } .operation-voucher .v-qr { text-align: center; margin: 1.5mm 0 1mm; } .operation-voucher .v-qr svg { display: inline-block; width: 32mm; height: 32mm; } .operation-voucher .v-tracking-ref { text-align: center; font-size: 8.5pt; font-weight: 700; margin-bottom: 1mm; } .operation-voucher .v-important { margin: 0; padding: 0 0 0 5mm; list-style: disc outside; font-size: 7pt; line-height: 1.4; } .operation-voucher .v-important li { list-style: disc outside; margin-bottom: 1mm; } .operation-voucher .v-signature { margin-top: 5mm; text-align: left; font-size: 7.5pt; } .operation-voucher .v-signature-line { border-top: 1px solid #000; width: 100%; margin-top: 8mm; } .operation-voucher .v-footer { text-align: center; margin-top: 5mm; padding-top: 2mm; border-top: 1px solid #000; font-size: 7.5pt; } .operation-voucher .v-footer .v-brand { font-size: 13pt; margin-top: 1mm; } }