/* inventory/static/inventory/css/roadmap.css */

.roadmap-timeline {
    position: relative;
    padding: 20px 0;
    margin-top: 50px; /* Espacio extra para la línea */
}

/* Línea central base */
.roadmap-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Centra la línea */
    width: 4px;
    background: #343a40; /* Color oscuro */
    margin-left: -2px;
    z-index: 0;
}

/* Barra de progreso animada (se llena con JS) */
.timeline-progress-bar {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    background: linear-gradient(to bottom, #007bff 0%, #28a745 100%); /* Gradiente azul a verde */
    margin-left: -2px;
    z-index: 1; /* Por encima de la línea base */
    height: 0; /* Por defecto 0, se llenará con JS */
    transition: height 0.8s ease-out; /* Animación de llenado */
}


.milestone-item {
    position: relative;
    margin-bottom: 50px; /* Espacio entre hitos */
    display: flex;
    align-items: center;
    z-index: 2; /* Para que esté por encima de la línea */
}

.milestone-item:nth-child(odd) { /* Hitos alternos a la izquierda */
    flex-direction: row-reverse;
}

.milestone-item:nth-child(even) { /* Hitos alternos a la derecha */
    flex-direction: row;
}

.milestone-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff; /* Color del punto (azul) */
    border: 4px solid #1a1e22; /* Borde para que destaque sobre la línea */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.milestone-content {
    background: #212529; /* Fondo oscuro para el contenido */
    padding: 20px;
    border-radius: 8px;
    color: white;
    width: 45%; /* Ancho de la caja de contenido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.milestone-item:nth-child(odd) .milestone-content {
    margin-right: 5%; /* Espacio a la derecha del icono */
    text-align: right; /* Alinea el texto a la derecha */
}

.milestone-item:nth-child(even) .milestone-content {
    margin-left: 5%; /* Espacio a la izquierda del icono */
    text-align: left; /* Alinea el texto a la izquierda */
}

.milestone-item.completed .milestone-icon {
    background: #28a745; /* Color verde si está completado */
    border-color: #1a1e22; /* Mantener el borde oscuro */
}

/* Estilos para las actualizaciones */
.list-group-item {
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borde más sutil */
    margin-bottom: 10px;
}


/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
    .roadmap-timeline::before, .timeline-progress-bar {
        left: 20px; /* Línea a la izquierda */
        margin-left: 0;
    }

    .milestone-item, .milestone-item:nth-child(odd), .milestone-item:nth-child(even) {
        flex-direction: row; /* Todos los ítems a la derecha en móviles */
        margin-left: 40px; /* Espacio para la línea */
    }

    .milestone-icon {
        left: 20px;
        transform: translateX(-50%); /* Centra el icono en la línea izquierda */
    }

    .milestone-content {
        width: calc(100% - 60px); /* Ajusta el ancho */
        margin-left: 20px !important; /* Elimina márgenes extra */
        margin-right: 0 !important;
        text-align: left !important; /* Asegura la alineación a la izquierda */
    }
}