/**
 * Archivo NUEVO: assets/css/shared/exchange-fulfillment.css
 * Origen: maqueta "La Tienda Natural - Intercambios.html", bloque
 *         "shared/ NUEVO — .ltn-fulfillment (seguimiento por lado)"
 * Versión: 1.0.0
 * Creado: DEUDA-CSS-004, Fase 2 — 2026-08-16
 *
 * ⚠️ Componente de PRESENTACIÓN únicamente. El estado `en_curso` y el
 * seguimiento por lado (fisico: pendiente→enviado→recibido / servicio:
 * pendiente→gestionado) que este componente ilustra están DISEÑADOS pero
 * NO implementados — ver docs/planning/plan-estados-post-aceptacion.md.
 * Este archivo se crea para que el componente exista y esté listo (tal
 * como pide DEUDA-CSS-004 Fase 2), pero NINGÚN template de este PR lo usa
 * todavía con datos reales: el estado `en_curso` no puede darse hoy en el
 * sistema (el ENUM real de `ltn_intercambio_propuestas.estado` no lo
 * contempla). Cuando ese plan se implemente, este CSS ya estará listo
 * para consumirse desde la vista correspondiente.
 */

.ltn-fulfillment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ltn-gray-200);
    border-top: 1px solid var(--ltn-gray-200);
}

.ltn-fulfillment__side {
    background: var(--ltn-white);
    padding: 16px 20px;
}

.ltn-fulfillment__who {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ltn-font-size-sm);
    font-weight: 700;
    color: var(--ltn-gray-700);
    margin-bottom: 3px;
}

.ltn-fulfillment__type {
    font-size: var(--ltn-font-size-xs);
    color: var(--ltn-gray-400);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ltn-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.ltn-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    position: relative;
    text-align: center;
}

.ltn-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 11px;
    left: calc(50% + 14px);
    right: calc(-50% + 14px);
    height: 2px;
    background: var(--ltn-gray-200);
    border-radius: 1px;
}

.ltn-step.done:not(:last-child)::after {
    background: var(--ltn-green-light);
}

.ltn-step__dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--ltn-white);
    border: 2px solid var(--ltn-gray-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ltn-gray-300);
    position: relative;
    z-index: 1;
    transition: var(--ltn-transition);
}

.ltn-step.done .ltn-step__dot {
    background: var(--ltn-green-primary);
    border-color: var(--ltn-green-primary);
    color: var(--ltn-white);
}

.ltn-step.current .ltn-step__dot {
    background: var(--ltn-white);
    border-color: var(--ltn-terra);
    color: var(--ltn-terra);
    box-shadow: 0 0 0 4px rgba(213, 123, 78, 0.16);
}

.ltn-step__label {
    font-size: var(--ltn-font-size-xs);
    color: var(--ltn-gray-400);
    line-height: 1.3;
    font-weight: 500;
}

.ltn-step.done .ltn-step__label {
    color: var(--ltn-green-dark);
}

.ltn-step.current .ltn-step__label {
    color: var(--ltn-terra-deep, #B95F33);
    font-weight: 700;
}

.ltn-fulfillment__action {
    margin-top: 15px;
}

.ltn-fulfillment__waiting {
    margin-top: 15px;
    font-size: var(--ltn-font-size-xs);
    color: var(--ltn-gray-400);
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 1024px) {
    .ltn-fulfillment {
        grid-template-columns: 1fr;
    }
}