/* O papel.
 *
 * O princípio: o papel é a MESMA leitura, não uma segunda. Imprime-se o que está na tela,
 * na janela que o leitor escolheu e com a personalização dele.
 *
 * A regra que não se quebra: NADA QUE CARREGUE DADO PODE SUMIR. No frontend atual uma regra
 * `#fh-print-root button { display: none }` apagava do papel as linhas da DRE detalhada e a
 * fita de 13 semanas, porque no HTML desta casa a linha da DRE É um botão e o eixo das 13
 * semanas É uma fileira de botões. Por isso aqui só se esconde NOMEANDO CONTROLE, nunca
 * elemento, e `tests/impressao.test.mjs` reprova quem tentar o contrário.
 *
 * ---- A divisão desta folha, e por que ela mudou ------------------------------------------
 *
 * Até aqui TUDO o que desenhava o papel morava dentro de `@media print`, e a prévia da gaveta
 * renderiza na mídia de TELA: ela mostrava o nome da capa a 48 px onde o papel sai a 29, a
 * vitrine em duas colunas onde o papel a empilha, e os botões de "ver como" que o papel tira.
 * A prévia existe para ser a promessa do que vai sair, e ela estava prometendo outra coisa.
 *
 * Então a folha tem duas metades, e a linha entre elas é esta pergunta: *isto descreve o
 * PAPEL, ou descreve a passagem do documento pela impressora?*
 *
 *   1. `.papel` (sem media query) - tudo o que o papel É: a escala, a capa, a cabeça de folha,
 *      os controles que não existem no impresso, o elo que virou tinta morta. Vale nos dois
 *      meios, então a prévia e a impressora recebem o mesmo desenho por construção, e não
 *      por duas escritas que alguém promete manter iguais.
 *   2. `@media print` - só o que é da impressora: o `@page`, a cor que o navegador apagaria,
 *      a moldura do app que sai de cena, e ONDE A PÁGINA PODE QUEBRAR. Quebra de página não
 *      existe na tela, e é a única coisa que a prévia desenha por conta própria (as guias).
 */

/* O par de tela: o que é só do papel não aparece no monitor. Fica ANTES do bloco de impressão
   de propósito. Depois dele, esta regra venceria por ordem (mesma especificidade, e o bloco
   `@media print` não acrescenta nenhuma), e a capa do papel não sairia nem no papel: foi
   exatamente o que aconteceu na primeira prova impressa, que saiu sem o nome do cliente. */
.so-papel, .rel__capa-papel { display: none; }

/* A raiz do papel montada pelo compositor. Vive ao lado de `#app` e nunca aparece na tela:
   ela existe entre o clique em Imprimir e o fim da caixa de diálogo do navegador. */
#fh-papel { display: none; }

/* ============================================================================================
   1. O PAPEL
   Vale na prévia da gaveta e no impresso, pela mesma regra.
   ============================================================================================ */

/* ---- A ESCALA DO PAPEL --------------------------------------------------------------------
   O kit inteiro é feito de tokens, então a régua do papel se declara UMA vez aqui e cascateia
   para cada componente que entrar. É o contrário de reescrever `padding` componente a
   componente: a folha nova que alguém escrever amanhã já nasce na densidade certa.

   Por que ela é mais curta que a da tela. A tela é um rolo infinito lido a 60 cm, e o respiro
   é o que separa um bloco do seguinte quando não há borda de página para separá-los. A página
   A4 útil tem 703 x 1017 px e é lida a 35 cm: a borda já separa, e cada milímetro de respiro
   a mais é um pedaço de informação empurrado para a página seguinte. Medido na folha da DRE
   de uma pasta real, ANTES desta régua: 7.049 px de papel, sete páginas A4 para três partes,
   com a linha de tabela a 50 px e a vitrine a 1.109 px - mais alta do que a página inteira,
   o que faz o navegador empurrá-la para a página seguinte e deixar a anterior quase vazia.

   Os números não são gosto: são a coluna impressa do padrão visual MF8, que é de onde saem os
   resumos de diagnóstico que o operador usa de régua. Corpo e tabela 14 px, nota 12 px,
   intertítulo 19 px, número de cartão 21 px, célula de tabela com 10 px de respiro. */
