.ltp-wrap { margin: 12px 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.ltp-timeline { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; align-items: flex-start; }
.ltp-step { position: relative; flex: 1 1 0; min-width: 0; text-align: center; padding-top: 22px; }

/* BASE: todos los tramos existen y son grises por defecto */
.ltp-step:not(:last-child)::after {
  content: ""; position: absolute; top: 12px; left: 55%;
  right: -55%; height: 4px; background: #e5e7eb;
}

/* Los pasos completados pintan su tramo siguiente en verde */
.ltp-step.ltp-done:not(:last-child)::after { background: #16a34a; }

/* Punto base */
.ltp-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #e5e7eb; border: 2px solid #cbd5e1;
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  z-index: 1;
}

/* Colores del punto (3 estados) */
.ltp-step.ltp-done    .ltp-dot { background: #16a34a; border-color: #16a34a; } /* verde */
.ltp-step.ltp-current .ltp-dot { background: #f59e0b; border-color: #f59e0b; } /* amarillo */
.ltp-step.ltp-error   .ltp-dot { background: #dc2626; border-color: #dc2626; } /* rojo */

.ltp-label { font-weight: 700; font-size: 12px; letter-spacing: .3px; margin-bottom: 4px; }
.ltp-sub { font-size: 11px; text-transform: uppercase; color: #475569; }
.ltp-when { font-size: 11px; color: #64748b; margin-top: 2px; }
.ltp-info { font-size: 11px; color: #334155; margin-top: 4px; white-space: pre-line; }
.ltp-info a { text-decoration: underline; }

@media (max-width: 680px) {
  .ltp-label { font-size: 11px; }
  .ltp-sub, .ltp-when { font-size: 10px; }
}