{/* Líneas de semana */}
{weeks.map((d, i) =>
)}
{/* Marcador HOY */}
{todayOffset >= 0 && todayOffset <= totalDays && (
HOY
)}
{/* Fondos de fila */}
{rows.map((pp, i) => (
))}
{/* Barras de presupuesto por insumo */}
{rows.map((pp, i) => {
const c = ganttBarColor(pp.pct);
// Usar fechas del presupuesto si están definidas, si no usar el rango del proyecto
const barStart = pp.fecha_inicio || startISO;
const barEnd = pp.fecha_fin || endISO;
const barOffset = Math.max(0, daysBetween(effectiveStart, barStart));
const barDays = Math.max(1, daysBetween(barStart, barEnd));
const barLeft = barOffset * dayW;
const barWidth = barDays * dayW;
const fillW = (barWidth * Math.min(pp.pct, 100)) / 100;
// Pin de alerta en posición "hoy" relativa al inicio de la barra
const todayInBar = todayOffset - barOffset;
const pinTodayLeft = todayInBar >= 0 && todayInBar <= barDays
? Math.min(todayInBar * dayW, barWidth - 18) : null;
return (
openTooltip(pp, e)}
style={{
top: i * ROW_H + PAD_BARS,
left: barLeft,
width: barWidth,
height: ROW_H - PAD_BARS * 2,
background: c + "14",
borderColor: c + "66",
cursor: 'pointer'
}}>
{/* Fill: porcentaje ejercido */}
{/* Marcadores de umbral: 70%, 80%, 90%, 100% del ancho de la barra */}
{THRESHOLDS.map(th => {
const tickLeft = (barWidth * th) / 100;
const crossed = pp.pct >= th;
return (
{th}%
);
})}
{/* Etiqueta principal: % y montos */}
{pp.pct.toFixed(1)}%
${fmtMoney(pp.gastado, { compact: true })} / ${fmtMoney(pp.monto, { compact: true })}
{/* Pin de alerta automática en posición "hoy" (si supera umbral) */}
{pp.severidad && pinTodayLeft !== null && (
)}
{/* Alertas manuales asociadas a este insumo */}
{(alertas || []).filter(a => a.insumoid === pp.insumoid).map(a => {
const pinOffset = daysBetween(barStart, a.fecha);
const pinLeft = Math.max(0, Math.min(barWidth - 18, pinOffset * dayW));
return (
);
})}
);
})}