:root {
  --bar-color: #fff;
  --bar-color-important: #94c4f4;
  --bar-stroke: #fff;
  --dark-stroke-color: #e0e0e0;
  --stroke-color: #ebeef0;
  --light-bg: #f5f5f5;
  --light-border-color: #ebeff2;
  --light-yellow: #f6e796;
  --holiday-color: #f9fafa;
  --text-muted: #666;
  --text-grey: #98a1a9;
  --text-light: #fff;
  --text-dark: #111;
  --progress: #ebeef0;
  --handle-color: #dcdce4;
  --handle-color-important: #94c4f4;
  --light-blue: #c4c4e9;
  --middle-blue: #62b2f9;
  --dark-blue: #2c94ec;
}
.gantt-container {
  line-height: 14.5px;
  position: relative;
  /* overflow-y: hidden; */
  overflow: hidden;
  font-size: 12px;
  height: 100%;
  overflow: hidden;  /* Ocultamos las barras de scroll */
  white-space: nowrap;  /* Asegura que el contenido no se envuelva */
  position: relative;
}
.gantt-container {
  overflow: hidden;  /* Ocultamos las barras de scroll */
  position: relative;
  cursor: grab;
}

.gantt-container.active {
  cursor: grabbing;
}
.gantt-container .popup-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background: #171b1f;
  padding: 10px;
  border-radius: 5px;
  width: max-content;
  z-index: 9;
}
.gantt-container .popup-wrapper.hidden {
  opacity: 0 !important;
}
.gantt-container .popup-wrapper .title {
  margin-bottom: 5px;
  text-align: -webkit-center;
  text-align: center;
  color: var(--text-light);
}
.gantt-container .popup-wrapper .subtitle {
  color: var(--text-grey);
}
.gantt-container .popup-wrapper .pointer {
  position: absolute;
  height: 5px;
  margin: 0 0 0 -5px;
  border: 5px solid transparent;
  border-bottom-color: #000c;
}
.gantt-container .grid-header {
  background-color: #fff;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}
.gantt-container .lower-text,
.gantt-container .upper-text {
  text-anchor: middle;
  color: var(--text-dark);
}
.gantt-container .upper-header {
  /* height: 40px; */
}
.gantt-container .lower-header {
  /* height: 30px; */
}
.gantt-container .lower-text {
  font-size: 14px;
  position: absolute;
  width: fit-content;
  transform: translate(-50%);
}
.gantt-container .upper-text {
  position: absolute;
  width: fit-content;
  font-weight: 500;
  font-size: 16px;
}
.gantt-container .current-upper {
  position: fixed;
}
.gantt-container .side-header {
  position: fixed;
  padding: 0 10px;
  margin-right: 10px;
  background: #fff;
  line-height: 20px;
  font-weight: 400;
}
.gantt-container .today-button,
.gantt-container .viewmode-select {
  background: #f4f5f6;
  text-align: -webkit-center;
  text-align: center;
  border: none;
  color: var(--text-dark);
  padding: 4px 10px;
  border-radius: 8px;
  height: 25px;
}
.gantt-container .viewmode-select {
  outline: none !important;
  padding: 4px 8px;
  margin-right: 4px;
  text-indent: 1px;
  text-overflow: "";
}
.gantt-container .date-highlight {
  background-color: var(--progress);
  border-radius: 12px;
  position: absolute;
  display: none;
}
.gantt-container .current-highlight {
  position: absolute;
  background: var(--dark-blue);
  width: 3px;
}
/* .gantt-container .current-highlight:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 50px;
  top: -6px;
  right: -5px;
  z-index: 99;
  background: var(--dark-blue);
} */
.gantt-container .current-date-highlight {
  /* background: var(--dark-blue);
  color: var(--text-light);
  
  border-radius: 200px; */
  padding: 4px 8px;
}
/* .gantt-container .current-date-highlight::before,
.gantt-container .deadline-date-highlight::before {
  content: '';
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    border-radius: 50px;
    bottom: -17px;
    left: calc(50% + 1px);
    transform: translateX(-50%);
    z-index: 99;
    background: var(--dark-blue);
} */
.gantt-container .current-highlight.deadline {
  background: #ff5b52;
}
.gantt-container .deadline-date-highlight {
}
/* .gantt-container .deadline-date-highlight::before {
  bottom: -20px;
  left: calc(50% + 1.5px);
  background: #ff5b52;
} */
.gantt {
  user-select: none;
  -webkit-user-select: none;
  position: absolute;
  max-height: 100%;
}
.gantt .grid-background {
  fill: none;
}
.gantt .grid-row {
  fill: #fff;
}
.gantt .row-line {
  stroke: var(--light-border-color);
}
.gantt .tick {
  stroke: var(--stroke-color);
  stroke-width: 0.4;
}
.gantt .tick.thick {
  stroke: var(--dark-stroke-color);
  stroke-width: 0.7;
}
.gantt .holiday-highlight {
  fill: var(--holiday-color);
}
.gantt .arrow {
  fill: none;
  stroke: #9fa9b1;
  stroke-width: 1;
}
.gantt .bar-wrapper .bar {
  fill: var(--bar-color);
  stroke: var(--bar-stroke);
  stroke-width: 0;
  transition: stroke-width 0.3s ease;
}
.gantt .bar-progress {
  fill: var(--progress);
}
.gantt .bar-expected-progress {
  fill: var(--light-blue);
}
.gantt .bar-invalid {
  fill: transparent;
  stroke: var(--bar-stroke);
  stroke-width: 1;
  stroke-dasharray: 5;
}
:is(.gantt .bar-invalid) ~ .bar-label {
  fill: var(--text-light);
}
.gantt .bar-label {
  fill: var(--text-dark);
  dominant-baseline: central;
  font-family: Helvetica;
  font-size: 13px;
  font-weight: 400;
}
.gantt .bar-label.big {
  fill: var(--text-dark);
  text-anchor: start;
}
.gantt .bar-wrapper.important .bar {
  fill: var(--bar-color-important);
}
.gantt .bar-wrapper.important .bar-progress {
  fill: var(--dark-blue);
}
.gantt .bar-wrapper.important .bar-label {
  fill: var(--text-light);
}
.gantt .bar-wrapper.important .handle {
  fill: var(--handle-color-important);
}
.gantt .bar-wrapper.important .handle.progress {
  fill: var(--text-light);
}
.gantt .handle {
  fill: var(--handle-color);
  cursor: ew-resize;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.gantt .handle.progress {
  fill: var(--text-muted);
}
.gantt .bar-wrapper {
  cursor: pointer;
}
.gantt .bar-wrapper.active .handle {
  visibility: visible;
  opacity: 1;
}
.gantt .bar-wrapper .bar {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));
  border-radius: 3px;
}
.gantt .bar-wrapper .bar.safari {
  outline: 1px solid black;
}
.gantt .bar-wrapper:hover .bar {
  transition: transform 0.3s ease;
}
.gantt .bar-wrapper:hover .date-highlight {
  display: block;
}
.gantt .hide {
  display: none;
}