.papel {
  /* espaço */
  --s-3: 0.625rem;   /* 12 -> 10 : respiro de célula de tabela e de linha de lista */
  --s-4: 0.875rem;   /* 16 -> 14 */
  --s-5: 1.125rem;   /* 24 -> 18 : padding de cartão, de callout e de indisponível */
  --s-6: 1.375rem;   /* 32 -> 22 : respiro entre blocos */
  --s-7: 1.75rem;    /* 48 -> 28 */
  --s-8: 2rem;       /* 64 -> 32 */
  --s-9: 2.5rem;     /* 96 -> 40 */
  /* tipo: só o que ficava acima da régua impressa */
  --fs-15: 0.875rem;    /* 15 -> 14 : corpo, célula de tabela, linha de lista */
  --fs-28: 1.375rem;    /* 28 -> 22 : o número do fato e os KPI das folhas */
  --fs-32: 1.3125rem;   /* 32 -> 21 : número de cartão e da vitrine */
  --fs-48: 1.75rem;     /* 48 -> 28 : o número gigante; no papel ele é título, não outdoor */
  --lh-15: 1.45;        /* 1.55 -> 1.45 : entrelinha de leitura a 35 cm */
  /* cartão: no papel ele não precisa de altura mínima para alinhar com o vizinho de grade,
     porque a grade do papel tem uma coluna. Altura mínima aqui é espaço em branco. */
  --cartao-min-h: 0;
  --cartao-pad: var(--s-5);
  color: var(--ink);
  font-size: var(--fs-15);
  line-height: var(--lh-15);
}

/* ---- O que é CONTROLE e não existe no papel -----------------------------------------------
   Cada linha nomeia uma classe de controle. Nenhuma nomeia um elemento. Estes moram DENTRO do
   conteúdo da folha (o "ver como", o campo que filtra, o botão de copiar), e é por isso que
   eles se escondem aqui e não no bloco de impressão: a prévia mostra o conteúdo da folha, e
   sem esta regra ela mostraria botões que o papel não tem. */
.papel .fh-vercomo,
.papel .fh-busca,
.papel .fh-copiar,
.papel .fh-hov,
.papel .fh-atalhos,
.papel .dre__acoes,
.papel .so-tela { display: none !important; }

/* O botão de informação é ajuda de tela; o texto que ele abre continua no papel quando
   estiver aberto. */
.papel .fh-info__btn { display: none !important; }

/* O SEGMENTADO de preferência vira TEXTO: a opção em vigor fica, as outras saem, e a moldura
   de botão some. Ele carrega dado - "Faturado" e não "Recebido" diz em que regime os números
   ao lado foram lidos, e isso o papel precisa dizer -, mas desenhado como botão ele promete
   uma escolha que no impresso não existe: quem recebe o PDF vê "Faturado | Recebido" com um
   deles aceso e fica sem saber se pode trocar. Fica a palavra, sai o controle. */
.papel .fh-seg__opt:not(.is-on) { display: none !important; }
.papel .fh-seg { border: 0; background: none; padding: 0; gap: 0; box-shadow: none; }
.papel .fh-seg__opt.is-on { padding: 0; border: 0; background: none; box-shadow: none; font-weight: var(--fw-semibold); color: var(--ink-strong); min-height: 0; }

/* ---- O que na tela é elo, no papel é tinta morta ------------------------------------------
   Some o enfeite do elo (sublinhado, cor de ação, seta), fica o texto com o mesmo peso. */
.papel a,
.papel .fh-drill,
.papel .fh-ranking__link,
.papel .fh-cartao__link,
.papel .fh-lanc__abrir {
  color: inherit;
  text-decoration: none;
  border: 0;
  background: none;
}
.papel .fh-cartao--linkado { box-shadow: none; }
.papel * { box-shadow: none; animation: none; transition: none; }

