/* App cliente · prototipo navegable */
.stage{
  min-height:calc(100dvh - 61px);
  display:flex;align-items:center;justify-content:center;gap:64px;
  padding:44px 32px 64px;
  background:
    radial-gradient(900px 520px at 50% -10%, #2A1F1A 0%, transparent 70%),
    var(--espresso);
}
.stage-aside{max-width:330px;display:flex;flex-direction:column;gap:26px;color:var(--texto-dark)}
.stage-aside h1{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;letter-spacing:-.045em;color:var(--crema);margin:0}
.stage-aside p{font-size:15px;line-height:1.6;margin:0}
.hint{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.hint b{color:var(--senal);font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding-top:2px;flex-shrink:0}
.ctl{display:flex;gap:8px;flex-wrap:wrap}
.ctl button{
  border:1px solid var(--borde-dark);background:var(--sup-1);color:var(--texto-dark);
  border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;transition:.16s;
}
.ctl button:hover{border-color:var(--humo);color:var(--crema)}
.ctl button[aria-pressed=true]{background:var(--senal);border-color:var(--senal);color:var(--espresso)}

/* ---------- pantalla ---------- */
.ui{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--espresso);color:var(--crema);overflow:hidden}
.sbar{
  position:relative;z-index:30;flex-shrink:0;
  height:54px;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 30px 6px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;
}
.device.android .sbar{height:34px;padding:0 20px 4px;font-size:12px}
.sbar .right{display:flex;align-items:center;gap:6px}
.sbar svg{display:block}
.scr{flex:1;min-height:0;display:flex;flex-direction:column;animation:scrIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes scrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 22px 22px;display:flex;flex-direction:column;gap:18px;-webkit-overflow-scrolling:touch}
.body::-webkit-scrollbar{width:0}
.body.pad-btm{padding-bottom:14px}

/* ---------- componentes ---------- */
.h1{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.035em;line-height:1.05}
.h2{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--humo)}
.muted{color:var(--humo);font-size:13px}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spacer{margin-top:auto}
.tile{background:var(--sup-1);border-radius:var(--r-m);padding:15px}
.money{font-family:var(--mono);font-size:15px;color:var(--senal)}

.btn{
  display:block;width:100%;text-align:center;
  background:var(--senal);color:var(--espresso);
  border-radius:18px;padding:18px;
  font-family:var(--display);font-weight:700;font-size:17px;
  transition:transform .12s ease,filter .16s ease;
}
.btn:active{transform:scale(.975)}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--sup-1);border:1px solid var(--borde-dark);color:var(--texto-dark)}
.btn.dark{background:var(--espresso);color:var(--crema)}
.btn.split{display:flex;align-items:center;justify-content:space-between;text-align:left}
.link{display:block;width:100%;text-align:center;font-size:14px;color:var(--humo);padding:8px}
.link:hover{color:var(--texto-dark)}

.chip{
  border-radius:999px;padding:9px 15px;font-size:14px;font-weight:600;
  background:var(--sup-1);color:var(--texto-dark);border:1px solid var(--borde-dark);
  transition:.14s;white-space:nowrap;
}
.chip:hover{border-color:var(--humo)}
.chip[aria-pressed=true],.chip.on{background:var(--senal);border-color:var(--senal);color:var(--espresso)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -22px;padding:0 22px}
.chips.scroll::-webkit-scrollbar{display:none}

