/* Gantt — plan estratégico (proyecto › grupo › sesión / hito) */

/* The body grid has no explicit row height, so the single row is auto-sized.
   With the Gantt's deep flex nesting (#main → #list-view → .plan-view →
   .plan-chart-scroll) Safari sizes that row from content instead of the
   viewport, leaving the whole app (sidebar included) short of the bottom.
   Pin the row to the viewport so the column heights are definite again.
   Scoped to the Gantt view — other views don't hit the bug. */
body.view-plan {
  grid-template-rows: 100vh;
}

/* Sin barra de captura: solo el botón › flotante (evita la raya del borde). */
body.view-plan #capture {
  border-bottom: none;
  padding: 0;
  min-height: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  background: transparent;
}
body.view-plan #capture::before,
body.view-plan #capture-input,
body.view-plan #capture-hint {
  display: none !important;
}
body.view-plan #detail-toggle {
  pointer-events: auto;
  top: 14px;
  right: 22px;
  z-index: 30;
}
body.view-plan #list-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* No bottom padding so the chart reaches the bottom of the window; the right
     margin (36px) is intentional and kept. */
  padding: 20px 36px 0;
}

.plan-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}
/* Con comentarios: #list-view pasa a scrollear (como un blog), el Gantt ocupa
   una pantalla completa con su scroll interno, y los comentarios quedan debajo
   del pliegue, alcanzables haciendo scroll de la página. */
body.view-plan #list-view.plan-has-comments { overflow-y: auto; }
/* El Gantt deja asomar SOLO la cabecera "Comentarios (N)" abajo; se hace scroll
   de la página para ver los comentarios y el campo de escribir. */
body.view-plan #list-view.plan-has-comments .plan-view {
  flex: 0 0 auto;
  height: calc(100% - 54px);
}

/* Cabecera: título arriba (hueco para ›), controles debajo de la línea */
.plan-view-header {
  flex: 0 0 auto;
  margin-bottom: 16px;
}

.plan-view-header .plan-title-row {
  padding-right: 52px;
}

.plan-view-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid var(--line, #E0E0DC);
  max-width: 100%;
}

.plan-view-toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  width: 100%;
}

.plan-gantt-scale-wrap {
  margin-top: 4px;
}



.plan-gantt-scale-zoom-hint {
  font-size: 8px;
  color: var(--ink-4, #AAA);
  margin-left: 2px;
}

.plan-gantt-scale-note {
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3, #888);
  margin: 10px 0 0;
}

/* Centrado en el MEDIO de la celda del día (no en su inicio): +medio día, para
   que el número/letra no caiga sobre la línea de separación de mes. */
.plan-scale-weekday .plan-chart-tick {
  font-size: 7px;
  letter-spacing: 0;
  transform: none;
  padding-left: 0;
  box-sizing: border-box;
  text-align: center;
}

.plan-scale-day .plan-chart-tick {
  font-size: 7px;
  min-width: 0;
  transform: none;
  padding-left: 0;
  box-sizing: border-box;
  text-align: center;
}

/* The base tick has padding-top:8px (for tall rows); the short week/weekday/day
   scales inherit it and end up pushed down. Pull them back up. */
.plan-scale-week .plan-chart-tick,
.plan-scale-weekday .plan-chart-tick,
.plan-scale-day .plan-chart-tick {
  padding-top: 2px;
}

/* Alta en cabecera (mismo patrón que Lista / Kanban / Mes) */
.plan-create-mode {
  flex-wrap: wrap;
  row-gap: 4px;
}

.plan-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line, #E0E0DC);
  flex-shrink: 0;
}