/* ---- A DENSIDADE, onde o token sozinho não chega ------------------------------------------
   Três lugares em que a altura não vem do token e sim do desenho da linha. */

/* A vitrine da tela é GRÁFICO À ESQUERDA, números numa coluna à direita. Em 703 px essa coluna
   mede 200 px: os três números empilham e comem 336 px, e o gráfico fica espremido. No papel a
   vitrine é uma coluna só - figura na largura da página, números em fileira embaixo, quantos
   couberem. É a mesma decisão do retrato de sempre, agora com a fileira cabendo de verdade
   (o piso de 14 rem não cabia três vezes em 703 px e por isso empilhava calado). */
.papel .fh-vitrine { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.papel .fh-vitrine__numeros { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-4) var(--s-5); align-items: start; }
.papel .fh-numero { padding: 0; border-top: 0; }

/* A linha da DRE em barras: no papel o rótulo não pode ser cortado (a regra mais abaixo), e um
   rótulo de duas linhas numa linha de grade `align-items: center` sobe a fileira de 40 para
   104 px. A saída é dar ao rótulo a largura de que ele precisa, tirando-a da barra: no papel a
   barra é referência de proporção e não precisa da mesma escala de leitura da tela. */
.papel .dre__barra { grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.9fr) auto; padding: 3px 0; align-items: baseline; }
.papel .dre__barra .fh-track { align-self: center; }
.papel .dre__sub { padding-bottom: var(--s-3); }

/* A barra de peso da DRE sintética sai do papel. Ela desenha um número que está escrito ao lado
   dela, na mesma célula, e para desenhá-lo toma a largura de que a coluna seguinte precisa: em
   703 px a variação ficava colada na barra e o "n/d" encostava no traço. Fora da tabela a barra
   fica - lá ela tem largura de sobra e é o que deixa a lista ser varrida de relance. Nenhum dado
   se perde: a barra é `aria-hidden` e o valor dela é a porcentagem impressa ao lado.
   O seletor nomeia `.dre__av`, e não a tabela: uma regra de esconder que alcança `.fh-table`
   alcança DADO, e o guarda de `tests/impressao.test.mjs` reprova - com razão, porque a próxima
   pessoa a escrevê-la pode não ter medido que o que some é ornamento. */
.papel .dre__av .fh-track { display: none; }
.papel .dre__av { grid-template-columns: minmax(0, 1fr); gap: 0; }
.papel .dre__grupo > summary,
.papel .fh-detalhe > summary { padding: var(--s-3) 0; }
.papel .fh-detalhe__corpo { padding-bottom: var(--s-4); }

/* A grade de DUAS colunas vira uma. Em 703 px cada coluna mede 340 px, que é largura de
   TELEFONE - e o que mora nelas é conteúdo de largura cheia (duas listas de ranking lado a
   lado, duas tabelas de pendência, as duas pernas da ponte), desenhado para a medida do
   tablet e espremido na metade dela. As grades de três e quatro NÃO entram: o que cada célula
   delas carrega é um número com o seu rótulo, e número em fileira é o certo no retrato.
   A exceção é a grade que mora DENTRO do que prometemos não partir: empilhar duas colunas ali
   DOBRA a altura de um elemento que tem de caber numa página, e o navegador responde cortando
   conteúdo. Medido: a figura da vitrine de centros de custo guarda duas listas lado a lado e
   foi de ~950 px para 1897 px numa página útil de 1017 - o gate do papel acusou. A lista de
   exceções é a MESMA do `break-inside: avoid` lá embaixo de propósito: quem não pode partir é
   exatamente quem não pode dobrar de altura. */
