* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1a1a1a;
  background-color: #f4f4f6;
  padding: 24px;
}

.barra-acoes-relatorio {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 auto 20px;
  max-width: 900px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Com o "SAIR" da Fase 12.4 a barra passou a ter três filhos. Sem o wrap,
     numa tela estreita os dois botões espremeriam a dica até ela virar uma
     coluna de palavras soltas. */
  flex-wrap: wrap;
}

.barra-acoes-relatorio button {
  background-color: #C8102E;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

/* Mesma ideia do .botao-sair de style.css, reescrita aqui porque esta página
   não carrega style.css: contorno em vez de sólido, por ser ação secundária e
   destrutiva. Precisa dos dois níveis de seletor para vencer a regra
   ".barra-acoes-relatorio button" acima, que pinta todo botão de vermelho. */
.barra-acoes-relatorio .botao-sair-relatorio {
  /* Empurra para a ponta oposta: "Imprimir novamente" é a ação que se espera
     clicar aqui, e sair por engano no meio de uma impressão custa caro. */
  margin-left: auto;
  background-color: transparent;
  color: #C8102E;
  border: 1px solid #C8102E;
  padding: 7px 15px;  /* 1px a menos que os sólidos, compensando a borda */
}

.barra-acoes-relatorio .botao-sair-relatorio:hover {
  background-color: #C8102E;
  color: #ffffff;
}

.dica-impressao {
  font-size: 0.85rem;
  color: #666666;
  /* Sem isto a dica exige a largura toda do texto e empurra o "SAIR" para
     fora da barra nas telas estreitas. */
  flex: 1 1 200px;
}

#carregando-relatorio,
#erro-relatorio-pagina {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

#erro-relatorio-pagina {
  color: #C8102E;
  font-weight: 600;
}

/* Mesmo utilitário do style.css, mesma promessa: presente = some, sem
   exceção. Aqui ainda não há regra competindo, mas o !important é o que
   impede que uma futura (ex.: um seletor com display abaixo desta linha)
   deixe o elemento visível carregando a classe que deveria escondê-lo —
   exatamente o bug que apareceu no painel na Fase 17. */
.oculto {
  display: none !important;
}

#relatorio-conteudo {
  background-color: #ffffff;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cabecalho-relatorio {
  border-bottom: 3px solid #C8102E;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.cabecalho-relatorio h1 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.cabecalho-relatorio p {
  font-size: 0.9rem;
  color: #555555;
}

/* Indicador de frescor (Fase 7.1) — mesmas cores/regra do painel
   (style.css .indicador-frescor-*). Precisa da especificidade extra de
   ".cabecalho-relatorio" pra vencer a regra genérica "p" acima. */
.cabecalho-relatorio .indicador-frescor-atencao {
  color: #b7791f;
  font-weight: 600;
}

.cabecalho-relatorio .indicador-frescor-critico,
.cabecalho-relatorio .indicador-frescor-sem-dados {
  color: #C8102E;
  font-weight: 700;
}

.secao-relatorio {
  margin-bottom: 28px;
}

.secao-relatorio h2 {
  font-size: 1.1rem;
  color: #C8102E;
  margin-bottom: 10px;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 6px;
}

.secao-relatorio h3 {
  font-size: 0.95rem;
  margin: 14px 0 6px;
  color: #333333;
}

.secao-relatorio > p {
  font-size: 0.9rem;
  margin-bottom: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 0.82rem;
}

th,
td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #e0e0e0;
}

th {
  background-color: #f4f4f6;
  font-weight: 700;
}

/* Fase 19.7: tabela mais larga que a folha não é cortada na impressão — o
   Chromium encolhe o documento INTEIRO para ela caber. Medido em 21/09/2026:
   5 tabelas passavam da largura útil em setembro e 3 em agosto ("Por
   Conjunto" em 321px), e agosto saía a ~76% do tamanho, com letra miúda até
   na primeira página. Duas causas, duas correções:
   - nome de campanha não tem espaço, então não quebrava linha — resolvido com
     <wbr> entre os blocos do nome (inserirQuebrasEmNomes, em relatorio.js);
   - "Por Criativo" tem 13 colunas, e só os cabeçalhos ("Custo/Conversa",
     "Visualizações 75%") e o selo "Dados insuficientes" já somavam mais que a
     folha com o respiro padrão — daí o respiro lateral menor, só nela.
   "overflow-wrap: anywhere" nas células foi testado e descartado: cabia, mas
   partia palavra no meio ("FINANCIAME / NTO", "0,77 / %") em 54 células de
   setembro. */
.tabela-criativos th,
.tabela-criativos td {
  padding-left: 4px;
  padding-right: 4px;
}

/* Tabelas rótulo/valor (2 colunas): ver comentário em criarTabela
   (relatorio.js). Sem limite, a coluna de valor fica no meio da folha em
   paisagem. */
.tabela-estreita {
  max-width: 620px;
}

.nota-rodape {
  font-size: 0.78rem;
  color: #666666;
  font-style: italic;
  margin-top: 2px;
  margin-bottom: 10px;
}

