/* ============================================================
   SpineNet · vista trazabilidad
   Clases prefijadas v-traz-…  ·  solo var(--token), nunca hex
   ============================================================ */

/* ---------- El kardex como una línea de tiempo ---------- */
.v-traz-feed { max-height: 560px; overflow-y: auto; }
.v-traz-feed .feed__row { position: relative; border-bottom: 0; }
.v-traz-feed .feed__row::before,
.v-traz-feed .feed__row::after {
  content: ""; position: absolute; left: calc(var(--s-5) + 16px); width: 2px; background: var(--border);
}
.v-traz-feed .feed__row::before { top: 0; height: var(--s-3); }
.v-traz-feed .feed__row::after { top: calc(var(--s-3) + 34px); bottom: 0; }
.v-traz-feed .feed__row:first-child::before,
.v-traz-feed .feed__row:last-child::after { display: none; }
.v-traz-feed .feed__icon { border-radius: 50%; }
.v-traz-clic { cursor: pointer; }
.v-traz-clic:hover { background: var(--bg-muted); }

.v-traz-lotes { margin-bottom: var(--s-6); }

/* ---------- El recorrido: ingreso → central → representante → quirófano ---------- */
.ruta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ruta__p { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-right: 6px; color: var(--text-muted); }
/* el tramo que llega a cada paso desde el anterior */
.ruta__p + .ruta__p::before {
  content: ""; position: absolute; top: 6px; left: calc(14px - 100%); width: calc(100% - 14px); height: 2px;
  border-radius: var(--r-full); background: var(--bar-muted);
}
.ruta__p.is-hecho + .ruta__p.is-hecho::before { background: var(--brand); }
.ruta__punto {
  width: 14px; height: 14px; margin-bottom: 6px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--bg-surface);
}
.ruta__p.is-hecho .ruta__punto { border-color: var(--brand); background: var(--brand); }
.ruta__p.is-ahora .ruta__punto { box-shadow: 0 0 0 4px var(--brand-ring); }
.ruta__p b { font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary); }
.ruta__p.is-hecho b { color: var(--text-primary); }
.ruta__fecha { font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.ruta__p small { font-size: var(--fs-11); line-height: 1.35; overflow-wrap: anywhere; }
.ruta__p.is-hecho small, .ruta__p.is-hecho .ruta__fecha { color: var(--text-secondary); }

@media (max-width: 640px) {
  .v-traz-feed .feed__row::before, .v-traz-feed .feed__row::after { left: calc(var(--s-4) + 16px); }
}