/* Franja de la demo de UdevLabs. Solo existe en demo.udevlabs.com; la app de producción no la ve. */
:root { --demo-alto: 46px; }

#demo-udl {
  position: fixed; inset: 0 0 auto 0; z-index: 9999;
  min-height: var(--demo-alto);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px;
  background: #0A0A0B; color: #F7F7F9;
  border-bottom: 2px solid #3DD6E8;
  font-family: Inter, -apple-system, "Segoe UI", sans-serif; font-size: 13.5px; line-height: 1.35;
}
#demo-udl b { color: #3DD6E8; font-weight: 600; }
#demo-udl .sep { color: #8A8A96; }
#demo-udl a.salir {
  margin-left: auto; color: #3DD6E8; text-decoration: none; border: 1px solid #31313A;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; white-space: nowrap;
}
#demo-udl a.salir:hover { color: #F7F7F9; border-color: #3DD6E8; }

/* La app baja solo si la franja está puesta; dentro del portal no hay franja y no debe haber hueco. */
body.udl-con-franja { padding-top: var(--demo-alto) !important; }

@media (max-width: 640px) {
  :root { --demo-alto: 64px; }
  #demo-udl { font-size: 12.5px; gap: 8px; padding: 7px 10px; }
  #demo-udl a.salir { margin-left: 0; }
}