:root {
  --ds-fondo: #0a0a0a;
  --ds-texto: #f4f4f4;
  --ds-suave: rgba(255, 255, 255, .58);
  --ds-tenue: rgba(255, 255, 255, .34);
  --ds-tarjeta: #111111;
  --ds-linea: rgba(255, 255, 255, .07);
  --ds-borde: rgba(255, 255, 255, .11);
  --ds-encima: rgba(255, 255, 255, .05);
  --ds-relieve: rgba(255, 255, 255, .055);
  --ds-luz: rgba(255, 255, 255, .07);           
  --ds-disco: #f4f4f4;                          
  --ds-disco-tinta: #0a0a0a;
  --ds-nodo: #181818;
  --ds-mapa: #0d0d0d;
  --ds-m-punto: rgba(255, 255, 255, .075);
  --ds-m-calle: rgba(255, 255, 255, .045);
  --ds-m-agua: rgba(255, 255, 255, .06);
  --ds-m-cerro: rgba(255, 255, 255, .05);
  --ds-m-falta: rgba(255, 255, 255, .26);
  --ds-ok: #3ccf6e;
  --ds-ok-fondo: rgba(60, 207, 110, .13);
  --ds-sombra: 0 70px 110px -60px rgba(0, 0, 0, 1), 0 26px 50px -30px rgba(0, 0, 0, .85);
  --ds-alzada: 0 14px 28px -10px rgba(0, 0, 0, .8), 0 3px 8px -3px rgba(0, 0, 0, .6);
  --ds-curva: cubic-bezier(.22, 1, .36, 1);
  --ds-rebote: cubic-bezier(.34, 1.56, .64, 1);
  --ds-nodo-t: 42px;         
}
:root[data-tema="claro"] {
  --ds-fondo: #eeeeee;
  --ds-texto: #0a0a0a;
  --ds-suave: rgba(0, 0, 0, .56);
  --ds-tenue: rgba(0, 0, 0, .34);
  --ds-tarjeta: #ffffff;
  --ds-linea: rgba(0, 0, 0, .07);
  --ds-borde: rgba(0, 0, 0, .12);
  --ds-encima: rgba(0, 0, 0, .04);
  --ds-relieve: rgba(0, 0, 0, .04);
  --ds-luz: rgba(255, 255, 255, .9);
  --ds-disco: #0a0a0a;
  --ds-disco-tinta: #f4f4f4;
  --ds-nodo: #f3f3f3;
  --ds-mapa: #f5f5f5;
  --ds-m-punto: rgba(0, 0, 0, .08);
  --ds-m-calle: rgba(0, 0, 0, .045);
  --ds-m-agua: rgba(0, 0, 0, .055);
  --ds-m-cerro: rgba(0, 0, 0, .05);
  --ds-m-falta: rgba(0, 0, 0, .26);
  --ds-ok: #18a34a;
  --ds-ok-fondo: rgba(24, 163, 74, .11);
  --ds-sombra: 0 60px 100px -56px rgba(0, 0, 0, .34), 0 20px 40px -28px rgba(0, 0, 0, .2);
  --ds-alzada: 0 12px 24px -10px rgba(0, 0, 0, .22), 0 3px 8px -3px rgba(0, 0, 0, .12);
}

* { box-sizing: border-box; }


button { font: inherit; color: inherit; }
svg { display: block; }
.ds-despacho svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ds-despacho :focus-visible { outline: 2px solid var(--ds-texto); outline-offset: 2px; }
.ds-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


