.timeline { position: relative; max-width: 900px; margin: 40px auto; padding: 20px 0; }
.timeline::after { content: ''; position: absolute; width: 4px; background-color: var(--bs-gray-900); top: 0; bottom: 0; left: 50%; margin-left: -2px; }
.container-timeline { padding: 10px 40px; position: relative; width: 50%; }
.container-timeline::after { content: ''; position: absolute; width: 16px; height: 16px; right: -8px; background-color: #fff; border: 3px solid #fd7e14; top: 25px; border-radius: 50%; z-index: 1; }
.left { left: 0; text-align: right; }
.right { left: 50%; text-align: left; }
.right::after { left: -8px; }

.timeline .card { border: none; transition: transform 0.2s; }
.timeline .card:hover { transform: scale(1.02); }

/* Classes de bordes personalitzats */
.border-ascens { border-left: 5px solid #198754 !important; }
.border-descens { border-left: 5px solid #dc3545 !important; }
.border-aniversari { border-left: 5px solid #ffc107 !important; }
.border-previ { border-left: 5px solid #6c757d !important; }

@media screen and (max-width: 768px) {
    .timeline::after { left: 31px; }
    .container-timeline { width: 100%; padding-left: 70px; padding-right: 25px; text-align: left !important; }
    .container-timeline::after { left: 22px; }
    .right { left: 0%; }
}

[data-bs-theme="dark"] .timeline::after { background-color: var(--bs-gray-100);}