/* Seguimiento Ejecutivo 1.0.51 — Gantt Monday-inspired
   Corrección visual: cada nivel/estado usa UN solo tono (track + relleno).
   Proyecto = turquesa, Fase = morado, Actividad = color de estado.
   El porcentaje únicamente cambia la intensidad del mismo tono. */

.gantt-wrap,
.gantt-grid,
.gantt-left,
.gantt-right,
.gantt-bar,
.gantt-bar .bar-text,
.gantt-row .row-name,
.gantt-head,
.gantt-legend {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
  color: #323338;
}

/* Base común. Se usan propiedades explícitas para neutralizar estilos antiguos
   con background !important y evitar mezclas entre color de estado y jerarquía. */
body.portal-theme .gantt-timeline .gantt-bar {
  border-width: 1px !important;
  border-style: solid !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(50,51,56,.08) !important;
  overflow: hidden !important;
  color: #323338 !important;
}

/* PROYECTO: siempre turquesa. El estado NO cambia su familia cromática. */
body.portal-theme .gantt-timeline .gantt-bar.project,
body.portal-theme .gantt-timeline .gantt-bar.project.gray,
body.portal-theme .gantt-timeline .gantt-bar.project.blue,
body.portal-theme .gantt-timeline .gantt-bar.project.amber,
body.portal-theme .gantt-timeline .gantt-bar.project.red,
body.portal-theme .gantt-timeline .gantt-bar.project.green {
  background: rgba(0,184,217,.19) !important;
  background-color: rgba(0,184,217,.19) !important;
  background-image: none !important;
  border-color: rgba(0,184,217,.42) !important;
}
body.portal-theme .gantt-timeline .gantt-bar.project .bar-fill {
  background: #00b8d9 !important;
  background-color: #00b8d9 !important;
  opacity: .78 !important;
}

/* FASE: siempre morado. El estado NO cambia su familia cromática. */
body.portal-theme .gantt-timeline .gantt-bar.phase,
body.portal-theme .gantt-timeline .gantt-bar.phase.gray,
body.portal-theme .gantt-timeline .gantt-bar.phase.blue,
body.portal-theme .gantt-timeline .gantt-bar.phase.amber,
body.portal-theme .gantt-timeline .gantt-bar.phase.red,
body.portal-theme .gantt-timeline .gantt-bar.phase.green {
  background: rgba(162,93,220,.18) !important;
  background-color: rgba(162,93,220,.18) !important;
  background-image: none !important;
  border-color: rgba(162,93,220,.40) !important;
}
body.portal-theme .gantt-timeline .gantt-bar.phase .bar-fill {
  background: #a25ddc !important;
  background-color: #a25ddc !important;
  opacity: .76 !important;
}

/* ACTIVIDAD: misma lógica de track + relleno, pero la familia depende del estado. */
body.portal-theme .gantt-timeline .gantt-bar.activity.gray {
  background: rgba(196,196,196,.23) !important;
  background-color: rgba(196,196,196,.23) !important;
  background-image: none !important;
  border-color: rgba(151,156,166,.38) !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.gray .bar-fill {
  background: #b8bec9 !important;
  background-color: #b8bec9 !important;
  opacity: .82 !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.blue {
  background: rgba(87,155,252,.20) !important;
  background-color: rgba(87,155,252,.20) !important;
  background-image: none !important;
  border-color: rgba(87,155,252,.40) !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.blue .bar-fill {
  background: #579bfc !important;
  background-color: #579bfc !important;
  opacity: .82 !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.amber {
  background: rgba(253,171,61,.20) !important;
  background-color: rgba(253,171,61,.20) !important;
  background-image: none !important;
  border-color: rgba(253,171,61,.43) !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.amber .bar-fill {
  background: #fdab3d !important;
  background-color: #fdab3d !important;
  opacity: .84 !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.red {
  background: rgba(226,68,92,.18) !important;
  background-color: rgba(226,68,92,.18) !important;
  background-image: none !important;
  border-color: rgba(226,68,92,.40) !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.red .bar-fill {
  background: #e2445c !important;
  background-color: #e2445c !important;
  opacity: .82 !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.green {
  background: rgba(0,200,117,.18) !important;
  background-color: rgba(0,200,117,.18) !important;
  background-image: none !important;
  border-color: rgba(0,200,117,.40) !important;
}
body.portal-theme .gantt-timeline .gantt-bar.activity.green .bar-fill {
  background: #00c875 !important;
  background-color: #00c875 !important;
  opacity: .82 !important;
}

/* El fill ya recibe width: N% desde React. No se altera la lógica del avance. */
body.portal-theme .gantt-timeline .gantt-bar .bar-fill {
  box-shadow: none !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

/* Tipografía tipo tablero: compacta, sin exceso de peso. */
body.portal-theme .gantt-timeline .gantt-bar .bar-text {
  position: relative;
  z-index: 2;
  color: #323338 !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-shadow: none !important;
}
body.portal-theme .gantt-timeline .gantt-bar.project .bar-text { font-weight: 700 !important; }
body.portal-theme .gantt-timeline .gantt-bar.phase .bar-text { font-weight: 600 !important; }

/* Jerarquía de etiquetas del lado izquierdo. */
body.portal-theme .gantt-label.project .row-name {
  color: #323338 !important;
  font-weight: 700 !important;
  letter-spacing: -.012em !important;
}
body.portal-theme .gantt-label.phase .row-name {
  color: #6f3fa3 !important;
  font-weight: 600 !important;
  letter-spacing: -.008em !important;
}
body.portal-theme .gantt-label.activity .row-name {
  color: #676879 !important;
  font-weight: 500 !important;
}

body.portal-theme .gantt-timehead,
body.portal-theme .gantt-timehead span,
body.portal-theme .gantt-corner {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
  color: #676879 !important;
  font-weight: 500 !important;
}

/* 1.0.52 — navegación por arrastre del Gantt.
   Permite desplazar la línea de tiempo con una mano (cursor grab) sin depender
   de encontrar la barra horizontal. No cambia fechas, barras ni cálculos. */
body.portal-theme .gantt-scroll {
  cursor: grab !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
body.portal-theme .gantt-scroll.gantt-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}
body.portal-theme .gantt-scroll.gantt-dragging * {
  user-select: none !important;
}
/* Controles y elementos interactivos conservan su cursor normal. */
body.portal-theme .gantt-scroll button,
body.portal-theme .gantt-scroll input,
body.portal-theme .gantt-scroll select,
body.portal-theme .gantt-scroll textarea,
body.portal-theme .gantt-scroll a {
  cursor: pointer !important;
}