/* ══════════════════════════════════════════
   CRONOGRAMA DE INICIATIVAS · Digital Core
   Mismo lenguaje en Portfolio IA (una fila por fase) y Portfolio Data (una fila
   por iniciativa): sin desvío, una barra maciza del alto de las dos; con
   desvío, dos barras finas (planificada arriba, atenuada; real/vigente abajo),
   el desvío en días al final y la línea discontinua de «hoy».
   Color de la barra: --bar-color (o el color del estado de la app).
══════════════════════════════════════════ */

.g2-row.timeline-row { min-height: 42px; }
.g2-row.timeline-row.is-first { border-top: 1px solid var(--border2); }
.timeline-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.timeline-name .g2-title { overflow: hidden; text-overflow: ellipsis; }
.timeline-sub { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--text2); }
.timeline-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--bar-color, var(--bd-color, var(--sc, var(--accent)))); }

.timeline-bar { position: absolute; height: 8px; border-radius: 3px; box-sizing: border-box; background: var(--bar-color, var(--bd-color, var(--sc, var(--accent)))); }
.timeline-bar-plan { top: 11px; }
.timeline-bar-plan.is-faded { opacity: .38; }
.timeline-bar-real { top: 23px; }
.timeline-bar-real.is-solid { top: 11px; height: 20px; }
.timeline-bar-real.is-overdue { box-shadow: inset -3px 0 0 var(--red); }
.timeline-bar-real.is-warn { outline: 2px solid var(--red); outline-offset: 1px; }

.timeline-dev { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 8px; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; font-weight: 600; pointer-events: none; }
.timeline-dev .is-late { color: var(--red); }
.timeline-dev .is-early { color: var(--green); }

.timeline-body { position: relative; }
.timeline-today-layer { position: absolute; top: 0; bottom: 0; left: 250px; pointer-events: none; }
.timeline-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed color-mix(in srgb, var(--red) 70%, transparent); }
@media (max-width: 768px) {
  .timeline-today-layer { display: none; }
}

/* Leyenda (debajo del cronograma). */
.timeline-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 12px; color: var(--text2); }
.timeline-legend span { display: inline-flex; align-items: center; gap: 6px; }
.timeline-legend i { display: inline-block; }
.timeline-legend-solid, .timeline-legend-dual { width: 24px; height: 16px; border-radius: 2px; }
.timeline-legend-solid { background: var(--text3); }
.timeline-legend-dual { background: linear-gradient(to bottom, color-mix(in srgb, var(--text3) 38%, transparent) 0 7px, transparent 7px 9px, var(--text3) 9px 16px); }
.timeline-legend-plan, .timeline-legend-real { width: 24px; height: 7px; border-radius: 2px; background: var(--text3); }
.timeline-legend-plan { opacity: .38; }
.timeline-legend-dev { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--red); }
.timeline-legend-today { width: 0; height: 14px; border-left: 2px dashed color-mix(in srgb, var(--red) 70%, transparent); }
.timeline-legend-warn { width: 22px; height: 10px; border-radius: 3px; background: var(--bg3); outline: 2px solid var(--red); outline-offset: -2px; }
.timeline-legend-hito { width: 9px; height: 9px; transform: rotate(45deg); background: var(--task-hito); border-radius: 2px; }