/*
 * 90_impressao.css — ONDA D · §11.3
 * ═══════════════════════════════════════════════════════════════════════════
 * Duas coisas, nesta ordem:
 *   1. A FOLHA DO CERTIFICADO — A4 paisagem, desenhada em HTML/CSS porque é a
 *      peça que o Gustavo abre na reunião e porque em `prawn` cada tema white
 *      label viraria código de desenho, com duas verdades visuais a manter.
 *   2. As regras de impressão de QUALQUER tela do produto — o gestor imprime
 *      relatório, e uma tabela impressa com a barra de navegação por cima é o
 *      tipo de descuido que o cliente mostra para o chefe.
 *
 * A folha é SEMPRE clara, em qualquer tema: papel é branco. Por isso os
 * valores aqui são literais e não tokens — é o único arquivo do sistema onde
 * isso é certo, e o motivo está escrito: um `--fundo` escuro vazando para cá
 * gastaria o toner do cliente e sairia ilegível.
 *
 * TUDO QUE TEM SELETOR ESTÁ AQUI, e não no `<style>` de
 * `layouts/certificado.html.erb`. Aquele `<style>` é inline e SEM `nonce`, e a
 * CSP do projeto põe nonce em `style-src`: em produção o navegador o descarta
 * inteiro, em silêncio. Enquanto `.folha { width/height/background }` morou
 * lá, o que se perdia em produção não era um detalhe de impressão — era O
 * PAPEL: a peça que o Gustavo abre na reunião virava um bloco transparente de
 * largura total, com texto #14181f sobre o cinza #4a4f5a da mesa. Ilegível.
 *
 * Sobrou UMA declaração para o integrador, porque `@page` não aceita seletor e
 * por isso não pode viver numa folha compartilhada: `@page { size: A4
 * landscape; margin: 0 }`. Ela, e o `nonce:` naquele `<style>`, estão pedidos
 * no relatório da onda.
 */

