.timeline {

    position: relative;

    padding-left: 35px;

}



.timeline::before {

    content: "";

    position: absolute;

    left: 15px;

    top: 0;

    width: 4px;

    height: 100%;

    background: #e0e0e0;

    border-radius: 2px;

}



.timeline-item {

    position: relative;

    margin-bottom: 20px;

    padding-bottom: 10px;

}



.timeline-badge {

    position: absolute;

    left: -3px;

    top: 0;

    width: 26px;

    height: 26px;

    background: #fff;

    border: 2px solid var(--primary-500);

    color: var(--primary-700);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: bold;

}



.timeline-content {

    background: #fff;

    border-radius: 8px;

    padding: 12px 15px;

    border: 1px solid #e5e5e5;

}



.timeline-date {

    font-size: 12px;

    color: #777;

}



.timeline-actions button {

    margin-right: 5px;

}



/* COLORES POR TIPO */



.timeline-call { border-color: var(--primary-700); }

.timeline-call .timeline-badge { border-color: var(--primary-700); color: var(--primary-700); }



.timeline-whatsapp { border-color: #25D366; }

.timeline-whatsapp .timeline-badge { border-color: #25D366; color: #25D366; }



.timeline-email { border-color: #6f42c1; }

.timeline-email .timeline-badge { border-color: #6f42c1; color: #6f42c1; }



.timeline-meeting { border-color: #dc3545; }

.timeline-meeting .timeline-badge { border-color: #dc3545; color: #dc3545; }



.timeline-note { border-color: #6c757d; }

.timeline-note .timeline-badge { border-color: #6c757d; color: #6c757d; }



.timeline-task { border-color: #ffc107; }

.timeline-task .timeline-badge { border-color: #ffc107; color: #ffc107; }



/* ESTADOS */



.timeline-overdue .timeline-content { background: #ffe4e4; }

.timeline-done .timeline-content { background: #e6ffe6; }

.timeline-upcoming .timeline-content { background: var(--primary-50); }

/* =========================

   TIMELINE - MOBILE

   ========================= */

@media (max-width: 768px) {



    .timeline {

        padding-left: 22px;

    }



    .timeline::before {

        left: 10px;

        width: 3px;

    }



    .timeline-badge {

        width: 22px;

        height: 22px;

        font-size: 11px;

        left: -6px;

    }



    .timeline-content {

        padding: 10px;

        font-size: 13px;

    }



    .timeline-content strong {

        font-size: 14px;

    }



    .timeline-actions button,

    .timeline-actions a {

        margin-bottom: 4px;

    }

}