/* Aviso condicional de dado ausente (Fase 8.1) — mesma cor de atenção do
   indicador de frescor (Fase 7.1), pra manter o vocabulário visual. */
.nota-alerta {
  color: #b7791f;
  font-weight: 600;
  font-style: normal;
}

/* Marcador de classificação de criativo (Fase 8.3) — cor nunca é o único
   sinal (o texto "Bom"/"Atenção"/"Revisar"/"Dados insuficientes" sempre
   aparece dentro do marcador), pra continuar legível em impressão P&B. */
.marcador-classificacao {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.marcador-positivo {
  background-color: #1b8a3d;
}

.marcador-atencao {
  background-color: #b7791f;
}

.marcador-negativo {
  background-color: #C8102E;
}

.marcador-neutro {
  background-color: #757575;
}

/* Destaque das linhas com atribuição confiável (Fase 10): conjuntos que
   segmentam uma cidade só. Como a cor some na impressão P&B, o sinal real
   é o marcador "Cidade única" na coluna Atribuição — o fundo e a borda são
   reforço visual, nunca a única pista. */
.linha-destaque {
  background-color: #f0f7f2;
}

.linha-destaque td:first-child {
  border-left: 3px solid #1b8a3d;
  font-weight: 600;
}

/* Paisagem como PADRÃO, não como imposição: o navegador continua deixando
   o usuário trocar para retrato na janela de impressão. A razão é o número
   de colunas — "Por Criativo" tem 13 e "Ontem — Por Campanha" tem 8, que em
   retrato (180mm úteis) ficam espremidas a ponto de quebrar valores como
   "R$ 1.234,56" em duas linhas.
   Contrapartida a manter em mente ao mexer aqui: paisagem TROCA largura por
   altura — a área útil vertical cai de ~277mm para ~190mm, então tudo que
   depende de "caber na página" fica mais apertado (ver as regras de quebra
   mais abaixo). */
@page {
  size: A4 landscape;
  margin: 10mm;
}

/* Impressão: sem chrome de navegação, quebras de página sensatas,
   legível em preto e branco (a cor de destaque vira preto). */
@media print {
  body {
    background-color: #ffffff;
    padding: 0;
  }

  .barra-acoes-relatorio,
  #carregando-relatorio {
    display: none !important;
  }

  #relatorio-conteudo {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }

  /* Seções fluem entre páginas em vez de serem empurradas inteiras para a
     próxima. O 'page-break-inside: avoid' que ficava aqui fazia sentido em
     retrato, mas com a altura útil menor da paisagem passou a deixar meia
     página em branco toda vez que uma seção não cabia no espaço restante
     (medido: 7 páginas com vários vazios grandes). O que realmente não
     pode quebrar é a LINHA da tabela e o título separado do seu conteúdo —
     tratados logo abaixo. */
  .secao-relatorio {
    page-break-inside: auto;
  }

  table {
    page-break-inside: auto;
  }

  /* Requisito explícito: nunca cortar uma linha de tabela ao meio. */
  tr {
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group; /* repete o cabeçalho da tabela em cada página */
  }

  /* Título nunca fica sozinho no rodapé com a tabela na página seguinte
     (acontecia com os nomes de campanha em "Por Criativo"). 'break-after'
     é a propriedade atual; 'page-break-after' fica para navegadores que
     ainda não a suportam. */
  .secao-relatorio h2,
  .secao-relatorio h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Um título seguido de tabela só vale se pelo menos o cabeçalho e uma
     linha vierem junto — evita o caso em que o 'break-after: avoid' empurra
     só o título e a tabela recomeça logo abaixo. */
  .secao-relatorio h3 + table thead {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Fase 19.7: a regra do título não bastava quando há nota entre ele e a
     primeira tabela ("Por Criativo", "Por Campanha", "Por Conjunto") — o
     título ia junto com a primeira nota e a quebra caía logo depois dela.
     Medido em setembro: "Por Criativo" com uma linha de nota no pé da
     página e todo o conteúdo na seguinte. As notas que vêm ANTES de uma
     tabela seguem junto com ela; as de rodapé, depois da tabela, não.
     O break-inside é parte da mesma correção: sem ele, o navegador
     cumpria o "avoid" quebrando DENTRO da nota, e a de "Por Campanha" saía
     partida no meio da frase entre duas páginas. */
  .secao-relatorio > .nota-rodape:has(~ table, ~ h3) {
    page-break-after: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Texto corrido não acompanha a largura da folha: em paisagem uma nota
     esticada nos 277mm úteis passa de 200 caracteres por linha, e o olho
     perde a linha ao voltar. As tabelas seguem usando a largura toda —
     isso vale só para os parágrafos. */
  .nota-rodape,
  .secao-relatorio > p {
    max-width: 210mm;
  }

  .cabecalho-relatorio,
  .secao-relatorio h2 {
    border-color: #000000;
  }

  .secao-relatorio h2 {
    color: #000000;
  }

  th,
  td {
    border-bottom: 1px solid #999999;
  }
}