.plan-detail-close,
.plan-chrome-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line, #E0E0DC);
  border-radius: 50%;
  background: var(--paper, #FAFAF8);
  color: var(--ink-3, #888);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plan-detail-close:hover {
  color: var(--ink, #1A1A1A);
  border-color: var(--ink-3, #888);
}

.plan-detail-header-hint {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4, #AAA);
}

.plan-view-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-project-select {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--ink-3, #888);
  cursor: pointer;
}

.plan-project-select:hover,
.plan-project-select:focus {
  color: var(--ink-2, #555);
  border-bottom-color: var(--line, #E0E0DC);
  outline: none;
}

.plan-meta-edit {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  background: none;
  color: var(--ink-3, #888);
  cursor: pointer;
  padding: 0;
}

.plan-meta-edit:hover {
  color: var(--ink, #1A1A1A);
  text-decoration: underline;
}

.plan-detail-compose {
  padding: 8px 0;
}

.plan-compose-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}

.plan-compose-btn {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  border: none;
  background: none;
  color: var(--ink-3, #888);
  cursor: pointer;
  padding: 6px 0;
}

.plan-compose-btn:hover {
  color: var(--ink, #1A1A1A);
}

.plan-empty-actions .plan-compose-btn {
  margin-top: 12px;
}

.plan-btn-primary {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--ink, #1A1A1A);
  background: none;
  color: var(--ink, #1A1A1A);
  cursor: pointer;
}

/* —— Chart —— */
.plan-chart-scroll {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  margin-top: 8px;
  overflow: auto;
  background: var(--paper, #FAFAF8);
}

.plan-chart {
  position: relative;
  /* Fill at least the scroll width so the grid never sits in a box narrower
     than the viewport; grow past 100% when the timeline needs more days
     (→ horizontal scroll). Height is intentionally left to the content: a
     min-height:100% here made the chart taller than its rows and, with the
     horizontal scrollbar present, left an empty band you could scroll into. */
  min-width: max(100%, 560px, calc(var(--plan-total-days, 90) * var(--plan-px-per-day, 11px)));
}

.plan-chart-row {
  display: grid;
  grid-template-columns: minmax(148px, min(220px, 32vw)) 1fr;
  min-height: 34px;
  border-bottom: 1px solid var(--line, #F0F0EC);
  position: relative;
  /* No `isolation: isolate`: the sticky name column (z-index:30) must sit above
     the dependency-arrows layer (z-index:6) so arrows stay behind the names on
     horizontal scroll; the track keeps its own z-index:0 so bars stay below. */
}

.plan-chart-head {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--paper, #FAFAF8);
  min-height: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--line-strong, #D2D2CD);
}

.plan-chart-head .plan-chart-label {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  padding: 10px 12px;
  position: sticky;
  left: 0;
  z-index: 12;
  background: var(--paper, #FAFAF8);
  border-right: 1px solid var(--line-strong, #D2D2CD);
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.06);
}

.plan-chart-label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px 8px;
  overflow: hidden;
  padding: 6px 12px;
  position: sticky;
  left: 0;
  z-index: 30;
  background: var(--paper, #FAFAF8);
  border-right: 1px solid var(--line-strong, #D2D2CD);
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 13px;
  color: var(--ink, #1A1A1A);
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.06);
  min-width: 0;
}

.plan-chart-group-name {
  flex-wrap: nowrap;
}

.plan-chart-group {
  background: var(--paper-2, #F7F7F4);
}

/* Barra grupo: cuerpo 10px + colmillos 5px (puntas) */
.plan-group-span-outer {
  --plan-group-stroke: rgba(0, 0, 0, 0.35);
  position: absolute;
  top: 50%;
  height: 15px;
  min-width: 28px;
  z-index: 2;
  pointer-events: none;
  transform: translateY(-50%);
}

.plan-group-span-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  color: var(--plan-group-stroke);
  overflow: visible;
}

.plan-group-span-outline polygon {
  stroke-width: 1;
}

.plan-group-span-wrap {
  z-index: 1;
  --plan-group-fang: rgba(15, 36, 62, 0.82);
  --plan-group-clip: polygon(
    0 0,
    100% 0,
    100% 10px,
    100% 15px,
    calc(100% - 5px) 10px,
    5px 10px,
    0 15px,
    0 10px
  );
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 0;
  -webkit-clip-path: var(--plan-group-clip);
  clip-path: var(--plan-group-clip);
}

/* Group running past the visible window: drop the fang on the cut side (flat). */
.plan-group-span-outer.is-cut-right .plan-group-span-wrap {
  --plan-group-clip: polygon(0 0, 100% 0, 100% 10px, 5px 10px, 0 15px, 0 10px);
}
.plan-group-span-outer.is-cut-left .plan-group-span-wrap {
  --plan-group-clip: polygon(0 0, 100% 0, 100% 10px, 100% 15px, calc(100% - 5px) 10px, 0 10px);
}
.plan-group-span-outer.is-cut-left.is-cut-right .plan-group-span-wrap {
  --plan-group-clip: polygon(0 0, 100% 0, 100% 10px, 0 10px);
}

.plan-chart-group .plan-chart-track {
  overflow: visible;
  min-height: 28px;
  padding-bottom: 6px;
}

.plan-chart-row.plan-chart-group {
  min-height: 34px;
}

.plan-group-span-wrap.plan-group-span-default {
  background: rgba(15, 36, 62, 0.82);
}

.plan-color-themed.plan-group-span-wrap {
  --plan-group-fang: var(--plan-group-bar, var(--plan-bar-fill));
  background: var(--plan-group-bar, var(--plan-bar-muted));
}

/* Con progreso heredado: pista suave del color + franja de avance */
.plan-group-span-wrap.is-group-progress {
  --plan-group-track: rgba(0, 0, 0, 0.08);
  --plan-group-fang: var(--plan-group-track);
  background: var(--plan-group-track);
  box-sizing: border-box;
}

.plan-color-themed.plan-group-span-wrap.is-group-progress {
  --plan-group-track: color-mix(in srgb, var(--plan-bar-muted) 38%, rgba(0, 0, 0, 0.06));
  --plan-group-fang: var(--plan-group-track);
  background: var(--plan-group-track);
}

.plan-group-span-wrap.plan-group-span-default.is-group-progress {
  --plan-group-track: rgba(15, 36, 62, 0.14);
  --plan-group-fang: var(--plan-group-track);
}

.plan-group-span-wrap.is-group-progress.is-group-progress-full {
  --plan-group-fang: var(--plan-group-bar, var(--plan-bar-fill, rgba(15, 36, 62, 0.82)));
}

.plan-color-themed .plan-group-span-fill {
  background: var(--plan-bar-fill, var(--plan-bar)) !important;
}

.plan-group-span-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 0.92;
  pointer-events: none;
  z-index: 1;
}

.plan-group-span-fill.is-progress-partial {
  opacity: 0.82;
}

.plan-color-themed .plan-group-span-fill.is-progress-partial {
  background: var(--plan-bar-muted, var(--plan-bar-fill));
}

.plan-color-themed .plan-group-span-fill.is-progress-full {
  opacity: 0.95;
}

.plan-group-span-wrap.plan-group-span-loose {
  background: rgba(26, 26, 26, 0.35);
}

.plan-group-span-wrap.color-sage:not(.is-group-progress) { background: rgba(107, 123, 91, 0.75); }
.plan-group-span-wrap.color-clay:not(.is-group-progress) { background: rgba(139, 115, 85, 0.78); }
.plan-group-span-wrap.color-plum:not(.is-group-progress) { background: rgba(91, 75, 91, 0.78); }
.plan-group-span-wrap.color-slate:not(.is-group-progress) { background: rgba(74, 91, 105, 0.78); }



.plan-group-span-wrap.color-sage .plan-group-span-fill { background: #6B7B5B; }
.plan-group-span-wrap.color-clay .plan-group-span-fill { background: #8B7355; }
.plan-group-span-wrap.color-plum .plan-group-span-fill { background: #5B4B5B; }
.plan-group-span-wrap.color-slate .plan-group-span-fill { background: #4A5B69; }

.plan-group-span-wrap.color-sage .plan-group-span-fill.is-progress-partial { background: rgba(107, 123, 91, 0.72); }
.plan-group-span-wrap.color-clay .plan-group-span-fill.is-progress-partial { background: rgba(139, 115, 85, 0.72); }
.plan-group-span-wrap.color-plum .plan-group-span-fill.is-progress-partial { background: rgba(91, 75, 91, 0.72); }
.plan-group-span-wrap.color-slate .plan-group-span-fill.is-progress-partial { background: rgba(74, 91, 105, 0.72); }

.plan-group-span-wrap.plan-group-span-default .plan-group-span-fill {
  background: rgba(15, 36, 62, 0.82);
}

.plan-group-span-wrap.plan-group-span-default .plan-group-span-fill.is-progress-partial {
  background: rgba(15, 36, 62, 0.55);
}

.plan-group-span-wrap.plan-group-span-default .plan-group-span-fill.is-progress-full {
  background: rgba(15, 36, 62, 0.95);
}

.plan-color-themed.plan-bar-wrap .plan-bar-fill {
  background: var(--plan-bar-fill, var(--plan-bar));
}

.plan-color-themed.plan-milestone {
  background: var(--plan-bar-fill, var(--plan-bar));
  border: 1px solid var(--plan-bar-border, var(--plan-bar));
}

.plan-chart-group-name .plan-group-name-text {
  min-width: 0;
}

.plan-group-progress-readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-group-progress-pct-big {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink, #1A1A1A);
}

.plan-chart-group .plan-chart-track .plan-bar-wrap,
.plan-chart-group .plan-chart-track .plan-milestone-anchor {
  z-index: 1;
}

.plan-header-config {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  background: none;
  color: var(--ink-3, #888);
  cursor: pointer;
  padding: 0 0 0 8px;
  vertical-align: baseline;
}

.plan-header-config:hover {
  color: var(--ink, #1A1A1A);
  text-decoration: underline;
}

.plan-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
}

.plan-zoom-btn,
.plan-zoom-fit {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  line-height: 1;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line, #E0E0DC);
  border-radius: 2px;
  background: var(--paper, #FAFAF8);
  color: var(--ink-2, #555);
  cursor: pointer;
}

.plan-zoom-btn:hover,
.plan-zoom-fit:hover {
  color: var(--ink, #1A1A1A);
  border-color: var(--ink-3, #888);
}

.plan-zoom-fit {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 8px;
}

.plan-year-view-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.plan-year-view-label {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  white-space: nowrap;
}

.plan-year-select {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line, #E0E0DC);
  border-radius: 2px;
  background: var(--paper, #FAFAF8);
  color: var(--ink, #1A1A1A);
  cursor: pointer;
}

.plan-year-template-btns {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.plan-year-template-btn,
.plan-gantt-quarter-btn,
.plan-scheduling-toggles button {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1;
  min-width: 30px;
  height: 26px;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line, #E0E0DC);
  border-radius: 2px;
  background: var(--paper, #FAFAF8);
  color: var(--ink-2, #555);
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-year-template-btn:hover,
.plan-gantt-quarter-btn:hover,
.plan-scheduling-toggles button:hover {
  color: var(--ink, #1A1A1A);
  border-color: var(--ink-3, #888);
}

.plan-year-template-btn.active,
.plan-gantt-quarter-btn.active,
.plan-scheduling-toggles button.active {
  background: var(--ink, #1A1A1A);
  color: var(--paper, #FAFAF8);
  border-color: var(--ink, #1A1A1A);
}

/* Rango personalizado: el botón de la barra reusa .plan-year-template-btn; aquí
   solo los inputs de definición que viven en las propiedades (Editar). */
.plan-custom-range-edit { display: inline-flex; align-items: center; gap: 6px; }
.plan-custom-date {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 5px;
  width: auto;
  flex: 0 0 auto;
}
/* Sin valor: el placeholder del input date (dd/mm/aaaa) se ve igual que un
   valor real, así que cuando está vacío lo atenuamos (tenue) para que se note
   que falta, sin gritar. */
.plan-custom-date.is-empty,
.plan-custom-date.is-empty::-webkit-datetime-edit { color: var(--ink-4); }
.plan-custom-date.is-empty::-webkit-datetime-edit { opacity: 0.45; }
.plan-custom-range-sep { color: var(--ink-3); font-size: 10px; }
/* Toggles de escala mostradas en la barra al suscriptor (modo compacto). */
.plan-gantt-scale-wrap.compact { display: inline-flex; align-items: center; margin-left: 6px; }

.plan-view {
  --plan-total-days: 90;
  --plan-px-per-day: 11px;
}

.plan-empty-sidebar-hint {
  font-size: 12px;
  color: var(--ink-3, #888);
  margin-top: 12px;
}

.plan-chart-group-name {
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

.plan-group-disclosure {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-3, #888);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--mono, 'JetBrains Mono', monospace);
}

.plan-group-disclosure:hover {
  color: var(--ink, #1A1A1A);
}

.plan-group-name-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

/* Flechas solo en la columna del cronograma; nombres sticky quedan por encima. */
.plan-chart-deps-host {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.plan-deps-overlay {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
}

.plan-deps-layer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
}

.plan-dep-path {
  fill: none;
  stroke: rgba(70, 70, 65, 0.75);
  stroke-width: 1;
  stroke-linejoin: miter;
  stroke-linecap: square;
}

.plan-dep-arrow {
  fill: rgba(70, 70, 65, 0.75);
  stroke: none;
}

/* Wide transparent overlay over each dependency so the thin arrow is easy to
   click; the layer itself is pointer-events:none, this re-enables hits. */
.plan-dep-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 12;
  pointer-events: stroke;
  cursor: pointer;
}

/* Selected dependency (click to select, Delete/Backspace to remove). */
.plan-dep-path.selected {
  stroke: #2B2B28;
  stroke-width: 2.5;
}
.plan-dep-arrow.selected {
  fill: #2B2B28;
}

.plan-dep-drag-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.plan-dep-drag-preview {
  fill: none;
  stroke: rgba(70, 70, 65, 0.85);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
  stroke-linejoin: miter;
}

.plan-dep-link-out {
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  transform: translateX(50%);
  border-radius: 50%;
  background: var(--paper, #FAFAF8);
  border: 1.5px solid rgba(70, 70, 65, 0.55);
  cursor: crosshair;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease, border-color 0.1s ease, background 0.1s ease;
}

/* Solo al pasar por la barra/hito (no toda la fila). */
.plan-bar-wrap:hover .plan-dep-link-out,
.plan-bar-real:hover > .plan-dep-link-out,
.plan-milestone-anchor:hover > .plan-dep-link-out {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.plan-dep-link-out:hover {
  border-color: var(--ink, #1A1A1A);
  background: var(--ink, #1A1A1A);
}

.plan-dep-dragging {
  cursor: crosshair;
  user-select: none;
}

.plan-dep-dragging .plan-chart-element {
  cursor: crosshair;
}

.plan-chart-element.plan-dep-drop-target .plan-chart-track {
  background: rgba(156, 175, 136, 0.12);
}

/* Arrastrar una sesión a un grupo para añadirla (group-drag.js). El fondo de la
   fila de grupo es inline-important (tinte OmniPlan), así que el resaltado del
   destino va por box-shadow, no por background. */
.plan-group-dragging { cursor: grabbing; user-select: none; }
.plan-group-dragging .plan-chart-element .plan-chart-label { cursor: grabbing; }
.plan-chart-group.plan-group-drop-target .plan-chart-label,
.plan-chart-group.plan-group-drop-target .plan-chart-track {
  box-shadow: inset 0 0 0 2px rgba(70, 110, 180, 0.85);
}
/* Chip flotante con el nombre de la sesión mientras se arrastra a un grupo. */
.plan-drag-chip {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--paper, #FAFAF6);
  color: var(--ink, #1A1A1A);
  font-family: var(--serif, 'Newsreader', Georgia, serif);
  font-size: 13px;
  line-height: 1.2;
  padding: 5px 11px;
  border: 1px solid var(--line-strong, rgba(26, 26, 26, 0.22));
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  max-width: 260px;
}
.plan-drag-chip-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.plan-drag-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-resources-wrap,
.plan-resources-catalog {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plan-res-subblock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-res-subblock + .plan-res-subblock {
  padding-top: 12px;
  border-top: 1px solid var(--line, #F0F0EC);
}

.plan-res-subblock-title {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
}

.plan-res-catalog-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-res-catalog-block + .plan-res-catalog-block {
  padding-top: 12px;
  border-top: 1px solid var(--line, #F0F0EC);
}

.plan-res-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-res-catalog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.plan-res-catalog-row-mat {
  flex-wrap: wrap;
}

.plan-res-catalog-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.plan-res-catalog-add .detail-input {
  flex: 1;
  min-width: 120px;
}

.plan-material-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.plan-material-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line, #F0F0EC);
  background: var(--paper, #FAFAF8);
  font-size: 13px;
  line-height: 1.35;
}

.plan-material-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-material-row-meta {
  flex-shrink: 0;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--ink-3, #888);
  white-space: nowrap;
}

.plan-material-row-remove {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--ink-3, #888);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}

.plan-material-row-remove:hover {
  color: var(--ink, #1A1A1A);
}

.plan-material-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.plan-material-add-row .plan-material-pick,
.plan-material-add-row .detail-select.plan-material-pick {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.plan-material-add-row .detail-input {
  flex: 1;
  min-width: 0;
}

.plan-material-add-row .plan-material-units-input {
  width: 52px;
  flex-shrink: 0;
}

.plan-material-add-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.plan-material-units-input {
  width: 52px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  border: 1px solid var(--line, #E0E0DC);
  padding: 4px 6px;
  background: var(--paper, #FAFAF8);
}

.plan-material-catalog-label {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-3, #888);
}

.plan-material-catalog-name {
  flex: 1;
  min-width: 80px;
}

.plan-detail-deps-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-dep-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-dep-block + .plan-dep-block {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #F0F0EC);
}

.plan-dep-block-title {
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1A1A1A);
}

.plan-dep-empty {
  margin: 0;
  font-style: italic;
}

.plan-detail-deps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-detail-dep-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.plan-detail-dep-hint {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  flex-shrink: 0;
}

.plan-detail-dep-name {
  flex: 1;
  min-width: 0;
}

.plan-detail-dep-remove {
  border: none;
  background: none;
  color: var(--ink-3, #888);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

.plan-detail-dep-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.plan-detail-dep-add-label {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
}

.plan-detail-dep-add-btn {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-bottom: 1px solid var(--ink-3, #888);
  background: none;
  color: var(--ink-2, #555);
  cursor: pointer;
  padding: 2px 0;
}

.plan-detail-dep-add-btn:hover {
  color: var(--ink, #1A1A1A);
  border-color: var(--ink, #1A1A1A);
}

.plan-chart-group-name.muted {
  color: var(--ink-3, #888);
  font-weight: 400;
  font-style: italic;
}

.plan-chart-element {
  cursor: pointer;
}

.plan-chart-row.plan-chart-element {
  min-height: 40px;
}

.plan-chart-element .plan-chart-track {
  min-height: 40px;
  /* Let the end label (%, slack days) and people/material labels show past the
     bar without being clipped at the right edge. */
  overflow: visible;
}

.plan-chart-element:hover .plan-chart-label,
.plan-chart-element.selected .plan-chart-label {
  background: var(--paper-2, #F3F3EF);
}

.plan-chart-element.selected {
  outline: 1px solid var(--line, #D0D0CA);
  outline-offset: -1px;
}

.plan-element-icon {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--ink-3, #999);
  width: 12px;
  flex-shrink: 0;
}

.plan-element-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

.plan-chart-label > .plan-group-disclosure,
.plan-chart-label > .plan-element-badge,
.plan-chart-label > .plan-element-people,
.plan-chart-label > .plan-element-icon {
  flex-shrink: 0;
}

.plan-element-badge {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  color: var(--ink-3, #888);
  background: #EEEEE8;
  padding: 1px 5px;
  border-radius: 2px;
  flex-shrink: 0;
  line-height: 1.3;
}

.plan-element-badge-slack {
  color: #6B5B4B;
  background: #F3EDE4;
}

.plan-element-badge-duration {
  color: #5B6470;
  background: #ECEFF3;
}

.plan-scheduling-toggles {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.plan-scheduling-toggles button {
  white-space: nowrap;
}

.plan-scheduling-settings,
.plan-scheduling-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-scheduling-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plan-resolve-deps-btn {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--line, #E0E0DC);
  border-radius: 2px;
  background: var(--paper, #FAFAF8);
  color: var(--ink-2, #555);
  cursor: pointer;
}

.plan-resolve-deps-btn:hover {
  border-color: var(--ink-3, #888);
  color: var(--ink, #1A1A1A);
}

.plan-baseline-explainer {
  margin-top: 4px;
  font-weight: 500;
}

.plan-baseline-explainer-sub {
  margin-top: 0;
  color: var(--ink-3, #888);
}

.plan-track-baseline {
  position: absolute;
  top: 4px;
  height: 6px;
  border-radius: 1px;
  background: rgba(90, 90, 85, 0.2) !important;
  border: 1px dashed rgba(70, 70, 65, 0.75);
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}

.plan-schedule-warn {
  margin: 0;
  flex: 1 1 100%;
  font-size: 12px;
  color: #9a4a35;
  line-height: 1.35;
}

.plan-schedule-hint {
  margin: 0;
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--ink-3, #777);
  line-height: 1.35;
}

.plan-bar-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  border-radius: inherit;
  overflow: hidden;
}

.plan-bar-real {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  min-width: 2px;
}

.plan-bar-slack {
  flex: 1 1 auto;
  height: 100%;
  min-width: 2px;
  border-radius: 0 1px 1px 0;
  /* Slack is the stretched, empty part of the bar (no fill); the rounded right
     edge of the real part marks where the real task ends. */
  background: transparent;
  border-left: none;
  pointer-events: none;
}

.plan-bar-slack.is-negative {
  background: transparent;
  border-left: 1px solid rgba(181, 58, 44, 0.6);
}

.plan-bar-wrap.is-critical-path:not(.is-session-bar) {
  outline: 2px solid #B53A2C;
  outline-offset: 0;
  box-shadow: none;
  z-index: 2;
}

.plan-bar-wrap.is-session-bar.is-critical-path,
.plan-chart-element.is-session .plan-bar-wrap.is-critical-path {
  outline: none;
}

.plan-chart-row.is-critical-path .plan-chart-label {
  border-left: 3px solid #B53A2C;
  padding-left: 9px;
}

.plan-milestone-anchor.is-critical-path {
  z-index: 3;
}

.plan-milestone.is-critical-path {
  outline: 2px solid #B53A2C;
  outline-offset: 1px;
}

.plan-chart-track {
  position: relative;
  min-height: 34px;
  background: linear-gradient(90deg, var(--paper, #FAFAF8) 0%, var(--paper-2, #F5F5F2) 100%);
  z-index: 0;
  overflow: hidden;
}

.plan-chart-track-head {
  min-height: 32px;
  overflow: visible;
}

.plan-chart-track-scales {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 14px;
  overflow: visible;
}

.plan-scale-layer {
  position: relative;
  flex: 0 0 auto;
  min-height: 14px;
  border-bottom: 1px solid #F0F0EC;
}

.plan-scale-month {
  padding-bottom: 1px;
}

.plan-scale-month .plan-chart-tick {
  top: auto;
  bottom: 1px;
  right: auto;
  height: auto;
  min-width: 0;
  line-height: 1.2;
  padding: 0 3px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  contain: layout paint;
}

.plan-scale-layer:last-child {
  border-bottom: none;
}

.plan-scale-layer .plan-chart-tick {
  font-size: 8px;
}

.plan-scale-year {
  min-height: 16px;
  /* Opaque so the month separator lines don't run up through the year label. */
  background: var(--paper, #FAFAF8);
  z-index: 1;
}

.plan-scale-year .plan-chart-tick {
  top: 0;
  bottom: auto;
  height: auto;
  min-height: 0;
  border-left: none;
  padding: 3px 6px 1px;
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-2, #555);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.plan-weekend-band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  background: rgba(196, 168, 130, 0.12);
  pointer-events: none;
}

/* Dotted vertical separator at each month boundary, spanning the track.
   Native `dotted` border (2px) — gradients render as black dashes in
   Safari's PDF export, so a real dotted border is the reliable way to get
   grey dots; 2px reads more clearly than the original tight 1px. */
.plan-month-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid var(--line, #F0F0EC);
  pointer-events: none;
  z-index: 0;
}
/* Línea muy suave que separa cada día en todo el gráfico. */
.plan-day-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.045);
  pointer-events: none;
  z-index: 0;
}

/* "Today" reference line, crossing the whole chart. */
.plan-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1.5px solid rgba(181, 58, 44, 0.55);
  pointer-events: none;
  z-index: 3;
}

/* Year separator: a bit stronger than the month lines (year/4Y views). */
.plan-year-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1.5px solid var(--line-strong, #C9C9C5);
  pointer-events: none;
  z-index: 0;
}

.plan-holiday-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  z-index: 1;
  background: rgba(181, 58, 44, 0.45);
  pointer-events: none;
}

.plan-chart-track-head .plan-holiday-marker,
.plan-chart-track-scales .plan-holiday-marker {
  display: none;
}

.plan-chart-track .plan-bar-wrap,
.plan-chart-track .plan-milestone-anchor,
.plan-chart-track .plan-group-span-outer {
  z-index: 5;
}

.plan-dates-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.plan-dates-row {
  display: grid;
  grid-template-columns: 72px 1fr 1fr 52px;
  gap: 6px;
  align-items: center;
}

/* Dates grid with two data columns (Dates + Slack), no Planned column. */
.plan-dates-grid-2 .plan-dates-row {
  grid-template-columns: 72px 1fr 1fr;
}

.plan-dates-head {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
}

.plan-dates-label {
  font-size: 11px;
  color: var(--ink-2, #555);
}

.plan-dates-input {
  min-width: 0;
  width: 100%;
  padding: 4px 6px;
  font-size: 11px;
}

.plan-dates-readonly {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--ink-3, #888);
  text-align: center;
}

.plan-critical-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-snapshot-block {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #E0E0DC);
}

.plan-snapshot-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.plan-snapshot-add .detail-input {
  flex: 1;
}

.plan-snapshot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-snapshot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.plan-snapshot-name {
  flex: 1;
  min-width: 100px;
  font-weight: 500;
}

.plan-snapshot-date {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  color: var(--ink-3, #888);
}

.plan-snapshot-del {
  border: none;
  background: none;
  color: var(--ink-3, #888);
  cursor: pointer;
  font-size: 14px;
}

.plan-chart-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid #EBEBE6;
  padding: 8px 0 0 5px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  color: var(--ink-3, #999);
  white-space: nowrap;
  pointer-events: none;
}

.plan-bar-wrap {
  position: absolute;
  top: 10px;
  height: 12px;
  border-radius: 1px;
  min-width: 3px;
  background: rgba(0, 0, 0, 0.08);
  overflow: visible;
}

/* Completion % rendered just past the right end of a bar / group span
   (outside it, in the timeline). Moved here from the name/label column. */
.plan-bar-pct,
.plan-group-span-pct {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 6px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink-3, #888);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* End label holds the completion % and, after it, the slack days. */
.plan-bar-pct {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.plan-bar-slack-days {
  color: inherit;
}

/* Before-margin day count sits just to the left of the bar's start. */
.plan-bar-slack-before-label {
  margin-left: 0;
  transform: translate(calc(-100% - 6px), -50%);
}

.plan-slack-input {
  min-width: 0;
}

/* Celda de holgura: input + × crema discreta para borrarla de un toque. */
.plan-slack-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.plan-slack-cell .plan-slack-input {
  flex: 1 1 auto;
}
.plan-slack-clear {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-4, #b5b5ad);
}
.plan-slack-clear:hover {
  color: var(--ink-2, #555);
}

/* Compartición de Gantt en solo lectura */
.plan-readonly-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  border: 1px solid var(--line, #E0E0DC);
  border-radius: 2px;
  background: var(--paper-2, #ECECE6);
}
.plan-menu-info { padding: 8px 12px; }
.plan-menu-info-name { font-size: 11px; color: var(--ink-2, #555); }
.plan-menu-info-id {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3, #888);
  margin-top: 2px;
}
.plan-menu-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
.plan-menu-share-row:hover { background: var(--paper-2, #ECECE6); }
.plan-menu-share-label {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
}
.plan-menu-share-id {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink, #1A1A1A);
}

/* Assigned people, centered above the session bar (lives in the track, with
   `left` set inline to the bar's centre %). */
.plan-bar-people,
.plan-bar-materials {
  position: absolute;
  top: 1px;
  transform: translateX(-50%);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-3, #888);
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
}

/* Material resources mirror the people label but sit just below the bar. */
.plan-bar-materials {
  top: auto;
  bottom: 2px;
  color: #6B7A5B;
}

/* Responsible person: shown first and bold (read-only; set from detail view). */
.plan-bar-person.is-responsible {
  font-weight: 700;
  color: var(--ink-2, #555);
}

/* Sesiones: píldora; trazo en ::after (encima del relleno) */
.plan-bar-wrap.is-session-bar,
.plan-chart-element.is-session .plan-bar-wrap {
  --plan-session-r: 7px;
  --plan-session-stroke-color: rgba(0, 0, 0, 0.32);
  top: 11px;
  height: 16px;
  border-radius: var(--plan-session-r);
  /* Body clips the fill to the pill; keep the wrap visible so the dependency
     handle (a direct child of the wrap) shows in full instead of being cut. */
  overflow: visible;
  box-sizing: border-box;
  border: none;
  box-shadow: none;
  /* No wrap fill: the slack part shows only the pill outline (empty). The faint
     fill lives on the real part instead (see below). */
  background: transparent;
}

.plan-bar-wrap.is-session-bar .plan-bar-real,
.plan-chart-element.is-session .plan-bar-real {
  background: rgba(0, 0, 0, 0.08);
}

.plan-bar-wrap.is-session-bar::after,
/* Sesión provisional/tentativa: el RELLENO baja de opacidad, pero la línea
   exterior discontinua queda negra y nítida (no afectada por la transparencia). */
.plan-bar-wrap.is-tentative .plan-bar-body { opacity: 0.45; }
.plan-chart-element.is-session .plan-bar-wrap.is-tentative::after,
.plan-bar-wrap.is-tentative .plan-bar-real::before {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.8);
}
/* Cierre de un bloque de grupo: doble línea, más sutil que una gruesa. */
.plan-group-block-end { border-bottom: 3px double var(--line-strong, rgba(0,0,0,0.34)) !important; }
.plan-item-flags-row { display: flex; gap: 8px; }
.plan-item-flags-row .chip { flex: 1 1 auto; text-align: center; }

/* Indicador ≡ de "tiene nota" junto al nombre del elemento del Gantt. */
.plan-note-indicator {
  flex: 0 0 auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 2px;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-2, #666);
}
.plan-note-indicator:hover { color: var(--accent, #c47a3d); }
.plan-note-empty-ro { color: var(--ink-4, #aaa); }

/* Selector de días laborables del proyecto (contador de duración). */
.plan-workdays-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.plan-workday {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.plan-workday.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Peek: la nota renderizada en un popover (también para solo lectura). */
.plan-note-peek {
  position: fixed;
  z-index: 1200;
  max-width: 360px;
  max-height: 50vh;
  overflow: auto;
  background: var(--paper, #fff);
  border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.2));
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 12px 14px;
  font-size: 13px;
}

.plan-chart-element.is-session .plan-bar-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--plan-session-r);
  border: 1px solid var(--plan-session-stroke-color);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 4;
}

.plan-bar-wrap.is-session-bar.is-critical-path,
.plan-chart-element.is-session .plan-bar-wrap.is-critical-path {
  outline: none;
  box-shadow: none;
}

.plan-bar-wrap.is-session-bar.is-critical-path::after,
.plan-chart-element.is-session .plan-bar-wrap.is-critical-path::after {
  border-width: 2px;
  border-color: #B53A2C;
}

.plan-bar-wrap.is-session-bar .plan-bar-body,
.plan-chart-element.is-session .plan-bar-body {
  border-radius: var(--plan-session-r);
}

/* Bars running past the visible window: flat, open edge on the cut side. */
.plan-bar-wrap.is-session-bar.is-cut-right,
.plan-bar-wrap.is-session-bar.is-cut-right .plan-bar-body {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.plan-bar-wrap.is-session-bar.is-cut-right::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.plan-bar-wrap.is-session-bar.is-cut-left,
.plan-bar-wrap.is-session-bar.is-cut-left .plan-bar-body {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.plan-bar-wrap.is-session-bar.is-cut-left::after {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
/* The real part + its progress fill are squared on the cut side too, and the
   slack cap is dropped there. */
.plan-bar-wrap.is-session-bar.is-cut-right .plan-bar-real,
.plan-bar-wrap.is-session-bar.is-cut-right .plan-bar-real .plan-bar-fill {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.plan-bar-wrap.is-session-bar.is-cut-right .plan-bar-real::after { display: none; }
.plan-bar-wrap.is-session-bar.is-cut-left .plan-bar-real,
.plan-bar-wrap.is-session-bar.is-cut-left .plan-bar-real .plan-bar-fill {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.plan-bar-wrap.is-session-bar.is-cut-left .plan-bar-real::before { display: none; }

.plan-bar-wrap.is-session-bar .plan-bar-real,
.plan-chart-element.is-session .plan-bar-real,
.plan-bar-wrap.is-session-bar .plan-bar-slack,
.plan-chart-element.is-session .plan-bar-slack {
  border-radius: 0;
}

/* A slack margin (before/after) caps the real part with the SAME rounded edge as
   the bar terminators: a clipped rounded-rect outline using the pill's stroke, so
   the thickness stays even and it sits above a full progress fill. */
.plan-bar-wrap.is-session-bar .plan-bar-body:has(.plan-bar-slack-after) .plan-bar-real,
.plan-chart-element.is-session .plan-bar-body:has(.plan-bar-slack-after) .plan-bar-real {
  border-top-right-radius: var(--plan-session-r);
  border-bottom-right-radius: var(--plan-session-r);
}
.plan-bar-wrap.is-session-bar .plan-bar-body:has(.plan-bar-slack-before) .plan-bar-real,
.plan-chart-element.is-session .plan-bar-body:has(.plan-bar-slack-before) .plan-bar-real {
  border-top-left-radius: var(--plan-session-r);
  border-bottom-left-radius: var(--plan-session-r);
}
.plan-bar-body:has(.plan-bar-slack-after) .plan-bar-real::after,
.plan-bar-body:has(.plan-bar-slack-before) .plan-bar-real::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--plan-session-stroke-color, rgba(0, 0, 0, 0.32));
  border-radius: var(--plan-session-r);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}
.plan-bar-body:has(.plan-bar-slack-after) .plan-bar-real::after {
  clip-path: inset(0 0 0 calc(100% - var(--plan-session-r)));
}
.plan-bar-body:has(.plan-bar-slack-before) .plan-bar-real::before {
  clip-path: inset(0 calc(100% - var(--plan-session-r)) 0 0);
}

.plan-bar-wrap.is-session-bar .plan-bar-real .plan-bar-fill,
.plan-chart-element.is-session .plan-bar-real .plan-bar-fill {
  border-top-left-radius: var(--plan-session-r);
  border-bottom-left-radius: var(--plan-session-r);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

.plan-bar-wrap.is-session-bar .plan-bar-real .plan-bar-fill.is-progress-partial,
.plan-chart-element.is-session .plan-bar-real .plan-bar-fill.is-progress-partial {
  background: var(--plan-bar-muted, var(--plan-bar-fill)) !important;
  opacity: 0.82;
}

.plan-bar-wrap.is-session-bar .plan-bar-body:not(:has(.plan-bar-slack)) .plan-bar-real .plan-bar-fill.is-progress-full,
.plan-chart-element.is-session .plan-bar-body:not(:has(.plan-bar-slack)) .plan-bar-real .plan-bar-fill.is-progress-full {
  border-radius: var(--plan-session-r);
  opacity: 0.95;
}

.plan-bar-wrap.is-session-bar .plan-bar-body:has(.plan-bar-slack) .plan-bar-real .plan-bar-fill.is-progress-full,
.plan-chart-element.is-session .plan-bar-body:has(.plan-bar-slack) .plan-bar-real .plan-bar-fill.is-progress-full {
  border-radius: var(--plan-session-r);
  opacity: 0.95;
}

.plan-milestone.is-incomplete {
  opacity: 0.72;
  background: var(--plan-bar-muted, var(--plan-bar-fill)) !important;
}

.plan-bar-wrap:not(.is-session-bar) > .plan-bar-fill,
.plan-bar-wrap:not(.is-session-bar) .plan-bar-real > .plan-bar-fill {
  border-radius: 1px;
  overflow: hidden;
}

.plan-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 0.92;
  pointer-events: none;
}

.plan-bar-wrap.color-sage .plan-bar-fill { background: #9CAF88; }
.plan-bar-wrap.color-clay .plan-bar-fill { background: #C4A882; }
.plan-bar-wrap.color-plum .plan-bar-fill { background: #8B7B8B; }
.plan-bar-wrap.color-slate .plan-bar-fill { background: #7A8B99; }

.plan-element-people {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  max-width: 42%;
  min-width: 0;
  overflow: hidden;
}

.plan-people-first {
  white-space: nowrap;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  color: var(--ink-3, #888);
}

.plan-people-more {
  flex-shrink: 0;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--ink-3, #888);
}

.plan-people-more[hidden] {
  display: none;
}

.plan-milestone.is-done {
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.35);
  opacity: 1;
}



.plan-progress-editor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-progress-range {
  flex: 1;
  min-width: 0;
  accent-color: #A8957A;
}

.plan-progress-num {
  width: 52px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  border: 1px solid var(--line, #E0E0DC);
  padding: 4px 6px;
  background: var(--paper, #FAFAF8);
}

.plan-progress-pct-label {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--ink-3, #888);
  min-width: 32px;
}

.plan-assign-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.plan-assign-list .assign-chip {
  gap: 6px;
}

.plan-milestone-anchor {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  margin-left: -6.5px;
}

.plan-milestone-anchor .plan-milestone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: 0;
  margin-left: -4.5px;
  margin-top: -4.5px;
  transform: rotate(45deg);
}

.plan-milestone {
  background: #C4A882;
  border: 1px solid #8B7355;
}

.plan-milestone.color-clay { background: #C4A882; border-color: #8B7355; }
.plan-milestone.color-sage { background: #9CAF88; border-color: #6B7B5B; }
.plan-milestone.color-plum { background: #8B7B8B; border-color: #5B4B5B; }
.plan-milestone.color-slate { background: #7A8B99; border-color: #4A5B69; }

/* Tareas Floatask bajo sesión */
.plan-chart-task {
  background: #FCFCFA;
  z-index: 2;
}

.plan-chart-task .plan-chart-label {
  font-size: 11.5px;
  color: var(--ink-2, #666);
  z-index: 11;
}

.plan-task-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3, #AAA);
  flex-shrink: 0;
}

.plan-task-link {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.plan-task-link:hover {
  color: var(--ink, #1A1A1A);
  text-decoration: underline;
}

/* Gantt vacío: el chart se clampa al viewport para que el hint centre bien. */
.plan-chart.plan-chart-empty-state { min-width: 100%; }
/* Comentarios del Gantt (abajo del todo, a nivel de proyecto). */
.plan-comments-section {
  width: 100%;
  max-width: 720px;
  margin: 28px auto 40px;   /* bloque centrado */
  align-self: center;       /* y también si #list-view es flex en el Gantt */
}
/* Composer de una sola línea por defecto (crece al escribir/arrastrar). */
.plan-comments-section .comment-compose { width: 100%; min-height: 32px; }
.plan-comments-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: center;   /* excepción: la cabecera del Gantt va centrada */
}
.plan-chart-empty {
  padding: 40px 20px;
  text-align: center;
  font-family: var(--serif, Newsreader, Georgia, serif);
  color: var(--ink-3, #888);
  font-size: 14px;
}

/* —— Empty state —— */
.plan-empty {
  padding: 56px 28px;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}

.plan-empty-lead {
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 1.2rem;
  color: var(--ink, #1A1A1A);
  margin: 0 0 10px;
  font-weight: 400;
}

.plan-empty-sub {
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3, #888);
  margin: 0 0 28px;
}

.plan-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* —— Inspector lateral (#detail en vista Gantt) —— */
body.view-plan #detail.plan-detail-panel,
body.view-plan #detail.plan-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 24px 28px 40px;
}

body.view-plan #detail.plan-detail-empty .detail-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-gantt-edit-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, #E0E0DC);
}

.plan-gantt-edit-title {
  margin: 0;
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink, #1A1A1A);
  flex: 1;
}

.plan-gantt-scale-mode {
  flex-wrap: wrap;
}

.plan-gantt-scale-mode button.plan-gantt-scale-btn-dim {
  opacity: 0.45;
}

.plan-gantt-scale-mode button.plan-gantt-scale-btn-dim.active {
  opacity: 0.72;
}

.plan-scheduling-view-toggles {
  margin-bottom: 12px;
}

.plan-project-progress-mode {
  flex-wrap: wrap;
}

.plan-gantt-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 13px;
  color: var(--ink-2, #555);
  cursor: pointer;
}

.plan-gantt-check input {
  margin-top: 3px;
}

.plan-gantt-holidays {
  min-height: 88px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  line-height: 1.5;
}

.plan-gantt-edit-note {
  margin-top: 8px;
}

.plan-detail-kind {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  margin-bottom: 10px;
}

.plan-detail-note,
.plan-detail-readonly {
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3, #888);
}

.plan-detail-color-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.plan-detail-color-swatch,
.color-picker-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  padding: 0;
}

.plan-detail-color-swatch.active,
.color-picker-swatch.active {
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink);
}

.plan-swatch-sage { background: #9CAF88; }
.plan-swatch-clay { background: #C4A882; }
.plan-swatch-plum { background: #8B7B8B; }
.plan-swatch-slate { background: #7A8B99; }

/* Gestión de la paleta de colores personalizados (editor de proyecto) */
.plan-custom-colors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.plan-custom-color-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.plan-custom-color-del {
  font-size: 12px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
.plan-custom-color-chip:hover .plan-custom-color-del {
  opacity: 1;
}
.plan-custom-color-add {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px dashed var(--line-strong, #C9C9C5);
  background: var(--paper, #FAFAF8);
  color: var(--ink-3, #888);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plan-custom-color-add:hover {
  border-color: var(--ink-3, #888);
  color: var(--ink, #1A1A1A);
}
.plan-custom-color-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Título de la paleta personalizada. A todo el ancho para forzar una fila
   nueva (separándola de los colores de serie) y rotularla como un .detail-label.
   Requiere que la fila del selector tenga flex-wrap. */
.color-picker-extra-label {
  flex-basis: 100%;
  width: 100%;
  margin: 8px 0 2px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-3, #999);
}
.plan-swatch-none,
.color-picker-swatch-none { background: var(--paper); border-style: dashed; }

.color-picker-custom-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.color-picker-hex-input {
  width: 72px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 5px;
  border: 1px solid var(--line, #E0E0DC);
  border-radius: 2px;
  background: var(--paper, #FAFAF8);
  color: var(--ink, #1A1A1A);
}

.plan-detail-color-row .color-picker-hex-input {
  width: 80px;
}

.color-picker-native {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.color-picker-swatch-custom {
  background: var(--paper);
  border-style: dashed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.color-picker-custom-icon {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  line-height: 1;
  color: var(--ink-3, #888);
}

.color-picker-row-popup,
.color-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.plan-detail-tasks-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line, #F0F0EC);
}

.plan-detail-linked {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-detail-linked-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plan-detail-linked-open {
  flex: 1;
  text-align: left;
  border: none;
  background: none;
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--ink, #1A1A1A);
}

.plan-detail-linked-open:hover {
  text-decoration: underline;
}

.plan-detail-linked-unlink {
  border: none;
  background: none;
  color: var(--ink-3, #BBB);
  cursor: pointer;
  font-size: 14px;
}

.plan-detail-picks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 120px;
  overflow: auto;
  margin-top: 6px;
}

.plan-detail-pick {
  text-align: left;
  border: none;
  background: none;
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--ink-2, #555);
}

.plan-detail-pick:hover:not(:disabled) {
  color: var(--ink, #1A1A1A);
}

.plan-detail-pick.active {
  font-weight: 500;
  color: var(--ink, #1A1A1A);
}

.plan-detail-pick:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.plan-detail-hint {
  font-size: 12px;
  color: var(--ink-3, #999);
  font-family: var(--serif, Newsreader, Georgia, serif);
  margin: 4px 0 14px;
}

.plan-detail-danger {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #F0F0EC);
}

.plan-detail-delete {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  background: none;
  color: #8a1d1d;
  cursor: pointer;
  padding: 0;
}

.plan-detail-delete:hover {
  text-decoration: underline;
}

/* Renombrar en el Gantt (doble clic) */
.plan-inline-rename {
  width: 100%;
  font: inherit;
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 13px;
  border: none;
  border-bottom: 1px solid var(--ink, #1A1A1A);
  background: transparent;
  outline: none;
  padding: 2px 0;
}

.plan-chart-label.editing {
  background: #F3F3EF;
}

.plan-chart-group.selected .plan-chart-group-name,
.plan-chart-group-name.selected {
  background: #F3F3EF;
}

.plan-create-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #F0F0EC);
}

.plan-create-cancel,
.plan-create-submit {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 0;
  border: none;
  background: none;
  cursor: pointer;
}

.plan-create-cancel {
  color: var(--ink-3, #888);
}

.plan-create-submit {
  color: var(--ink, #1A1A1A);
  border-bottom: 1px solid var(--ink, #1A1A1A);
}

/* Menú contextual */
.plan-popup-menu .plan-menu-item {
  padding: 6px 14px;
  cursor: pointer;
  color: var(--ink-2, #555);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}

.plan-popup-menu .plan-menu-item:hover {
  background: var(--paper-2, #F0F0EC);
}

.plan-popup-menu .plan-menu-item.danger {
  color: #8a1d1d;
}

.plan-menu-divider {
  border-top: 1px solid var(--line, #E0E0DC);
  margin: 4px 0;
}

.plan-menu-colors {
  padding: 8px 14px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-menu-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.plan-swatch-none.plan-menu-swatch {
  border-style: dashed;
  background: var(--paper);
}

/* —— Detalle de tarea (solo si vinculada) —— */
.detail-plan-context .detail-plan-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 8px 12px;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: var(--serif, Newsreader, Georgia, serif);
  font-size: 14px;
}

.detail-plan-key {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
}

.detail-plan-val {
  color: var(--ink, #1A1A1A);
}

.detail-plan-unlink {
  font-size: 14px;
  border: none;
  background: none;
  color: var(--ink-3, #BBB);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.detail-plan-unlink:hover {
  color: var(--ink, #1A1A1A);
}

.detail-plan-meta {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--ink-3, #999);
  margin: 4px 0 10px;
  padding-left: 84px;
}

.detail-plan-actions {
  padding-left: 84px;
}

.detail-plan-open {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  background: none;
  color: var(--ink-3, #888);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detail-plan-open:hover {
  color: var(--ink, #1A1A1A);
}

/* —— Modo oscuro (Gantt) —— */
body.dark.view-plan .plan-chart-scroll,
body.dark .plan-view .plan-chart-scroll {
  background: var(--paper);
}

body.dark .plan-chart-head,
body.dark .plan-chart-label,
body.dark .plan-chart-head .plan-chart-label {
  background: var(--paper);
  color: var(--ink-2);
  border-color: var(--line);
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.35);
}

body.dark .plan-chart-group {
  background: var(--paper-2);
}

body.dark .plan-chart-track {
  background: linear-gradient(90deg, var(--paper) 0%, var(--paper-2) 100%);
}

body.dark .plan-chart-tick {
  border-color: var(--line);
  color: var(--ink-3);
}

body.dark .plan-weekend-band {
  background: rgba(255, 255, 255, 0.04);
}

body.dark .plan-element-badge {
  background: var(--paper-3);
  color: var(--ink-3);
}

body.dark .plan-track-baseline {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.22);
}

body.dark .plan-bar-slack {
  background: transparent !important;
  border-left: none;
}

body.dark .plan-bar-wrap.is-session-bar,
body.dark .plan-chart-element.is-session .plan-bar-wrap {
  --plan-session-stroke-color: rgba(0, 0, 0, 0.5);
  background: transparent;
}

/* Faint fill on the real part only, so the slack stays empty (dark equivalent
   of the light rgba(0,0,0,0.08)). */
body.dark .plan-bar-wrap.is-session-bar .plan-bar-real,
body.dark .plan-chart-element.is-session .plan-bar-real {
  background: rgba(255, 255, 255, 0.14);
}

body.dark .plan-bar-wrap {
  background: rgba(255, 255, 255, 0.14);
}

body.dark .plan-bar-wrap.color-sage .plan-bar-fill { background: #7d9470; }
body.dark .plan-bar-wrap.color-clay .plan-bar-fill { background: #a88f6a; }
body.dark .plan-bar-wrap.color-plum .plan-bar-fill { background: #7a6d7a; }
body.dark .plan-bar-wrap.color-slate .plan-bar-fill { background: #6a7d8a; }

body.dark .plan-bar-pct,
body.dark .plan-group-span-pct {
  color: var(--ink-2, #ccc);
}


body.dark .plan-bar-wrap.is-critical-path {
  outline-color: #D97A7A;
}

body.dark .plan-bar-wrap.is-session-bar.is-critical-path::after,
body.dark .plan-chart-element.is-session .plan-bar-wrap.is-critical-path::after {
  border-color: #D97A7A;
}

body.dark .plan-chart-row.is-critical-path .plan-chart-label {
  border-left-color: #D97A7A;
}

body.dark .plan-group-span-wrap.plan-group-span-default:not(.is-group-progress) {
  background: rgba(120, 150, 190, 0.55);
}

body.dark .plan-group-span-wrap {
  --plan-group-stroke: rgba(0, 0, 0, 0.55);
}

body.dark .plan-color-themed.plan-group-span-wrap.is-group-progress {
  --plan-group-track: color-mix(in srgb, var(--plan-bar-muted) 32%, rgba(255, 255, 255, 0.08));
}

body.dark .plan-group-span-wrap.is-group-progress {
  --plan-group-track: rgba(255, 255, 255, 0.1);
}

body.dark .plan-group-span-wrap.plan-group-span-default.is-group-progress {
  --plan-group-track: rgba(140, 170, 210, 0.14);
}

body.dark .plan-group-span-wrap.plan-group-span-default .plan-group-span-fill {
  background: rgba(140, 170, 210, 0.9);
}


body.dark .plan-group-span-outer {
  --plan-group-stroke: rgba(255, 255, 255, 0.45);
}



body.dark .plan-chart-row.is-critical-path .plan-chart-label {
  border-left-color: rgba(217, 122, 122, 0.9);
}

body.dark .plan-scale-layer {
  border-color: var(--line);
}

@media print {
  body.view-plan .plan-view-toolbar,
  body.view-plan .plan-header-config,
  body.view-plan .plan-create-mode,
  body.view-plan .plan-zoom-controls,
  body.view-plan .plan-schedule-warn,
  body.view-plan .plan-schedule-hint,
  body.view-plan .view-export,
  body.view-plan .view-mode,
  body.view-plan .view-controls,
  body.view-plan #detail-toggle {
    display: none !important;
  }
  body.view-plan .view-title .count {
    display: none !important;
  }
}