/* Folha de estilo de impressão (UI-04, D-27): painel da execução e detalhe do recibo.
   Entra por <link ... media="print"> em base.html, fora de qualquer camada, para vencer as camadas do app.css.
   Mesma escala da tela: tamanhos 14, 16, 20 e 28 px; pesos 400 e 600; só as cores #000000, #555555 e #FFFFFF. */

@page {
  size: A4 portrait;
  margin: 15mm 12mm 22mm 12mm;
  /* Melhoria progressiva: navegadores sem caixas de margem simplesmente não mostram o contador. */
  @bottom-right {
    content: "Página " counter(page) " de " counter(pages);
    font-size: 14px;
    color: #555555;
  }
}

/* Esconde o que não faz sentido no papel: navegação, ações, formulários, imagens e visualizador. */
.menu,
.topo,
.pular-para-conteudo,
#alerta-global,
.migalhas,
.acoes,
.so-tela,
form,
button,
.htmx-indicator,
.paginador,
#visualizador-pagina,
img,
figure,
.revisao {
  display: none;
}

/* Mostra o que só existe no papel: cabeçalho de identificação e rodapé de sigilo. */
.so-impressao,
.cabecalho-impressao {
  display: block;
}

.rodape-impressao {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 4px;
  border-top: 1px solid #555555;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #000000;
  background: #FFFFFF;
}

html,
body {
  background: #FFFFFF;
  color: #000000;
  print-color-adjust: economy;
  -webkit-print-color-adjust: economy;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.esqueleto {
  display: block;
}

.coluna {
  display: block;
}

#conteudo {
  padding: 0;
  margin: 0;
  max-width: none;
}

.cabecalho-impressao {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #000000;
  font-size: 14px;
  line-height: 1.4;
}

.cabecalho-impressao p {
  margin: 0;
}

.cabecalho-impressao__marca {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.cabecalho-impressao .icone {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: text-bottom;
}

/* Tipografia: mesma escala da tela, nos mesmos papéis. */
h1 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

h2,
h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

h1,
h2,
h3 {
  break-after: avoid;
}

.tabela,
.tabela caption,
.tabela th,
.tabela td,
.apoio-celula,
.hash,
.dl-grade dt,
.indicador dt,
.indicador__detalhe {
  font-size: 14px;
  line-height: 1.4;
}

.tabela th,
.tabela caption,
.dl-grade dt,
.indicador dt {
  font-weight: 600;
}

.indicador__numero {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

/* Texto digitado e textos longos saem completos: nada é truncado no papel. */
.texto-longo,
.texto-quebra,
.texto-original,
.texto-digitado,
.dl-grade dd,
.hash {
  overflow-wrap: anywhere;
  max-width: none;
  color: #000000;
}

/* Links em preto e sublinhados, sem imprimir o endereço. */
a,
a:visited {
  color: #000000;
  text-decoration: underline;
}

a[href]::after {
  content: none;
}

/* Selos: fundo branco, borda preta; o ícone e o texto continuam, então o risco não depende de cor. */
.selo {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  font-size: 14px;
  font-weight: 600;
}

.selo .icone,
.aviso .icone,
.indicador .icone {
  color: #000000;
  fill: currentColor;
}

/* Avisos, cartões e indicadores: borda esquerda de 4px preta e fundo branco. */
.aviso,
.cartao,
.indicador,
.memoria,
.texto-digitado {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #555555;
  border-left: 4px solid #000000;
  border-radius: 0;
  box-shadow: none;
}

.aviso,
.cartao,
.indicador {
  padding: 8px 12px;
}

/* Indicadores do painel em três colunas. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Tabelas: largura da página, cabeçalho sem fundo repetido a cada página, linhas que não se partem. */
.regiao-rolavel {
  overflow: visible;
  max-height: none;
  border: 0;
  background: #FFFFFF;
}

.tabela,
.tabela--fixa {
  width: 100%;
  min-width: 0;
}

.tabela th,
.tabela td {
  background: #FFFFFF;
  color: #000000;
  border-bottom: 1px solid #555555;
}

.tabela thead th {
  background: #FFFFFF;
  border-bottom: 2px solid #000000;
}

thead {
  display: table-header-group;
}

tr,
.cartao,
.indicador,
.memoria,
.linha-do-tempo > li {
  break-inside: avoid;
}

/* Memórias e históricos abertos. O JS de beforeprint abre os <details>; isto reforça onde o navegador esconde
   o conteúdo de um <details> fechado (a regra só age sobre os fechados, para não desfazer grades e avisos abertos). */
#conteudo details:not([open]) > :not(summary) {
  display: block;
}

details::details-content {
  content-visibility: visible;
}

/* Revisão analítica (Fase 4, D-24): abas, gráficos e tabela de comparação no papel. */
.abas,
.grafico__link-tabela {
  display: none;
}

/* O gráfico é um <figure> (escondido acima, com as imagens): aqui ele volta, com os preenchimentos exatos. */
.grafico {
  display: block;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  break-inside: avoid;
}

.grafico .regiao-rolavel {
  overflow: visible;
}

.grafico__svg,
.grafico__svg--cascata {
  width: 100%;
  min-width: 0;
  height: auto;
}

.tabela--analitica {
  min-width: 0;
}

.grafico__legenda,
.grafico__legenda li {
  color: #000000;
  font-size: 14px;
  font-weight: 400;
}

/* Partes do SVG: só preto, cinza de apoio e branco; o risco continua em padrão, tracejado e ícone. */
.grafico__barra {
  fill: #FFFFFF;
  stroke: #000000;
  stroke-width: 1px;
}

.grafico__barra--atual {
  fill: #000000;
}

.grafico__barra--provisoria {
  fill: #FFFFFF;
  stroke: #000000;
  stroke-width: 2px;
  stroke-dasharray: 4 2;
}

.grafico__barra--atipica,
.grafico__barra--nao-lido,
.grafico__barra--residuo {
  stroke: #000000;
}

.grafico__barra--delta {
  fill: #FFFFFF;
  stroke: #000000;
  stroke-width: 2px;
}

.grafico__padrao,
.grafico__media {
  stroke: #000000;
}

.grafico__faixa {
  fill: none;
  stroke: #555555;
}

.grafico__grade {
  stroke: #555555;
}

.grafico__eixo,
.grafico__conector {
  stroke: #000000;
}

.grafico__texto,
.grafico__texto--forte {
  fill: #000000;
  font-size: 14px;
}

.grafico__marcador {
  color: #000000;
}