/* ============================================================
   CiberGantt — Vista Gantt: panel de tareas + cronograma
   Los dos paneles se desplazan sincronizados, así que su
   geometría debe coincidir exactamente:
   · misma altura de contenido (el pie "Agregar grupo" queda FUERA)
   · mismo canal de scrollbar (11px reservados a la izquierda)
   · una sola barra vertical visible (la izquierda va oculta)
   ============================================================ */

.cg-gantt { height: 100%; }
.cg-gantt__panes { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* ---------- Panel izquierdo ---------- */
.cg-left {
  flex: none;
  width: var(--cg-left-w);
  border-right: 2px solid var(--cg-bord2);
  display: flex;
  flex-direction: column;
  background: var(--cg-surface);
  overflow: hidden;
}
.cg-left.is-compact { width: var(--cg-left-w-compact); }

.cg-left__head {
  flex: none;
  display: flex;
  align-items: center;
  height: var(--cg-head-h);
  border-bottom: 1px solid var(--cg-border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cg-t2);
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--cg-surface2);
}

.cg-left__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--cg-scrollbar); /* iguala el canal de la barra horizontal derecha */
}

/* Columnas — idénticas en cabecera y filas */
.cg-c-check { width: 52px; flex: none; display: flex; align-items: center; justify-content: center; gap: 2px; }
.cg-c-name { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; padding-right: 6px; }
.cg-c-badges { width: 74px; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 8px; }
.cg-c-people { width: 120px; flex: none; display: flex; align-items: center; }
.cg-c-progress {
  width: 90px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-right: 14px;
  font-size: 12px;
  color: var(--cg-t2);
  font-weight: 600;
}
.cg-left__head .cg-c-progress { text-align: right; }
/* En compacto se ocultan las columnas laterales */
.cg-left.is-compact .cg-c-badges,
.cg-left.is-compact .cg-c-people,
.cg-left.is-compact .cg-c-progress { display: none; }

.cg-lrow {
  display: flex;
  align-items: center;
  height: var(--cg-row-h);
  border-bottom: 1px solid var(--cg-border);
  cursor: pointer;
}
.cg-lrow--group { background: var(--cg-surface2); cursor: default; }
.cg-lrow.is-selected { background: var(--cg-blue-s); }
.cg-lrow.is-highlighted { background: var(--cg-orange-s); }

.cg-lrow__caret {
  background: none;
  border: none;
  color: var(--cg-t2);
  padding: 4px;
  display: flex;
}
.cg-lrow__caret i { font-size: 10px; }

.cg-lrow__type { font-size: 12px; flex: none; }

.cg-lrow__star {
  background: none;
  border: none;
  padding: 2px 3px;
  flex: none;
  font-size: 11px;
  color: var(--cg-t3);
}
.cg-lrow__star.is-on { color: var(--cg-orange); }

.cg-lrow__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--cg-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.cg-lrow--group .cg-lrow__name {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: text;
}
.cg-lrow__name.is-done { color: var(--cg-t2); }

.cg-lrow__edit {
  flex: 1;
  border: 1px solid var(--cg-blue);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 13px;
  background: var(--cg-surface);
  color: var(--cg-text);
  min-width: 0;
}

.cg-lrow__count { font-size: 10.5px; font-weight: 700; color: var(--cg-t3); flex: none; }

.cg-lrow__add {
  background: none;
  border: none;
  color: var(--cg-t3);
  padding: 3px 5px;
  flex: none;
  font-size: 11px;
}
.cg-lrow__add:hover { color: var(--cg-orange); }

.cg-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--cg-t3);
  font-weight: 700;
}

.cg-left__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cg-surface);
  border: none;
  border-top: 1px solid var(--cg-border);
  color: var(--cg-t2);
  font-size: 12.5px;
  text-align: left;
}
.cg-left__foot:hover { color: var(--cg-blue); background: var(--cg-surface2); }
.cg-left__foot i { width: 14px; }

/* ---------- Panel derecho (cronograma) ---------- */
.cg-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.cg-timehead {
  flex: none;
  height: var(--cg-head-h);
  overflow: hidden;
  border-bottom: 1px solid var(--cg-border);
  background: var(--cg-surface2);
  position: relative;
}
.cg-timehead__inner { position: relative; height: var(--cg-head-h); }

