/* Lo unico que el demo le agrega al CSS del sistema: la barra del paso, el
   aviso y el WhatsApp del huesped. Colores fijos a proposito: tienen que
   leerse igual sobre cualquier pantalla del sistema. */
.demo-guia {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .55rem .8rem; background: #0f6e5f; color: #fff;
  font: 600 .82rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.demo-etiqueta {
  padding: .1rem .45rem; border-radius: 999px; background: #fff; color: #0f6e5f;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
}
.demo-texto { flex: 1 1 12rem; }
.demo-reiniciar { color: #fff; font-weight: 600; font-size: .78rem; white-space: nowrap; }
.demo-aviso {
  position: fixed; left: 50%; bottom: 6.5rem; z-index: 9999; transform: translate(-50%, 1rem);
  width: min(22rem, calc(100% - 2rem)); padding: .7rem .9rem; border-radius: .7rem;
  background: #16181d; color: #fff; font: 500 .88rem/1.4 system-ui, sans-serif;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.demo-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.demo-whatsapp {
  margin: 0 0 1rem; padding: .75rem; border-radius: 14px; background: #ece5dc;
}
.demo-whatsapp-titulo { margin: 0 0 .45rem; font: 600 .75rem/1.3 system-ui, sans-serif; color: #54656f; text-align: center; }
.demo-burbuja {
  max-width: 92%; padding: .55rem .7rem; border-radius: .2rem .8rem .8rem .8rem;
  background: #fff; color: #111b21; white-space: pre-line; overflow-wrap: anywhere;
  font: .88rem/1.45 system-ui, sans-serif; box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
/* En el inventario del punto de venta: la fila de lo que se acaba de vender. */
.demo-vendido { background: #fff8e1 !important; }
/* El WhatsApp del demo del hotel: se abre en vez de salir a WhatsApp. */
.demo-wa-fondo {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0,0,0,.45);
}
.demo-wa-fondo .demo-whatsapp { width: min(24rem, 100%); margin: 0; }
.demo-cerrar {
  display: block; margin: .7rem auto 0; padding: .45rem 1.2rem; border: 0; border-radius: 999px;
  background: #0f6e5f; color: #fff; font: 600 .85rem system-ui, sans-serif; cursor: pointer;
}