.corpo--certificado {
  background: #4a4f5a;          /* mesa: dá a sensação de papel sobre a mesa */
  margin: 0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.folha {
  /* A4 paisagem em milímetros: a folha tem o tamanho do papel mesmo na tela,
     e é `zoom` (abaixo) que a encolhe para caber. O branco é literal e não
     token — papel é branco em qualquer tema. */
  width: 297mm;
  height: 210mm;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  padding: 14mm 16mm;
  color: #14181f;
  font-family: var(--fonte);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgb(0 0 0 / 0.45);
  /* Moldura: 3mm de cor da marca só na borda. Se o tenant escolheu amarelo
     canário, continua sendo uma linha fina, nunca um fundo chapado.
     `--folha-marca`, e NÃO `--cor-marca-forte`: o certificado é um SNAPSHOT
     CONGELADO (§11.2 — `certificados.dados["tema"]`, com o logo em data-URI
     justamente porque "o cliente pode trocar o arquivo"). Lendo o token vivo,
     o dia em que a Upper trocasse `marca_hex` repintaria retroativamente todo
     certificado já emitido, e o papel impresso deixaria de bater com a
     revalidação na tela. Quem preenche `--folha-marca` é a ONDA H, num
     `<style nonce>` da própria página, a partir de `dados["tema"]`; sem ele a
     moldura cai no índigo institucional — neutro e errado de um jeito visível,
     que é melhor que certo de um jeito que muda sozinho. */
  border-top: 3mm solid var(--folha-marca, #4f6bff);
  outline: 0.35mm solid #d6dae2;
  outline-offset: -6mm;
}

/* Na TELA a folha inteira cabe na largura do dispositivo. `zoom` e não
   `transform: scale()`: `scale` não reduz o espaço que o elemento ocupa e
   deixaria meia tela de rolagem morta embaixo da peça, no celular. */
@media screen {
  .folha { zoom: min(1, calc((100vw - 32px) / 297mm)) }
}

/* ── Topo: logo do cliente à esquerda, a Elevô discreta à direita ───────── */
.folha__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10mm;
  min-height: 16mm;
}
.folha__logo { max-height: 16mm; max-width: 70mm; width: auto; object-fit: contain }
.folha__emissor { text-align: right; font-size: 3mm; color: #5b6475; line-height: 1.5 }
.folha__emissor strong { display: block; font-size: 3.6mm; color: #14181f; letter-spacing: 0.02em }

/* ── Miolo ──────────────────────────────────────────────────────────────── */
.folha__miolo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 3mm;
  padding: 4mm 0;
}
.folha__tipo {
  font-size: 4mm;
  letter-spacing: 0.42em;
  font-weight: 700;
  color: var(--folha-marca, #4f6bff);
  margin: 0;
}
.folha__titulo {
  font-size: 13mm;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 2mm;
}
.folha__frase { font-size: 4.2mm; color: #38404f; margin: 0; line-height: 1.6 }
.folha__nome {
  font-size: 9mm;
  line-height: 1.15;
  font-weight: 700;
  margin: 1mm 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.folha__cpf { font-family: var(--fonte-mono); font-size: 3.6mm; color: #5b6475; letter-spacing: 0.06em }
.folha__assunto {
  font-size: 6mm;
  font-weight: 550;
  margin: 2mm auto 0;
  max-width: 210mm;
  line-height: 1.25;
  text-wrap: balance;
}
.folha__numeros {
  display: flex;
  justify-content: center;
  gap: 12mm;
  margin-top: 3mm;
  font-size: 3.4mm;
  color: #5b6475;
}
.folha__numeros b { display: block; font-size: 5mm; color: #14181f; font-variant-numeric: tabular-nums }

/* ── Rodapé em três colunas: QR · protocolo · responsável técnico ───────── */
.folha__rodape {
  display: grid;
  grid-template-columns: 28mm 1fr auto;
  align-items: end;
  gap: 8mm;
  padding-top: 5mm;
  border-top: 0.3mm solid #d6dae2;
}
.folha__qr { width: 28mm; height: 28mm; display: block }
.folha__protocolo { text-align: left; font-size: 3.2mm; color: #5b6475; line-height: 1.6 }
.folha__protocolo b {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 4.6mm;
  letter-spacing: 0.1em;
  color: #14181f;
}
.folha__responsavel {
  text-align: right;
  font-size: 3.2mm;
  color: #5b6475;
  line-height: 1.5;
  min-width: 55mm;
  padding-top: 8mm;
  border-top: 0.3mm solid #14181f;
}
.folha__responsavel strong { display: block; font-size: 3.6mm; color: #14181f }

/* Marca d'água discreta de status — cancelado/expirado precisam gritar no
   papel tanto quanto na tela de validação. */
.folha--cancelado::after,
.folha--expirado::after {
  content: attr(data-carimbo);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28mm;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgb(198 47 40 / 0.16);
  transform: rotate(-18deg);
  pointer-events: none;
}

/* A barra de ações fora da folha: é ela que diz, na UI, que não existe PDF no
   servidor e que o caminho é imprimir → "Salvar como PDF" (§11.3). */
.folha-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 297mm;
  padding: 0 16px;
  color: #e6e9ef;
  font-size: 14px;
  text-align: center;
}

/* ═══ IMPRESSÃO ═══════════════════════════════════════════════════════════ */

@media print {
  :root { color-scheme: light }

  /* Sem isto o navegador "economiza tinta" e some com a moldura da marca, com
     os fundos dos selos e com a tarja de CANCELADO — que é justamente o que
     precisa gritar no papel. Vale para o produto inteiro, não só para a
     folha: relatório impresso sem os fundos das linhas zebradas fica ilegível
     na quinta página. */
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact }

  body, .corpo {
    background: #fff !important;
    color: #000 !important;
    padding: 0;
    margin: 0;
  }

  /* Nada de chrome no papel. */
  .cabecalho,
  .navegacao,
  .avisos,
  .abas,
  .paginacao,
  .rodape--publico,
  .faixa-impersonacao,
  .folha-acoes,
  .botao,
  .nao-imprime { display: none !important }

  .conteudo { max-width: none; padding: 0 }

  .corpo--certificado { background: #fff; padding: 0; display: block }
  .folha {
    box-shadow: none;
    margin: 0;
    page-break-after: avoid;
    break-inside: avoid;
  }

  /* Relatório impresso: o cabeçalho da tabela repete em toda página e a linha
     não parte no meio. */
  .cartao { border: 1px solid #c3c8d2; box-shadow: none; background: #fff }
  .tabela { font-size: 10pt }
  .tabela thead { display: table-header-group }
  .tabela tbody tr { break-inside: avoid }
  .tabela--cartao thead { position: static; width: auto; height: auto; clip-path: none }
  .tabela--cartao tbody tr { display: table-row }
  .tabela--cartao td { display: table-cell }
  .tabela--cartao td::before { content: none }

  /* URL atrás de cada link é ruído numa tabela de 400 linhas; só nas telas de
     texto corrido (termos, privacidade) ela ajuda. */
  .leitura a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 }

  a { text-decoration: underline }
}