.ds-rueda { display: inline-grid; vertical-align: top; overflow: hidden; padding: .14em 0 .2em; margin: -.14em 0 -.2em; perspective: 400px; }
.ds-rueda > span { grid-area: 1 / 1; white-space: nowrap; transform-origin: 50% 50% -.5em; }
.ds-rueda .is-entra { animation: ds-entra .6s .12s var(--ds-curva) both; }
.ds-rueda .is-sale { animation: ds-sale .22s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes ds-entra { from { transform: translateY(85%) rotateX(-70deg); opacity: 0; } }
@keyframes ds-sale { to { transform: translateY(-85%) rotateX(70deg); opacity: 0; } }


.ds-despacho {
  position: relative; width: min(1120px, 100%); height: 668px; display: grid; grid-template-columns: minmax(0, 1fr) 404px; overflow: hidden;
  border: 1px solid var(--ds-linea); border-radius: 30px; background: var(--ds-tarjeta); box-shadow: inset 0 1px 0 var(--ds-luz), var(--ds-sombra);
}
.ds-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 28px 34px 32px; }

.ds-cabeza { display: flex; align-items: center; gap: 14px; }
.ds-caja {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px;
  background: var(--ds-relieve); border: 1px solid var(--ds-linea); box-shadow: inset 0 1px 0 var(--ds-luz);
}
.ds-caja svg { width: 22px; height: 22px; stroke-width: 1.6; }
.ds-pedido { min-width: 0; }
.ds-tienda { margin: 0; font-size: .8rem; color: var(--ds-suave); }
.ds-numero { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }

.ds-copia {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px; margin-left: -2px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: background-color .2s;
}
.ds-copia b { font-weight: inherit; }
.ds-copia:hover { background: var(--ds-encima); }
.ds-copia-iconos { position: relative; width: 17px; height: 17px; color: var(--ds-suave); }
.ds-copia-iconos svg { position: absolute; inset: 0; width: 17px; height: 17px; transition: opacity .2s, transform .35s var(--ds-rebote); }
.ds-copia-ok { opacity: 0; transform: scale(.6); color: var(--ds-ok); }
.ds-copia-ok path { stroke-width: 2.3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s .08s var(--ds-curva); }
.ds-copia.is-copiado .ds-copia-hoja { opacity: 0; transform: scale(.6); }
.ds-copia.is-copiado .ds-copia-ok { opacity: 1; transform: none; }
.ds-copia.is-copiado .ds-copia-ok path { stroke-dashoffset: 0; }
.ds-copiado {
  position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 5px 10px; border-radius: 9px; background: var(--ds-disco); color: var(--ds-disco-tinta);
  font-size: .76rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 6px) scale(.85); transition: opacity .18s, transform .3s var(--ds-curva);
}
.ds-copiado::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ds-disco); }
.ds-copia.is-copiado .ds-copiado { opacity: 1; transform: translate(-50%, 0); transition: opacity .2s, transform .5s var(--ds-rebote); }

.ds-estado {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; margin: 0 0 0 auto; padding: 0 14px 0 12px; border-radius: 99px;
  background: var(--ds-relieve); border: 1px solid var(--ds-linea); font-size: .86rem; font-weight: 500; white-space: nowrap;
  transition: background-color .4s, border-color .4s, color .4s;
}
.ds-estado i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ds-estado i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ds-late 1.8s var(--ds-curva) infinite; }
.ds-despacho.is-entregado .ds-estado { background: var(--ds-ok-fondo); border-color: transparent; color: var(--ds-ok); }
.ds-despacho.is-entregado .ds-estado i::after { animation: none; }


