/* =========================================================================
   Comandas — el botón de confirmar el pedido.

   Es el único momento de toda la carta donde una animación se gana su sitio:
   pasa UNA vez por pedido, en el instante en que alguien acaba de gastarse su
   plata, y hay una espera real de red que cubrir. Todo lo demás en esta
   pantalla —agregar, quitar, cambiar cantidad— pasa decenas de veces y no
   lleva ni un milisegundo de teatro.

   Y no es la misma animación para los dos casos, porque no es la misma
   promesa: en DOMICILIO el pedido sale hacia la persona, y en RECOGER la
   persona viene por el pedido. La animación dice cuál de las dos cosas acaba
   de pasar, en el idioma en que ya se entiende sin leer.

   La animación arranca AL MISMO TIEMPO que la petición al servidor, no
   después: así cubre la espera en vez de sumarse a ella. Si el servidor
   rechaza, se corta y aparece el error — nunca se muestra un éxito que no
   ocurrió.
   ========================================================================= */

.btn-confirmar{
  position:relative;width:100%;height:58px;border:0;padding:0;
  background:transparent;cursor:pointer;font-family:inherit;
  perspective:900px;-webkit-tap-highlight-color:transparent;
  margin-top:14px;
}
.btn-confirmar:disabled{cursor:wait}

/* El cubo. Tres caras: texto, escena y éxito. Gira sobre X para pasar de una a
   la siguiente, que es lo que hace que la escena se sienta "dentro" del botón
   y no una capa encima. */
.bc-cubo{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .42s var(--ease-salida);
  transform:translateZ(-29px);
}
.btn-confirmar[data-fase="escena"] .bc-cubo{transform:translateZ(-29px) rotateX(-90deg)}
.btn-confirmar[data-fase="exito"]  .bc-cubo{transform:translateZ(-29px) rotateX(-180deg)}

.bc-cara{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:10px;border-radius:var(--radio,16px);
  font-size:17px;font-weight:750;letter-spacing:-.01em;
  background:var(--acento);color:var(--acento-txt);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 10px 26px -10px var(--acento);
}
.bc-frente{transform:rotateX(0deg) translateZ(29px)}
.bc-escena{transform:rotateX(90deg) translateZ(29px);overflow:hidden;padding:0}
.bc-exito {transform:rotateX(180deg) translateZ(29px);background:#16A34A;color:#fff;
           box-shadow:0 10px 26px -10px rgba(22,163,74,.8)}
.bc-exito svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22}
.btn-confirmar[data-fase="exito"] .bc-exito svg{
  animation:bc-visto .4s var(--ease-salida) .18s forwards;
}
@keyframes bc-visto{to{stroke-dashoffset:0}}

/* ── La escena ── */
.bc-escena{position:absolute;background:var(--acento-osc,var(--acento))}
.bc-suelo{
  position:absolute;left:0;right:0;bottom:13px;height:2px;border-radius:2px;
  background:var(--acento-txt);opacity:.28;
}

/* ═════ DOMICILIO: la moto sale disparada ═════
   De izquierda a derecha porque es la dirección en que se lee: el pedido se va
   de aquí hacia allá. Las rayas de velocidad quedan DETRÁS y se estiran, que es
   lo que hace que se sienta rápido sin subir la duración. */
.bc-moto{
  position:absolute;left:0;bottom:8px;width:78px;height:44px;
  color:var(--acento-txt);
  transform:translateX(-90px);
}
.btn-confirmar[data-fase="escena"] .bc-moto{
  animation:moto-pasa 2s cubic-bezier(.45,.05,.3,1) forwards;
}
@keyframes moto-pasa{
  0%   {transform:translateX(-90px)}
  22%  {transform:translateX(28%)}
  30%  {transform:translateX(30%)}          /* un toque de arranque */
  100% {transform:translateX(360px)}
}
.bc-moto svg{width:100%;height:100%;display:block}
/* Las ruedas giran. Se anima rotate sobre su propio centro: por eso cada una
   va en su <g> con transform-box y transform-origin propios. */
.bc-rueda{transform-box:fill-box;transform-origin:center}
.btn-confirmar[data-fase="escena"] .bc-rueda{animation:rueda .4s linear infinite}
@keyframes rueda{to{transform:rotate(360deg)}}
/* La moto brinca un poquito, como en el pavimento */
.btn-confirmar[data-fase="escena"] .bc-moto svg{animation:moto-brinca .22s ease-in-out infinite}
@keyframes moto-brinca{50%{transform:translateY(-1.5px)}}

