/* V3 DO CARD "SEU EDITAL" (filtro por topico do /feed/).

   Carregado so pelo `templates/core/_filtro_disciplina_card_v3.html`. TODA
   regra comeca em `.fd__filtro.fd__filtro-v3`: a V2 nao tem essa classe, entao
   nada daqui alcanca o card em producao. As duas classes no seletor tambem
   garantem que esta folha venca as regras `.fd__filtro-v2 ...` do `feed.html`
   (que a V3 herda como base estrutural) sem depender da ordem de carga.

   MOBILE-FIRST, PELA LARGURA DO CARD. A base e o celular (320-599px). As
   faixas de tablet e computador respondem a largura real do card via
   container query: no desktop o /feed/ pode ocupar so parte da janela, e a
   viewport mentiria. Sem suporte a container query, uma media query faz o
   mesmo pela viewport. Nao ha layout em dois paineis aqui (etapa separada). */

.fd__filtro.fd__filtro-v3 {
  --fd3-azul: var(--fxm-blue-bright, #0668fc);
  --fd3-azul-profundo: var(--fxm-blue-deep, #012f9f);
  --fd3-azul-fundo: #eef4ff;
  --fd3-azul-hover: #f4f7ff;
  --fd3-tinta: var(--fxm-ink-brand, #02062d);
  --fd3-tinta-2: #3a4152;
  --fd3-cinza: #646b78;
  --fd3-cinza-claro: #8b919c;
  --fd3-trilho: #dfe3ea;
  --fd3-guia: #e3e6ec;
  /* Cores pedagogicas: SO dentro do mostrador, uma por status (Treinar,
     Quase la, Forte) -- ver `_filtro_disciplina_card_v3_medidor.html`. */
  --fd3-fraco: #c8452f;
  --fd3-atencao: #b86e05;
  --fd3-bom: #1a7f4b;
  /* Celular: degrau menor para o titulo de nivel 2 caber em 320px. */
  --fd-filtro-degrau: 14px;
  --fd3-coluna-medidor: 58px;
  container: fd3-edital / inline-size;
}

/* ---------- CABECALHO ---------- */
.fd__filtro.fd__filtro-v3 .fd__filtro-cabecalho {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px;
  padding: 16px 16px 6px;
}
.fd__filtro.fd__filtro-v3 .fd3-cabecalho-texto { flex: 1 1 100%; min-width: 0; }
.fd__filtro.fd__filtro-v3 .fd3-kicker {
  margin: 0 0 4px; color: var(--fd3-azul);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.fd__filtro.fd__filtro-v3 .fd3-titulo {
  margin: 0; color: var(--fd3-tinta);
  font-size: 20px; font-weight: 800; line-height: 1.2;
}
.fd__filtro.fd__filtro-v3 .fd3-apoio {
  margin: 6px 0 0; max-width: 52ch; color: var(--fd3-cinza);
  font-size: 13.5px; line-height: 1.45;
}
/* Em tela estreita "Recolher tudo" vai para linha propria (o texto ocupa
   100%); a partir do tablet volta para o lado do titulo. */
.fd__filtro.fd__filtro-v3 .fd__filtro-alternar-todos { min-height: 36px; height: 36px; }
.fd__filtro.fd__filtro-v3 .fd__filtro-alternar-todos:focus-visible,
.fd__filtro.fd__filtro-v3 .fd__filtro-so-liberados:focus-visible,
.fd__filtro.fd__filtro-v3 .fd__filtro-disciplina:focus-visible,
.fd__filtro.fd__filtro-v3 .fd__filtro-relevancia-cabeca:focus-visible,
.fd__filtro.fd__filtro-v3 .fd__filtro-remover--icone:focus-visible {
  outline: 2px solid var(--fd3-azul); outline-offset: 2px;
}

/* ---------- MENSAGEM DA SOPHIA ----------
   Foto + balao, como uma mensagem que acabou de chegar. O balao tem o canto
   de cima a esquerda reto, apontando para a foto. Fechar e "nao mostrar
   novamente" sao discretos: a mensagem e o que importa, nao os controles. */
.fd__filtro.fd__filtro-v3 .fd3-sophia {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 16px 6px;
  animation: fd3-sophia-chega .32s ease-out both;
}
.fd__filtro.fd__filtro-v3 .fd3-sophia[hidden] { display: none; }
.fd__filtro.fd__filtro-v3 .fd3-sophia-foto {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(2, 6, 45, .12);
}
.fd__filtro.fd__filtro-v3 .fd3-sophia-balao {
  flex: 1; min-width: 0;
  padding: 10px 40px 10px 14px;
  background: #fff; border: 1px solid #e6e8ee;
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 6px 18px -12px rgba(2, 6, 45, .35);
}
.fd__filtro.fd__filtro-v3 .fd3-sophia-nome {
  margin: 0 0 2px; color: var(--fd3-azul-profundo);
  font-size: 12px; font-weight: 800;
}
.fd__filtro.fd__filtro-v3 .fd3-sophia-fala {
  margin: 0; color: var(--fd3-tinta-2); font-size: 13.5px; line-height: 1.5;
}
.fd__filtro.fd__filtro-v3 .fd3-sophia-nunca {
  display: inline-block; margin: 6px 0 0; padding: 4px 0; min-height: 24px;
  border: 0; background: none; cursor: pointer;
  color: var(--fd3-cinza-claro); font: inherit; font-size: 11.5px; font-weight: 500;
  text-decoration: underline; text-decoration-color: #cfd3da; text-underline-offset: 3px;
}
.fd__filtro.fd__filtro-v3 .fd3-sophia-nunca:hover { color: var(--fd3-tinta-2); }
/* O "x" fica dentro do balao, no canto. O alvo de toque tem 32px mesmo com
   o icone pequeno. */
.fd__filtro.fd__filtro-v3 .fd3-sophia-fechar {
  position: absolute; top: 4px; right: 4px;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--fd3-cinza-claro);
}
.fd__filtro.fd__filtro-v3 .fd3-sophia-fechar:hover { background: #f1f3f7; color: var(--fd3-tinta-2); }
.fd__filtro.fd__filtro-v3 .fd3-sophia-fechar svg { width: 14px; height: 14px; display: block; }
.fd__filtro.fd__filtro-v3 .fd3-sophia-nunca:focus-visible,
.fd__filtro.fd__filtro-v3 .fd3-sophia-fechar:focus-visible { outline: 2px solid var(--fd3-azul); outline-offset: 2px; }
@keyframes fd3-sophia-chega {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- FERRAMENTAS E BARRA DO TOPICO ATIVO ---------- */
.fd__filtro.fd__filtro-v3 .fd__filtro-so-liberados[aria-pressed="true"] {
  border-color: var(--fd3-azul); background: var(--fd3-azul); color: #fff;
}
/* "TREINANDO AGORA" FICA NO TOPO DO CARD, nao acompanha a rolagem. Na V2 a
   barra e grudada; aqui ela e estatica, logo abaixo do cabecalho. Como ela
   deixa de ocupar o topo da tela, o cabecalho da disciplina volta a grudar na
   base normal -- sem os 57px que a V2 reserva para a barra (`--filtrando`). */
/* `top: auto` nao e enfeite: o `sincronizarGrudeFiltro` do feed le o `top`
   computado da barra e, se for numero, reserva a altura dela no topo da tela.
   Com `auto` ele entende que a barra nao gruda e nao deixa vao. */
.fd__filtro.fd__filtro-v3 .fd__filtro-voltar-programacao {
  position: static; top: auto;
  background: var(--fd3-azul-profundo);
  box-shadow: none;
}
.fd__filtro.fd__filtro-v3.fd__filtro-v2--filtrando { --fd-filtro-grude: var(--fd-filtro-topo); }
.fd__filtro.fd__filtro-v3 .fd__filtro-ativo-rotulo { color: #b9cbff; }

/* ---------- LISTA E DISCIPLINA ---------- */
.fd__filtro.fd__filtro-v3 .fd__filtro-lista { padding: 10px 10px 8px; }
.fd__filtro.fd__filtro-v3 .fd__filtro-disciplina-nome { color: var(--fd3-tinta); }
.fd__filtro.fd__filtro-v3 .fd__filtro-disciplina-contagem { color: var(--fd3-cinza); }
.fd__filtro.fd__filtro-v3 .fd__filtro-topicos > li { margin-right: 0; }

/* ---------- LINHA DO TOPICO ----------
   codigo | titulo + contexto | mostrador. A coluna do mostrador e fixa para
   ser um eixo reto de cima a baixo. Alvo minimo de 44px. */
.fd__filtro.fd__filtro-v3 .fd__filtro-item {
  grid-template-columns: auto minmax(0, 1fr) var(--fd3-coluna-medidor);
  column-gap: 8px; align-items: center;
  min-height: 44px; margin: 0 4px; padding: 10px 8px 10px 8px;
}
.fd__filtro.fd__filtro-v3 .fd__filtro-item[data-nivel="1"] { padding-left: calc(8px + var(--fd-filtro-degrau)); }
.fd__filtro.fd__filtro-v3 .fd__filtro-item[data-nivel="2"] { padding-left: calc(8px + var(--fd-filtro-degrau) * 2); }
.fd__filtro.fd__filtro-v3 .fd__filtro-item[data-nivel="3"] { padding-left: calc(8px + var(--fd-filtro-degrau) * 3); }
.fd__filtro.fd__filtro-v3 .fd__filtro-item[data-nivel="4"] { padding-left: calc(8px + var(--fd-filtro-degrau) * 4); }
.fd__filtro.fd__filtro-v3 .fd__filtro-item[data-nivel="5"] { padding-left: calc(8px + var(--fd-filtro-degrau) * 5); }
.fd__filtro.fd__filtro-v3 .fd__filtro-item:hover { background: var(--fd3-azul-hover); }
.fd__filtro.fd__filtro-v3 .fd__filtro-item:focus-visible { outline: 2px solid var(--fd3-azul); outline-offset: -2px; }

/* HIERARQUIA NEUTRA: a guia so mostra parentesco, nunca nota. A V3 nao le o
   `guia_cor` do service, e esta regra trava o cinza mesmo que algum estilo
   inline apareca. */
.fd__filtro.fd__filtro-v3 .fd__filtro-item[data-nivel]:not([data-nivel="0"]) .fd__filtro-item-guia {
  background: var(--fd3-guia) !important; width: 1px; transition: none;
}

/* Codigo e estrutura: cinza, nao a cor de acao. */
.fd__filtro.fd__filtro-v3 .fd__filtro-item-codigo { color: var(--fd3-cinza); align-self: start; }
.fd__filtro.fd__filtro-v3 .fd__filtro-item[data-nivel]:not([data-nivel="0"]) .fd__filtro-item-codigo { min-width: 26px; }
.fd__filtro.fd__filtro-v3 .fd__filtro-item-nome { color: var(--fd3-tinta); }
.fd__filtro.fd__filtro-v3 .fd__filtro-item-meta {
  flex-wrap: wrap; gap: 2px 10px; margin-top: 3px;
}
.fd__filtro.fd__filtro-v3 .fd__filtro-item-contagem { color: var(--fd3-cinza-claro); font-size: 12px; }

/* ---------- NAS PROVAS (recorrencia historica) ----------
   Icone + frase. A cor e uma ESCALA DE INTENSIDADE, do azul cheio ao cinza
   claro: quanto mais o topico apareceu nas provas, mais forte o tom. Assim
   cada estado tem cor propria sem disputar com o mostrador -- verde,
   vermelho, ambar e azul-petroleo continuam so dele.

     Recorrente              azul profundo, icone preenchido, peso alto
     Apareceu pontualmente   azul medio
     Sem registro            cinza
     Historico insuficiente  cinza claro, icone tracejado

   A forma do icone tambem muda nas pontas (cheio / tracejado), para os
   estados extremos nao dependerem so de tom. */
.fd__filtro.fd__filtro-v3 .fd3-prova {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 12px; font-weight: 500; line-height: 16px;
}
.fd__filtro.fd__filtro-v3 .fd3-prova-icone { flex: none; width: 12px; height: 12px; }
.fd__filtro.fd__filtro-v3 .fd3-prova--recorrente { color: var(--fd3-azul-profundo); font-weight: 700; }
.fd__filtro.fd__filtro-v3 .fd3-prova--recorrente .fd3-prova-icone rect { fill: #dbe6ff; }
.fd__filtro.fd__filtro-v3 .fd3-prova--pontual { color: #3d74e0; font-weight: 600; }
.fd__filtro.fd__filtro-v3 .fd3-prova--semregistro { color: #7a808c; }
.fd__filtro.fd__filtro-v3 .fd3-prova--insuficiente { color: #a3a8b2; }
.fd__filtro.fd__filtro-v3 .fd3-prova--insuficiente .fd3-prova-icone { stroke-dasharray: 2 1.6; }

/* ---------- TOPICO GRATIS ---------- */
.fd__filtro.fd__filtro-v3 .fd__filtro-gratis { background: var(--fd3-azul); }

/* ---------- MOSTRADOR ---------- */
.fd__filtro.fd__filtro-v3 .fd3-medidor {
  grid-column: 3; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: var(--fd3-coluna-medidor); min-width: 0;
  color: var(--fd3-cinza-claro);
}
.fd__filtro.fd__filtro-v3 .fd3-medidor-arco { display: block; width: 46px; height: 26px; overflow: visible; }
.fd__filtro.fd__filtro-v3 .fd3-medidor-trilho { fill: none; stroke: var(--fd3-trilho); stroke-width: 5; stroke-linecap: round; }
.fd__filtro.fd__filtro-v3 .fd3-medidor-valor { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: butt; }
.fd__filtro.fd__filtro-v3 .fd3-medidor-ponteiro { stroke: var(--fd3-tinta); stroke-width: 2.2; stroke-linecap: round; }
.fd__filtro.fd__filtro-v3 .fd3-medidor-eixo { fill: var(--fd3-tinta); }
.fd__filtro.fd__filtro-v3 .fd3-medidor-rotulo {
  display: block; max-width: 100%;
  font-size: 10.5px; font-weight: 700; line-height: 13px; text-align: center;
  color: currentColor; white-space: nowrap;
}
/* O score, pequeno e abaixo do rotulo: e o que deixa comparar dois topicos e
   ver a posicao subir. So existe no estado medido. Herda a cor da faixa do
   mostrador (`currentColor`), para ler como parte dele e nao como texto solto;
   o negrito compensa o ambar, a cor de menor contraste da escala. */
.fd__filtro.fd__filtro-v3 .fd3-medidor-numero {
  display: block;
  font-size: 10.5px; font-weight: 700; line-height: 12px;
  font-variant-numeric: tabular-nums;
  color: currentColor;
}
/* Sem evidencia: trilho tracejado, eixo vazado, nenhum ponteiro. */
.fd__filtro.fd__filtro-v3 .fd3-medidor--vazio .fd3-medidor-trilho { stroke-width: 3; stroke-dasharray: 3 3.4; stroke-linecap: butt; }
.fd__filtro.fd__filtro-v3 .fd3-medidor--vazio .fd3-medidor-eixo { fill: #fff; stroke: var(--fd3-cinza-claro); stroke-width: 1.4; }
.fd__filtro.fd__filtro-v3 .fd3-medidor--vazio .fd3-medidor-rotulo { color: var(--fd3-azul); }
/* Medido: a cor da faixa vale para arco e rotulo; o ponteiro diz a posicao
   sem depender da cor. */
.fd__filtro.fd__filtro-v3 .fd3-medidor--fraco { color: var(--fd3-fraco); }
.fd__filtro.fd__filtro-v3 .fd3-medidor--atencao { color: var(--fd3-atencao); }
.fd__filtro.fd__filtro-v3 .fd3-medidor--ok,
.fd__filtro.fd__filtro-v3 .fd3-medidor--forte { color: var(--fd3-bom); }
.fd__filtro.fd__filtro-v3 .fd3-medidor--trancado { color: var(--fd3-cinza-claro); gap: 4px; }
.fd__filtro.fd__filtro-v3 .fd3-medidor-cadeado { width: 18px; height: 18px; display: block; }
.fd__filtro.fd__filtro-v3 .fd3-medidor--semquestoes .fd3-medidor-rotulo { font-weight: 600; }
/* Rotulos de duas palavras longas ("Plano completo", "Sem questoes") quebram
   em duas linhas: numa unica linha passavam da coluna de 58px e da borda do
   cartao. */
.fd__filtro.fd__filtro-v3 .fd3-medidor--trancado .fd3-medidor-rotulo,
.fd__filtro.fd__filtro-v3 .fd3-medidor--semquestoes .fd3-medidor-rotulo { white-space: normal; }

/* ---------- ESTADOS DA LINHA ---------- */
/* TREINANDO AGORA: fundo azul claro + filete azul + rotulo escrito. Nunca so
   a cor do nome. O rotulo sai do `aria-current`, que o JS do feed troca sem
   recarregar a pagina. */
.fd__filtro.fd__filtro-v3 .fd__filtro-item[aria-current="true"] {
  background: var(--fd3-azul-fundo);
  box-shadow: inset 3px 0 0 var(--fd3-azul);
}
/* PESO DOS TOPICOS PAIS. A V2 pede 650, mas a Inter so e carregada em 400,
   500, 600, 700 e 800 -- e o navegador arredonda 650 para 700, negrito cheio.
   Em linhas longas de edital isso pesava a lista inteira. 600 separa o pai do
   filho (500) sem gritar. O topico em treino tambem fica em 600: quem o
   destaca e o fundo azul e o rotulo "Treinando agora", nao o peso. */
.fd__filtro.fd__filtro-v3 .fd__filtro-item[data-nivel="0"] .fd__filtro-item-nome { font-weight: 600; }
.fd__filtro.fd__filtro-v3 .fd__filtro-item[aria-current="true"] .fd__filtro-item-nome { color: var(--fd3-tinta); font-weight: 600; }
.fd__filtro.fd__filtro-v3 .fd__filtro-item[aria-current="true"] .fd__filtro-item-texto::before {
  content: "Treinando agora";
  display: block; margin-bottom: 2px;
  color: var(--fd3-azul); font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
/* Carregando: o mostrador some e o giro da V2 ocupa a coluna 3. */
.fd__filtro.fd__filtro-v3 .fd__filtro-item[aria-busy="true"] .fd3-medidor { visibility: hidden; }
.fd__filtro.fd__filtro-v3 .fd__filtro-item[aria-busy="true"]::after { border-top-color: var(--fd3-azul); }
/* Sem questoes: baixa enfase, mas legivel -- ausencia de acervo nao e
   deficiencia do aluno. */
.fd__filtro.fd__filtro-v3 .fd__filtro-item:disabled { opacity: .6; }
.fd__filtro.fd__filtro-v3 .fd__filtro-item--trancado .fd__filtro-item-nome { color: #5d6270; }

/* ---------- LEGENDA ----------
   So o icone "i", no canto de cima do cabecalho. O painel abre logo abaixo
   do cabecalho, como um cartao, e fecha pelo mesmo icone ou com Esc. */
.fd__filtro.fd__filtro-v3 .fd__filtro-cabecalho { position: relative; }
.fd__filtro.fd__filtro-v3 .fd3-cabecalho-texto { padding-right: 40px; }
.fd__filtro.fd__filtro-v3 .fd3-legenda-botao {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--fd3-cinza);
}
.fd__filtro.fd__filtro-v3 .fd3-legenda-botao svg { width: 20px; height: 20px; display: block; }
.fd__filtro.fd__filtro-v3 .fd3-legenda-botao:hover { background: #eceff4; color: var(--fd3-tinta); }
.fd__filtro.fd__filtro-v3 .fd3-legenda-botao[aria-expanded="true"] { background: var(--fd3-azul-fundo); color: var(--fd3-azul); }
.fd__filtro.fd__filtro-v3 .fd3-legenda-botao:focus-visible { outline: 2px solid var(--fd3-azul); outline-offset: 2px; }
.fd__filtro.fd__filtro-v3 .fd3-legenda {
  margin: 6px 16px 8px; padding: 14px 0 0;
  background: #fff; border: 1px solid #e6e8ee; border-radius: 14px;
  color: #4b5263; font-size: 12.5px; line-height: 1.5;
}
.fd__filtro.fd__filtro-v3 .fd3-legenda[hidden] { display: none; }
.fd__filtro.fd__filtro-v3 .fd3-legenda-titulo {
  margin: 0 16px 10px; color: var(--fd3-tinta);
  font-size: 13px; font-weight: 700;
}
.fd__filtro.fd__filtro-v3 .fd3-legenda-corpo {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  padding: 0 16px 16px;
}
.fd__filtro.fd__filtro-v3 .fd3-legenda-subtitulo {
  margin: 0 0 8px; color: var(--fd3-tinta);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.fd__filtro.fd__filtro-v3 .fd3-legenda-grade {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 8px 12px; margin: 0;
}
.fd__filtro.fd__filtro-v3 .fd3-legenda-grade dt { margin: 0; justify-self: start; }
.fd__filtro.fd__filtro-v3 .fd3-legenda-grade dd { margin: 0; color: var(--fd3-tinta-2); font-size: 12.5px; line-height: 1.45; }
.fd__filtro.fd__filtro-v3 .fd3-legenda-grade .fd3-medidor { grid-column: auto; grid-row: auto; }
.fd__filtro.fd__filtro-v3 .fd3-legenda-grade .fd__filtro-gratis { margin-top: 0; }
.fd__filtro.fd__filtro-v3 .fd3-legenda-aviso { margin: 8px 0 0; color: var(--fd3-cinza); font-size: 12px; }

/* ---------- TABLET: 600px ou mais de CARD ---------- */
@container fd3-edital (min-width: 600px) {
  .fd__filtro.fd__filtro-v3 .fd__filtro-cabecalho { flex-wrap: nowrap; padding: 20px 20px 8px; }
  .fd__filtro.fd__filtro-v3 .fd3-cabecalho-texto { flex: 1 1 auto; }
  .fd__filtro.fd__filtro-v3 .fd3-titulo { font-size: 22px; }
  .fd__filtro.fd__filtro-v3 .fd3-sophia { margin-inline: 20px; }
  .fd__filtro.fd__filtro-v3 .fd__filtro-lista { padding: 12px 14px 8px; }
  .fd__filtro.fd__filtro-v3 .fd__filtro-item { --fd-filtro-degrau: 22px; padding-block: 12px; padding-right: 12px; margin-inline: 6px; }
  .fd__filtro.fd__filtro-v3 .fd__filtro-item-nome { font-size: 14.5px; }
  .fd__filtro.fd__filtro-v3 .fd3-legenda { margin-inline: 20px; }
  .fd__filtro.fd__filtro-v3 .fd3-legenda-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd__filtro.fd__filtro-v3 .fd3-legenda-bloco:last-child { grid-column: 1 / -1; }
}
/* ---------- COMPUTADOR: 960px ou mais de CARD ----------
   Uma coluna so, com largura de leitura limitada: linha juridica que
   atravessa a tela inteira afasta o titulo do mostrador. */
@container fd3-edital (min-width: 960px) {
  .fd__filtro.fd__filtro-v3 .fd__filtro-cabecalho,
  .fd__filtro.fd__filtro-v3 .fd3-sophia,
  .fd__filtro.fd__filtro-v3 .fd__filtro-ferramentas,
  .fd__filtro.fd__filtro-v3 .fd__filtro-lista,
  .fd__filtro.fd__filtro-v3 .fd3-legenda {
    max-width: 920px; margin-inline: auto; box-sizing: border-box;
  }
}

/* Reserva para navegador sem container query: mesma faixa pela viewport. */
@supports not (container-type: inline-size) {
  @media (min-width: 640px) {
    .fd__filtro.fd__filtro-v3 .fd__filtro-cabecalho { flex-wrap: nowrap; padding: 20px 20px 8px; }
    .fd__filtro.fd__filtro-v3 .fd3-cabecalho-texto { flex: 1 1 auto; }
    .fd__filtro.fd__filtro-v3 .fd3-titulo { font-size: 22px; }
    .fd__filtro.fd__filtro-v3 .fd__filtro-item { --fd-filtro-degrau: 22px; padding-block: 12px; padding-right: 12px; margin-inline: 6px; }
    .fd__filtro.fd__filtro-v3 .fd3-legenda-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fd__filtro.fd__filtro-v3 .fd3-legenda-bloco:last-child { grid-column: 1 / -1; }
  }
}

/* Nada se move para quem pediu menos movimento. O mostrador ja e estatico;
   isto cobre as transicoes herdadas (seta, fundo) e o giro de carregamento. */
@media (prefers-reduced-motion: reduce) {
  .fd__filtro.fd__filtro-v3 *,
  .fd__filtro.fd__filtro-v3 *::before,
  .fd__filtro.fd__filtro-v3 *::after { transition: none !important; animation: none !important; }
}