/* ============================================================================ report-print.css — Pass 6 / Plano 10/10 Design §4 Vitrine imprimível do Relatório NR-1 / PGR psicossocial. ADITIVO: só atua em @media print, NÃO toca no JS de export (pgrExportPrint da W2) nem na aparência de tela. Linkar como ÚLTIMO do . Princípio (plano §4): cor estrutura/hierarquiza · P&B carrega a informação (sobrevive impresso e daltônico — status sempre cor + rótulo textual). Mockup: "Pulso - Relatório NR-1.dc.html". Bump ?v= ao alterar. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Bricolage+Grotesque:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); /* elementos só-de-impressão ficam ocultos na tela */ .print-only { display: none; } @media print { @page { size: A4; margin: 18mm 16mm 22mm; } html, body { background: #fff !important; color: #27272a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { padding: 0 !important; margin: 0 !important; font-family: 'Inter', system-ui, sans-serif !important; } /* esconde toda a cromática de tela */ .topbar, .action-bar, .loading-overlay, .btn, pulso-nav, nav.pulso-top-nav, [data-noprint], .noprint, .badge-soon { display: none !important; } .container { max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ---------- HEADER de impressão (faixa gradiente = única superfície de cor cheia) ---------- */ .print-only { display: block !important; } .pr-rep-head { margin: 0 0 10mm; } .pr-rep-head .pr-band { height: 12mm; width: 100%; background: linear-gradient(135deg, #9f00ff 0%, #00bcd4 100%); border-radius: 0 0 3px 3px; } .pr-rep-head .pr-brand { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: #0a0a0f; } .pr-rep-head .pr-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #9f00ff, #00bcd4); } .pr-rep-head .pr-brand .by { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 11px; color: #a1a1aa; } .pr-rep-head .pr-eyebrow { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #71717a; margin-top: 12px; } /* ---------- Títulos de seção: Outfit + régua gradiente de 3cm (não full-width) ---------- */ .page-header h1, .card-header h3, .card > h3, h2.card-title { font-family: 'Outfit', 'Inter', sans-serif !important; color: #0a0a0f !important; -webkit-text-fill-color: #0a0a0f !important; background: none !important; letter-spacing: -0.01em; } .page-header h1::after, .card-header h3::after { content: ''; display: block; width: 3cm; height: 2px; margin-top: 8px; background: linear-gradient(90deg, #9f00ff, #00bcd4); } .page-header p { color: #52525b !important; font-size: 10.5pt; } /* ---------- Cards print-safe (branco/cinza claro, sem sombra) ---------- */ .card { background: #fafafa !important; border: 1px solid #e4e4e7 !important; box-shadow: none !important; color: #27272a !important; border-radius: 8px; break-inside: avoid; page-break-inside: avoid; margin-bottom: 12px; } .card-header { border-color: #e4e4e7 !important; } .badge { background: #f1f1f3 !important; color: #3f3f46 !important; border: 1px solid #e4e4e7 !important; } /* ---------- KPIs: número Bricolage + tarja de cor no topo (status = cor + rótulo) ---------- */ .stat-box { background: #fafafa !important; border: 1px solid #e4e4e7 !important; border-radius: 8px; position: relative; overflow: hidden; color: #27272a !important; } .stat-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #a1a1aa; } .stat-box.red::before { background: #ff0073; } .stat-box.amber::before { background: #eab308; } .stat-box.green::before { background: #84cc16; } .stat-box .num { font-family: 'Bricolage Grotesque', 'Outfit', sans-serif !important; color: #0a0a0f !important; -webkit-text-fill-color: #0a0a0f !important; } .stat-box .label { font-family: 'Geist Mono', monospace !important; color: #71717a !important; text-transform: uppercase; letter-spacing: 0.06em; } /* itens de risco / texto corpo */ .risk-item { border-color: #e4e4e7 !important; background: #fff !important; break-inside: avoid; } .risk-info h4 { font-family: 'Outfit', sans-serif !important; color: #0a0a0f !important; } .risk-info p, .card p { color: #3f3f46 !important; } /* bloco de citação legal (se a página marcar com .legal-cite) — lastro jurídico em destaque */ .legal-cite, [data-legal] { border-left: 3px solid #9f00ff !important; background: #fafafa !important; border-radius: 0 6px 6px 0; padding: 14px 18px !important; font-style: italic; color: #3f3f46 !important; } /* ---------- RODAPÉ fixo (repete em toda página): CREF + LGPD ---------- */ .pr-rep-foot { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid #e4e4e7; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: 'Geist Mono', monospace; font-size: 8px; color: #a1a1aa; } .pr-rep-foot .pr-lgpd { font-family: 'Inter', sans-serif; font-size: 7.5px; color: #a1a1aa; max-width: 60%; } /* anti-emoji no impresso: encolhe os emojis decorativos de header (acessível, não remove dado) */ .card-header h3 { font-size: 13pt; } }