.ds-llegada { position: relative; margin-top: 30px; min-height: 124px; }
.ds-llegada-textos { transition: transform .7s var(--ds-muelle, var(--ds-curva)); }
.ds-llegada p, .ds-llegada h2 { margin: 0; }
.ds-llegada-etiqueta { font-size: .88rem; font-weight: 500; color: var(--ds-suave); transition: color .4s; }
.ds-llegada-titulo { margin-top: 6px !important; font-size: 3.4rem; font-weight: 600; letter-spacing: -.055em; line-height: 1.02; }
.ds-llegada-detalle { margin-top: 8px !important; font-size: 1.22rem; letter-spacing: -.015em; color: var(--ds-suave); font-variant-numeric: tabular-nums; }
.ds-sello { position: absolute; left: 0; top: 50%; width: 76px; height: 76px; margin-top: -38px; color: var(--ds-ok); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ds-curva); }
.ds-sello svg { width: 76px; height: 76px; overflow: visible; }
.ds-sello circle { fill: var(--ds-ok-fondo); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .2s; }
.ds-sello path { stroke-width: 3.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s; }
.ds-sello::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ds-ok); opacity: 0; }
.ds-despacho.is-entregado .ds-llegada-textos { transform: translateX(104px); }
.ds-despacho.is-entregado .ds-llegada-etiqueta { color: var(--ds-ok); }
.ds-despacho.is-entregado .ds-sello { opacity: 1; transform: none; transition: opacity .2s .1s, transform .8s .1s var(--ds-muelle, var(--ds-rebote)); }
.ds-despacho.is-entregado .ds-sello circle { stroke-dashoffset: 0; transition: stroke-dashoffset .6s .18s var(--ds-curva); }
.ds-despacho.is-entregado .ds-sello path { stroke-dashoffset: 0; transition: stroke-dashoffset .42s .55s var(--ds-curva); }
.ds-despacho.is-entregado .ds-sello::after { animation: ds-onda 1s .6s var(--ds-curva) both; }

.ds-rayos { position: absolute; inset: 0; pointer-events: none; }
.ds-rayos i {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 11px; margin: -5.5px 0 0 -1.5px; border-radius: 2px; background: var(--ds-ok);
  opacity: 0; transform: rotate(var(--a)) translateY(-44px) scaleY(0);
}
.ds-despacho.is-entregado .ds-rayos i { animation: ds-rayo .7s calc(.78s + var(--k, 0) * .018s) var(--ds-curva) both; }
@keyframes ds-rayo {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-40px) scaleY(.2); }
  45% { opacity: 1; transform: rotate(var(--a)) translateY(-50px) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-56px) scaleY(.1); }
}
@keyframes ds-onda { from { opacity: .75; transform: scale(.9); } to { opacity: 0; transform: scale(1.9); } }



