.aba-content {
  display: none;
}
/* Garante que quando a aba estiver ativa, ela force o modo Grid do Tailwind */
.aba-content.active {
  display: grid !important;
}
.tab {
  border: 1px solid #278740;
}
/* Estilo visual do botão ativo (Verde SEPLAN) */
.tab-active {
  border-bottom: 4px solid #278740;
  font-weight: bold;
  color: #278740;
}

input,
select,
textarea {
  background-color: #f9fafb !important;
  border: 1px solid #d1d5db !important;
  transition: all 0.2s;
}
input:focus,
select:focus,
textarea:focus {
  background-color: #fff !important;
  border-color: #166534 !important; /* Green-800 focus */
  outline: none;
  box-shadow: 0 0 0 2px rgba(22, 101, 52, 0.2);
}
/* Estilização da barra de rolagem para as abas em mobile */
.tabs-container::-webkit-scrollbar {
  height: 4px;
}
.tabs-container::-webkit-scrollbar-thumb {
  background: #166534;
}

#barraProgresso {
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-emenda {
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Multiselect - AJUSTADO */
.custom-multiselect {
  position: relative;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Permite que as tags quebrem linha se houver muitas */
  gap: 4px;
  padding: 4px 8px;
  min-width: 180px; /* Em vez de max-width, use min-width para estabilidade */
  min-height: 38px;
  cursor: pointer;
  background: #fff;
  /* overflow: hidden;  <-- REMOVA ESTA LINHA */
}

.multiselect-dropdown {
  /* Remova o display: block daqui */
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #d1d5db;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 8px 8px;
}

/* Garante que a classe hidden funcione mesmo com o posicionamento absolute */
.multiselect-dropdown.hidden {
  display: none !important;
}

/* Classe auxiliar para quando o dropdown estiver aberto */
.multiselect-dropdown.active {
  display: block !important;
}

.multiselect-dropdown div {
  padding: 8px 12px;
  cursor: pointer;
}

.multiselect-dropdown div:hover {
  background: #f0fdf4;
}
.multiselect-dropdown div.selected {
  background: #16a34a;
  color: white;
}

.selection-tag {
  background: #16a34a;
  color: white;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
:root {
  --green-primary: #33a852;
  --gray-track: #e5e7eb;
}

input[type="range"] {
  background-color: transparent !important;
  height: 0px !important;
  border: none !important;
}
/* Estilização do Slider com Variáveis CSS */
.range-slider {
  --range-color: #33a852;
  --track-color: #e5e7eb;
  --thumb-size: 18px;
  position: relative;
  width: 200px;
  height: 25px; /* Altura para não cortar a sombra */
  display: flex;
  align-items: center;
}

/* A linha (track) de fundo e o preenchimento verde */
.range-slider::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  /* Gradiente dinâmico baseado nas variáveis do JS */
  background: #dcdedc;
  z-index: 1;
}

/* Reset dos Inputs */
.range-slider input[type="range"] {
  position: absolute;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  pointer-events: none; /* Área vazia ignora cliques */
  margin: 0;
  z-index: 2;
  outline: none;
}

/* Bolinha Verde (Thumb) - Chrome/Safari */
.range-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: all; /* Ativa clique apenas na bolinha */
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background: var(--range-color);
  border: 2px solid #fff; /* Aro branco das imagens */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: relative;
  z-index: 10;
}

/* Bolinha Verde (Thumb) - Firefox */
.range-slider input[type="range"]::-moz-range-thumb {
  appearance: none;
  pointer-events: all;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--range-color);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
/* ----------------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------*/
/* Estilo da Paginação do Modal de Status */
.pagination-status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 24px 0;
  width: 100%;
}

.btn-status-page {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

/* Setinhas e desativados (Verde claro/médio) */
.btn-status-nav {
  background-color: #a3c9ab;
  color: white;
}

/* Números normais (Verde escuro) */
.btn-status-num {
  background-color: #2d7a40;
  color: #fff;
}

/* Página ativa (Borda verde, fundo branco) */
.btn-status-active {
  background-color: #f1f8f3 !important;
  border: 2px solid #2d7a40 !important;
  color: #2d7a40 !important;
}

.btn-status-page:hover:not(.btn-status-active):not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-status-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}