:root {
    --color-brand-green: #2A9D8F;      
    --color-standalone-blue: #007BFF;
    --color-selected-border: #4A4A4A;
    --color-text-primary: #383838;   
    --color-text-secondary: #7A7A7A; 
    --bg-main: #FAF8F5;             
    --bg-panel: #FFFFFF;            
    --bg-neutral: #EAE8E4;          
    --color-pending: #BDBDBD; /* Ligeramente más claro */
    
    /* --- NUEVA LÓGICA DE COLORES --- */
    --color-completed-past: var(--color-brand-green);      /* Verde para lo antiguo */
    --color-completed-recent: var(--color-standalone-blue);/* Azul para lo reciente */
    
    --shadow: 0 8px 15px -3px rgba(0,0,0,0.04), 0 4px 6px -2px rgba(0,0,0,0.03);
    --shadow-lg: 0 20px 25px -5px rgba(56, 56, 56, 0.08), 0 10px 10px -5px rgba(56, 56, 56, 0.04);
}

body { 
    font-family: 'Manrope', sans-serif; 
    background-color: var(--bg-main); 
    color: var(--color-text-primary); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    padding: 2.5rem; 
    box-sizing: border-box; 
    margin: 0;
}

.main-wrapper { 
    display: flex; 
    width: 1500px; 
    max-width: 100%; 
    height: 850px; 
    background-color: var(--bg-panel); 
    border-radius: 24px; 
    box-shadow: var(--shadow-lg); 
    overflow: hidden; 
    border: 1px solid var(--bg-neutral); 
}

.dashboard-panel { width: 38%; padding: 2.5rem; display: flex; flex-direction: column; border-right: 1px solid var(--bg-neutral); }
.project-header { text-align: left; margin-bottom: 2rem; display: flex; align-items: center; gap: 15px; }
.project-logo { height: 70px; width: 70px; object-fit: contain; }
.project-header-text h1 { font-size: 1.8em; font-weight: 800; color: var(--color-text-primary); margin: 0; line-height: 1.2; }
.project-header-text p { font-size: 1em; color: var(--color-text-secondary); margin: 0; }

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.kpi-card { background-color: var(--bg-main); padding: 1.25rem; border-radius: 12px; border: 1px solid var(--bg-neutral); }
.kpi-card-title { font-size: 0.9em; color: var(--color-text-secondary); margin: 0 0 8px 0; font-weight: 600;}
.kpi-card-value { font-size: 1.75em; font-weight: 800; color: var(--color-text-primary); margin: 0; }

.progress-bar-container { width: 100%; background-color: var(--bg-neutral); border-radius: 8px; height: 12px; overflow: hidden; }
#progress-bar { width: 0%; height: 100%; background: var(--color-completed-past); /* Usa el color verde de consolidado */ border-radius: 8px; transition: width 0.5s ease-out; }

.milestone-details { flex-grow: 1; display: flex; flex-direction: column; position: relative; }
.details-content { animation: fadeInDetails 0.6s ease-out; }
@keyframes fadeInDetails { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.milestone-details h3 { font-size: 1.5em; margin-bottom: 10px; font-weight: 800; color: var(--color-text-primary); }
.milestone-details p { font-size: 1em; line-height: 1.6; color: var(--color-text-secondary); flex-grow: 1; }
#image-container { width: 100%; height: 250px; background-color: var(--bg-neutral); border-radius: 12px; overflow: hidden; margin-top: 1rem; }
#image-container img { width: 100%; height: 100%; object-fit: cover; }

.roadmap-panel { width: 62%; position: relative; }
.svg-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
/* --- NUEVA LÓGICA DE CAMINOS --- */
#path-casing { fill: none; stroke: var(--bg-neutral); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
#path-background { fill: none; stroke: #E5E7EB; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
#dynamic-path-segments path { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke 0.4s ease; } /* Estilos para los segmentos */

.milestone {
    position: absolute; width: 44px; height: 44px; background-color: white; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; cursor: pointer; transform: translate(-50%, -50%);
    border: 3px solid; transition: all 0.3s ease; z-index: 10; padding: 0; font: inherit; box-shadow: var(--shadow);
}
.milestone:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 100; }
.milestone.selected { border-color: var(--color-selected-border); box-shadow: 0 0 0 4px var(--color-selected-border); }
.milestone i { font-size: 1.3em; transition: color 0.3s; }

.tooltip { 
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -150%); background-color: var(--color-text-primary); 
    color: white; padding: 8px 14px; border-radius: 8px; font-size: 0.9em; font-weight: 600; white-space: nowrap; 
    opacity: 0; transition: all 0.3s ease; pointer-events: none; z-index: 99; box-shadow: var(--shadow); 
}
.milestone:hover .tooltip, .milestone:focus .tooltip { opacity: 1; transform: translate(-50%, -140%); }
.tooltip::after { 
    content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; 
    border-style: solid; border-color: var(--color-text-primary) transparent transparent transparent; 
}

/* --- NUEVA LÓGICA DE ESTADOS DE HITOS --- */
.milestone[data-status="pending"] { border-color: var(--bg-neutral); }
.milestone[data-status="pending"] i { color: var(--color-pending); }
.milestone[data-status="completed_past"] { border-color: var(--color-completed-past); }
.milestone[data-status="completed_past"] i { color: var(--color-completed-past); }
.milestone[data-status="completed_recent"] { border-color: var(--color-completed-recent); animation: pulse-glow-blue 2s infinite; }
.milestone[data-status="completed_recent"] i { color: var(--color-completed-recent); }

@keyframes pulse-glow-blue { 0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); } 70% { box-shadow: 0 0 0 16px rgba(0, 123, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); } }

/* Responsividad (sin cambios) */
@media (max-width: 1300px) { body { padding: 1rem; align-items: flex-start; } .main-wrapper { flex-direction: column; height: auto; width: 100%; max-width: 800px; } .dashboard-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--bg-neutral); padding: 2rem; box-sizing: border-box; } .roadmap-panel { width: 100%; padding: 2rem; box-sizing: border-box; height: auto; aspect-ratio: 1 / 0.9; } }
@media (max-width: 600px) { body { padding: 0; } .main-wrapper { border-radius: 0; border: none; } .dashboard-panel, .roadmap-panel { padding: 1.5rem; } .project-header { flex-direction: column; align-items: flex-start; } .kpi-grid { grid-template-columns: 1fr; } .kpi-card[style] { grid-column: auto; } }

/* --- ESTILOS PARA LA FECHA DEL HITO --- */
.milestone-date {
    position: absolute;
    top: 105%; /* Justo debajo del círculo del hito */
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    border: 1px solid var(--bg-neutral);
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Fecha para hitos PENDIENTES (Estimación) */
.milestone[data-status="pending"] .milestone-date {
    color: var(--color-text-secondary);
    font-weight: 500; /* Tipografía más ligera */
    font-style: italic;
    border-style: dashed; /* Borde punteado para sugerir flexibilidad */
}

/* Fecha para hitos COMPLETADOS (Hecho histórico) */
.milestone[data-status="completed_recent"] .milestone-date,
.milestone[data-status="completed_past"] .milestone-date {
    color: var(--color-text-primary);
    font-weight: 700; /* Tipografía más sólida y clara */
    background-color: white;
}