/* Custom CSS Gantt */

.gantt-container .grid-header {
  background-color: #1d2c37;
}
.gantt-container .upper-text,
.gantt-container .lower-text {
  color: #fff;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}

.gantt-container .upper-text {
  font-size: 18px;
}

.gantt-container .lower-text {
  font-size: 16px;
}

.gantt-container .current-date-highlight {
    transform: translate(-25%);
  }

.gantt-container .side-header {
  background-color: #1d2c37;
  padding: 0 10px;
}

.gantt-container .today-button {
  background-color: var(--mantine-color-blue-filled);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  padding: 14px 20px;
}

.gantt-container .grid .grid-row:nth-child(odd) {
  fill: #f9f9f9;
}

.gantt-container .grid .grid-row:nth-child(even) {
  fill: #f2f2f2;
}

.gantt .holiday-highlight {
  fill: url(#hatchPattern); /* Usamos el patrón definido en el SVG */
  position: relative;
}

.gantt .bar-progress {
  fill: transparent;
}

.gantt .bar-wrapper.active .handle {
  /* visibility: hidden; */
}

.gantt .bar-label {
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  fill: #fff;
}

.gantt .bar-wrapper .bar {
  border-radius: 4px;
  filter: none;
}

.gantt .bar-wrapper.active .bar {
  stroke-width: 2px;
}



.gantt .bar-wrapper.en-progreso .bar {
  fill: #ffc852;
}

.gantt .bar-wrapper.en-progreso .handle{
    fill: #ffe4a9;
}

.gantt .bar-wrapper.en-progreso.active .bar {
  stroke: #cca042;
}

.gantt .bar-wrapper.pendiente-comprobacion .bar {
  fill: #228be6; /* Color base */
}

.gantt .bar-wrapper.pendiente-comprobacion .handle {
  fill: #6bb8f3; /* Color más claro para el handle */
}

.gantt .bar-wrapper.pendiente-comprobacion.active .bar {
  stroke: #1a6fb2; /* Color más oscuro para el borde activo */
}

.gantt .bar-wrapper.necesita-correccion  .bar {
  fill: #ff5b52;
}

.gantt .bar-wrapper.necesita-correccion  .handle{
    fill: #ff9d97;
}

.gantt .bar-wrapper.necesita-correccion .active .bar {
  stroke: #b34039;
}

.gantt .bar-wrapper.validado .bar {
  fill: #30d89c;
}

.gantt .bar-wrapper.validado .handle{
    fill: #98ecce;
}

.gantt .bar-wrapper.validado.active .bar {
  stroke: #1c966b;
}

.gantt .bar-wrapper.deshabilitado .bar {
    fill: #cccccc;
  }
  
  .gantt .bar-wrapper.deshabilitado.active .bar {
    stroke: #8f8f8f;
  }

.gantt .bar-wrapper.empty {
  display: none;
}

.gantt .handle.progress {
    display: none;
}

.gantt .tick {
  stroke: #e5e5e5;
  stroke-width: 2px;
}

.gantt .row-line {
  stroke: none;
}

.gantt-container .date-highlight {
    background-color: var(--mantine-color-blue-filled);
    border-radius: 4px;
}