/* Chips de filtro (Card-Estados: desligado / ligado) */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--alvo-toque);
  padding: 0 var(--space-4);
  border: 1.5px solid var(--borda-controle);
  border-radius: var(--radius-full);
  background: var(--superficie);
  color: var(--grafite-700);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
  border-color: var(--oliva-700);
  background: var(--oliva-50);
}

.chip[aria-pressed="true"] {
  border-color: var(--oliva-700);
  background: var(--oliva-700);
  color: var(--superficie);
  font-weight: 600;
}

.chip[aria-pressed="true"]:hover {
  border-color: var(--oliva-800);
  background: var(--oliva-800);
}

@media (max-width: 767.98px) {
  /* Faixa rolável que encosta nas bordas da tela, como na prancha mobile */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
    padding-block: 3px;
    scrollbar-width: none;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }
}