/* ─── Filtros laterais (componente único das telas com sidebar) ──────────
   Contêiner herdado da sidebar do Painel (seção com ícone, colapsável) +
   chips com contagem herdados das telas de lista. Ver
   web/js/components/ui/filtros.js.
   ────────────────────────────────────────────────────────────────────── */

.filtros-root {
  padding: 8px 0;
}

.filtros-secao {
  border-bottom: 1px solid var(--color-border);
}

.filtros-secao:last-child {
  border-bottom: none;
}

.filtros-secao__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-secondary);
  font-family: inherit;
  transition: background 0.1s;
}

.filtros-secao__header:hover {
  background: var(--color-surface-inset);
}

.filtros-secao__icon {
  display: flex;
  align-items: center;
  color: var(--color-navy-light);
  flex-shrink: 0;
}

.filtros-secao__label {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

.filtros-secao__chevron {
  display: flex;
  align-items: center;
  color: var(--color-text-tertiary);
  transition: transform 0.2s;
  transform: rotate(-90deg);
}

.filtros-secao__chevron.is-aberto {
  transform: rotate(0deg);
}

.filtros-secao__corpo {
  padding: 2px 12px 10px;
}

/* ─── Corpo: chips ──────────────────────────────────────────────────────── */

.filtros-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filtros-vazio {
  font-size: 12px;
  color: var(--color-text-tertiary);
  padding: 2px 2px 4px;
}

/* ─── Corpo: lista de seleção única ─────────────────────────────────────── */

.filtros-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background 0.1s, color 0.1s;
}

.filtros-item:hover {
  background: var(--color-surface-inset);
  color: var(--color-text-primary);
}

.filtros-item.is-active {
  background: rgba(27, 63, 139, 0.08);
  color: var(--color-navy);
}

.filtros-item.is-active::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--color-gold);
}

/* ─── Corpo: intervalo de datas ─────────────────────────────────────────── */

.filtros-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filtros-range__linha {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.filtros-range__rotulo {
  width: 26px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.filtros-data {
  flex: 1;
  min-width: 0;
  padding: 5px 7px;
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.filtros-data:focus {
  outline: none;
  border-color: var(--color-navy-light);
}

/* ─── Rodapé ────────────────────────────────────────────────────────────── */

.filtros-rodape {
  padding: 10px 16px 4px;
}

/* ─── Cabeçalho de tabela ordenável ─────────────────────────────────────── */

.tabela-th__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: color 0.1s;
}

.tabela-th__btn:hover {
  color: var(--color-navy);
}

/* A seta neutra (↕) só aparece no hover — sem isso o cabeçalho vira uma
   fileira de símbolos competindo com os rótulos. Na coluna ativa ela fica
   sempre visível, porque aí ela carrega informação. */
.tabela-th__seta {
  font-size: 10px;
  opacity: 0;
  color: var(--color-text-tertiary);
  transition: opacity 0.1s, color 0.1s;
}

.tabela-th__btn:hover .tabela-th__seta {
  opacity: 0.55;
}

.tabela-th.is-ordenada .tabela-th__seta {
  opacity: 1;
  color: var(--color-navy);
}

.tabela-th.is-ordenada .tabela-th__btn {
  color: var(--color-navy);
}