/* ============================================================
   TIMELINE PRO — CSS DEFINITIVO
   ============================================================ */

.timeline-pro {
    --timeline-color: #e8cbe3;
    --timeline-progress-color: #962098;
    --timeline-node-color: #ffffff;
    --timeline-node-active: #d0d823;
    --timeline-node-size: 20px;
    --timeline-line-width: 3px;
    --timeline-transition: 300ms ease;

    position: relative !important;
    isolation: isolate;
}

/* ------------------------------------------------------------
   1. LÍNEAS BASE Y PROGRESO (Común)
   ------------------------------------------------------------ */

/* Línea Base Fondo */
.timeline-pro::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: var(--timeline-line-top, 0px) !important;
    bottom: var(--timeline-line-bottom, 0px) !important;
    width: var(--timeline-line-width) !important;
    background: var(--timeline-color) !important;
    pointer-events: none !important;
    display: block !important;
}

/* Línea de Progreso Activa */
.timeline-progress {
    position: absolute !important;
    z-index: 1 !important;
    top: var(--timeline-line-top, 0px) !important;
    height: var(--timeline-line-height, 0px) !important;
    width: var(--timeline-line-width) !important;
    background: var(--timeline-progress-color) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    display: block !important;
    transition: height 50ms linear !important;
}

/* ------------------------------------------------------------
   2. ESCRITORIO (Desktop >= 768px)
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    .timeline-pro::before,
    .timeline-progress {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .timeline-pro .timeline-item > .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .timeline-pro .timeline-left,
    .timeline-pro .timeline-right {
        width: 45% !important;
        flex: 0 0 45% !important;
        box-sizing: border-box !important;
    }

    .timeline-pro .timeline-center {
        width: 10% !important;
        flex: 0 0 10% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        z-index: 2 !important;
        border: none !important;
    }
}

/* Estilo de los Nodos/Círculos */
.timeline-pro .timeline-center::after {
    content: "";
    display: block;
    width: var(--timeline-node-size);
    height: var(--timeline-node-size);
    border: 3px solid var(--timeline-progress-color);
    border-radius: 50%;
    background: var(--timeline-node-color);
    box-shadow: 0 0 0 4px rgba(232, 203, 227, 0.75);
    transition: all var(--timeline-transition);
}

.timeline-pro .timeline-item.is-active .timeline-center::after {
    background: var(--timeline-node-active);
    border-color: var(--timeline-node-active);
    box-shadow: 0 0 0 6px rgba(208, 216, 35, 0.4);
    transform: scale(1.25);
}

/* ------------------------------------------------------------
   3. MÓVIL (Menos de 768px)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .timeline-pro {
        --timeline-node-size: 16px;
    }

    /* Líneas alineadas a la izquierda (20px) */
    .timeline-pro::before,
    .timeline-progress {
        left: 0px !important;
        transform: translateX(-50%) !important;
    }

    /* Reestructuración del ítem en columna */
    .timeline-pro .timeline-item > .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        padding-left: 45px !important;
        box-sizing: border-box !important;
    }

    /* El nodo se posiciona fijamente en los 20px */
    .timeline-pro .timeline-center {
        position: absolute !important;
        left: 0 !important;
        top: 10px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Ajustar bloques laterales para ocupar todo el ancho disponible */
    .timeline-pro .timeline-left,
    .timeline-pro .timeline-right {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ocultar divs de imágenes o vacíos si no tienen contenido */
    .timeline-pro .timeline-left:empty,
    .timeline-pro .timeline-right:empty {
        display: none !important;
    }

    /* Forzar texto alineado a la izquierda */
    .timeline-pro .timeline-item .uagb-heading-text,
    .timeline-pro .timeline-item p {
        text-align: left !important;
    }
}