/* =============================================================================
   Utiliobox — Diagrama de Gantt
   Todo hereda de assets/css/utiliobox.css. Aquí solo lo propio del Gantt.

   La regla que gobierna este archivo: la fila de la tabla y la fila del
   dibujo miden EXACTAMENTE lo mismo (34 px, el mismo número que hay en
   tool-gantt.js). Si una de las dos cambia, a partir de la tercera fila la
   barra deja de corresponder con su tarea y el diagrama miente.
   ============================================================================= */

.gt { display: flex; flex-direction: column; }

/* --- Barra superior --- */
.gt__barra {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.gt__barra-izq { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
.gt__barra-der { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.gt__nombre {
  width: clamp(140px, 26vw, 280px); font-weight: var(--fw-semi);
  min-height: 34px; padding: var(--s-1) var(--s-3);
}
.gt__sep { width: 1px; height: 22px; background: var(--border-strong); margin-inline: var(--s-1); }
.gt__barra-der .btn span { white-space: nowrap; }

/* --- Panel desplegable de plantillas y calendario --- */
.gt__panel { border-bottom: 1px solid var(--border); background: var(--surface-sunken); }
.gt__cfg { display: grid; gap: var(--s-6); padding: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.gt__cfg-t { font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: 2px; }
.gt__cfg-d { font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: var(--s-3); }
.gt__dias { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gt__dia { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); cursor: pointer; }
.gt__dia input { accent-color: var(--accent); width: 15px; height: 15px; }
.gt__fest-alta { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.gt__fest-alta .input { min-width: 150px; }
.gt__fest { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gt__fest li {
  display: inline-flex; align-items: center; gap: var(--s-1); margin: 0;
  padding: 3px var(--s-1) 3px var(--s-3); border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-xs); font-family: var(--mono);
}
.gt__fest-vacio { border: 0; background: none; color: var(--ink-soft); font-family: var(--sans); padding-left: 0; }
.gt__fest-x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-full); color: var(--ink-soft); }
.gt__fest-x:hover { background: var(--danger-soft); color: var(--danger); }
.gt__fest-x svg { width: 12px; height: 12px; }

.gt__tpl { display: grid; gap: var(--s-3); padding: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.gt__tpl-b {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.gt__tpl-b:hover { border-color: var(--accent-border); box-shadow: var(--sh-sm); }
.gt__tpl-b b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.gt__tpl-b span { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.gt__tpl-b em { font-size: var(--fs-2xs); font-style: normal; color: var(--accent); font-weight: var(--fw-medium); }

/* --- Semáforo --- */
.gt__semaforo {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border);
}
.gt__semaforo:empty { display: none; }
.gt__chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px var(--s-3); border-radius: var(--r-full);
  font-size: var(--fs-xs); border: 1px solid transparent;
}
.gt__chip b { font-family: var(--mono); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.gt__chip--mal   { background: var(--danger-soft); color: var(--danger); }
.gt__chip--medio { background: var(--warn-soft);   color: var(--warn); }
.gt__chip--bien  { background: var(--accent-soft); color: var(--accent-hover); }
.gt__chip--hecho { background: var(--ok-soft);     color: var(--ok); }
.gt__chip--futura{ background: var(--surface-sunken); color: var(--ink-soft); }
.gt__chip--crit  { background: transparent; border-color: var(--border-strong); color: var(--ink-soft); }
.gt__chip.is-cero { opacity: .5; }

/* --- Cuerpo: tabla a la izquierda, dibujo a la derecha --- */
.gt__cuerpo {
  display: grid; grid-template-columns: minmax(340px, 46%) 1fr;
  height: clamp(360px, 58vh, 620px);
}
.gt__tabla-caja { overflow: auto; border-right: 1px solid var(--border); }
.gt__grafico { overflow: auto; background: var(--surface); }
/* El reinicio global pone `max-width: 100%` a todo svg, que es lo correcto
   para un icono y desastroso para esto: un dibujo de 2400 px se encoge al
   ancho del panel, el viewBox lo reescala a la cuarta parte y el cronograma
   aparece como una franja diminuta en medio del hueco. Aquí el dibujo tiene
   que conservar su ancho y desbordar: para eso el panel se desplaza. */
.gt__grafico svg { display: block; max-width: none; width: auto; }
.gt__grafico.is-arrastrando { cursor: grabbing; user-select: none; }

/* --- La tabla --- */
.gt__tabla { min-width: 560px; }
.gt__th, .gt__fila {
  display: grid; grid-template-columns: var(--gt-cols); align-items: center;
}
.gt__th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-soft);
}
.gt__th > * { padding-inline: var(--s-2); }
.gt__th-n { text-align: center; }

.gt__fila { border-bottom: 1px solid var(--border); background: var(--surface); }
.gt__fila:nth-child(odd of .gt__fila) { background: var(--surface); }
.gt__fila.is-sel { background: var(--accent-soft); }
.gt__n {
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-soft);
  text-align: center;
}
.gt__fila.is-critica .gt__n { color: var(--danger); font-weight: var(--fw-bold); }

.gt__c {
  width: 100%; min-width: 0; height: calc(100% - 6px); border: 1px solid transparent;
  background: transparent; color: var(--ink); font: inherit;
  font-size: var(--fs-sm); padding: 0 var(--s-2); border-radius: var(--r-xs);
}
.gt__c:hover { border-color: var(--border); }
.gt__c:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--sh-focus); }
.gt__c[readonly] { color: var(--ink-soft); font-style: italic; cursor: default; }
.gt__c[readonly]:hover { border-color: transparent; }
.gt__c--num, .gt__c--fecha { font-family: var(--mono); font-size: var(--fs-xs); }
.gt__c--num { text-align: center; }
.gt__c--nombre { font-weight: var(--fw-medium); }
/* Las flechitas del campo numérico roban la mitad del ancho útil */
.gt__c[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.gt__c[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gt__acc { display: grid; place-items: center; }
.gt__x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-xs); color: var(--ink-soft); }
.gt__x:hover { background: var(--danger-soft); color: var(--danger); }
.gt__x svg { width: 14px; height: 14px; }

