/* home.css */

/* El contenedor principal que establece el contexto de posicionamiento */
.timeline-container {
    position: relative;
    max-width: 900px; /* Un ancho máximo para que no se estire demasiado en pantallas grandes */
    margin: 0 auto;
}

/* La línea vertical del medio */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: #444; /* Un color más visible para la línea */
}

/* Estilo base para todos los items */
.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%; /* Cada item ocupa la mitad del contenedor */
    box-sizing: border-box; /* Importante para que el padding no afecte el ancho */
}

/* --- ESTA ES LA PARTE CLAVE DE LA SOLUCIÓN --- */

/* Posiciona los items de la IZQUIERDA */
.timeline-item.left {
    left: 0;
    /* Alinea el texto a la derecha para que se aleje de la línea central */
    text-align: right;
}

/* Posiciona los items de la DERECHA */
.timeline-item.right {
    left: 50%;
    /* Alinea el texto a la izquierda para que se aleje de la línea central */
    text-align: left;
}

/* --- LÓGICA DE LOS MARCADORES (CÍRCULOS) --- */

.timeline-marker {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border: 4px solid #444;
    z-index: 1; /* Para que esté por encima de la línea */
}

/* Para items de la IZQUIERDA, el marcador se posiciona a la DERECHA */
.timeline-item.left .timeline-marker {
    right: -14px; /* Mitad de su ancho para centrarlo en la línea */
}

/* Para items de la DERECHA, el marcador se posiciona a la IZQUIERDA */
.timeline-item.right .timeline-marker {
    left: -14px; /* Mitad de su ancho para centrarlo en la línea */
}

/* Estilos para el contenido dentro de cada item */
.timeline-content {
    padding: 20px 30px;
    border-radius: 6px;
    position: relative;
}

.timeline-marker.current {
  background: green;
  box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.3);
}

.timeline-marker.done {
  background: #28a745;
}


.timeline-content {
    padding: 20px;
    border-radius: 6px;
    position: relative;
    
    border: 1px solid #555;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in-out;
}

.timeline-content:hover {
    border-color: #777;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}