/* /sistema — o trilho de sessões (js/sistema/trilho.js). Marcadores quadrados no
   idioma dos status do site, sem canto arredondado; a cor segue o tema da sessão
   ativa (azul da marca no claro, #6E82FF no escuro, a regra do fundo preto). */
.trilho{
  position:fixed; right:calc(16 * var(--u)); top:50%;
  transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:calc(7 * var(--vhu));
  transition:opacity .3s;
}
html.menu-open .trilho{opacity:0; pointer-events:none}

.trilho__it{
  display:flex; align-items:center; justify-content:flex-end;
  gap:calc(9 * var(--u));
  background:none; border:0; padding:calc(2 * var(--vhu)) 0;
  cursor:pointer; color:inherit;
}
.trilho__it i{
  flex:none; width:calc(6 * var(--u)); height:calc(6 * var(--u));
  background:currentColor; opacity:.32;
  transition:opacity .25s, background-color .25s;
}
.trilho__it:hover i{opacity:.7}
.trilho__lbl{
  font-size:calc(8 * var(--u)); letter-spacing:.08em; white-space:nowrap;
  opacity:0; transform:translateX(calc(6 * var(--u)));
  transition:opacity .25s, transform .25s;
}
.trilho__it:hover .trilho__lbl,
.trilho__it.is-active .trilho__lbl{opacity:1; transform:none}

.trilho[data-theme="light"]{color:#0C0C0C}
.trilho[data-theme="light"] .trilho__it.is-active i{background:#0A16C8; opacity:1}
.trilho[data-theme="dark"]{color:#fff}
.trilho[data-theme="dark"] .trilho__it.is-active i{background:#6E82FF; opacity:1}

/* o rótulo ganha um fundo do tema: sem ele, o texto atravessava valores e
   conteúdo encostado na borda direita (visto no quadro do orçamento) */
.trilho__lbl{padding:calc(3 * var(--vhu)) calc(8 * var(--u))}
.trilho[data-theme="dark"] .trilho__lbl{background:rgba(12,12,12,.9)}
.trilho[data-theme="light"] .trilho__lbl{background:rgba(255,255,255,.92)}