/* ============================================================
   ORD3R DEMO — ajustes só do demo (barra de demonstração).
   Não altera o app real; é sobreposto por cima do styles.css.
   ============================================================ */
:root{ --demo-h: 46px; }

/* barra fixa no topo */
#demo-ribbon{
  position:fixed; top:0; left:0; right:0; height:var(--demo-h); z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 14px;
  background:linear-gradient(90deg, var(--primary), var(--primary-dark));
  color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.12);
}
#demo-ribbon .demo-msg{
  font-size:.82rem; font-weight:600; opacity:.95;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#demo-ribbon a{ text-decoration:none; color:#fff; font-weight:800; font-size:.85rem; white-space:nowrap; }
#demo-ribbon .demo-back{ opacity:.9; font-weight:700; }
#demo-ribbon .demo-cta{
  background:#fff; color:var(--primary-dark);
  padding:7px 14px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* empurra o conteúdo pra baixo da barra */
body{ padding-top:var(--demo-h); }
.topbar{ top:var(--demo-h) !important; }
.overlay{ top:var(--demo-h); }

/* no demo o dado é local (exemplo); esconde o selo pra não confundir */
#cloud-badge{ display:none !important; }

@media (max-width:520px){
  #demo-ribbon .demo-msg{ display:none; }         /* em telas pequenas, só os botões */
  #demo-ribbon{ justify-content:space-between; }
}