/* /sistema no celular — a barra de sessões e o índice (js/m/trilho.js).
   Só a sistema.html linka este arquivo; o padding-bottom do body compensa a
   barra fixa para o rodapé terminar legível acima dela. */
body{padding-bottom:48px}

.m-trilho{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; gap:12px;
  min-height:48px; padding:0 16px;
  padding-bottom:env(safe-area-inset-bottom);
  background:#0C0C0C; color:#fff;
  border:0; border-top:1px solid #262626;
  font-size:11px; letter-spacing:.08em; text-align:left;
  transition:transform .35s, visibility 0s;
}
.m-trilho.is-off{
  transform:translateY(110%);
  visibility:hidden;
  transition:transform .35s, visibility 0s .35s;
}
.m-trilho .n{flex:none; color:#6E82FF}
.m-trilho .t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-trilho .abre{flex:none; color:#8A8A8A}

.m-trilho__ov{
  position:fixed; inset:0; z-index:140;
  background:#0C0C0C; color:#fff;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 20px 40px;
}
.m-trilho__cab{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.08em; color:#8A8A8A;
  padding:6px 0 14px; border-bottom:1px solid #262626;
}
.m-trilho__cab .fecha{
  background:none; border:1px solid #2E3A66; color:#fff;
  min-height:44px; padding:0 18px; font-size:11px; letter-spacing:.08em;
}
.m-trilho__lista{list-style:none; margin:0; padding:0}
.m-trilho__lista button{
  display:flex; align-items:center; gap:14px; width:100%; min-height:48px;
  background:none; border:0; border-bottom:1px solid #1A1A1A;
  color:#fff; padding:10px 0; text-align:left; font-size:15px; line-height:1.3;
}
.m-trilho__lista .n{flex:none; font-size:11px; color:#4A4A4A}
.m-trilho__lista button.is-active .n,
.m-trilho__lista button.is-active .t{color:#6E82FF}