/* Filtros aplicados — os chips abaixo do título da listagem.
   Componente COMPARTILHADO (macros_filtros.html); nenhum módulo redefine estas
   classes. As cores saem das variáveis do Tabler, então o tema escuro funciona
   sem regra extra. */

.chips-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

/* O chip é uma pastilha: o recorte em vigor se lê como informação, não como
   botão — quem age é o "×" dentro dele. */
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.25rem 0.1875rem 0.6875rem;
  border-radius: 999px;
  background: var(--tblr-blue-lt, #e5eef6);
  color: var(--tblr-blue, #0054a6);
  font-size: 0.8125rem;
  line-height: 1.35;
  max-width: 100%;
}

/* "Situação" fica apagado e "Pago" em destaque: o valor é o que muda. */
.chip-filtro-rotulo {
  opacity: 0.75;
}

.chip-filtro-valor {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-filtro-remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  color: inherit;
  opacity: 0.6;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.chip-filtro-remover .icon {
  width: 12px;
  height: 12px;
}

.chip-filtro-remover:hover,
.chip-filtro-remover:focus {
  background: var(--tblr-red, #d63939);
  color: #fff;
  opacity: 1;
}

/* "Limpar" é ação secundária: texto, não pastilha — senão compete com os
   chips, que são a informação. */
.link-limpar-filtros {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.25rem;
  font-size: 0.8125rem;
  color: var(--tblr-secondary, #667382);
  text-decoration: none;
  transition: color 0.15s ease;
}

.link-limpar-filtros .icon {
  width: 14px;
  height: 14px;
}

.link-limpar-filtros:hover,
.link-limpar-filtros:focus {
  color: var(--tblr-red, #d63939);
}

/* No celular o chip pode ocupar a linha inteira: o valor trunca em vez de
   empurrar o × para fora da tela. */
@media (max-width: 575.98px) {
  .chip-filtro {
    max-width: 100%;
  }

  .chip-filtro-valor {
    max-width: 12rem;
  }
}

/* ── Filtro na linha do cabeçalho (`formulario_filtro_em_linha`) ─────────
   Pesquisa e selects lado a lado, centralizados na vertical com o título e o
   botão de novo registro. A pesquisa cresce; os selects têm a largura do
   próprio texto. Abaixo de `md`, cada um ocupa a linha inteira. */
.filtro-em-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.filtro-em-linha .filtro-em-linha-busca {
  flex: 1 1 10rem;
  max-width: 24rem;
}

/* A largura de 100% do `.form-select` do Tabler empurrava cada select para uma
   linha própria: aqui ele tem a largura do próprio texto. */
.filtro-em-linha .filtro-em-linha-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 11.75rem;   /* "Todos os pagamentos" + a seta, sem cortar */
}

.filtro-em-linha .filtro-em-linha-data {
  flex: 0 0 auto;
  width: auto;
}

.filtro-em-linha .filtro-em-linha-data .form-control {
  width: 9.75rem;
}

/* A pesquisa encolhe primeiro; o que mesmo assim não couber desce para a
   linha de baixo (com a pesquisa, o período e a situação, a fila de
   Atendimentos não cabe numa linha de notebook) — nunca vaza da tela. */

@media (max-width: 767.98px) {
  .filtro-em-linha .filtro-em-linha-busca,
  .filtro-em-linha .filtro-em-linha-select,
  .filtro-em-linha .filtro-em-linha-data {
    flex: 1 1 100%;
    max-width: none;
  }

  .filtro-em-linha .filtro-em-linha-data .form-control {
    width: auto;
  }
}

/* Os filtros em vigor, numa linha própria abaixo dos campos, afastados deles.
   Sem filtro nenhum o bloco fica vazio e não ocupa espaço. */
.filtro-em-linha-aplicados .chips-filtro {
  margin-top: 1rem;
}