/* ═══ La barra de «dónde va mi pedido» ══════════════════════════════════

   Vive aparte porque la usan los DOS: el cliente en su pedido y Jorge en el
   panel. Estaba dentro de `estilo.css`, que el panel no carga, y allá la
   barra salía como una lista numerada —1. Recibido, 2. Preparando— en vez de
   la barra con sus puntos.

   Una pieza que se enseña en dos lados no puede tener sus estilos en el
   archivo de uno solo.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ Dónde va mi pedido ════════════════════════════════════════════════ */

.seg{border:1px solid var(--linea);border-radius:.8rem;padding:1rem 1.1rem 1.2rem;
  background:#fff;margin-bottom:1rem}

.seg-cab{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.seg-ico{width:2.6rem;height:2.6rem;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:1.25rem;
  background:var(--acento);color:#fff}
.seg-cab b{display:block;font-size:1.05rem;line-height:1.25}
.seg-cab span{font-size:.85rem;color:var(--gris)}

.seg-linea{position:relative;padding:0 .5rem}

/* La pista gris y, encima, lo recorrido. Va DETRÁS de los puntos: si fuera
   delante, taparía el punto donde va el pedido justo cuando importa verlo. */
.seg-pista{position:absolute;left:var(--seg-orilla,1.35rem);right:var(--seg-orilla,1.35rem);top:.42rem;height:3px;
  background:var(--linea);border-radius:99px;overflow:hidden;z-index:0}
.seg-pista span{display:block;height:100%;background:var(--acento);
  border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.3,1)}

.seg-pasos{list-style:none;display:flex;margin:0;padding:0;position:relative;z-index:1}
.seg-pasos li{flex:1;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:.4rem}
.seg-punto{width:.95rem;height:.95rem;border-radius:50%;
  background:#fff;border:3px solid var(--linea);box-sizing:border-box}
.seg-pasos li.hecho .seg-punto{background:var(--acento);border-color:var(--acento)}
/* Donde va ahorita: un aro alrededor, para que el ojo caiga ahí primero. */
.seg-pasos li.aqui .seg-punto{box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 25%,transparent)}
.seg-pasos li em{font-style:normal;font-size:.72rem;line-height:1.2;color:var(--gris)}
.seg-pasos li.hecho em{color:var(--tinta);font-weight:600}

.seg-cancelado .seg-ico{background:var(--rojo)}

@media (max-width:520px){
  .seg-pasos li em{font-size:.66rem}
  .seg-ico{width:2.2rem;height:2.2rem;font-size:1.05rem}
}

/* Cuando el paso cambia solo, se nota: si cambia sin avisar, el cliente cree
   que siempre estuvo así y la actualización no le sirvió de nada. */
.seg-cambio{animation:seg-late 1.2s ease-out}
@keyframes seg-late{0%{background:#e6f4ea}60%{background:#e6f4ea}100%{background:transparent}}

/* ── La camioneta que recorre la barra ────────────────────────────────
   Va montada exactamente donde termina lo recorrido, con la misma transición
   que la pista: cuando el pedido avanza, las dos cosas se mueven juntas y se
   ve como un viaje, no como un salto. */
.seg-linea{padding-top:1.9rem}          /* le hace lugar a la camioneta */
.seg-riel{position:absolute;left:var(--seg-orilla,1.35rem);right:var(--seg-orilla,1.35rem);top:0;height:1.6rem}
.seg-camion{position:absolute;top:0;left:0;transform:translateX(-50%);
  color:var(--acento);z-index:0;pointer-events:none;
  transition:left .8s cubic-bezier(.2,.8,.3,1)}
/* Va y viene apenitas, como camioneta en marcha. Quieta se ve descompuesta. */
.seg-camion svg{display:block;animation:camion-anda 1.6s ease-in-out infinite}
@keyframes camion-anda{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* Ya llegó: se para. Una camioneta temblando después de entregado no dice nada. */
.seg-camion.llego svg{animation:none}

/* El tramo que falta se llena de a poquito y se vacía, en el color del acento:
   dice «vamos en camino» sin mentir con el avance, que sigue marcando el paso
   real. */
.seg-pista::after{content:'';position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,
             color-mix(in srgb,var(--acento) 22%,transparent),transparent);
  background-size:35% 100%;background-repeat:no-repeat;
  animation:pista-corre 2.6s linear infinite}
.seg-cancelado .seg-pista::after,.seg-completo .seg-pista::after{animation:none;
  background:none}
@keyframes pista-corre{0%{background-position:-40% 0}100%{background-position:140% 0}}

/* Quien pidió que su teléfono no anime nada, no ve nada moverse. */
@media (prefers-reduced-motion:reduce){
  .seg-camion svg,.seg-pista::after{animation:none}
  .seg-camion{transition:none}
}