body { font-family: 'Inter', sans-serif; background-color: #020617; color: #f8fafc; }
.bg-primary { background-color: #0F3832; }
.text-primary { color: #10B981; }
.border-primary { border-color: #0F3832; }
.card { background-color: #0F172A; border: 1px solid #1E293B; border-radius: 0.75rem; }
.nav-item { cursor: pointer; transition: all 0.2s; }
.nav-item.active { background-color: #0F3832; color: #10B981; border-left: 4px solid #10B981; }
input, select, textarea { background-color: #1E293B !important; border: 1px solid #334155 !important; color: #ffffff !important; }
select option { background-color: #0F172A !important; color: #ffffff !important; }
input:focus, select:focus { border-color: #10B981 !important; outline: none !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important; }
.tab-content { display: none; }
.tab-content.active { display: block; }
#auth-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: #020617; z-index: 9999;
display: flex; align-items: center; justify-content: center;
}
/* ARQUITETURA NOVA DO PDF (ver assets/js/pdf-report-engine.js) — a paginação do relatório NÃO é mais
inferida por CSS page-break aplicado ao documento inteiro (#printable-report > div em bloco): o
ReportPageManager decide a estrutura em código, capturando CADA GRUPO DE PÁGINA isolado (só o
conteúdo daquele grupo fica visível durante a captura — o resto do documento vira display:none).
Isso elimina de raiz a classe de bug relatada (conteúdo de uma seção invadindo outra, elevação
cortada/redimensionada, seção mudando de página): é fisicamente impossível uma captura conter
pixels de outro grupo, porque esse outro grupo nem está no DOM visível naquele instante.
As regras abaixo NÃO decidem mais ONDE quebra a página (isso é 100% js/pdf-report-engine.js) — só
protegem o conteúdo INTERNO de um grupo (que pode legitimamente precisar de mais de 1 página física
— ex.: lista de materiais grande) contra corte no meio de uma linha de tabela ou de um card de
elevação. `table` inteira fica de fora de propósito: travá-la como bloco indivisível impediria
listas mais longas que 1 página de fluir corretamente entre páginas físicas. */
#printable-report .card,
#printable-report tr {
page-break-inside: avoid;
break-inside: avoid;
}
/* Cada card de elevação (ver renderReportWallDistribution) já é dimensionado para caber inteiro em UMA
página A4 (computeWallElevationPageScale); esta regra é a rede de segurança para nunca cortar o card
no meio caso o cálculo fique justo por causa de fonte/renderização. */
.pdf-elevation-page {
page-break-inside: avoid;
break-inside: avoid;
}
/* Legenda de cores + texto explicativo (fim da Seção 06A, depois da última vista) também não pode
partir no meio de uma frase — mesma lógica do .pdf-elevation-page, aplicada ao bloco final. */
.pdf-elevation-legend {
page-break-inside: avoid;
break-inside: avoid;
}
/* CORREÇÃO — Compactação ~5% do PDF (item "Especialista em Layout PDF"): as utilidades Tailwind
baseadas em rem (padding, margem, gap, text-xs/sm) já encolhem sozinhas quando window.generatePDF
reduz a fonte da raiz antes de capturar o relatório (ver comentário lá). Isso NÃO cobre os
tamanhos de fonte fixos em px (text-[8px]/[9px]/[10px]/[11px], usados nas legendas e tabelas do
relatório), que são valores absolutos e imunes à fonte da raiz — por isso a mesma redução (~5%) é
replicada aqui via seletor de atributo, restrita a #printable-report para nunca afetar as telas.
Usar `~=` (token exato) em vez de `*=` evita qualquer colisão de substring entre os valores. */
#printable-report [class~="text-[8px]"] { font-size: 7.6px !important; }
#printable-report [class~="text-[9px]"] { font-size: 8.5px !important; }
#printable-report [class~="text-[10px]"] { font-size: 9.5px !important; }
#printable-report [class~="text-[11px]"] { font-size: 10.5px !important; }
/* CORREÇÃO — TÍTULOS CORTADOS (ReportSectionTitle): classe única centralizando a "área segura" do
badge de título de seção usado em TODOS os de #printable-report (antes: a mesma string de
classes Tailwind copiada em 13 lugares diferentes — 05, 05B, 06, 06A, 06B, 07, 08, 09, 02, 03, 04
— qualquer ajuste de segurança tinha que ser replicado manualmente em cada um, exatamente o
problema apontado). Cor/uppercase continuam vindo do Tailwind (bg-emerald-900 text-white uppercase,
aplicados junto no HTML) — esta classe cuida só das propriedades que causam corte:
• line-height EXPLÍCITO (nunca "normal"/herdado, que pode ser calculado de forma diferente pelo
motor de tela vs. pelo html2canvas na hora de capturar o PDF) generoso o bastante pra um peso
black (900) nunca ter o topo/base de uma letra cortado pela caixa do badge;
• padding vertical maior que o original (py-0.5 = 2px, apertado demais pra texto em caixa alta
com peso 900 — ver também a correção do peso 900 da fonte Inter no , a causa raiz real
do corte relatado; esta classe é a proteção estrutural complementar, não a correção principal);
• overflow: visible explícito (nunca hidden) — o texto SEMPRE aparece inteiro, mesmo que estoure
a caixa visualmente, nunca escondido (§37 do pedido: nunca usar overflow:hidden pra esconder o
problema);
• white-space normal + word-break + max-width 100% — títulos longos quebram linha de forma
controlada em vez de vazar da página (§36), nunca cortados. */
/* CORREÇÃO (2ª rodada) — "título ainda alinhado embaixo da caixa verde": a 1ª tentativa (inline-flex +
align-items:center) não resolveu sozinha porque o padding em si já vinha ASSIMÉTRICO (4px em cima,
5px embaixo — literalmente mais espaço embaixo do texto que em cima, empurrando-o pra cima visualmente
ou revelando a assimetria de qualquer jeito) e o line-height generoso (1.45) sobra "entrelinha" que
os motores de renderização (tela vs. html2canvas) distribuem de forma diferente acima/abaixo da
própria letra. Corrigido nas DUAS pontas ao mesmo tempo: padding perfeitamente SIMÉTRICO (mesmo valor
em cima e embaixo) + line-height mais justo (1.15, quase o tamanho real da fonte — texto é caixa alta
sem descendentes, não precisa de entrelinha grande) — sobra bem menos margem pra qualquer diferença
de métrica de fonte entre motores aparecer. inline-flex + align-items:center mantido como reforço. */
.pdf-section-title {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 5px 10px;
font-size: 0.75rem;
line-height: 1.15;
font-weight: 900;
white-space: normal;
word-break: break-word;
overflow: visible;
margin-bottom: 0.5rem;
}
/* Mesma correção acima (padding simétrico + line-height justo), aplicada ao badge "57%" de eficiência
(rep_badge_eff) — usava a mesma combinação arriscada (font-black + padding assimétrico 3px/4px) que
já causava o mesmo desalinhamento nos títulos de seção, só que essa nunca tinha recebido nenhuma
correção antes. */
.pdf-mini-badge {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.15;
overflow: visible;
padding: 4px 8px;
}
/* Mesma área segura acima, aplicada ao "Relatório Acústico" (maior, sem badge de fundo — risco
menor de corte, mas ainda usa font-black/900 e merece a mesma garantia explícita). */
.pdf-report-title {
line-height: 1.25;
overflow: visible;
padding-top: 2px;
padding-bottom: 2px;
}
/* ============================================================================================
SISTEMA DE DESIGN DO RELATÓRIO — aprovado pelo cliente em 3 protótipos isolados (Página 3
"Distribuição Estratégica", elevação com porta, elevação com janela+colmeia) antes de entrar aqui.
Mesma paleta já usada no resto do relatório (emerald-900/emerald-50 do Tailwind) — nenhuma cor
nova. Aplicado UMA VEZ por PÁGINA física do contrato de paginação (01-08, ver
pdf-report-engine.js), não por sub-seção interna (essas continuam em .pdf-section-title, menor).
============================================================================================ */
/* CORREÇÃO — crachá circular numerado REMOVIDO (pedido do cliente): ocupava ~18mm no topo de TODA
página (15mm do círculo + 3mm de margem) só pra mostrar um número que a numeração do rodapé
("Página X de Y", já implementada em drawReportPdfRunningFooter/pdf-report-engine.js) já cobre —
cada página agora numera SÓ embaixo, ganhando ~18mm de altura útil em toda página (o que também
ajuda a Página 3/Distribuição a não vazar pra página seguinte). .pdf-badge-wrap/.pdf-badge não são
mais referenciados em nenhum HTML — mantidos comentados aqui só como registro histórico de que a
classe já existiu; podem ser apagados com segurança se algum dia sobrar tempo de limpeza. */
/* Painel de título de página — substitui o antigo "chip" pequeno (.pdf-section-title) só para o
título PRINCIPAL de cada página (ex.: "Distribuição Estratégica de Paredes", "Elevação PA1").
Mesma família de correções de área segura do .pdf-section-title (line-height explícito, overflow
visible, quebra de linha controlada) — nunca reduz fonte pra caber. Mesma correção de padding
simétrico + line-height justo (1.2) explicada em .pdf-section-title acima — flex mantido como
reforço, nunca como único mecanismo de centralização. */
.pdf-title-panel {
border: 1.5px solid #064e3b; border-radius: 10px; padding: 3.5mm 8mm; margin-bottom: 4mm;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; overflow: visible;
}
.pdf-title-panel h1, .pdf-title-panel h2 {
margin: 0; font-size: 15px; font-weight: 900; letter-spacing: .01em; text-transform: uppercase;
color: #064e3b; line-height: 1.2; overflow: visible; white-space: normal; word-break: break-word;
}
/* Pílula de identificação abaixo do título (ex.: "Parede 1 (Porta)") — usada nas páginas de elevação.
Mesma correção de padding simétrico + line-height justo. */
.pdf-pill-wrap { display: flex; justify-content: center; margin-bottom: 3mm; }
.pdf-pill {
display: inline-flex; align-items: center; background: #ecfdf5; border: 1px solid #a7f3d0; color: #064e3b;
font-weight: 800; font-size: 9px; letter-spacing: .04em; line-height: 1.15; text-transform: uppercase;
padding: 1.5mm 5mm; border-radius: 999px; overflow: visible; white-space: normal;
}
/* Painel genérico com fundo suave — legenda, resumo, qualquer bloco de apoio. */
.pdf-panel {
border: 1px solid #a7f3d0; background: #ecfdf5; border-radius: 10px; padding: 3mm 5mm;
margin-bottom: 3mm;
}
.pdf-panel-title {
font-weight: 800; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
color: #064e3b; margin: 0 0 2mm;
}
.pdf-legend-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5mm 6mm; font-size: 9px; color: #0f172a;
}
.pdf-legend-item { display: flex; align-items: center; gap: 2mm; }
.pdf-swatch { width: 3mm; height: 3mm; border-radius: 2px; flex: none; display: inline-block; }
.pdf-swatch.dash { background: #fff; border: 1.2px dashed #94a3b8; }
.pdf-tag {
display: inline-flex; align-items: center; justify-content: center; width: 3mm; height: 3mm;
border: 1.2px solid #064e3b; border-radius: 2px; font-size: 6px; font-weight: 800; color: #064e3b;
flex: none;
}
/* Tabela com cabeçalho escuro e cantos arredondados — mesmo padrão em toda tabela de dados do
relatório (materiais, paredes, resumo de elevação). Envolve a
existente (table-layout
fixed preservado) num container com border-radius, já que / não recortam cantos
arredondados sozinhos em html2canvas. */
.pdf-table-wrap { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; margin-bottom: 3mm; }
.pdf-table-wrap table { border-collapse: collapse; }
.pdf-table-wrap thead th {
background: #064e3b !important; color: #fff !important; padding: 2.2mm 3mm !important;
}
.pdf-table-wrap tbody td { padding: 1.8mm 3mm !important; }
/* Tira de blocos-resumo com ícone (ex.: "Resumo Geral de Distribuição") — grid de 1 a 4 colunas. */
.pdf-stat-strip { display: grid; gap: 3mm; }
.pdf-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1mm; }
.pdf-stat svg { color: #065f46; }
.pdf-stat .pdf-stat-n { font-size: 13px; font-weight: 900; color: #064e3b; line-height: 1; }
.pdf-stat .pdf-stat-l { font-size: 7px; color: #64748b; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; }
/* Barra de total destacada (ex.: "Total Comprado"). */
.pdf-total-bar {
display: flex; align-items: center; justify-content: space-between; gap: 3mm;
border: 1.5px solid #064e3b; border-radius: 10px; padding: 3mm 5mm; margin-bottom: 3mm;
}
.pdf-total-bar .pdf-total-label {
display: flex; align-items: center; gap: 2mm; font-weight: 800; font-size: 9.5px;
letter-spacing: .02em; text-transform: uppercase; color: #064e3b;
}
.pdf-total-bar .pdf-total-value { font-weight: 900; font-size: 13px; color: #064e3b; }
/* Linhas de informação empilhadas (ex.: "Área Tratável" / "Observações"). */
.pdf-info-rows { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; font-size: 9px; margin-bottom: 3mm; }
.pdf-info-row { display: grid; grid-template-columns: 34mm 1fr; }
.pdf-info-row + .pdf-info-row { border-top: 1px solid #e2e8f0; }
.pdf-info-row .pdf-info-k {
background: #fafafa; font-weight: 800; color: #064e3b; padding: 2.2mm 3mm;
text-transform: uppercase; font-size: 7.5px; letter-spacing: .03em;
}
.pdf-info-row .pdf-info-v { padding: 2.2mm 3mm; color: #0f172a; }
.pdf-info-row .pdf-info-v.strong { font-weight: 900; color: #064e3b; font-size: 10.5px; }
@media print {
@page { size: A4; margin: 10mm; }
.no-print { display: none !important; }
.print-only { display: block !important; }
body { background-color: white; color: black; }
.card { border: 1px solid #ccc; background: white; color: black; page-break-inside: avoid; break-inside: avoid; }
.text-slate-400, .text-slate-300 { color: #333 !important; }
.bg-primary { background-color: #0F3832 !important; -webkit-print-color-adjust: exact; }
tr { page-break-inside: avoid; break-inside: avoid; }
thead { display: table-header-group; } /* repete o cabeçalho da tabela em cada página nova */
#printable-report { min-height: 0 !important; max-width: 100% !important; margin: 0 !important; box-shadow: none !important; border: none !important; }
}
.gauge-container { position: relative; width: 130px; height: 130px; }
.gauge-bg { fill: none; stroke: #1E293B; stroke-width: 10; }
.gauge-fill { fill: none; stroke: #10B981; stroke-width: 10; stroke-dasharray: 251.2; stroke-dashoffset: 251.2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.8s ease-out; }