/* TRANSFORMA TABS EM BOTÕES */
/* Remove o visual padrão das abas */
ul.nav-tabs {
  border: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5px;
}

/* Remove as bordas de lista */
ul.nav-tabs > li {
  list-style: none !important;
  margin: 0;
}

/* Transforma os links em botões */
ul.nav-tabs > li > a {
  background-color: #f3f3f3;
  border: 0px solid #ccc !important;
  border-radius: 4px;
  color: #333 !important;
  font-weight: 700;
  padding: 5px 10px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

/* Efeito hover */
ul.nav-tabs > li > a:hover {
  background-color: #e2e2e2;
  border-color: #aaa !important;
}

/* Aba ativa (selecionada) */
ul.nav-tabs > li.active > a,
ul.nav-tabs > li.active > a:focus,
ul.nav-tabs > li.active > a:hover {
  background-color: #00D0FF !important;
  color: #ffffff !important;
}

/* Remove interferência do Bootstrap */
ul.nav.nav-tabs > li.active {
  border: none !important;
  margin-bottom: 0 !important;
}