/* ============================================================= ClozeeBag — Print rules para impressão de etiquetas. Como usar: - A página que lista etiquetas adiciona uma classe no (ou num wrapper) ANTES de chamar cbEtiquetas.imprimir(): document.body.classList.add('cb-print-t50'); E remove ao terminar. - O layout de impressão: * Oculta tudo (navbar, sidebar, etc.) exceto o contêiner com classe .cb-print-area. * Ajusta @page para o tamanho físico do papel/etiqueta. ============================================================= */ @media print { /* ----------------- Reset agressivo de ancestrais ----------------- O navegador resolve `position: absolute; inset: 0` em relação ao bloco contêiner positivo mais próximo. O Blazor (MainLayout, container-fluid, etc.) tem ancestrais com `position: relative` e paddings que empurravam a `.cb-print-area` ~18mm pra baixo — fazendo a primeira etiqueta cair em ~30mm em vez dos 12mm corretos. Solução: zerar margem/padding de html+body e forçar TODOS os ancestrais a `position: static` no modo impressão. As regras específicas de `.cb-print-area` abaixo têm specificity maior (0,2,1 vs 0,1,1) e mantêm o `position: absolute` apenas no alvo. */ html, body { margin: 0 !important; padding: 0 !important; } body.cb-print-t50 *, body.cb-print-t60 *, body.cb-print-a4 *, body.cb-print-a4t * { position: static !important; transform: none !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } /* ----------------- Regras comuns ----------------- */ body.cb-print-t50, body.cb-print-t60, body.cb-print-a4, body.cb-print-a4t { background: #fff !important; margin: 0 !important; padding: 0 !important; } body.cb-print-t50 *:not(.cb-print-area):not(.cb-print-area *), body.cb-print-t60 *:not(.cb-print-area):not(.cb-print-area *), body.cb-print-a4 *:not(.cb-print-area):not(.cb-print-area *), body.cb-print-a4t *:not(.cb-print-area):not(.cb-print-area *) { visibility: hidden !important; } body.cb-print-t50 .cb-print-area, body.cb-print-t60 .cb-print-area, body.cb-print-a4 .cb-print-area, body.cb-print-a4t .cb-print-area { visibility: visible !important; position: absolute !important; inset: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff !important; } /* ----------------- Térmica 50x30 ----------------- */ body.cb-print-t50 .cb-print-area > * { page-break-after: always; break-after: page; } /* ----------------- Térmica 60x40 ----------------- */ body.cb-print-t60 .cb-print-area > * { page-break-after: always; break-after: page; } /* ----------------- A4 Pimaco 6281 ----------------- 24 etiquetas por folha — 3 colunas × 8 linhas. Dim. da etiqueta: 66,7 × 33,9 mm. Margens da folha: ~ 8 mm topo/base, 7,7 mm laterais. */ body.cb-print-a4 .cb-print-area { display: grid !important; grid-template-columns: repeat(3, 66.7mm); grid-auto-rows: 33.9mm; gap: 0 !important; padding: 8mm 7.7mm !important; column-gap: 2.54mm !important; row-gap: 0 !important; } body.cb-print-a4 .cb-print-area > * { width: 66.7mm !important; height: 33.9mm !important; } /* ----------------- Carta Trinta (LINK 8018 e equivalentes) ----------------- 30 etiquetas por folha — 3 colunas × 10 linhas. Papel: tamanho CARTA físico do LINK 8018 = 215,5 × 280 mm (ligeiramente menor que o US Letter padrão de 215,9 × 279,4 mm). NÃO é A4. Quem definir @page A4 vai ver o conteúdo sair clipado/escalonado. Medidas REAIS conferidas com régua na folha física: - Etiqueta: 66,7 × 25,4 mm (área do corte do adesivo) - Margem topo: 12 mm (até o corte superior da 1ª etiqueta) - Margem base: 14 mm - Lateral esquerda: 6 mm - Lateral direita: 5 mm - Coluna (gap horiz): 2,2 mm - Linha (gap vert): 0 mm Conferência: 6 + 66,7 + 2,2 + 66,7 + 2,2 + 66,7 + 5 = 215,5 mm (largura) ✓ 12 + 10×25,4 + 14 = 280 mm (altura) ✓ IMPORTANTE: 12mm/6mm são onde começa o ADESIVO, não o conteúdo. O conteúdo (logo + nome + preço + barcode/QR) é centralizado dentro do retângulo de 66,7×25,4 mm pelo EtiquetaView.razor.css (.cb-etq--a4t com justify-content: center + safe-zone interna de 1mm × 2mm). */ body.cb-print-a4t .cb-print-area { display: grid !important; grid-template-columns: repeat(3, 66.7mm); grid-auto-rows: 25.4mm; column-gap: 2.2mm !important; row-gap: 0 !important; padding: 14mm 5mm 12mm 6mm !important; /* T R B L — top ajustado +2mm pelo offset real do papel medido com a folha impressa */ } body.cb-print-a4t .cb-print-area > * { width: 66.7mm !important; height: 25.4mm !important; } } /* @page só funciona fora de @media print em alguns browsers */ @page cb-t50 { size: 50mm 30mm; margin: 0; } @page cb-t60 { size: 60mm 40mm; margin: 0; } @page cb-a4 { size: A4; margin: 0; } /* cb-a4t é o formato "30 etiquetas/folha" do LINK 8018 — papel CARTA físico medido em 215,5 × 280 mm (variação do fabricante; US Letter padrão é 215,9 × 279,4 mm). O navegador respeita o size do @page e aplica fator de escala se a impressora tiver papel diferente. */ @page cb-a4t { size: 215.5mm 280mm; margin: 0; } @media print { body.cb-print-t50 { page: cb-t50; } body.cb-print-t60 { page: cb-t60; } body.cb-print-a4 { page: cb-a4; } body.cb-print-a4t { page: cb-a4t; } } /* ============================================================ PREVIEW EM TELA (não-impressão). Mostra como as etiquetas ficarão dispostas antes de imprimir. Classes aplicadas na própria .cb-print-area pela página. ============================================================ */ .cb-print-wrapper { background: #f5f5f5; padding: 16px; border-radius: 8px; overflow: auto; } .cb-print-area { background: #fff; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* Preview do A4 Pimaco 6281 — emula a folha */ .cb-print-area.cb-preview-a4 { display: grid; grid-template-columns: repeat(3, 66.7mm); grid-auto-rows: 33.9mm; gap: 0; column-gap: 2.54mm; padding: 8mm 7.7mm; width: fit-content; max-width: 100%; } /* Preview do Carta Trinta (LINK 8018) — papel físico 215,5×280mm, 3×10 etiquetas. Reflete os mesmos paddings/gaps da regra de impressão pra que o preview em tela mostre EXATAMENTE como vai sair na folha. */ .cb-print-area.cb-preview-a4t { display: grid; grid-template-columns: repeat(3, 66.7mm); grid-auto-rows: 25.4mm; column-gap: 2.2mm; row-gap: 0; padding: 14mm 5mm 12mm 6mm; /* T R B L — margens reais do papel Carta (top +2mm por offset físico medido na folha impressa) */ width: fit-content; max-width: 100%; } .cb-print-area.cb-preview-t50, .cb-print-area.cb-preview-t60 { justify-content: flex-start; }