/* Layout geral */
main {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .mensagem-ceo {
    width: 100%;
    text-align: center;
  }
  
  /* Container para Filtro, Histórico de Transações e Volume Financeiro */
  .container-sections {
    display: flex;
    justify-content: space-between; /* Coloca os 3 elementos lado a lado */
    gap: 20px;
  }
  
  .filtro-totais, .historico, .volume-financeiro {
    width: 32%; /* Cada um ocupando 1/3 do espaço */
    display: flex;
    flex-direction: column; /* Conteúdo interno em coluna */
    gap: 20px;
  }
  
  .filtro {
    width: 100%;
  }
  
  .totals {
    width: 100%;
    text-align: center;
  }
  
  .historico, .volume-financeiro {
    text-align: center;
  }
  
  /* Apoiadores lado a lado */
  .apoiadores {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  
  .apoiador {
    width: 32%;
  }
  
  .apoiador img {
    width: 100%;
  }
  
  .container {
    display: flex;
    gap: 10px; /* Espaçamento entre as divisões */
    padding: 10px;
  }
  
  .filtro-e-totais {
    flex: 0 0 20%; /* Ocupa 20% da largura em telas grandes */
    background-color: #f7f7f7;
    padding: 10px;
  }
  
  .historico-transacoes {
    flex: 0 0 50%; /* Ocupa 50% da largura em telas grandes */
    background-color: #ffffff;
    padding: 10px;
  }
  
  .volume-financeiro {
    flex: 0 0 30%; /* Ocupa 30% da largura em telas grandes */
    background-color: #ffffff;
    padding: 10px;
  }
  
  canvas {
    width: 100%;
    height: 100%;
  }
  
  /* Media query para telas menores (ex. celulares) */
  @media (max-width: 768px) {
    .container {
      flex-direction: column; /* Exibe cada div em uma linha */
    }
    
    .filtro-e-totais, .historico-transacoes, .volume-financeiro {
      flex: 1 1 100%; /* Cada div ocupa 100% da largura */
      margin-bottom: 10px;
    }
  }