/* ============================================================================
   css/fiscal-parecer.css — o DOCUMENTO A4 do Próvision Tributário Imobiliário
   (parecer impresso) + a coluna de prévia na tela + a impressão dentro do app-shell.

   Consumidores: pages/fiscal-relatorio.html (fatia 1) e, na fatia 4, pages/fiscal-ganho-capital.html.
   Um arquivo, dois consumidores: copiar componente de marca em vez de importar já causou defeito
   real (mkt/brand/visual.md:67-76) — spec §7, sugestão recusada.
   Spec: docs/superpowers/specs/2026-08-29-fiscal-relatorio-pdf-ui-design.md (§1: tokens, componentes, print).
   Template: docs/superpowers/specs/2026-08-29-fiscal-relatorio-pdf-ui-mocks/parecer-a4.html (29/08/2026).

   LINKAR POR ÚLTIMO na página: o @media print do fim precisa vencer app-shell.css e
   workspace-dark.css, e vence pela ORDEM (mesma especificidade), não por !important só.
   Sem reset global aqui de propósito: app-shell.css:13 já zera margin/padding/box-sizing em `*`.
   Nenhuma cor inventada: todo valor vem da tabela do spec §1 (canon ou impresso do INSS Obra).
   ============================================================================ */

:root {
  --pa-ink: #0B1120;      /* navy do canon: títulos, divisor, texto forte */
  --pa-ink2: #1E293B;     /* texto corrido (mesmo do .parecer do INSS Obra) */
  --pa-muted: #64748B;    /* rótulos, notas, rodapé */
  --pa-line: #E2E8F0;     /* hairlines e bordas */
  --pa-soft: #F8FAFC;     /* fundo do bloco de cliente e da conclusão */
  --pa-gold: #E8A847;     /* dourado do canon: traço, marcador, borda, numerais, bolinhas, seta. NUNCA texto corrido */
  --pa-gold-ink: #8A5A0B; /* única cor de texto derivada do dourado (pill, "Aviso.") */
  --pa-green: #166534;    /* economia positiva */
  --pa-red: #B91C1C;      /* economia negativa / holding que custa mais */
  --pa-cream: #FFFBF3;    /* linha do cenário recomendado; fundo do aviso */
}

/* ── Página A4 ──────────────────────────────────────────────────────────────
   Na tela fica na largura REAL (210mm) e quem encolhe é o pai (.docscale, por transform).
   min-height, NUNCA height fixo: com altura fixa uma base legal mais longa seria CORTADA em
   silêncio; com min-height o navegador abre uma folha extra (só a numeração fica imprecisa).
   flex-direction:column + .rel-footer{margin-top:auto} é o que segura o rodapé no pé da folha.
   Padding IGUAL ao do papel (13/15/10mm; o spec §1 dizia 15/16/11 na tela): com 1mm a mais de cada lado o
   texto quebrava antes na tela e a folha da tela saía mais alta que a impressa — a prévia e o aviso de folha
   estourada (ajustarEscala) só são exatos com as mesmas medidas. Medido 30/08: 300mm+4px na tela = 1 folha. */
