/*
 * Página `relatorio-transparencia` (etapa G3) -- a moldura, e ela é **a única página do bloco
 * G sem original para transcrever**.
 *
 * No estático esta página é um `<iframe>` de outro site e nada mais, então não existe desenho
 * de origem: o que o visitante vê hoje é a página do SEB Institucional, em Tailwind, dentro de
 * uma moldura. A D8 já tinha registrado isso e deixado o desenho para cá; o `relatorio.css`
 * dos componentes ficou magro pela mesma razão.
 *
 * **A consequência é que aqui tudo é escolha, e por isso cada valor abaixo cita de onde veio.**
 * A regra que usei: nada de número novo -- só medidas que outras páginas do site já usam.
 */

/*
 * A faixa de conteúdo. **1152px é a largura de conteúdo do site**, não uma invenção desta
 * página: é o `max-width` que o `csc.css` dá ao `.wrapper__banner` do **politicas** e do
 * **privacidade-cookies**, com o mesmo recuo lateral de 16px. (No conduta e no seguranca o
 * banner não tem largura máxima -- é o que o `conduta.css` registra --, então esses dois não
 * entram na conta.)
 *
 * Os 92px de baixo são o `padding-bottom` daquelas mesmas duas páginas, e os 62px de cima são
 * o espaço que elas põem embaixo do banner. A barra do relatório faz o papel do banner: é a
 * faixa de identificação no topo da página.
 */
.pagina--relatorio-transparencia .relatorio {
  /*
   * **A faixa cresceu na segunda conferência da G3**, e o teto de 1600px é medido: a imagem
   * convertida tem 2339px de largura natural, então até 1600 ela nunca é ampliada -- e ampliar
   * embaçaria um documento cheio de tabela. Nos 1152px anteriores a imagem saía com 1020px
   * numa janela de 900px de altura, que foi o "muito pequena para ler".
   *
   * Os 1152px continuam valendo para o cabeçalho, logo abaixo: ali é texto, e texto largo
   * demais é pior de ler, não melhor.
   */
  max-width: 1600px;
  margin: 0 auto;
  padding: 62px 16px 92px;
}



/*
 * **A barra não ganha regra nenhuma daqui**, e isso é deliberado: ela já nasce de ponta a
 * ponta -- o componente da D8 não lhe dá largura, só o recuo interno e o `border-bottom`. Uma
 * regra `max-width: none` aqui não mudaria nada, e regra que não muda nada é a que sobra no
 * arquivo depois que alguém troca o componente.
 */

/*
 * **O cabeçalho é centralizado nesta página** -- o CNPJ e a linha que diz de que relatório se
 * trata. Alinhamento é escolha de página pela regra da D2, e o componente não declara nenhum;
 * a página do documento já vem centrada pela margem automática dela.
 */
.pagina--relatorio-transparencia .relatorio__cabecalho {
  max-width: 1152px;
  margin: 0 auto 24px;
  text-align: center;
}

@media (max-width: 768px) {
  /* Os mesmos valores do conduta no celular: 42px acima, 62px abaixo. */
  .pagina--relatorio-transparencia .relatorio {
    padding: 42px 16px 62px;
  }
}