/* Sólo lo propio de la demo interactiva; lo demás es barbox.css, la hoja de la app. */
.demo-barra{position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
  padding:10px 16px; background:#1d2a26; color:#f3e7c6; font:13px/1.4 system-ui,sans-serif}
.demo-barra b{color:#f3d58a}
.demo-barra a{color:#f3d58a}
.demo-barra select,.demo-barra button{min-height:34px; padding:2px 10px; border-radius:8px; border:1px solid #f3d58a;
  background:transparent; color:#f3e7c6; font:inherit; width:auto}
.demo-barra select option{color:#1E2329}
/* Es un <nav>: barbox.css le da al menú lateral de la app min-height de casi toda la pantalla
   desde 860 px. Aquí es una barra: sin esa altura y sin estirar las pestañas. */
.demo-tabs{display:flex; align-items:center; gap:4px; overflow-x:auto; min-height:0; padding:8px 16px;
  background:var(--superficie-alta); border-bottom:1px solid var(--linea)}
.demo-tabs a{flex:0 0 auto; padding:10px 14px; border-radius:10px; color:var(--tinta); text-decoration:none; font:600 14px var(--sans)}
.demo-tabs a[aria-current="page"]{background:var(--oro-claro); color:var(--oro)}
.demo-aviso{min-height:1.4em; margin:12px 0 0; color:var(--frio); font-weight:600}
.demo-aviso.malo{color:var(--alarma)}
.demo-feed ol{list-style:none; margin:0; padding:0; font-size:14px}
.demo-feed li{padding:6px 0; border-bottom:1px solid var(--linea-suave)}
.demo-num{display:inline-block; min-width:3.2em; color:var(--tenue); font-variant-numeric:tabular-nums}
.demo-feed b{font-family:ui-monospace,monospace; font-size:12px; color:var(--oro)}
.demo-ticket{max-width:300px; margin:16px auto; padding:16px; background:#fff; color:#111; font:14px/1.4 ui-monospace,monospace;
  box-shadow:var(--sombra-2); border-radius:6px}
.demo-ticket p{margin:4px 0}
.demo-ticket .linea{display:flex; justify-content:space-between; gap:12px}
.demo-ticket .pequeno{font-size:12px}
.demo-ticket hr{border:0; border-top:1px dashed #999}
#vista input,#vista select{margin:4px 0}
/* 2026-09-26: recorrido del turno, negocios, pago dividido, factura de pruebas */
.demo-negocios{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px}
.demo-negocio{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; min-height:74px; text-align:left;
  border:2px solid var(--linea); border-radius:14px; background:var(--superficie); color:var(--tinta); font:inherit; cursor:pointer}
.demo-negocio small{color:var(--tenue)}
.demo-negocio[aria-pressed="true"]{border-color:var(--oro); background:var(--oro-claro)}
.demo-pasos{list-style:none; margin:0 0 12px; padding:0; counter-reset:paso}
.demo-pasos li{display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--linea-suave)}
.demo-pasos a{color:var(--tinta)}
.demo-pasos li.hecho a{color:var(--tenue); text-decoration:line-through}
.demo-marca{flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--linea); border-radius:50%; color:var(--frio); font-weight:700}
.demo-pasos li.hecho .demo-marca{border-color:var(--frio)}
.visually{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.demo-pago{margin:0}
.demo-sello{text-align:center; font-weight:700; border:2px solid #111; padding:4px; margin:0 0 8px}
.stats article strong{font-size:28px}
#vista td input{max-width:7em}
#vista td .boton{min-height:34px; padding:0 10px; margin:2px}
/* Es un <nav>: sin la altura del menú lateral de barbox.css (como .demo-tabs). */
.filtros{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:0; padding:0; background:none; margin:8px 0 12px}
.filtros a{padding:8px 14px; border-radius:10px; background:var(--superficie-alta); color:var(--tinta); text-decoration:none; font:600 14px var(--sans)}
.filtros a[aria-current="page"]{background:var(--oro-claro); color:var(--oro)}
.listos,.recoger{border-left:4px solid var(--verde)}