#filtro-cidade {
    width: 100% !important;   /* ocupa 100% da largura da coluna */
    box-sizing: border-box;   /* inclui padding e borda no cálculo da largura */
    margin-bottom: 10px;      /* espaçamento inferior opcional */
}

.row {
  transition: all 0.3s ease;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ****************************************************************************** */
/*        filtros             */

.filtro-container {
  display: flex;
  width: 100%;
  gap: 10px;
  flex-wrap: wrap; /* permite quebra de linha em telas pequenas */
}

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;        /* opcional */
  box-sizing: border-box;
}

/* Definição de proporção dos grupos */
.grupo-1,
.grupo-2 {
  flex: 1 1 0;    /* ocupam o mesmo espaço restante */
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.grupo-3 {
  flex: 0 0 25%;   /* sempre ocupa 25% do container */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Elementos internos */
.filtro-item {
  flex: 1 1 0;
  min-width: 120px;  /* evita que encolham demais */
}

/* Responsividade para telas pequenas */
@media (max-width: 992px) {

  .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;        /* opcional */
      box-sizing: border-box;
  }

  .filtro-container {
        flex-direction: column;
        width: 100%;
  }

  .grupo-1,
  .grupo-2,
  .grupo-3 {
        flex: 1 1 100%;  /* cada grupo ocupa linha inteira */
        justify-content: flex-start;
  }

  .filtro-item {
        flex: 1 1 45%;  /* dentro do grupo, cada elemento ocupa metade da linha */
  }

  #btnConsultar {
        flex: 1 1 100%;  /* botão ocupa linha inteira */
  }

      .row {
        flex-direction: column; /* já existe */
        align-items: center;    /* centraliza horizontalmente */
    }

    .row .col-8 {
        display: flex;
        flex-direction: column;
        align-items: center;    /* centraliza horizontalmente */
        justify-content: center; /* centraliza verticalmente */
        width: 100%;            /* ocupa toda largura do container pai */
    }

    #graficoIndividual {
        max-width: 90%;  /* opcional para não esticar demais */
        margin: 20px 0;  /* espaçamento vertical */
    }

}

#graficoLinhas, #graficoReferencia {
    width: 100% !important;
    height: 350px !important;
    display: block !important;
}

#fundo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

}
body {
    background-color: rgba(0, 0, 64, 0.01); /* Azul marinho com 60% de opacidade */
}

.btn.btn-primary {
    background-color: #1B1488 !important;   /* sua cor */
    border-color: #1B1488 !important;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.25s ease;
    border: 2px solid #1B1488;
}

/* Hover suave */
.btn.btn-primary:hover {
  opacity: 0.85;
}