.cg-th-month,
.cg-th-week,
.cg-th-day {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--cg-border);
  overflow: hidden;
  white-space: nowrap;
}
.cg-th-month { top: 0; height: 22px; font-weight: 800; font-size: 12px; }
.cg-th-week { top: 22px; height: 18px; font-size: 9.5px; font-weight: 700; color: var(--cg-t3); }
.cg-th-day {
  top: 40px;
  height: 28px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cg-t2);
  font-variant-numeric: tabular-nums;
}
.cg-th-day.is-tight { font-size: 9.5px; }
.cg-th-day.is-weekend { color: var(--cg-t3); }
.cg-th-day.is-monday { border-left-color: var(--cg-bord2); }
.cg-th-day.is-today { background: var(--cg-blue); color: #fff; font-weight: 800; }

.cg-timebody { flex: 1; overflow: auto; position: relative; }
.cg-timebody__inner { position: relative; }

.cg-shade { position: absolute; top: 0; height: 100%; pointer-events: none; }
.cg-shade--weekend { background: var(--cg-wknd); }
.cg-shade--holiday { background: var(--cg-hol); }

.cg-deps { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.cg-dep { fill: none; stroke: var(--cg-t3); stroke-width: 1.5; }
.cg-dep.is-critical { stroke: var(--cg-orange); stroke-width: 2.5; }
.cg-dep--ghost { stroke: var(--cg-orange); stroke-width: 2; stroke-dasharray: 4 3; }

.cg-rrow {
  position: absolute;
  left: 0;
  height: var(--cg-row-h);
  border-bottom: 1px solid var(--cg-grid2);
}
.cg-rrow--group { background: color-mix(in srgb, var(--cg-surface2) 60%, transparent); }

.cg-groupbar {
  position: absolute;
  top: calc((var(--cg-row-h) - 10px) / 2);
  height: 10px;
  border-radius: 5px;
  opacity: .85;
}

/* Barra de tarea */
.cg-bar {
  position: absolute;
  top: calc((var(--cg-row-h) - var(--cg-bar-h)) / 2);
  height: var(--cg-bar-h);
  border-radius: 4px;
  cursor: grab;
}
.cg-bar.is-critical { outline: 2px solid var(--cg-orange); outline-offset: 1px; }
.cg-bar__fill { height: 100%; border-radius: 3px; pointer-events: none; }
.cg-bar__label {
  position: absolute;
  left: 8px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cg-bar__pct {
  position: absolute;
  right: 7px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  pointer-events: none;
}
.cg-bar__grip {
  position: absolute;
  top: 0;
  width: 7px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
}
.cg-bar__grip--l { left: 0; }
.cg-bar__grip--r { right: 0; }
.cg-bar__link {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cg-surface);
  cursor: crosshair;
  border: 2px solid currentColor;
}

.cg-milestone {
  position: absolute;
  top: calc((var(--cg-row-h) - 16px) / 2);
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-radius: 2px;
  cursor: grab;
  box-shadow: var(--cg-shadow2);
}
.cg-milestone.is-critical { outline: 2px solid var(--cg-orange); outline-offset: 2px; }

.cg-bar-meta,
.cg-milestone-label {
  position: absolute;
  top: 0;
  height: var(--cg-row-h);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  pointer-events: none;
}
.cg-bar-meta__names { font-size: 11px; color: var(--cg-t2); font-weight: 600; }
.cg-milestone-label { font-size: 11px; font-weight: 700; color: var(--cg-text); }
.cg-bar-meta .cg-avatar { width: 20px; height: 20px; font-size: 9px; margin-left: -5px; border: 2px solid var(--cg-surface); }

/* Línea de HOY */
.cg-today {
  position: absolute;
  top: 0;
  width: 2px;
  background: var(--cg-blue);
  pointer-events: none;
  z-index: 5;
}
.cg-today__flag {
  position: absolute;
  top: 0;
  left: -15px;
  background: var(--cg-blue);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 0 0 3px 3px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .05em;
}