/**
 * Archivo NUEVO: assets/css/shared/timeline.css
 * Origen: maqueta "La Tienda Natural - Intercambios.html", bloque
 *         "Capa 2 — estructura de página" (.ltn-timeline)
 * Versión: 1.0.0
 * Creado: DEUDA-CSS-004, Fase 2 — 2026-08-16
 *
 * Igual que .ltn-avatar: agrupado en la maqueta con la estructura de
 * página, pero es un componente reutilizable (historial de hitos con
 * línea vertical conectora) sin dependencias de intercambios — va en
 * shared/, no en assets/css/.
 *
 * ⚠️ En esta fase solo lo consume dashboard-propuesta-detalle.php para
 * el historial real que ya existe (creación, mensajes, cambios de
 * estado ya soportados). NO se usa para hitos del plan de estados
 * post-aceptación todavía sin implementar (en_curso, fulfillment por
 * lado) — ver docs/planning/plan-estados-post-aceptacion.md.
 *
 * Uso:
 *   <ul class="ltn-timeline">
 *     <li>
 *       <span class="ltn-timeline__dot"><svg>...</svg></span>
 *       <div>
 *         <div class="ltn-timeline__what">Propuesta creada</div>
 *         <div class="ltn-timeline__when">13 ago · 09:24</div>
 *       </div>
 *     </li>
 *   </ul>
 */

.ltn-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ltn-timeline li {
    display: flex;
    gap: 13px;
    padding: 0 0 18px;
    position: relative;
}

.ltn-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: var(--ltn-gray-200);
}

.ltn-timeline__dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--ltn-green-bg);
    color: var(--ltn-green-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* El último hito de la lista se destaca en terracota (evento más
   reciente / a la espera de la otra parte). */
.ltn-timeline li:last-child .ltn-timeline__dot {
    background: var(--ltn-terra);
    color: var(--ltn-white);
}

.ltn-timeline__what {
    font-size: var(--ltn-font-size-md);
    color: var(--ltn-gray-700);
    line-height: 1.4;
}

.ltn-timeline__when {
    font-size: var(--ltn-font-size-xs);
    color: var(--ltn-gray-400);
    margin-top: 2px;
}