.ds-progreso { position: relative; margin-top: 30px; }
.ds-etapas { position: relative; display: grid; grid-template-columns: repeat(var(--ds-n, 5), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ds-via { position: absolute; left: calc(50% / var(--ds-n, 5)); right: calc(50% / var(--ds-n, 5)); top: calc(var(--ds-nodo-t) / 2 - 1px); height: 2px; border-radius: 2px; background: var(--ds-linea); }
.ds-via-llena { position: absolute; inset: 0; border-radius: inherit; background: var(--ds-texto); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.ds-despacho.is-entregado .ds-via-llena { background: var(--ds-ok); transition: background-color .5s; }
.ds-etapa { position: relative; display: grid; justify-items: center; text-align: center; min-width: 0; }
.ds-nodo {
  position: relative; display: grid; place-items: center; width: var(--ds-nodo-t); height: var(--ds-nodo-t); border-radius: 50%;
  background: var(--ds-nodo); border: 1px solid var(--ds-borde); color: var(--ds-tenue); transition: color .35s, background-color .35s, border-color .35s;
}
.ds-nodo svg { width: 19px; height: 19px; }
.ds-etapa.is-hecha .ds-nodo { color: var(--ds-texto); border-color: var(--ds-suave); }
.ds-etapa-nombre { margin-top: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 500; color: var(--ds-tenue); transition: color .35s; }
.ds-etapa.is-hecha .ds-etapa-nombre { color: var(--ds-suave); }
.ds-etapa.is-actual .ds-etapa-nombre { color: var(--ds-texto); }
.ds-etapa-hora { margin-top: 2px; min-height: 1.2em; font-size: .76rem; color: var(--ds-tenue); font-variant-numeric: tabular-nums; }
.ds-disco { position: absolute; left: 0; top: 0; width: calc(100% / var(--ds-n, 5)); height: var(--ds-nodo-t); pointer-events: none; will-change: transform; }
.ds-disco-cara {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ds-disco); color: var(--ds-disco-tinta); box-shadow: 0 0 0 6px var(--ds-tarjeta), var(--ds-alzada); transition: background-color .45s;
}
.ds-disco-cara::before, .ds-disco-cara::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ds-disco); animation: ds-late-aro 2s var(--ds-curva) infinite; }
.ds-disco-cara::after { animation-delay: 1s; }
@keyframes ds-late-aro { 0% { opacity: .5; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes ds-late { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }

.ds-disco-ventana { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.ds-disco-cara svg { position: absolute; width: 22px; height: 22px; stroke-width: 1.8; }
.ds-disco-ok path { stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ds-despacho.is-entregado .ds-disco-cara { background: var(--ds-ok); color: #fff; }
.ds-despacho.is-entregado .ds-disco-cara::before, .ds-despacho.is-entregado .ds-disco-cara::after { border-color: var(--ds-ok); animation: ds-onda 1s .1s var(--ds-curva) both; }
.ds-despacho.is-entregado .ds-disco-cara::after { animation-delay: .3s; }
.ds-despacho.is-entregado .ds-disco-cara .ds-disco-icono { opacity: 0 !important; }
.ds-despacho.is-entregado .ds-disco-ok path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s .15s var(--ds-curva); }


.ds-mapa {
  position: relative; flex: 1; min-height: 150px; margin-top: 26px; overflow: hidden; border-radius: 22px;
  background: var(--ds-mapa); border: 1px solid var(--ds-linea); box-shadow: inset 0 1px 0 var(--ds-luz);
}
.ds-mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; }
.ds-m-punto { fill: var(--ds-m-punto); stroke: none; }
.ds-m-vineta { stop-color: var(--ds-mapa); }
.ds-m-calles path { stroke: var(--ds-m-calle); stroke-width: 3; }
.ds-m-calles .ds-m-avenida { stroke-width: 9; }
.ds-m-rio { stroke: var(--ds-m-agua) !important; stroke-width: 15 !important; }
.ds-m-cerro path { fill: none; stroke: var(--ds-m-cerro); stroke-width: 1.4; }
.ds-m-cerro path:first-child { fill: var(--ds-m-cerro); }
.ds-m-nombre { fill: var(--ds-tenue); stroke: none; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; }
.ds-ruta { stroke: var(--ds-m-falta); stroke-width: 2.2; stroke-dasharray: 1.5 6.5; }
.ds-recorrido { stroke: var(--ds-texto); stroke-width: 3.4; }
.ds-despacho.is-entregado .ds-recorrido { stroke: var(--ds-ok); transition: stroke .6s; }
.ds-m-lugar rect, .ds-m-lugar circle, .ds-m-lugar path { fill: var(--ds-tarjeta); stroke: var(--ds-texto); stroke-width: 2; }
.ds-m-lugar text { fill: var(--ds-suave); stroke: none; font-size: 12px; font-weight: 500; letter-spacing: -.005em; }
.ds-m-paso circle { stroke: var(--ds-suave); }
.ds-destino path { fill: var(--ds-texto); stroke: none; }
.ds-destino .ds-destino-ojo { fill: var(--ds-tarjeta); stroke: none; }
.ds-destino-onda { fill: none !important; stroke: var(--ds-texto) !important; stroke-width: 1.5 !important; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ds-despacho.is-entregado .ds-destino path { fill: var(--ds-ok); transition: fill .4s; }
.ds-despacho.is-entregado .ds-destino-onda { stroke: var(--ds-ok) !important; animation: ds-onda 1.1s .1s var(--ds-curva) both; }
.ds-vehiculo-disco { fill: var(--ds-disco); stroke: var(--ds-tarjeta); stroke-width: 3; }
.ds-vehiculo-flecha { fill: var(--ds-disco-tinta); stroke: none; }
.ds-vehiculo-halo { fill: var(--ds-disco); stroke: none; opacity: .2; transform-box: fill-box; transform-origin: center; animation: ds-halo 2s var(--ds-curva) infinite; }
@keyframes ds-halo { 0% { transform: scale(1); opacity: .32; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.ds-despacho.is-entregado .ds-vehiculo { opacity: 0; transition: opacity .35s .2s; }
.ds-vivo {
  position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px; height: 28px; margin: 0; padding: 0 11px 0 10px; border-radius: 99px;
  background: var(--ds-tarjeta); border: 1px solid var(--ds-linea); box-shadow: var(--ds-alzada); font-size: .76rem; font-weight: 500; color: var(--ds-suave);
}
.ds-vivo i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-ok); }
.ds-vivo i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ds-ok); animation: ds-late 1.8s var(--ds-curva) infinite; }
.ds-despacho.is-entregado .ds-vivo i::after { animation: none; }


.ds-actividad { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 26px 0 0; border-left: 1px solid var(--ds-linea); }
.ds-act-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 0 28px; }
.ds-act-cabeza h3 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.025em; }
.ds-actualiza {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; border: 1px solid var(--ds-borde); border-radius: 12px;
  background: none; cursor: pointer; font-size: .88rem; font-weight: 500; transition: background-color .2s, border-color .2s, transform .25s var(--ds-curva);
}
.ds-actualiza:hover { background: var(--ds-encima); border-color: var(--ds-suave); }
.ds-actualiza:active { transform: scale(.96); }
.ds-actualiza[aria-busy="true"] { cursor: progress; }
.ds-act-iconos { position: relative; width: 18px; height: 18px; }
.ds-act-iconos svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: opacity .25s, transform .45s var(--ds-rebote); }
.ds-act-repite { opacity: 0; transform: scale(.5) rotate(-90deg); }
.ds-actualiza.is-volver .ds-act-gira { opacity: 0; transform: scale(.5) rotate(90deg); }
.ds-actualiza.is-volver .ds-act-repite { opacity: 1; transform: none; }
.ds-actualiza.is-volver { background: var(--ds-disco); color: var(--ds-disco-tinta); border-color: transparent; }