#doc-root { width: 210mm; }
.a4-page {
  width: 210mm; min-height: 297mm; margin: 0 0 8mm; background: #fff; padding: 13mm 15mm 10mm;
  box-shadow: 0 8px 32px rgba(0,0,0,.25); display: flex; flex-direction: column; position: relative;
  font-family: Inter, system-ui, sans-serif; color: var(--pa-ink2); font-size: 10.5pt; line-height: 1.45;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.a4-page:last-child { margin-bottom: 0; }
.a4-page b, .a4-page strong { font-weight: 600; }
.a4-page .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ── Cabeçalho white-label (grade do INSS Obra: logo | escritório | documento) ── */
.rel-header { display: grid; grid-template-columns: 44mm 1fr 58mm; gap: 6mm; align-items: start; }
/* Sem perfil: com a grade de 3 colunas ficariam 122mm em branco antes do título (revisor 4). */
.rel-header--so-doc { grid-template-columns: 1fr; }
/* Perfil sem logo e sem nome (só CRC/telefone): a coluna do logo ficaria em branco (review final 29/08). */
.rel-header--sem-logo { grid-template-columns: 1fr 58mm; }
.rel-logo { display: flex; align-items: center; gap: 8px; }
.rel-logo svg { width: 40px; height: 40px; flex: none; }
.rel-logo img { max-height: 44px; max-width: 140px; object-fit: contain; display: block; }
.rel-esc-nome { font: 600 11pt Inter, sans-serif; color: var(--pa-ink); line-height: 1.25; }
/* pre-line: CRC/CNPJ e telefone/e-mail em LINHAS PRÓPRIAS. Âncora do INSS Obra
   (inss-obra-proposta-fa.html:66-71): unidos por " · " a linha quebrava e o separador ficava
   pendurado sozinho no fim. Não voltar a juntar para economizar uma linha. */
.rel-esc-meta { font-size: 8.5pt; color: var(--pa-muted); line-height: 1.45; white-space: pre-line; }
.rel-doc { text-align: right; }
.rel-doc-titulo { font: 700 16pt Outfit, sans-serif; color: var(--pa-ink); letter-spacing: -.01em; line-height: 1.1; }
.rel-doc-sub { font-size: 8.5pt; color: var(--pa-muted); margin-top: 3px; }
.rel-doc-data { font-size: 8.5pt; color: var(--pa-muted); margin-top: 2px; }
.rel-divider { height: 3px; background: var(--pa-ink); margin: 5mm 0 6mm; position: relative; }
.rel-divider::after { content: ""; position: absolute; left: 0; top: 0; width: 28mm; height: 3px; background: var(--pa-gold); }

/* cabeçalho corrido das páginas 2+ */
.run-head { display: flex; justify-content: space-between; font-size: 8.5pt; color: var(--pa-muted); padding-bottom: 3mm; border-bottom: 1px solid var(--pa-line); margin-bottom: 6mm; }
.run-head b { color: var(--pa-ink); font-weight: 600; }

/* títulos de seção */
.sec { margin-bottom: 6mm; }
.sec-title { font: 700 8.5pt Outfit, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--pa-ink); margin-bottom: 3mm; display: flex; align-items: center; gap: 8px; }
.sec-title::before { content: ""; width: 14px; height: 3px; background: var(--pa-gold); border-radius: 2px; }
.sec-title .cnt { font: 500 8pt Inter, sans-serif; color: var(--pa-muted); letter-spacing: 0; text-transform: none; margin-left: auto; }

/* cliente e contexto */
.cli { display: grid; grid-template-columns: 60mm 1fr; gap: 6mm; align-items: start; background: var(--pa-soft); border: 1px solid var(--pa-line); border-radius: 6px; padding: 4mm 5mm; }
.cli-lbl { font-size: 7.5pt; letter-spacing: .1em; text-transform: uppercase; color: var(--pa-muted); }
.cli-nome { font: 700 15pt Outfit, sans-serif; color: var(--pa-ink); line-height: 1.15; margin-top: 2px; }
.cli-sub { font-size: 8.5pt; color: var(--pa-muted); margin-top: 3px; }
.cli-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 5mm; }
.cli-grid dt { font-size: 7.5pt; color: var(--pa-muted); }
.cli-grid dd { font-size: 9.5pt; font-weight: 600; color: var(--pa-ink); font-variant-numeric: tabular-nums; }
/* Venda (fatia 4): célula que cita a lei ("redutor FR1/FR2 art. 40 Lei 11.196/2005, fator 0,9523")
   não cabe em 1/3 da grade — a 9,5pt ela quebraria em quatro linhas dentro de uma coluna de ~55mm. */
.cli-grid .wide { grid-column: 1 / -1; }

