/* ============================================================
   sr-filtro.css — Os filtros do Extrato

   A `--f-cor` de cada filtro vem do HTML e atravessa tudo: borda,
   brilho, glifo, realce do escolhido. Cada filtro tem a sua, e é
   isso que deixa a barra legível de relance — período é roxo,
   origem é ciano, status é violeta. A cor identifica ANTES da
   leitura.
   ============================================================ */

.srf {
  --f-cor: #7c3aed;
  position: relative;
  display: inline-block;
}

/* O `<select>` de verdade continua aqui, e continua sendo a
   verdade. Fica invisível sem sair do documento: `display:none` o
   tiraria do formulário e da navegação de quem depende dele. */
.srf-nativo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── O botão ───────────────────────────────────────────────── */
.srf-botao {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .6rem .42rem .55rem;
  font-family: var(--font-section);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #cbd5e1;
  cursor: pointer;
  border-radius: .5rem;
  /* Chanfro só nos cantos que o Sistema chanfra. Em 28px de altura
     um chanfro de 8px seria maior que o próprio raio. */
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px,
                     100% 100%, 7px 100%, 0 calc(100% - 7px));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--f-cor) 16%, #0d0a1a),
    color-mix(in srgb, var(--f-cor) 8%, #0a0814));
  border: 1px solid color-mix(in srgb, var(--f-cor) 38%, transparent);
  transition: border-color .18s, background .18s, box-shadow .18s, color .18s;
}
.srf-botao:hover {
  color: #f1f5f9;
  border-color: color-mix(in srgb, var(--f-cor) 70%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--f-cor) 22%, transparent);
}
.srf-botao:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--f-cor) 80%, transparent);
  outline-offset: 2px;
}

/* O GLIFO puxa a cor do filtro; o texto fica neutro. Assim o ícone
   é o que se vê primeiro, e o rótulo é o que se lê depois. */
.srf-ico {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--f-cor) 75%, #ffffff);
  line-height: 0;
}
.srf-ico svg { max-width: none; }   /* a regra global colapsaria */

.srf-rotulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15ch;
}

.srf-seta {
  display: flex;
  margin-left: .1rem;
  color: color-mix(in srgb, var(--f-cor) 55%, #64748b);
  line-height: 0;
  transition: transform .2s, color .2s;
}
.srf-seta svg { max-width: none; }
.srf-aberta .srf-seta { transform: rotate(180deg); color: color-mix(in srgb, var(--f-cor) 90%, #fff); }

/* ── FILTRO ATIVO ───────────────────────────────────────────
   Quando o valor não é o primeiro (o "todos"), o filtro se
   anuncia. Sem isso o hunter olha uma lista recortada e não lembra
   por quê — o que faz o Extrato parecer que perdeu dados. */
.srf-ativo .srf-botao {
  color: #f8fafc;
  border-color: color-mix(in srgb, var(--f-cor) 85%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--f-cor) 30%, #0d0a1a),
    color-mix(in srgb, var(--f-cor) 15%, #0a0814));
  box-shadow: 0 0 16px color-mix(in srgb, var(--f-cor) 28%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--f-cor) 30%, transparent);
}
.srf-ativo .srf-botao::after {
  /* O ponto: pequeno, no canto, e suficiente. Um "×" de limpar
     roubaria o clique de abrir, que é o que o hunter quer 9 vezes
     em 10. */
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--f-cor) 90%, #fff);
  box-shadow: 0 0 6px var(--f-cor);
}

/* ── A lista ───────────────────────────────────────────────── */
.srf-lista {
  position: absolute;
  z-index: 60;
  top: calc(100% + 5px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 17rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: .3rem;
  border-radius: .55rem;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px,
                     100% 100%, 10px 100%, 0 calc(100% - 10px));
  background: linear-gradient(170deg, #100c1f, #0a0814 70%, #07060f);
  border: 1px solid color-mix(in srgb, var(--f-cor) 40%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.72),
              0 0 26px color-mix(in srgb, var(--f-cor) 14%, transparent);
  outline: none;
  animation: srf-descer .14s ease-out;
}
@keyframes srf-descer {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.srf-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .5rem;
  border-radius: .35rem;
  font-family: var(--font-section);
  font-size: .7rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.srf-item:hover,
.srf-item.srf-marcado {
  background: color-mix(in srgb, var(--f-cor) 20%, transparent);
  color: #f1f5f9;
}
/* O foco por TECLADO precisa de um sinal mais forte que o hover:
   quem navega sem mouse não tem o cursor para se localizar. */
.srf-item.srf-marcado {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--f-cor) 95%, #fff);
}
.srf-item[data-sel="1"] { color: #f8fafc; }
.srf-item[data-sel="1"] .srf-ico { color: color-mix(in srgb, var(--f-cor) 60%, #ffffff); }

.srf-txt { flex: 1; white-space: nowrap; }

.srf-tique {
  display: flex;
  flex-shrink: 0;
  line-height: 0;
  color: color-mix(in srgb, var(--f-cor) 80%, #fff);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s, transform .15s;
}
.srf-tique svg { max-width: none; }
.srf-item[data-sel="1"] .srf-tique { opacity: 1; transform: none; }

/* A barra de rolagem da lista, no tom do filtro. */
.srf-lista::-webkit-scrollbar { width: 6px; }
.srf-lista::-webkit-scrollbar-track { background: transparent; }
.srf-lista::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--f-cor) 40%, transparent);
  border-radius: 3px;
}

@media (max-width: 560px) {
  .srf-rotulo { max-width: 9ch; }
  .srf-lista  { max-width: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  .srf-lista { animation: none; }
  .srf-botao, .srf-seta, .srf-item, .srf-tique { transition: none; }
}