div.cell-output-display {
  display: block;
  width: 100%;
  
}
 
div.cell-output-display img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
} 
/* Adiciona margem no topo da saída de células de código para alinhamento vertical */
div.cell-output {
  margin-top: 0px;
} 

div.cell-output-display:has(img#ipca-geral) {
  margin-top: 30px;
}

/* Adiciona margem no topo especificamente para a saída do gráfico de grupos */
div.cell-output-display:has(img#ipca-grupos) {
  /* Ajuste este valor (em pixels) conforme necessário para alinar o gráfico com o título */
  margin-top: 65px; /* Ajuste para alinhar com o texto "Inflação por Grupos" */
}

/* Estilo para o rodapé fixo na parte inferior */
div.footer {
  position: fixed; /* Fixa o elemento na tela */
  bottom: 0; /* Alinha na parte inferior */
  left: 0; /* Alinha na margem esquerda */
  right: 0; /* Alinha na margem direita (ocupa a largura total) */
  background-color: #f7f4f2; /* Cor de fundo suave */
  padding: 5px 10px; /* Espaçamento interno (vertical, horizontal) - Mantido 5px vertical */
  border-top: 0.5px solid #fffcfc; /* Linha sutil no topo do rodapé */
  text-align: center; /* Centraliza o texto */
  font-size: 1.0em; /* Tamanho da fonte menor e mais típico para rodapé */
  color: #1b1a1a; /* Cor do texto um pouco mais suave */
  z-index: 1000; /* Garante que o rodapé fique acima de outros elementos */
}

div.footer p {
  margin: 0; /* Remove margens padrão do parágrafo dentro do rodapé */
  padding: 0; /* Remove padding padrão do parágrafo dentro do rodapé */
  line-height: normal; /* Define espaçamento de linha normal */
}

/* Ajuste para o conteúdo principal não ficar escondido atrás do rodapé fixo */
body {
  padding-bottom: 40px; /* Adiciona um espaçamento na parte inferior do corpo para acomodar o rodapé (ajuste este valor se o rodapé for mais alto) - Reduzido */
} 

@media (max-width: 768px) {
  /* Ajustes para o sistema de grid do Quarto */
  div.grid {
    display: flex !important; /* Mudar para flex para usar order */
    flex-direction: column !important; /* Empilhar itens verticalmente */
    width: 100% !important;
  }

  div.g-col-7,
  div.g-col-5 {
    display: contents; /* Faz com que os filhos desses elementos se tornem flex items diretos de div.grid */
  }

  /* Reordenação dos elementos filhos diretos de div.grid */
  section#ipca-análise-geral { /* Contém "IPCA: Análise Geral" e "Conceito" */
    order: 1 !important;
  }

  div#cell-ipca-geral { /* Contém o gráfico "Evolução do IPCA" */
    order: 2 !important;
  }

  section#inflação-por-grupos { /* Contém "Inflação por Grupos" e "Nota Metodológica" */
    order: 3 !important;
  }

  div#cell-ipca-grupos { /* Contém o gráfico "IPCA Variação dos Grupos" */
    order: 4 !important;
  }

  /* Ajustes para divs de output de células e imagens */
  div.cell-output-display {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  div.cell-output-display img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Ajustes gerais de texto e corpo */
  body {
    text-align: left !important;
    padding-bottom: 60px !important;
    margin: 0 !important;
  }

  p { /* Garante que parágrafos também se ajustem */
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  div.footer {
    font-size: 0.8em !important;
    padding: 10px 5px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}