/* --- Fila de fase --- */
.gt__fila--fase {
  grid-template-columns: 36px 1fr auto auto;
  background: var(--surface-sunken); font-size: var(--fs-xs);
  border-bottom: 1px solid var(--border);
}
.gt__plegar { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-soft); }
.gt__plegar svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.gt__plegar[aria-expanded="false"] svg { transform: rotate(-90deg); }
.gt__fase-n { font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt__fase-d { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-soft); padding-inline: var(--s-2); white-space: nowrap; }
.gt__fase-p { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-soft); padding-right: var(--s-3); }

.gt__alta { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); flex-wrap: wrap; }

/* --- Pie --- */
.gt__pie {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--ink-soft);
}
.gt__aviso { color: var(--warn); }
.gt__aviso:empty { display: none; }

/* --- Interacción sobre el dibujo --- */
#gt-grafico .gt-bar { cursor: grab; }
#gt-grafico .gt-bar:hover rect:first-child,
#gt-grafico .gt-bar:hover path { filter: brightness(1.08); }
#gt-grafico .gt-asa { cursor: ew-resize; }

/* En pantallas táctiles no hay ratón que arrastre con precisión: la tabla es
   la forma de editar, y se dice en la página en vez de dejar que lo descubran
   peleándose con una barra de tres píxeles. */
@media (hover: none) {
  #gt-grafico .gt-bar { cursor: default; }
}

/* --- Móvil: una mitad encima de la otra --- */
@media (max-width: 860px) {
  .gt__cuerpo { grid-template-columns: 1fr; height: auto; }
  .gt__tabla-caja { border-right: 0; border-bottom: 1px solid var(--border); max-height: 46vh; }
  .gt__grafico { max-height: 52vh; }
  .gt__barra { padding: var(--s-3); }
  .gt__nombre { width: 100%; }
  .gt__barra-der { width: 100%; }
  .gt__barra-der .btn span { display: none; }
  .gt__barra-der .btn { padding-inline: var(--s-2); }
  .gt__sep { display: none; }
}

/* --- Tablas de referencia de la parte de contenido --- */
.gt-refhead { margin-top: var(--s-8); margin-bottom: var(--s-3); font-size: var(--fs-lg); }
.gt-ref { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.gt-ref table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 480px; }
.gt-ref th, .gt-ref td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.gt-ref thead th { background: var(--surface-sunken); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.gt-ref tbody th { font-weight: var(--fw-semi); white-space: nowrap; }
.gt-ref tr:last-child th, .gt-ref tr:last-child td { border-bottom: 0; }
.gt-ref code { font-size: var(--fs-xs); }

/* Alto reservado de la tarjeta mientras el JavaScript la monta. Medido en el
   sitio, no estimado: sin esto la herramienta empuja al aparecer y eso es
   CLS en la primera pantalla. Si la herramienta cambia de tamaño, este
   número hay que volver a medirlo. */
#gt-tool { --alto-herramienta: 825px; }