/* Yaaleh Design System - filter toggle.
   Single "Filtros" button that expands an inline panel, used by FilterToggle.razor. */

.ds-filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ds-filter-bar__leading,
.ds-filter-bar__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ds-filter-bar__trailing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.ds-filter-toggle.is-active {
  --ds-btn-bg: var(--color-brand-10);
  --ds-btn-fg: var(--color-brand-80);
  --ds-btn-border: 1px solid var(--color-brand-70);
}

.ds-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--create-bg-default);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;
}

.ds-filter-panel {
  background: var(--color-white);
  border: 1px solid var(--color-grey-20);
  border-radius: var(--border-radius);
  padding: 16px;
  margin-bottom: 16px;
  animation: ds-filter-panel-in 0.12s ease;
}

.ds-filter-panel .row > * {
  margin-bottom: 12px;
}

.ds-filter-panel--compact {
  padding: 10px 12px;
  max-height: 60vh;
  overflow-y: auto;
}

.ds-filter-panel--compact .row > * {
  margin-bottom: 8px;
}

.ds-filter-panel--compact .accordion-body {
  padding: 10px 12px;
}

.ds-filter-panel--compact .form-label {
  margin-bottom: 2px;
  font-size: 0.8125rem;
}

@keyframes ds-filter-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}