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 */
}