/* conclusão */
.parecer { border-left: 3px solid var(--pa-gold); background: var(--pa-soft); padding: 4mm 5mm; border-radius: 0 6px 6px 0; font-size: 10.5pt; line-height: 1.6; }
.parecer p + p { margin-top: 2mm; font-size: 9.5pt; color: var(--pa-muted); }
.parecer .obs { font-style: italic; color: var(--pa-ink2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-top: 4mm; }
.stat { border: 1px solid var(--pa-line); border-radius: 6px; padding: 3.5mm 4mm; }
.stat-lbl { font-size: 7.5pt; letter-spacing: .08em; text-transform: uppercase; color: var(--pa-muted); }
.stat-val { font: 700 17pt Outfit, sans-serif; color: var(--pa-ink); letter-spacing: -.01em; margin-top: 1mm; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-val.pos { color: var(--pa-green); }
.stat-val.neg { color: var(--pa-red); }
/* SVG: a seta U+2192 não existe no subconjunto latin do Google Fonts e caía em Times (medido 29/08) */
.stat-val .seta { vertical-align: middle; margin: 0 2px; }
.stat-sub { font-size: 8pt; color: var(--pa-muted); margin-top: 1.5mm; }

/* tabelas */
.tbl { width: 100%; border-collapse: collapse; font-size: 9pt; }
.tbl th { font: 600 7.5pt Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--pa-muted); text-align: left; padding: 2mm 2.5mm; border-bottom: 2px solid var(--pa-ink); }
.tbl th.num { text-align: right; }
.tbl td { padding: 2.2mm 2.5mm; border-bottom: 1px solid var(--pa-line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.total td { border-top: 2px solid var(--pa-ink); font-weight: 600; color: var(--pa-ink); }
.tbl .pos { color: var(--pa-green); font-weight: 600; }
.tbl .neg { color: var(--pa-red); font-weight: 600; }
.tbl .mut { color: var(--pa-muted); }
.tbl .cen { font-weight: 500; color: var(--pa-ink); }
.tbl .td-sub { display: block; font-size: 7.5pt; color: var(--pa-muted); font-weight: 400; }
.tbl tr.rec td { background: var(--pa-cream); }
.tbl tr.rec td:first-child { border-left: 3px solid var(--pa-gold); }
.pill { display: inline-block; font: 600 7pt Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--pa-gold-ink); background: rgba(232,168,71,.18); border: 1px solid rgba(232,168,71,.5); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.tbl-nota { font-size: 8pt; color: var(--pa-muted); margin-top: 2.5mm; line-height: 1.5; }
.tbl.compact td { padding: 1.45mm 2.5mm; }
/* Venda (fatia 4): nome do cenário acima da sua tabela de tributos. Não é .sec-title (aquele custa
   ~8mm cada e, com três cenários, empurrava a folha do detalhamento a 312,7mm — medido 30/08) nem
   <th> (caixa alta de 7,5pt não se lê num rótulo de 50 caracteres). */
.cen-titulo { font: 600 9pt Inter, sans-serif; color: var(--pa-ink); margin-bottom: 1.5mm; }
.tbl.tbl-cenario { margin-bottom: 4mm; }
/* A nota das benfeitorias entra entre duas tabelas e não tem margem embaixo: sem esta regra ela
   encosta no nome do cenário seguinte (visto no PDF do caso com RET, 30/08). */
.tbl-nota + .cen-titulo { margin-top: 4mm; }

/* memória: "como cada cenário foi calculado" (lista em 2 colunas; cards estouravam a página 2) */
.prem { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5mm 7mm; }
.prem div { padding-left: 4mm; border-left: 2px solid var(--pa-line); }
.prem dt { font: 600 8.5pt Inter, sans-serif; color: var(--pa-ink); margin-bottom: .5mm; }
.prem dd { color: var(--pa-muted); font-size: 8pt; line-height: 1.45; }

/* benefícios */
.ben { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.ben-item { border: 1px solid var(--pa-line); border-radius: 6px; padding: 3.5mm 4mm; display: grid; grid-template-columns: auto 1fr; gap: 3mm; }
.ben-n { font: 800 16pt Outfit, sans-serif; color: var(--pa-gold); line-height: 1; }
.ben-t { font: 600 10pt Inter, sans-serif; color: var(--pa-ink); margin-bottom: 1mm; }
.ben-b { font-size: 8.5pt; color: var(--pa-ink2); line-height: 1.5; }
.contra { border-left: 3px solid var(--pa-ink); background: var(--pa-soft); padding: 3.5mm 4.5mm; border-radius: 0 6px 6px 0; font-size: 9pt; line-height: 1.55; }
.contra b { color: var(--pa-ink); }
.ben + .contra { margin-top: 4mm; }
.contra + .contra { margin-top: 3mm; }   /* venda: o aviso da CBS e a ressalva dos custos de virar PJ */
.contra--alerta { border-left-color: var(--pa-red); }

/* base legal */
.leis { columns: 2; column-gap: 8mm; font-size: 8.5pt; line-height: 1.5; }
.leis li { break-inside: avoid; list-style: none; padding-left: 4mm; position: relative; margin-bottom: 1.5mm; }
.leis li::before { content: ""; position: absolute; left: 0; top: .45em; width: 5px; height: 5px; border-radius: 50%; background: var(--pa-gold); }
.leis b { color: var(--pa-ink); font-weight: 600; }
.leis.notas { columns: 1; margin-top: 2.5mm; font-size: 8pt; color: var(--pa-muted); }
.leis.notas li::before { background: var(--pa-muted); }

/* aviso */
.aviso { border: 1px solid var(--pa-line); background: var(--pa-cream); border-radius: 6px; padding: 3.5mm 4.5mm; font-size: 8.5pt; color: var(--pa-ink2); line-height: 1.55; }
.aviso b { color: var(--pa-gold-ink); }

/* rodapé */
.rel-footer { margin-top: auto; padding-top: 3mm; border-top: 1px solid var(--pa-line); font-size: 7.5pt; color: var(--pa-muted); line-height: 1.5; }
.rel-footer .row { display: flex; justify-content: space-between; gap: 8mm; }
.rel-footer b { color: var(--pa-ink); font-weight: 600; }

/* ── Prévia na tela ────────────────────────────────────────────────────────
   REGRA (29/08, print do Douglas): um scroll só, o da janela. A prévia NÃO é um container com
   overflow; o documento fica na largura A4 real e é ESCALADO por transform (ajustarEscala()) para
   caber na coluna — nunca reflui nem corta. Três barras de rolagem encaixadas foi o defeito.
   .docview{overflow:hidden} existe só para conter a transformação; nunca auto/scroll — exceto
   abaixo do piso de 60% (celular), quando ganha .docview--rola. */
.docwrap { background: #0F172A; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; min-width: 0; }
.docbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #94A3B8; }
.docbar b { color: #CBD5E1; font-weight: 600; }
.docbar .doc-aviso { color: #E8A847; }   /* folha que passou do A4 (ajustarEscala) */
.docview { background: #1E293B; padding: 18px; overflow: hidden; }
.docview.docview--rola { overflow-x: auto; }
.docscale { transform-origin: top left; width: 210mm; }
#print-lock { display: none; }

/* ── Impressão dentro do app-shell ──────────────────────────────────────────
   O INSS Obra não serve de precedente (página sem shell) e o único @media print do módulo,
   fiscal-completo.html:302-322, esconde classes que não existem. Nomes reais: .app-sidebar,
   .app-global-header (position:fixed), #fiscal-faixa-avaliacao, .sofia-fiscal-fab/.sofia-fiscal-popup
   (CSS injetado por fiscal-sofia.js, sem regra de print), #toast (fiscal-shell.css:489, fixed).
   .app-layout tem tracks FIXOS de grid (app-shell.css:26-35): só esconder a sidebar deixa o gutter
   em branco no papel — por isso display:block. O fundo navy de .app-content vem de
   workspace-dark.css:109-120. transform:none é OBRIGATÓRIO: @page pagina pelo tamanho de LAYOUT e a
   escala da tela sairia encolhida num canto da folha. .panel (coluna esquerda) e .grid (grade) são
   os nomes do painel desde a fatia 2 — esconder classe que não existe é o defeito do fiscal-completo. */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; overflow: visible !important; height: auto !important; min-height: 0 !important; }
  .app-sidebar, .app-global-header, .sidebar-mobile-overlay, .mobile-hamburger,
  #fiscal-faixa-avaliacao, .fiscal-section-header, .panel, .docbar,
  .sofia-fiscal-fab, .sofia-fiscal-popup, #toast, #empty-state { display: none !important; }
  .app-layout, .app-content, .grid, .docwrap, .docview, .docscale {
    display: block !important; background: #fff !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important;
    width: auto !important; overflow: visible !important; transform: none !important;
  }
  /* Ordem sagrada (decisão 6): sem doc-liberado (só o clique em Gerar PDF, depois do insert da cota,
     acrescenta a classe — fatia 2), Ctrl+P imprime só o aviso. */
  html:not(.doc-liberado) #doc-root { display: none !important; }
  html:not(.doc-liberado) #print-lock { display: block !important; padding: 20mm; font: 600 14pt Inter, sans-serif; color: #0B1120; }
  .a4-page { width: 210mm; margin: 0; box-shadow: none; padding: 13mm 15mm 10mm; min-height: 297mm; break-after: page; }
  .a4-page:last-child { break-after: auto; }
  .tbl thead { display: table-header-group; }
  .tbl tr, .ben-item, .stat, .parecer, .contra, .aviso { break-inside: avoid; }
  .sec-title { break-after: avoid; }
}