.ds-hist {
  position: relative; flex: 1; min-height: 0; margin-top: 18px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
}
.ds-hist::-webkit-scrollbar { display: none; }
.ds-lista { position: relative; margin: 0; padding: 0; list-style: none; }

.ds-evento {
  position: absolute; left: 12px; right: 12px; top: 0; display: grid; grid-template-columns: 46px 24px minmax(0, 1fr); column-gap: 8px;
  padding: 11px 12px 15px 4px; border-radius: 14px; will-change: transform, opacity;
}
.ds-evento::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ds-encima); opacity: 0; pointer-events: none; }

.ds-evento.is-recien::before { animation: ds-recien 1.6s var(--ds-curva); }
@keyframes ds-recien { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
.ds-ev-hora { padding-top: 1px; font-size: .8rem; color: var(--ds-tenue); text-align: right; font-variant-numeric: tabular-nums; }
.ds-ev-riel { position: relative; display: grid; justify-items: center; }
.ds-ev-punto { position: relative; z-index: 1; display: grid; place-items: center; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--ds-tarjeta); border: 2px solid var(--ds-tenue); transition: background-color .35s, border-color .35s, transform .45s var(--ds-rebote); }
.ds-ev-punto svg { width: 10px; height: 10px; stroke-width: 3; color: #fff; opacity: 0; transition: opacity .2s; }
.ds-ev-linea { position: absolute; left: 50%; top: 9px; width: 2px; height: 100%; margin-left: -1px; border-radius: 1px; background: var(--ds-linea); transform-origin: 50% 0; }
.ds-evento:last-child .ds-ev-linea { display: none; }
.ds-ev-textos { min-width: 0; }
.ds-ev-texto { margin: 0; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.32; color: var(--ds-suave); transition: color .35s; }
.ds-ev-lugar { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: .8rem; color: var(--ds-tenue); }
.ds-ev-lugar svg { flex: none; width: 13px; height: 13px; stroke-width: 1.8; }

.ds-evento.is-ultimo .ds-ev-texto { color: var(--ds-texto); }
.ds-evento.is-ultimo .ds-ev-hora { color: var(--ds-suave); }
.ds-evento.is-ultimo .ds-ev-punto { background: var(--ds-texto); border-color: var(--ds-texto); transform: scale(1.18); }
.ds-evento.is-ultimo .ds-ev-punto::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--ds-texto); animation: ds-late 1.8s var(--ds-curva) infinite; }
.ds-evento.is-fin .ds-ev-punto { width: 18px; height: 18px; margin-top: 1px; background: var(--ds-ok); border-color: var(--ds-ok); transform: none; }
.ds-evento.is-fin .ds-ev-punto::after { background: var(--ds-ok); animation: ds-late 1.2s var(--ds-curva) 2; }
.ds-evento.is-fin .ds-ev-punto svg { opacity: 1; }


