/* Demo page: uses the site tokens from styles.css; only demo-specific values here. */
.demo-page{--line:#e8dfd2;--muted:#675e57;--green:#15803d;font-family:var(--font-body);color:var(--ink)}
button,a{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
[hidden]{display:none !important}

.demo-page{max-width:1180px;margin:auto;padding:42px 24px 90px}
.intro{max-width:760px}
.demo-eyebrow{font-size:13px;letter-spacing:1.8px;font-weight:800;color:var(--red-dark);text-transform:uppercase;margin:0}
.demo-eyebrow--light{color:#ff6b57}
.demo-page h1,.demo-page h2,.demo-page h3{font-family:var(--font-display)}
.demo-page h1{font-size:clamp(32px,4.5vw,50px);line-height:1.06;margin:10px 0 12px;letter-spacing:-1.4px}
.intro>p:last-child,.card>p,.next>p{color:var(--muted);line-height:1.6;margin:0}

.demo-steps{list-style:none;display:flex;gap:10px;padding:0;margin:26px 0 22px}
.demo-steps li{background:#ede4d4;color:#655b52;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:800;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.demo-steps .current{background:var(--ink);color:#fff;box-shadow:0 6px 16px rgba(22,17,16,.15)}

.layout{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px;
  box-shadow:0 14px 32px rgba(22,17,16,.05);
}
.card-head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}
.card h2{font-size:26px;margin:4px 0 0;letter-spacing:-.02em}

.store-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  background:#dcfce7;
  color:#15803d;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}
.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
}

/* Productos del cliente */
.demo-products{display:grid;gap:10px;margin-top:14px}
.demo-products article{
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:12px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
}
.demo-products h3{font-size:16px;margin:0}
.demo-products p{font-size:12.5px;color:var(--muted);margin:2px 0 4px}
.demo-products strong{font-size:14px;color:var(--ink)}
.demo-products button,.secondary{
  background:#fff;
  border:1px solid #d5c9bd;
  border-radius:10px;
  padding:9px 14px;
  font-weight:800;
  font-size:13px;
  color:var(--ink);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.demo-products button:hover:not(:disabled),.secondary:hover:not(:disabled){
  border-color:var(--red);
  color:var(--red);
  background:#fff5f5;
}

/* Modalidad y notas */
.order-type-box{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.order-type-label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#6e6258;margin-bottom:8px;text-transform:uppercase}
.order-type-options,.note-chips{display:flex;gap:8px;flex-wrap:wrap}
.type-pill,.note-chip{
  background:#fff;
  border:1px solid #dcd1c5;
  border-radius:999px;
  padding:7px 14px;
  font-size:12.5px;
  font-weight:700;
  color:#5a5149;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.type-pill.is-selected,.note-chip.is-selected{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.note-chip{min-height:44px;padding:8px 14px;font-size:14px}

/* Carrito */
.cart{
  background:#f6efe2;
  border:1px solid #e5dac8;
  border-radius:16px;
  padding:18px;
  margin-top:18px;
}
.cart-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.cart h3{margin:0;font-size:17px}
.cart-tag{
  font-size:12.5px;
  font-weight:700;
  color:#6c6055;
  background:rgba(255,255,255,.75);
  padding:4px 10px;
  border-radius:999px;
}

.cart-list{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.cart-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:#fff;border-radius:10px;border:1px solid rgba(25,20,16,.06)}
.cart-item__info{flex:1;min-width:0}
.cart-item__title{font-size:13.5px;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item__price{font-size:12.5px;color:#796e65}
.stepper{display:flex;align-items:center;gap:6px}
.stepper-btn{width:44px;height:44px;min-height:44px;display:grid;place-items:center;background:#f8f4ec;border:1px solid #dcd1c5;border-radius:6px;font-weight:800;font-size:15px;line-height:1;padding:0;color:var(--ink)}
.stepper-btn:hover:not(:disabled){background:#fff;border-color:var(--red);color:var(--red)}
.stepper-count{font-weight:800;font-size:13.5px;min-width:18px;text-align:center}
.cart-item__subtotal{font-weight:800;font-size:13.5px;min-width:65px;text-align:right}
.empty-cart-msg{color:#766d64;font-size:13px;padding:6px 0}

.fee-breakdown{
  border-top:1px dashed #d8cbb8;
  padding-top:10px;
  margin-bottom:10px;
  display:grid;
  gap:5px;
}
.fee-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:#5c5148;
}
.fee-row strong{font-weight:700;color:var(--ink)}

.total{
  border-top:1px solid #dcd0be;
  padding-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
  font-size:17px;
}
.primary{
  background:var(--red);
  color:white;
  border:1px solid var(--red);
  border-radius:12px;
  padding:13px 18px;
  font-weight:800;
  transition:background .18s ease,transform .15s ease;
}
.primary:hover:not(:disabled){background:var(--red-dark);transform:translateY(-1px)}
.cart .primary{width:100%}

/* Vista del consumidor tras enviar el pedido (Tracking en vivo) */
.client-tracking{
  margin-top:14px;
  padding:20px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}
.client-tracking__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.client-tracking__code{
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--muted);
}
.client-tracking__badge{
  padding:5px 11px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:800;
}
.client-tracking__badge.is-sent{background:#fff0ed;color:var(--red)}
.client-tracking__badge.is-cooking{background:#eff6ff;color:#1d4ed8}
.client-tracking__badge.is-ready{background:#fef3c7;color:#b45309}
.client-tracking__badge.is-done{background:#dcfce7;color:#15803d}

.client-tracking h3{
  margin:0 0 6px;
  font-size:21px;
  color:var(--ink);
}
.client-tracking > p{
  margin:0 0 18px;
  font-size:13.5px;
  color:var(--muted);
  line-height:1.5;
}

.client-timeline{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:grid;
  gap:10px;
}
.client-timeline li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--cream);
  border:1px solid transparent;
  opacity:.55;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.client-timeline li.is-active{
  opacity:1;
  background:#fff5f4;
  border-color:rgba(234,9,11,.35);
}
.client-timeline li.is-done{
  opacity:1;
  background:#f0fdf4;
  border-color:#bbf7d0;
}
.timeline-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#d6c9b8;
  flex-shrink:0;
}
.client-timeline li.is-active .timeline-dot{
  background:var(--red);
  box-shadow:0 0 0 4px rgba(234,9,11,.16);
}
.client-timeline li.is-done .timeline-dot{
  background:var(--green);
}
.client-timeline strong{
  display:block;
  font-size:13.5px;
  color:var(--ink);
}
.client-timeline small{
  display:block;
  font-size:13px;
  color:var(--muted);
}

.client-receipt{
  padding:14px;
  border-radius:12px;
  background:#f8f3e8;
  border:1px solid #e6dccb;
  margin-bottom:14px;
}
.client-receipt__title{
  margin:0 0 8px;
  font-size:12.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.client-sent-list{
  list-style:none;
  padding:0;
  margin:0 0 10px;
  display:grid;
  gap:5px;
  font-size:13.5px;
}
.client-sent-list li{
  display:flex;
  justify-content:space-between;
}
.client-receipt__total{
  display:flex;
  justify-content:space-between;
  padding-top:8px;
  border-top:1px dashed #d6c8b4;
  font-weight:800;
  font-size:15px;
}
.client-edit-btn{
  width:100%;
}

/* Panel del restaurante (Oscuro editorial como index.html) */
.card.panel{
  background-color:#161110;
  background-image:radial-gradient(rgba(255,248,238,.06) 1px,transparent 1px);
  background-size:20px 20px;
  color:#fff8ee;
  border-color:rgba(255,255,255,.1);
}
.card.panel h2{color:#fff8ee}
.station-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#ffd5cb;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}

.empty{
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:56px 22px;
  text-align:center;
  color:rgba(255,248,238,.68);
  margin-top:14px;
  display:grid;
  gap:6px;
}
.empty strong{color:#fff8ee;font-size:16px}
.empty span{font-size:13.5px;max-width:34ch;margin:0 auto}

.order{
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  padding:18px;
  margin-top:14px;
  background:#1f1917;
  color:#fff8ee;
}
.order-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.order-head strong{font-family:'Outfit',sans-serif;font-size:16px;letter-spacing:.01em}

.badge{border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:800}
.badge--new{background:rgba(234,9,11,.2);color:#ff8a7a;border:1px solid rgba(234,9,11,.4)}
.badge--kitchen{background:rgba(59,130,246,.2);color:#93c5fd;border:1px solid rgba(59,130,246,.4)}
.badge--ready{background:rgba(245,158,11,.2);color:#fcd34d;border:1px solid rgba(245,158,11,.4)}
.badge--done{background:rgba(34,197,94,.2);color:#86efac;border:1px solid rgba(34,197,94,.4)}

.order-meta{color:rgba(255,248,238,.62);font-size:12.5px;margin:6px 0 12px}

.order-station-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:14px;
}
.station-step{
  font-size:12.5px;
  font-weight:700;
  text-align:center;
  padding:6px 4px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:rgba(255,248,238,.45);
  border:1px solid rgba(255,255,255,.06);
}
.station-step.is-active{
  background:rgba(234,9,11,.18);
  color:#fff;
  border-color:rgba(234,9,11,.5);
}
.station-step.is-done{
  background:rgba(34,197,94,.14);
  color:#86efac;
  border-color:rgba(34,197,94,.3);
}

.order-items-list{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:6px}
.order-items-list li{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  padding:6px 10px;
  background:rgba(255,255,255,.04);
  border-radius:8px;
}
.order-kitchen-note{
  margin:0 0 12px;
  padding:8px 11px;
  border-radius:8px;
  background:rgba(245,158,11,.14);
  border-left:3px solid #f59e0b;
  color:#fde68a;
  font-size:12.5px;
  font-weight:600;
}

.restaurant-settlement{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  display:grid;
  gap:8px;
}
.settlement-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13.5px;
  color:rgba(255,248,238,.82);
}
.total--panel{
  border-top:1px dashed rgba(255,255,255,.16);
  padding-top:10px;
  margin-top:2px;
  color:#fff8ee;
}

.notice,.panel>.notice{
  min-height:46px;
  color:#ffd8cc;
  line-height:1.5;
  margin-top:14px;
  font-size:13.5px;
  background:rgba(255,255,255,.05);
  padding:10px 14px;
  border-radius:10px;
  border-left:4px solid var(--red);
}
.panel .secondary{
  margin-top:12px;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#fff8ee;
  width:100%;
}
.panel .secondary:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff8ee;
  color:#fff;
}

/* Tarjeta de finalización */
.completed-card{
  background:rgba(22,163,74,.14);
  border:1px solid rgba(74,222,128,.35);
  border-radius:14px;
  padding:20px;
  margin-top:16px;
  text-align:center;
}
.completed-card h3{margin:0 0 6px;color:#86efac;font-size:19px}
.completed-card p{color:rgba(255,248,238,.82);font-size:13.5px;line-height:1.5;margin:0 0 14px}
.completed-card .primary{display:inline-block;text-decoration:none}

.next{
  margin-top:36px;
  background-color:#161110;
  background-image:radial-gradient(rgba(255,248,238,.06) 1px,transparent 1px);
  background-size:20px 20px;
  color:white;
  border-radius:20px;
  padding:32px;
}
.next h2{margin-top:0}
.next>p{color:rgba(255,248,238,.74)}
.link{display:inline-block;text-decoration:none;margin-top:14px}

.product-thumb{width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,#f6e7cf,#efd3b0);display:grid;place-items:center;overflow:hidden;position:relative}
.product-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.empty__icon,.completed-icon{width:50px;height:50px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;background:rgba(234,9,11,.16);color:#ff6b57}
.completed-icon{background:rgba(34,197,94,.2);color:#4ade80;font-size:0}
.empty__icon svg,.completed-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.type-pill{min-height:44px}
.demo-page button,.demo-page .primary,.demo-page .secondary{min-height:44px}
.demo-page input,.demo-page select,.demo-page textarea{font-size:16px}

@media(max-width:860px){
  .demo-page{padding:26px 15px 60px}
  .layout{grid-template-columns:1fr}
  .card{padding:19px}
  .demo-steps{flex-wrap:wrap}
  .order-station-flow{grid-template-columns:1fr 1fr}
  .product-thumb{width:48px;height:48px}
  .order-type-options{display:grid;grid-template-columns:1fr;gap:8px}
}
@media(max-width:520px){
  .demo-products article{grid-template-columns:48px 1fr}
  .demo-products article button{grid-column:1/-1;width:100%}
}

.demo-note{margin:10px 0 0;color:var(--muted);font-size:13px}
.demo-note strong{color:var(--ink)}
.demo-full{width:100%;margin-top:16px}
.demo-mt{margin-top:14px}
@media (prefers-reduced-motion: reduce){
  .demo-page *,.demo-page *::before,.demo-page *::after{animation:none !important;transition:none !important}
}