/* ============================================================
   Melhor Passagem · CRM — camada FIXAR (aditiva)
   ------------------------------------------------------------
   O alfinete de cada item do menu e o rótulo "Fixados" do topo.
   Quem move as linhas e guarda a escolha é o ds-fixar.js; aqui
   só o desenho.

   Nasceu do @unlumen-ui/pinned-list (React + Motion). De lá veio
   a ideia; o desenho é o da barra lateral da casa — fundo escuro
   (--adv-lateral), botão de 34px, canto de 8px.

   Reversão: tirar este <link> e o <script> do ds-fixar.js. Nada
   aqui é estrutural: sem os dois o menu volta ao que era.
   ============================================================ */

/* ── a linha ──────────────────────────────────────────────────
   Envelope do botão de menu. Precisa existir porque o alfinete
   NÃO pode morar dentro do <button> (botão dentro de botão é
   HTML inválido e um clique viraria o outro), então ele fica ao
   lado, ancorado por position. */
.ds-fixar-linha {
  position: relative;
  display: block;
  width: 100%;
}

/* o rótulo do botão para antes do alfinete, senão o "…" do
   text-overflow passa por baixo dele */
.ds-fixar-linha > button[id^="nav-"] { padding-right: 32px; }

/* ── o alfinete ───────────────────────────────────────────────
   Mora dentro do <nav>, então herdaria TODA a régua de
   `nav button` do console (46px de altura, pílula, width:100%).
   Estas declarações desfazem a herança — por isso a classe no
   seletor: ela ganha na especificidade, sem !important. */
nav#menu button.ds-fixar-pin {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 0;
  height: 24px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--adv-lateral-texto, var(--sub));
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s ease, background-color .16s ease, color .16s ease;
}

nav#menu button.ds-fixar-pin svg {
  width: 14px;
  height: 14px;
  transition: transform .18s ease;
}

/* ── quando aparece ───────────────────────────────────────────
   Some por padrão: trinta alfinetes acesos é ruído. Volta com o
   ponteiro na linha, no foco por teclado (senão quem navega por
   Tab persegue um botão invisível) e sempre que já está fixado. */
.ds-fixar-linha:hover > .ds-fixar-pin,
.ds-fixar-linha:focus-within > .ds-fixar-pin,
nav#menu button.ds-fixar-pin:focus-visible,
nav#menu button.ds-fixar-pin[aria-pressed="true"] { opacity: 1; }

nav#menu button.ds-fixar-pin:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

nav#menu button.ds-fixar-pin[aria-pressed="true"] {
  color: var(--ds-brand-400, var(--marca));
}
nav#menu button.ds-fixar-pin[aria-pressed="true"] svg {
  transform: rotate(-45deg);   /* alfinete cravado, como no original */
}

/* em tela sem ponteiro fino (celular: o menu é a gaveta lateral,
   e ali o alfinete cabe) não existe hover — fica sempre visível */
@media (hover: none) {
  nav#menu button.ds-fixar-pin { opacity: 1; }
}

/* ── o rótulo do topo ─────────────────────────────────────────
   Mesmo tom dos títulos de flyout do shell. */
.ds-fixar-titulo {
  margin: 2px 8px 4px;
  color: var(--ds-brand-400, var(--sub));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* risco que fecha o bloco fixado: sem ele, os itens que o shell já
   deixava soltos no alto pareciam fixados também */
.ds-fixar-corte {
  height: 1px;
  margin: 7px 10px 9px;
  background: rgba(255, 255, 255, .14);
}

/* ── barra recolhida ──────────────────────────────────────────
   Com 60px de largura só cabe o ícone: o alfinete cobriria o
   desenho do botão, e o rótulo não tem onde existir. Os dois
   saem — a ORDEM continua valendo, que é o que serve ali. */
aside.ds-colapsada nav#menu button.ds-fixar-pin,
aside.ds-colapsada .ds-fixar-titulo { display: none; }

/* no celular a barra vira gaveta larga e os textos voltam
   (ds-responsive) — o alfinete volta com eles */
@media (max-width: 768px) {
  aside.ds-colapsada nav#menu button.ds-fixar-pin,
  aside.ds-colapsada .ds-fixar-titulo { display: revert; }
}

/* ── o voo ────────────────────────────────────────────────────
   A transição de posição é do NAVEGADOR (View Transitions): o
   ds-fixar.js só dá nome a cada linha e troca a ordem no DOM
   dentro de startViewTransition. Aqui só se ajusta o tempo e se
   cala o efeito para quem pediu menos movimento — o que o
   componente original não fazia. */
::view-transition-group(*) { animation-duration: .26s; }

@media (prefers-reduced-motion: reduce) {
  nav#menu button.ds-fixar-pin,
  nav#menu button.ds-fixar-pin svg { transition: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}