.papel .fh-grid--2 { grid-template-columns: minmax(0, 1fr); }
.papel .fh-cartao .fh-grid--2, .papel .fh-figure .fh-grid--2, .papel .fh-numero .fh-grid--2,
.papel .fh-callout .fh-grid--2, .papel .fh-indisponivel .fh-grid--2, .papel .fh-lanc .fh-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- No papel, texto cortado é dado PERDIDO -----------------------------------------------
   Na tela, o rótulo que não cabe volta no `title` do hover, ou alargando a janela. No papel
   não há nem um nem outro: o que a reticência comeu não volta mais. E o que estes três cortam
   é justamente a identidade da linha, medido no papel de uma pasta real: `dre__barra-rotulo`
   mostrava 127 px de até 298 ("(−) Custos diretos (repasses e insumos)" saía "(−) Custos
   dire..."), mais cinco famílias de despesa e seis títulos de bloco. O papel tem altura de
   sobra e largura fixa, então a saída é quebrar em duas linhas, nunca encurtar. A checagem do
   gate cobre a próxima classe que aparecer.

   Esta é a ÚNICA regra escrita duas vezes nesta folha, e a segunda cópia está no bloco de
   impressão logo abaixo. A razão: são dois caminhos que produzem papel - o compositor (que
   monta `.papel`, e é o que a prévia mostra) e o Ctrl+P direto (que imprime `#app`, sem `.papel`
   em volta). Perder texto é perder texto nos dois. As duas listas têm de ser idênticas, e
   `tests/impressao.test.mjs` reprova o dia em que uma crescer sem a outra. */
.papel .dre__barra-rotulo, .papel .desp__familia-rotulo, .papel .fh-bloco__titulo {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* A dobra fechada guarda geometria mesmo escondida; no papel ela vai ABERTA (quem abre é o
   compositor, antes de imprimir: `open` no elemento, que é o que o leitor faria). O marcador
   de abrir e fechar não tem função no papel. */
.papel .fh-detalhe > summary, .papel .dre__grupo > summary { list-style: none; cursor: default; }
.papel .fh-detalhe > summary::-webkit-details-marker,
.papel .dre__grupo > summary::-webkit-details-marker { display: none; }
/* A seta é o mesmo marcador, desenhado à mão: ela diz "isto abre", e no papel não abre nada.
   Vale para a dobra e para a linha que abre o painel de lançamentos - no impresso as duas são
   texto, e a setinha ao lado de cada uma das 60 categorias da DRE detalhada é ruído que promete
   uma ação que o papel não tem. O NOME continua, que é o que carrega o dado. */
.papel summary .fh-icon, .papel .fh-drill .fh-icon { display: none; }
.papel .fh-detalhe[open] > summary { font-weight: var(--fw-semibold); }

/* A tabela do papel é SEM GRADE, e ela já nasce assim: o kit desenha `.fh-table` só com o
   filete sob o cabeçalho e um fio entre linhas, sem nenhuma borda vertical. Não há regra aqui
   para isso de propósito - repetir no papel o que o componente já faz seria uma segunda
   escrita da mesma decisão, e no dia em que o kit mudasse o papel continuaria mandando a
   versão velha. Quem prova que a grade continua ausente é `tests/impressao.test.mjs`.
   O que entra é só o que a tela faz por HOVER e por rolagem, que no papel não existem. */
.papel .fh-table tbody tr:hover td { background: none; }
.papel .fh-table-wrap { overflow: visible; max-width: none; }

/* O gráfico não passa da largura da página. `:where()` não conta especificidade, e aqui isso é
   a regra inteira: esta linha é um TETO DE ÚLTIMO RECURSO, e ela não pode vencer um limite que
   a folha declarou de propósito. Escrita como `.papel svg` ela empatava com `.fat__donut svg
   { max-width: 220px }` e ganhava por vir depois - a rosca do faturamento passou a esticar
   até os 703 px da página, virando um círculo que sozinho comia dois terços da folha. Dentro
   de `@media print` a regra era `svg`, sem classe, e perdia para qualquer limite de autor; ao
   trazê-la para o escopo do papel eu lhe dei uma classe sem querer. */
:where(.papel) svg { max-width: 100%; height: auto; }

/* A LEGENDA e a NOTA encolhem um degrau: são o texto que a tela desenha para ser lido a 60 cm
   e o papel a 35, e no impresso elas deixam de competir com o dado que acompanham. A legenda
   do gráfico vai com o `.fh-figure` na frente de propósito: o kit a declara assim, e um
   `figcaption` solto aqui perderia por especificidade e a regra sumiria calada. */
.papel .fh-legend, .papel .fh-note, .papel .fh-legenda-series, .papel .fh-figure figcaption { font-size: 0.75rem; }

/* O movimento não existe no papel - e desligar a animação NÃO basta: ela existe para sair de
   um estado inicial invisível. Sem as regras abaixo, `animation: none` congela tudo nesse
   estado: o bloco que ainda não foi revelado fica com opacidade 0, a linha do gráfico fica com
   o traço inteiro deslocado (invisível) e as barras ficam em escala zero. O papel sairia com
   os quadros EM BRANCO, e nenhuma medida de texto acusaria, porque o texto continua lá. É a
   mesma neutralização que `prefers-reduced-motion` já faz, aplicada ao papel. */
.papel [data-reveal] { opacity: 1 !important; transform: none !important; }
.papel .draw-in .serie { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.papel .draw-in .serie--tracejada { stroke-dasharray: var(--dash, 5 5) !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
.papel .draw-in .area { opacity: 1 !important; }
.papel .grow-in .barra { transform: none !important; }

/* ---- A MARCA, a CAPA e a CABEÇA DE FOLHA --------------------------------------------------
   A marca da capa mede 913 px de largura natural: sem tamanho declarado ela transborda a
   página inteira. `--marca-h` serve às duas medidas de propósito - a altura da marca e a ÁREA
   DE PROTEÇÃO abaixo dela são o mesmo número (a folga do manual é a altura do símbolo), e
   escrever o número duas vezes seria o dia em que uma das duas muda sozinha. */
.papel-marca { --marca-h: 13mm; margin-bottom: var(--marca-h); }
.papel-marca__img { display: block; width: auto; height: var(--marca-h); }

/* A capa é a ETIQUETA impressa, não uma folha de rosto. Na tela, a pasta se identifica por uma
   etiqueta branca com o filete de ouro no topo; no papel ela é a mesma coisa, e o filete é o
   material do mundo que a capa estava deixando de usar. A sombra da etiqueta não vai para o
   papel (sombra impressa é sujeira), então o que a marca é o filete e o fio de baixo.

   A capa fica em TINTA SOBRE PAPEL BRANCO de propósito, e não no bloco Oxford dos resumos de
   diagnóstico, por uma razão de segurança e não de gosto: fundo impresso depende de "Gráficos
   de fundo" ligado na caixa do navegador. Um gráfico que perde a cor degrada; uma capa de
   texto branco sobre Oxford que perde o fundo fica INVISÍVEL - é a regra do indisponível que
   vira ausente, aplicada à primeira página. */
.papel-capa { margin-bottom: 7mm; padding: 4mm 0; border-top: 2pt solid var(--gold); border-bottom: 1px solid var(--rule); }
.papel-capa__nome { font-size: 24pt; line-height: 1.12; font-weight: var(--fw-bold); color: var(--ink-strong); letter-spacing: var(--track-display); }
.papel-capa__linha { margin-top: 2mm; font-size: 10pt; color: var(--ink-soft); }
.papel-capa__estado, .papel-capa__aviso { margin-top: 2mm; }
/* O número que o período deu, na capa: quem recebe o PDF abre nele, como na tela. Ele fica
   ABAIXO do nome na hierarquia - era 26 pt contra 22 pt do nome, e um relatório cuja capa
   grita o número antes de dizer de quem ele é apresenta o dado sem o dono. */
.papel-capa__numero { margin-top: 5mm; display: flex; align-items: baseline; gap: 3mm; }
.papel-capa__numero .num { font-size: 19pt; font-weight: var(--fw-bold); color: var(--gold-text); letter-spacing: -0.02em; }
.papel-capa__numero-rotulo { font-size: 9pt; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
/* A lista em duas colunas não empurra o que vem depois: sem esta margem a procedência
   encostava na última linha do índice e lia-se como o décimo item. */
.papel-capa__indice { margin-top: 5mm; columns: 2; column-gap: 8mm; font-size: 9.5pt; line-height: 1.6; color: var(--ink); list-style: decimal inside; }
.papel-capa__indice li { break-inside: avoid; }
.papel-capa__nota { margin-top: 5mm; }
.papel-capa__emissao { margin-top: 2mm; }

/* A FOLHA DE ROSTO: a capa com a página só para ela. Ela só existe a partir de cinco folhas
   (o compositor decide, e a razão está lá); abaixo disso a capa divide a página com a primeira
   folha e fica compacta, porque ali o espaço é do relatório e não dela.

   A composição é de DOIS blocos ancorados, e não de um bloco esticado. Esticar foi a primeira
   tentativa e ela criou o defeito que veio corrigir: com um índice de duas linhas, o
   `margin-top: auto` empurrava só a procedência para o pé e deixava o índice boiando no alto,
   com um buraco de dois terços de folha no meio. Agora a identificação fica no alto, o índice
   e a procedência DESCEM JUNTOS para o pé, e o branco fica entre dois blocos - que é o que faz
   uma folha de rosto parecer desenhada em vez de parecer inacabada. */
.papel--rosto .papel-capa { display: flex; flex-direction: column; min-height: 232mm; }
.papel--rosto .papel-capa__nome { font-size: 30pt; }
.papel--rosto .papel-capa__linha { margin-top: 4mm; font-size: 11pt; }
.papel--rosto .papel-capa__numero { margin-top: 14mm; }
.papel--rosto .papel-capa__numero .num { font-size: 22pt; }
/* Os números do período, em duas colunas sobre off-white: é o cartão de KPI do padrão visual
   MF8, na medida impressa dele (rótulo em caixa alta de 10,5 pt, número de 21 pt). São eles que
   dão à folha de rosto o que ela não tinha: conteúdo. Uma página de rosto com identificação no
   alto, índice no pé e meia folha de branco no meio não é respiro, é falta. */
.papel--rosto .papel-capa__numeros { margin-top: 12mm; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6mm 10mm; list-style: none; padding: 0; }
/* Filete, e não fundo: a folha de rosto inteira é tinta sobre papel branco de propósito (a
   razão está na regra da capa, acima), e um cartão que depende de "Gráficos de fundo" ligado
   some quando o fundo não imprime - levando o rótulo junto. O fio imprime sempre. */
.papel--rosto .papel-capa__num { display: grid; gap: 1mm; padding-top: 3mm; border-top: 1px solid var(--rule); }
.papel--rosto .papel-capa__num-rotulo { font-size: 8.5pt; font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.papel--rosto .papel-capa__num-valor { font-size: 17pt; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--ink-strong); }
.papel--rosto .papel-capa__num-valor.is-neg { color: var(--alert); }
.papel--rosto .papel-capa__num-delta { font-size: 9pt; color: var(--ink-soft); }
.papel--rosto .papel-capa__indice { margin-top: auto; padding-top: 10mm; line-height: 2.1; }

/* A cabeça de cada folha diz o que vem abaixo dela. O nome do cliente é texto livre e pode ser
   longo, então ele quebra em vez de encostar na margem; o nome da folha nunca encolhe. */
.papel-folha__cabeca { margin-bottom: 4mm; padding-bottom: 2mm; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); }
.papel-folha__cabeca h2 { flex: none; font-size: 15pt; font-weight: var(--fw-bold); color: var(--ink-strong); }
.papel-folha__cabeca .fh-note { min-width: 0; text-align: right; overflow-wrap: break-word; }
/* As folhas CORREM, uma atrás da outra. Uma folha por página era a regra até aqui, e ela
   custava o que o operador viu: a folha que ocupa um terço de página deixa dois terços em
   branco, e o documento sai com mais página do que informação. Quem separa duas folhas é o
   respiro e o filete da cabeça, como separa duas seções de qualquer documento. */
.papel-folha + .papel-folha { margin-top: 9mm; }
.papel-folha__rodape { margin-top: 6mm; padding-top: 2mm; border-top: 1px solid var(--rule-soft); font-size: 8.5pt; line-height: 1.45; color: var(--ink-soft); }
/* O primeiro bloco de uma folha não repete o filete de cima: a cabeça da folha já o trouxe. */
.papel-folha .fh-bloco:first-child { border-top: 0; padding-top: 0; }

/* ============================================================================================
   2. A IMPRESSORA
   Só o que é da passagem pela impressora: a página, a cor que o navegador apagaria, a moldura
   do app que sai de cena, e onde a página pode quebrar.
   ============================================================================================ */
@media print {
  /* A cor é dado. Sem isto o navegador devolve tudo em fundo branco: as séries do gráfico
     perdem a leitura por cor e o filete de ouro da capa some. */
  :root, body, .fh-etiqueta, .faixa, .ld-cta, .fh-cartao, .fh-vitrine, svg, .fh-track, .fh-ranking {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page { size: A4; margin: 14mm 12mm; }

  html, body { background: #fff; }
  body { font-size: 10.5pt; }

  /* ---- A moldura do app, que não é o documento ------------------------------------------
     Cada linha nomeia uma classe de controle. Nenhuma nomeia um elemento. */
  .faixa,
  .fh-barra,
  .rel__virar,
  .rel-ctx-movel,
  .rodape,
  .fh-skip,
  .fh-drawer,
  .fh-drawer-fundo,
  .fh-atalhos,
  .fh-vercomo,
  .fh-busca,
  .fh-copiar,
  .fh-hov,
  .fh-info__btn,
  .so-tela { display: none !important; }

  a, .fh-drill, .fh-ranking__link, .fh-cartao__link, .fh-lanc__abrir {
    color: inherit !important;
    text-decoration: none !important;
    border: 0 !important;
    background: none !important;
  }

  /* ---- A folha da tela, quando o caminho é o Ctrl+P direto ------------------------------- */
  .app-main { min-height: 0; }
  .rel__folha { max-width: none; margin: 0; padding: 0; box-shadow: none; border: 0; }
  .rel__conteudo { display: block; }

  /* A capa do papel no caminho curto: na tela o nome do cliente mora na faixa, e a faixa não
     vai para o papel. Um relatório impresso sem o nome de quem ele é não é um relatório. */
  .rel__capa-papel { display: block; margin-bottom: 6mm; padding-bottom: 3mm; border-bottom: 1px solid var(--rule); }
  .rel__capa-papel-nome { font-size: 16pt; font-weight: var(--fw-bold); color: var(--ink-strong); }
  .rel__capa-papel-linha { margin-top: 1mm; font-size: 9pt; color: var(--ink-soft); }
  .rel__capa-papel + .rel-cabeca { margin-top: 0; }
  .so-papel { display: revert; }

  /* ---- O papel montado pelo compositor ---------------------------------------------------
     Quando ele existe, é ELE que vai para a impressora, e a tela sai de cena. Sem ele (um
     Ctrl+P direto do teclado) imprime-se `#app` com as mesmas regras acima: o caminho curto
     continua valendo, só não remonta os gráficos na largura do papel nem recebe a escala do
     papel, que é declarada em `.papel`. */
  .is-papel #app { display: none !important; }
  .is-papel #fh-papel { display: block; }

  /* ---- A unidade da página é o que CABE numa página --------------------------------------
     `break-inside: avoid` só vale para quem cabe. Pedi-lo a um elemento mais alto que a
     página é pedir ao navegador que corte conteúdo, e `.fh-bloco` é justamente o que pode
     ser mais alto. A seção quebra entre as linhas dela; quem não se parte é a unidade de
     dentro, e o título fica colado no que ele nomeia. Pela mesma razão a VITRINE também não
     entra: ela é um contêiner, e numa pasta com muitos centros de custo o ranking dentro dela
     chega a 1260 px. Ranking é lista, e lista quebra entre itens sem perder nada; o que não
     pode partir é a figura (gráfico partido ao meio não se lê) e o número com o seu rótulo. */
  .fh-cartao, .fh-figure, .fh-numero, .fh-callout, .fh-indisponivel, .fh-lanc {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* ...e a figura que não pode partir é a que DESENHA. `.fh-figure` cobre duas coisas muito
     diferentes: o gráfico (um `svg`, que partido ao meio não se lê) e a figura feita de LINHAS
     - a DRE em barras, o ranking, a fita de semanas -, que quebra entre linhas sem perder nada,
     exatamente como uma tabela. Obrigar a segunda a ficar inteira é o que produzia a página
     quase vazia: a lista de barras da DRE mede 754 px, e ao cair a 400 px do fim de uma página
     ela era empurrada inteira para a seguinte, deixando 40% de folha em branco atrás. Medido:
     era uma página de desperdício em cada papel da DRE. */
  .fh-figure:not(:has(> svg)) { break-inside: auto; page-break-inside: auto; }
  .rel-cabeca, .fh-etiqueta { break-after: avoid; page-break-after: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  /* A cabeça da folha nunca fica sozinha no pé de uma página, e o sub-cabeçalho da DRE nunca
     se separa das linhas que ele abre. */
  .papel-folha__cabeca, .fh-bloco__cabeca, .dre__sub-cabeca { break-after: avoid; page-break-after: avoid; }
  .dre__sub, .dre__barra, .fh-ranking__item, .dre__cat { break-inside: avoid; page-break-inside: avoid; }

  /* Tabela maior que a página quebra ENTRE linhas e repete o cabeçalho. Sem isto, a segunda
     página da DRE detalhada de um cliente grande chega sem dizer o que é cada coluna. */
  .fh-table thead { display: table-header-group; }
  .fh-table tfoot { display: table-footer-group; }
  .fh-table tr { break-inside: avoid; page-break-inside: avoid; }
  .fh-table-wrap { overflow: visible !important; max-height: none !important; }

  /* A folha de rosto é a única capa com página própria. O piso que decide isso é do compositor
     (`PISO_ROSTO`): abaixo dele a capa divide a página com a primeira folha, porque uma A4 com
     um índice de duas linhas e mais nada é a página mais vazia do documento. */
  .papel--rosto .papel-capa { break-after: page; page-break-after: always; border-bottom: 0; }

  /* ---- As DUAS cópias que o Ctrl+P direto exige -----------------------------------------
     As duas regras abaixo já existem em `.papel`, lá em cima, onde a prévia as lê. Estas, sem
     escopo, são as que alcançam o Ctrl+P direto: ali não há `.papel` em volta (imprime-se
     `#app`), e são as únicas duas cujo sumiço é PERDA DE DADO, não perda de acabamento -
     texto comido pela reticência e quadro desenhado em branco. O resto do desenho do papel
     fica só em `.papel` de propósito: o caminho curto continua sendo o caminho curto.
     `tests/impressao.test.mjs` reprova o dia em que uma das cópias crescer sem a outra. */
  .dre__barra-rotulo, .desp__familia-rotulo, .fh-bloco__titulo {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .draw-in .serie { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .draw-in .serie--tracejada { stroke-dasharray: var(--dash, 5 5) !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .draw-in .area { opacity: 1 !important; }
  .grow-in .barra { transform: none !important; }

  * { box-shadow: none !important; animation: none !important; transition: none !important; }
}