/* Franja de la DEMO (arriba de todo, no tapa la caja). */
#franjaDemo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 12px; background: #3b2b24; color: #fff; font-size: 12px; line-height: 1.3;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
#franjaDemo > b:first-child { background: #c25e36; padding: 2px 8px; border-radius: 6px; letter-spacing: .06em; }
#franjaDemo span { flex: 1; min-width: 0; opacity: .92; }
#franjaDemo button { background: transparent; color: #fff; border: 1px solid #ffffff80; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
#franjaDemo a { color: #fff; font-weight: 700; font-size: 12px; text-decoration: underline; }
body.modo-demo { padding-top: 30px; }
#franjaDemo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { #franjaDemo .demo-largo { display: none; } }
/* Las ventanas parten debajo de la franja (antes les tapaba el titulo y el boton de volver). */
body.modo-demo .modal, body.modo-demo .modal-full, body.modo-demo #sesionesConteo { top: 30px; }