/* El demo público: la pantalla del evento de muestra en la portada, los tres pasos, la ficha y el escáner de
   muestra. Mismos colores que el escáner del puesto (verde y rojo) y letra grande, para usarlo con una mano. */
.demo-etiqueta { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-weight: 800; font-size: .85rem;
  background: var(--ocre-fondo, #f6ecd2); color: var(--ocre, #8a5a06); letter-spacing: .02em; }
.demo-monitor { display: grid; gap: 1rem; background: var(--tarjeta, #fff); border: 1px solid var(--linea, #d6ddd8);
  border-radius: 18px; padding: 1.1rem; }
.demo-monitor__cabeza { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.demo-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.demo-cifras div { background: var(--cajita, #eef2ee); border-radius: 12px; padding: .7rem; text-align: center; }
.demo-cifras strong { display: block; font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.demo-cifras small { color: var(--tinta-suave, #4f6057); }
.demo-curva { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 0 .2rem;
  border-bottom: 2px solid var(--linea, #d6ddd8); }
.demo-curva span { flex: 1; background: var(--verde, #047857); border-radius: 4px 4px 0 0; min-height: 2px;
  transition: height .6s ease; }
.demo-avance { height: 8px; border-radius: 999px; background: var(--cajita, #eef2ee); overflow: hidden; }
.demo-avance span { display: block; height: 100%; background: var(--verde, #047857); transition: width .6s ease; }
.demo-puestos { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.demo-puestos li { padding: .35rem .7rem; border-radius: 10px; background: var(--cajita, #eef2ee); font-weight: 700; }
.demo-puestos i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; }
.demo-ultimas { list-style: none; padding: 0; margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: .95rem; }
.demo-ultimas li { padding: .3rem 0; border-bottom: 1px dashed var(--linea, #d6ddd8); }
.demo-ultimas li.tuya { color: var(--verde-texto, #047857); font-weight: 600; }
.demo-pasos { display: grid; gap: 1rem; counter-reset: paso; }
.demo-paso { background: var(--tarjeta, #fff); border: 1px solid var(--linea, #d6ddd8); border-radius: 18px; padding: 1.1rem; }
.demo-paso h2 { margin-top: 0; font-size: 1.35rem; }
.demo-productos { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.demo-productos button { min-height: 4rem; font-size: 1.3rem; font-weight: 800; width: 100%; }
.demo-ficha { max-width: 420px; margin: 0 auto; text-align: center; background: var(--tarjeta, #fff);
  border: 2px solid var(--linea, #d6ddd8); border-radius: 22px; padding: 1.2rem; }
.demo-ficha h1 { font-size: 2rem; margin: .4rem 0; }
.demo-ficha .qr { max-width: 300px; }
.demo-estado { display: inline-block; margin-top: .6rem; padding: .4rem 1rem; border-radius: 999px; font-weight: 800;
  font-size: 1.1rem; background: var(--cajita, #eef2ee); }
.demo-estado--canjeada { background: var(--verde-fondo, #e2f4e8); color: var(--verde-texto, #047857); }
.demo-estado--vencida { background: var(--rojo-fondo, #fbe6e3); color: var(--rojo-texto, #B91C1C); }
.demo-escaner { max-width: 520px; margin: 0 auto; }
.demo-lector { width: 100%; min-height: 260px; border-radius: 18px; overflow: hidden; background: #000; }
.demo-respuesta { margin-top: 1rem; border-radius: 18px; padding: 1.4rem; color: #fff; text-align: center; }
.demo-respuesta h2 { font-size: 2rem; margin: 0 0 .4rem; color: #fff; }
.demo-respuesta p { font-size: 1.2rem; margin: 0; }
.demo-respuesta--ok { background: #047857; }
.demo-respuesta--no { background: #B91C1C; }
.demo-respuesta--espera { background: #1F2937; }
.demo-teclea { display: flex; gap: .5rem; margin-top: .8rem; }
.demo-teclea input { flex: 1; font-size: 1.1rem; }
.demo-crea { margin-top: 1rem; text-align: center; }
.demo-crea .boton { min-height: 3.4rem; font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .demo-curva span, .demo-avance span { transition: none; } }
@media (max-width: 520px) { .demo-cifras strong { font-size: 1.5rem; } }