.ds-escena { height: 100%; display: grid; place-items: center; padding: 24px; }


@media (max-width: 860px) {
  :root { --ds-nodo-t: 34px; }

  .ds-escena { display: block; padding: 12px; }
  .ds-despacho { height: auto; grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .ds-principal { padding: 20px 16px 18px; }
  .ds-caja { width: 40px; height: 40px; border-radius: 13px; }
  .ds-estado { height: 30px; padding: 0 11px 0 10px; font-size: .78rem; }
  .ds-llegada { margin-top: 24px; min-height: 96px; }
  .ds-llegada-titulo { font-size: 2.4rem; }
  .ds-llegada-detalle { font-size: 1.02rem; }
  .ds-sello, .ds-sello svg { width: 58px; height: 58px; }
  .ds-sello { margin-top: -29px; }
  .ds-despacho.is-entregado .ds-llegada-textos { transform: translateX(72px); }
  .ds-progreso { margin-top: 24px; }
  .ds-nodo svg { width: 16px; height: 16px; }
  .ds-disco-cara { width: 42px; height: 42px; margin: -21px; box-shadow: 0 0 0 4px var(--ds-tarjeta), var(--ds-alzada); }
  .ds-disco-cara svg { width: 18px; height: 18px; }
  .ds-etapa-nombre { margin-top: 9px; font-size: .68rem; white-space: normal; line-height: 1.15; }
  .ds-etapa-hora { font-size: .66rem; }
  
  .ds-mapa { flex: none; height: auto; aspect-ratio: 600 / 270; min-height: 0; margin-top: 20px; border-radius: 18px; }
  .ds-llegada-detalle .ds-rueda > span { white-space: normal; }
  
  .ds-m-lugar text { font-size: 19px; }
  .ds-m-nombre { display: none; }
  .ds-rayos i { transform: rotate(var(--a)) translateY(-34px) scaleY(0); }
  .ds-actividad { padding-top: 20px; border-left: 0; border-top: 1px solid var(--ds-linea); }
  .ds-act-cabeza { padding: 0 14px 0 18px; }
  .ds-hist { flex: none; overflow: visible; -webkit-mask-image: none; mask-image: none; margin-top: 12px; padding-bottom: 8px; }
  .ds-evento { left: 4px; right: 4px; grid-template-columns: 42px 22px minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .ds-etapa-nombre { font-size: .63rem; letter-spacing: -.012em; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-estado i::after, .ds-vivo i::after, .ds-evento.is-ultimo .ds-ev-punto::after, .ds-disco-cara::before, .ds-disco-cara::after,
  .ds-vehiculo-halo, .ds-sello::after, .ds-destino-onda, .ds-despacho.is-entregado .ds-rayos i { animation: none !important; opacity: 0; }
  .ds-rueda .is-entra { animation: ds-funde .15s both; }
  .ds-rueda .is-sale { animation: ds-funde .1s reverse forwards; }
  .ds-llegada-textos, .ds-sello, .ds-despacho.is-entregado .ds-sello, .ds-sello circle, .ds-sello path, .ds-disco-ok path,
  .ds-despacho.is-entregado .ds-sello circle, .ds-despacho.is-entregado .ds-sello path, .ds-despacho.is-entregado .ds-disco-ok path { transition-duration: .01s !important; transition-delay: 0s !important; }
  .ds-evento.is-recien::before { animation: none; }
}
@keyframes ds-funde { from { opacity: 0; } }