.field{display:flex;flex-direction:column;gap:7px}
.field input{
  width:100%;background:var(--sup-1);border:1px solid var(--borde-dark);
  border-radius:var(--r-s);padding:15px;font-size:16px;color:var(--crema);font-family:var(--texto);
  transition:border-color .16s;
}
.field input::placeholder{color:#6E635B}
.field input:focus{outline:none;border-color:var(--senal)}
.mp-logo{
  width:40px;height:40px;border-radius:10px;background:#00A9E0;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:16px;color:#fff;
}

/* ---------- tab bar ---------- */
.tabbar{
  flex-shrink:0;margin:0 22px 20px;
  display:flex;justify-content:space-between;align-items:center;
  background:var(--sup-1);border-radius:999px;padding:11px 10px;
}
.tabbar button{
  flex:1;position:relative;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  color:#6E635B;padding:4px 0;transition:color .16s;
}
.tabbar button[aria-current]{color:var(--senal)}
.tabbar .badge{
  position:absolute;top:-6px;left:50%;margin-left:14px;
  min-width:16px;height:16px;border-radius:999px;background:var(--senal);color:var(--espresso);
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;
}

/* ---------- vaso ---------- */
.cup{position:relative;width:170px;height:262px;cursor:ns-resize;touch-action:none;user-select:none}
.cup .glass{position:absolute;inset:0;background:var(--sup-1);clip-path:polygon(7% 0,93% 0,83% 100%,17% 100%);overflow:hidden}
.cup .fill{position:absolute;left:0;right:0;bottom:0;height:84%;display:flex;flex-direction:column}
.cup .coffee{background:linear-gradient(180deg,#7A4820 0%,#4A2A17 60%,#3A2114 100%);transition:height .14s cubic-bezier(.22,1,.36,1)}
.cup .milk{flex:1;background:linear-gradient(180deg,#EFE2CE 0%,#DCC7AC 100%)}
.cup .rim{position:absolute;left:0;right:0;top:0;height:16%;background:var(--sup-2)}
.cup .lid{position:absolute;left:3%;right:3%;top:-6px;height:14px;border-radius:999px;background:var(--borde-dark)}
.cup .cream{position:absolute;left:6%;right:6%;top:11%;height:12%;border-radius:999px;background:#FBF7F0}
.cup .cinnamon{position:absolute;left:14%;right:14%;top:22%;height:5px;border-radius:999px;background:#A9662F}
.cup .sauce{position:absolute;left:10%;width:8px;top:24%;bottom:6%;border-radius:999px}
.cup .cocoa{position:absolute;left:12%;right:12%;top:19%;height:7px;border-radius:999px;background:#5A3A22;opacity:.85}
.cup .flake{position:absolute;left:16%;right:16%;top:25%;height:4px;border-radius:999px;background:#3A2114}
.cup .marker{position:absolute;left:0;right:0;bottom:0;height:84%;pointer-events:none}
.cup .line{
  position:absolute;left:-7px;right:-7px;height:2px;background:var(--senal);
  display:flex;align-items:center;justify-content:flex-end;
  transition:bottom .14s cubic-bezier(.22,1,.36,1);
}
.cup .line span{
  background:var(--senal);color:var(--espresso);font-family:var(--mono);font-size:10px;font-weight:700;
  padding:3px 7px;border-radius:999px;transform:translateX(11px);
}
.cup.grabbing{cursor:grabbing}
.cup.grabbing .coffee,.cup.grabbing .line{transition:none}

/* ---------- lista de productos ---------- */
.prod{display:flex;align-items:center;gap:14px;background:var(--sup-1);border-radius:var(--r-m);padding:13px;width:100%;text-align:left;transition:background .16s}
.prod:hover{background:#33241D}
.prod img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex-shrink:0}
.prod .ph{width:56px;height:56px;border-radius:12px;flex-shrink:0;background:linear-gradient(140deg,#4A2A17,#241A15)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.food{background:var(--sup-1);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;text-align:left;transition:transform .16s}
.food:hover{transform:translateY(-2px)}
.food img{height:104px;width:100%;object-fit:cover}
.food .meta{padding:11px 12px 13px;display:flex;flex-direction:column;gap:4px}

/* ---------- éxito / seguimiento ---------- */
.success{background:var(--senal);color:var(--espresso)}
.ticket{font-family:var(--display);font-weight:900;font-size:150px;line-height:.86;letter-spacing:-.06em;text-align:center}
.step{display:flex;gap:15px}
.step .rail{display:flex;flex-direction:column;align-items:center;gap:4px;width:14px}
.step .dot{width:14px;height:14px;border-radius:999px;background:var(--borde-dark);flex-shrink:0;transition:.3s}
.step .bar{width:2px;flex:1;background:var(--borde-dark);transition:.3s}
.step.done .dot,.step.done .bar{background:var(--senal)}
.step.now .dot{background:var(--senal);box-shadow:0 0 0 5px rgba(217,245,91,.18)}
.step.now .name{color:var(--senal)}
.step .name{font-family:var(--display);font-weight:700;font-size:17px;color:#6E635B;transition:color .3s}
.step.done .name{color:var(--crema)}
.live{display:flex;align-items:center;gap:8px;background:var(--sup-1);border-radius:999px;padding:8px 14px}
.live i{width:8px;height:8px;border-radius:999px;background:var(--senal);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- toast ---------- */
.toast{
  position:absolute;left:16px;right:16px;top:62px;z-index:50;
  background:rgba(246,241,232,.97);color:var(--espresso);
  border-radius:18px;padding:14px 16px;
  display:flex;gap:12px;align-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  animation:toastIn .3s cubic-bezier(.22,1,.36,1);
}
.toast.out{animation:toastOut .25s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px)}}
.toast .t{font-weight:700;font-size:14px}
.toast .s{font-size:13px;color:var(--tinta-2)}

/* ---------- responsive: en celular, sin marco ---------- */
@media (max-width:860px){
  .stage{flex-direction:column;gap:28px;padding:24px 16px 40px}
  .stage-aside{max-width:520px;text-align:center;align-items:center}
  .stage-aside h1{font-size:34px}
  .ctl{justify-content:center}
}
@media (max-width:640px){
  html{height:100%}
  body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
  .proto-bar{flex-shrink:0}
  .stage{flex:1;min-height:0;padding:0;align-items:stretch;gap:0}
  .stage-aside{display:none}
  .device{--w:100%;--h:100%;border-radius:0;padding:0;box-shadow:none;background:var(--espresso)}
  .device .screen{border-radius:0}
  .device .island,.device .home-ind{display:none}
  .sbar{height:44px;padding:0 20px 4px}
  .toast{top:52px}
}