/* print.css * Estilo dedicado a tudo que é impresso (receitas, pedidos de exame, * atestados, laudos). Carregado via no index.html, * então essas regras só valem na hora de imprimir - não afetam a tela. * * Para ajustar o visual do impresso (fontes, margens, layout do * cabeçalho/rodapé, etc.), edite só este arquivo. */ /* Fonte Rawline (Raleway com numerais tabulares/lining) - arquivos * auto-hospedados em assets/fonts/rawline/ (cacheados pelo sw.js, funciona * offline). Só dois pesos: 400 (texto normal) e 700 (todo negrito hoje * usado no impresso - nome do local, med-name, assinatura etc.); não há * uso de itálico no impresso atualmente, por isso nenhum peso italic foi * baixado. Se precisar de itálico no futuro (ex: laudo com *texto*), baixar * rawline-400i.woff2 do mesmo repositório de origem. Caminho é relativo a * este arquivo (print.css), então funciona tanto local quanto após deploy. */ @font-face { font-family: 'rawline'; src: url('assets/fonts/rawline/rawline-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'rawline'; src: url('assets/fonts/rawline/rawline-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } html, body { background: white !important; color: black !important; margin: 0; height: auto !important; overflow: visible !important; font-family: 'rawline', sans-serif; /* O usa "flex flex-col" (Tailwind) pro layout da tela - se isso * continuar valendo na impressão, o .print-only vira um ITEM FLEX, e * navegadores ignoram regras de quebra de página (page-break-*/break-*) * dentro de containers flex/grid (limitação conhecida do CSS * Fragmentation). Sem este reset, as regras de paginação abaixo (evitar * cabeçalho órfão, manter assinatura junta, orphans/widows) não valem. */ display: block !important; } .no-print { display: none !important; } .print-only { display: block !important; } /* Estrutura table/thead/tbody dos 4 documentos (ver documentoTableHtml em * js/print/templates.js) - table-header-group faz o cabeçalho (thead) * repetir em cada página impressa quando o documento estoura 1 folha; o * rodapé/assinatura (footerHtml) entra como conteúdo normal do tbody, então * flui com o resto do texto e cai sozinho na última página, sem repetir. * Só reseta a aparência visual de tabela (bordas, espaçamento de célula), * sem mexer no layout interno de cada bloco. */ .print-doc-table { width: 100%; border-collapse: collapse; } .print-doc-table td { padding: 0; border: none; } @page { size: A4; margin: 15mm 20mm; } /* Numeração de página, só na margem física da folha (não faz parte do * .print-doc-table, não disputa espaço com o conteúdo). Estratégia: numerar * a partir da 2ª página e suprimir na 1ª (@page :first abaixo) - como não * existe forma nativa de condicionar isso ao total de páginas ("só mostrar * se houver mais de uma"), documentos de 1 página (a maioria: receita, * exames, atestado) acabam sem nenhuma marca, e documentos que estouram 1 * página (laudo longo) mostram "Página 2 de N", "Página 3 de N" etc. a * partir da segunda - o que já sinaliza "isto continua" sem numerar a * primeira à toa. Mesma limitação já aceita no projeto pro layout A5: só * funciona no Chrome, counter(page)/counter(pages) dentro de margin boxes * do @page não tem suporte no Firefox. */ @page { @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: 'Courier New', monospace; font-size: 10px; color: #000; } } @page :first { @bottom-right { content: none; } } .print-header { text-align: center; border-bottom: 2px solid #000; padding-bottom: 15px; margin-bottom: 20px; position: relative; } .print-header h1, .print-header .header-nome { font-size: 24px; font-weight: bold; margin: 0; text-transform: uppercase; } .header-location, .header-contact { font-size: 12px; line-height: 1.35; } /* Cada item ("CEP 86430-000", "Tel (43) ...") é indivisível: o navegador só * quebra linha nos separadores "·", nunca entre rótulo e número. */ .header-item { white-space: nowrap; } .header-location { margin-top: 5px; } .header-contact { margin-top: 2px; } /* Logo no cabeçalho - só entra em jogo quando locais[id].logo existe no * backup (ver headerHtml em js/print/templates.js). SEM logo cadastrada, * .print-header nunca ganha .has-logo e continua exatamente como sempre * foi (bloco único, texto centralizado) - nada aqui afeta esse caso. * COM logo: 3 colunas - logo | nome/endereço/contato | coluna vazia. A * coluna vazia à direita espelha a largura da coluna da logo à esquerda, * o que é o que mantém o nome do local centralizado na FOLHA inteira, e * não só no espaço que sobrou depois da logo. Validado visualmente no * mockup-padrao-v2.html antes desta mudança. */ .print-header.has-logo { display: flex; align-items: center; } .header-logo-col, .header-spacer-col { flex: 0 0 72px; display: flex; align-items: center; justify-content: center; } .header-logo { max-height: 64px; max-width: 72px; width: auto; height: auto; } .header-logo[src*=".svg" i] { max-height: 96px; max-width: 96px; } .print-header:has(.header-logo[src*=".svg" i]) .header-logo-col, .print-header:has(.header-logo[src*=".svg" i]) .header-spacer-col { flex: 0 0 96px; } .header-text-col { flex: 1 1 auto; text-align: center; } .patient-info { border: 1px solid #000; padding: 12px; margin-bottom: 25px; border-radius: 4px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 15px; position: relative; } .patient-info div { flex: 1; min-width: 200px; } .patient-info .info-line { display: inline-block; min-width: 150px; padding-left: 5px; } /* Receita com CPF e Peso preenchidos (4 células: Para, CPF, Peso, Data). No flex * elas quebravam em 2 linhas com larguras diferentes (Para flex:2 em cima, * Peso/Data flex:1 embaixo) e CPF ficava desalinhado da Data. O grid trava 2 * colunas 2:1: Para/Peso na 1ª, CPF/Data na 2ª. Só a receita usa esta variante * (ver renderReceitaTemplate); os demais cenários continuam no flex acima. */ .patient-info.patient-info-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .patient-info.patient-info-grid div { min-width: 0; } .print-ref-code { position: absolute; bottom: -7px; right: 12px; background: #fff; padding: 0 4px; font-size: 11px; font-family: 'Courier New', monospace; color: #000; line-height: 1; } .prescription-body { font-size: 15px; } /* Cabeçalhos de horário no corpo do laudo (ex: "Às 21h00:"), inseridos pelos * botões +Conduta / +Anamnese / +Evolução da aba Laudos. Ajuste aqui o * negrito/tamanho/espaçamento - não precisa mexer no texto do laudo em si, * o app já marca essas linhas com esta classe automaticamente na impressão. */ .laudo-hora { font-weight: bold; } /* Suporte a Markdown no corpo do laudo ("# Título", "**negrito**", "- item" - * ver buildLaudoTextoHtml em js/print/templates.js). Ajuste tamanho/espaço * dos cabeçalhos e da lista aqui - não precisa mexer no texto do laudo. */ .laudo-heading { font-weight: bold; margin: 10px 0 4px; } .laudo-heading-1 { font-size: 20px; } .laudo-heading-2 { font-size: 17px; } .laudo-heading-3 { font-size: 15px; } .laudo-lista { list-style: disc; margin: 6px 0 10px; padding-left: 26px; } .laudo-lista li { margin-bottom: 5px; line-height: 1.5; padding-left: 2px; } .laudo-lista li::marker { font-size: 0.9em; } /* Paginação do laudo: o navegador já flui o texto naturalmente entre páginas * quando é longo (o resto deste arquivo já garante isso, com html/body sem * altura fixa e overflow visível). As regras abaixo só evitam cortes feios: * cabeçalho/dados do paciente não ficam sozinhos no fim de uma página, a * assinatura não é dividida ao meio, e o texto do laudo evita deixar uma * linha órfã sozinha no topo/fim de página. */ .print-header, .patient-info { page-break-after: avoid; break-after: avoid; } .print-footer { page-break-inside: avoid; break-inside: avoid; } #print-laudo-texto { orphans: 3; widows: 3; } /* O Tailwind (carregado via CDN) reseta list-style pra "none" em todo
    /