.bc-rayas{position:absolute;left:0;bottom:16px;width:100%;height:22px;pointer-events:none}
.bc-raya{
  position:absolute;height:2.5px;border-radius:2px;background:var(--acento-txt);
  opacity:0;transform-origin:right center;
}
.bc-raya:nth-child(1){top:2px;  width:26px}
.bc-raya:nth-child(2){top:9px;  width:40px}
.bc-raya:nth-child(3){top:16px; width:20px}
.btn-confirmar[data-fase="escena"] .bc-raya{
  animation:raya .5s linear infinite;
}
.btn-confirmar[data-fase="escena"] .bc-raya:nth-child(2){animation-delay:.1s}
.btn-confirmar[data-fase="escena"] .bc-raya:nth-child(3){animation-delay:.2s}
@keyframes raya{
  0%  {transform:translateX(210px) scaleX(.3);opacity:0}
  25% {opacity:.75}
  100%{transform:translateX(-40px) scaleX(1.5);opacity:0}
}

/* ═════ RECOGER: la bolsa se levanta del mostrador ═════
   La otra promesa. Aquí nada se va: alguien VIENE. Por eso la escena está
   quieta y lo que se mueve es la mano, que entra, agarra la bolsa y se la
   lleva hacia arriba. Y suena la campanita del mostrador. */
.bc-recoge{position:absolute;inset:0;color:var(--acento-txt)}
.bc-bolsa{
  position:absolute;left:50%;bottom:15px;width:34px;height:38px;
  transform:translateX(-50%);
}
.bc-bolsa svg,.bc-mano svg,.bc-campana svg{width:100%;height:100%;display:block}
.btn-confirmar[data-fase="escena"] .bc-bolsa{
  animation:bolsa-sube 2s var(--ease-salida) forwards;
}
@keyframes bolsa-sube{
  0%,32%{transform:translateX(-50%) translateY(0) rotate(0deg)}
  42%   {transform:translateX(-50%) translateY(2px) rotate(0deg)}   /* la agarra */
  100%  {transform:translateX(-50%) translateY(-46px) rotate(9deg)}
}
.bc-mano{
  position:absolute;left:50%;bottom:38px;width:30px;height:30px;
  transform:translate(-50%,-46px);opacity:0;
}
.btn-confirmar[data-fase="escena"] .bc-mano{
  animation:mano-baja 2s var(--ease-salida) forwards;
}
@keyframes mano-baja{
  0%  {transform:translate(-50%,-52px);opacity:0}
  18% {opacity:1}
  38% {transform:translate(-50%,-4px);opacity:1}                     /* llega */
  100%{transform:translate(-50%,-50px) rotate(9deg);opacity:1}       /* se la lleva */
}
/* La campanita del mostrador: suena cuando la mano toca la bolsa */
.bc-campana{
  position:absolute;right:26px;bottom:16px;width:22px;height:22px;
  transform-origin:top center;opacity:.85;
}
.btn-confirmar[data-fase="escena"] .bc-campana{
  animation:campana .6s var(--ease-salida) .68s;
}
@keyframes campana{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-16deg)} 45%{transform:rotate(12deg)}
  70%{transform:rotate(-6deg)}
}
.bc-onda{
  position:absolute;right:20px;bottom:22px;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--acento-txt);opacity:0;pointer-events:none;
}
.btn-confirmar[data-fase="escena"] .bc-onda{
  animation:onda .9s var(--ease-salida) .68s;
}
@keyframes onda{0%{transform:scale(.4);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* ── Menos movimiento: se conserva el CAMBIO DE ESTADO, que es la información
      (se envió / no se envió), y se quita el viaje. Quien pidió menos
      movimiento igual necesita saber que su pedido salió. ── */
@media (prefers-reduced-motion:reduce){
  .bc-cubo{transition:none}
  .btn-confirmar[data-fase="escena"] .bc-cubo{transform:translateZ(-29px) rotateX(-180deg)}
  .bc-moto,.bc-raya,.bc-rueda,.bc-bolsa,.bc-mano,.bc-campana,.bc-onda,
  .btn-confirmar[data-fase="escena"] .bc-moto svg{animation:none!important}
  .btn-confirmar[data-fase="exito"] .bc-exito svg{animation:none;stroke-dashoffset:0}
}