/* ══════════════════════════════════════════════════════════════
   FB · FILTRO PIN · v1.0.0
   ══════════════════════════════════════════════════════════════
   Botão de congelar a barra de filtros no topo durante a rolagem.
   Arquivo próprio de propósito: o componente vale pra qualquer
   módulo, e assim nenhum CSS de módulo precisa ser tocado pra
   habilitar.

   Deslocamento do topo: `--fb-pin-top` (default 0). Módulo que
   tem barra própria acima declara no CSS dele, por exemplo:
       .gmedia { --fb-pin-top: 8px; }
   ══════════════════════════════════════════════════════════════ */

.fb-pin {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--borda, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  color: var(--sub, #9ca3af);
  cursor: pointer;
  transition: color 130ms ease, background 130ms ease, border-color 130ms ease;
}

.fb-pin:hover {
  color: var(--accent, #029d66);
  border-color: var(--accent, #029d66);
  background: rgba(2, 157, 102, 0.06);
}

.fb-pin:focus-visible {
  outline: 2px solid var(--accent, #029d66);
  outline-offset: 2px;
}

.fb-pin.is-on {
  color: #fff;
  background: var(--accent, #029d66);
  border-color: var(--accent, #029d66);
}

.fb-pin.is-on svg { transform: rotate(-20deg); }
.fb-pin svg { transition: transform 160ms ease; }

/* ─── A barra congelada ───────────────────────────────────────
   Congelar não pode custar o acabamento: a barra continua sendo um
   cartão do módulo, com borda, canto arredondado e o mesmo recuo
   interno. O que muda é só o comportamento na rolagem. */
.is-fixa {
  position: sticky;
  top: var(--fb-pin-top, 0px);
  z-index: 30;
  background: var(--superficie, #fff);
  border: 1px solid var(--borda, #e5e7eb);
  border-radius: 12px;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

/* Sentinela de 1px logo acima: some de vista quando a barra gruda */
.fb-pin-sentinela {
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* Elevação SÓ quando encosta de fato no topo */
.is-fixa.is-grudada {
  box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.34);
  border-color: color-mix(in srgb, var(--accent, #029d66) 30%, var(--borda, #e5e7eb));
}

@media print {
  .fb-pin { display: none; }
  .is-fixa { position: static; box-shadow: none; }
}