/* ============================================================
   MINAS ARGENTINAS — RIGI interactive Gantt (Cronograma por etapas)
   ============================================================ */
.gantt{--g-study:#4a90c2;--g-prep:#54b483;--g-build:#2f6b4f;--g-post:#d89a6a;
  --g-cols:148px repeat(10,minmax(58px,1fr));position:relative}

.gantt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.gantt-controls{display:flex;align-items:center;gap:.5rem}
.gantt-btn{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line-ink);color:var(--on-ink);cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.gantt-btn:hover{background:rgba(255,255,255,.14);border-color:var(--gold-bright)}
.gantt-btn:active{transform:scale(.94)}
.gantt-btn.play{width:auto;padding:0 1.2rem;gap:.6em;border-radius:999px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

/* legend */
.gantt-legend{display:flex;flex-wrap:wrap;gap:1.1rem}
.g-leg{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-soft)}
.g-leg i{width:14px;height:14px;border-radius:3px;display:inline-block}

.gantt-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:.6rem;-webkit-overflow-scrolling:touch}
.gantt-inner{min-width:820px;position:relative}

/* year ruler */
.g-ruler{display:grid;grid-template-columns:var(--g-cols);align-items:end;margin-bottom:.5rem}
.g-ruler .g-corner{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-faint);padding-bottom:.5rem}
.g-year{background:transparent;border:0;border-bottom:2px solid var(--line-ink);color:var(--on-ink-soft);cursor:pointer;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;padding:.5rem .2rem;text-align:center;transition:color .25s,border-color .25s}
.g-year:hover{color:var(--on-ink)}
.g-year.on{color:var(--ink);background:var(--gold-bright);border-bottom-color:var(--gold);border-radius:6px 6px 0 0;font-weight:700}

/* track rows */
.g-row{display:grid;grid-template-columns:var(--g-cols);align-items:center;min-height:66px;
  border-bottom:1px solid var(--line-ink);position:relative;transition:opacity .35s var(--ease)}
.g-row.dim{opacity:.28}
.g-rowlabel{font-family:var(--display);font-weight:600;font-size:.92rem;line-height:1.1;color:var(--on-ink);padding-right:1rem}
.g-rowlabel small{display:block;font-family:var(--mono);font-weight:400;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);margin-top:.3em}
.g-lane{grid-column:2 / -1;display:grid;grid-template-columns:repeat(10,minmax(58px,1fr));align-items:center;gap:0;position:relative;height:100%}

.g-bar{margin:6px 3px;min-height:42px;border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:.35rem .5rem;font-size:.74rem;font-weight:600;line-height:1.1;color:#fff;position:relative;cursor:default;
  opacity:0;transform:translateX(-12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),box-shadow .3s var(--ease),filter .3s var(--ease)}
.g-bar.in{opacity:1;transform:none}
.g-bar[data-tone="study"]{background:var(--g-study)}
.g-bar[data-tone="prep"]{background:var(--g-prep)}
.g-bar[data-tone="build"]{background:var(--g-build)}
.g-bar[data-tone="post"]{background:var(--g-post);color:#3a2208}
.g-bar .note{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.5rem;
  letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:#1a1206;padding:.12em .5em;border-radius:3px;white-space:nowrap}
/* year-driven states */
.g-bar.cool{opacity:.26;filter:saturate(.5)}
.g-bar.hot{box-shadow:0 0 0 2px rgba(255,255,255,.5), 0 10px 30px rgba(0,0,0,.45);transform:scale(1.03);z-index:3}

/* investment row */
.g-invrow{display:grid;grid-template-columns:var(--g-cols);align-items:end;margin-top:1rem;min-height:120px}
.g-invlabel{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-soft);align-self:end;padding-bottom:.4rem}
.g-invlane{grid-column:2 / -1;display:grid;grid-template-columns:repeat(10,minmax(58px,1fr));align-items:end;height:120px}
.g-inv{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.4rem;height:100%;padding:0 4px}
.g-inv .bar{width:100%;max-width:34px;background:linear-gradient(var(--gold-bright),var(--gold));border-radius:4px 4px 0 0;
  height:0;transition:height 1s var(--ease-out),box-shadow .3s var(--ease)}
.g-inv b{font-family:var(--display);font-size:.82rem;color:var(--on-ink-soft);font-weight:600}
.g-inv.on .bar{box-shadow:0 0 0 2px rgba(255,255,255,.5),0 8px 22px rgba(184,134,47,.5)}
.g-inv.on b{color:var(--gold-bright)}

/* cursor line */
.g-cursor{position:absolute;top:0;width:2px;background:linear-gradient(var(--gold-bright),transparent);
  pointer-events:none;opacity:0;transition:left .45s var(--ease),opacity .3s;z-index:2}
.g-cursor.show{opacity:.9}

/* detail panel + totals */
.gantt-foot{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,3vw,40px);margin-top:2.4rem;align-items:stretch}
@media(max-width:820px){.gantt-foot{grid-template-columns:1fr}}
.gantt-panel{border:1px solid var(--line-ink);border-radius:4px;padding:clamp(20px,2.4vw,32px);background:rgba(255,255,255,.03)}
.gp-year{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--on-ink);letter-spacing:-.02em}
.gp-inv{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--gold-bright);margin:.5rem 0 1.2rem}
.gp-chips{display:grid;gap:.5rem}
.gp-chip{display:flex;align-items:center;gap:.7rem;font-size:.86rem;color:var(--on-ink-soft)}
.gp-chip i{width:10px;height:10px;border-radius:3px;flex:none}
.gp-chip b{color:var(--on-ink);font-weight:600;margin-left:auto;text-align:right}
.gp-chip.idle{opacity:.4}

.gantt-total{border:1px solid var(--line-ink);border-radius:4px;padding:clamp(20px,2.4vw,32px);
  background:linear-gradient(155deg,rgba(31,95,166,.18),rgba(8,18,15,.2));display:flex;flex-direction:column;justify-content:center}
.gt-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-soft)}
.gt-big{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.95;color:var(--on-ink);letter-spacing:-.03em;margin:.4rem 0 1.2rem}
.gt-big .unit{color:var(--gold-bright);font-size:.5em}
.gt-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;border:1px solid var(--line-ink)}
.gt-bar span{height:100%;width:0;transition:width 1.1s var(--ease-out)}
.gt-seg{display:flex;justify-content:space-between;margin-top:.7rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--on-ink-soft)}
.gt-seg .s1{color:var(--gold-bright)}.gt-seg .s2{color:#6fa8da}

/* ============================================================
   MOBILE — collapse the dense horizontal grid into a compact
   year-strip + detail panel. Same interaction (tap a year / play)
   drives the panel, which surfaces each track's phase + investment.
   ============================================================ */
@media(max-width:680px){
  .gantt-scroll{overflow:visible;padding-bottom:0}
  .gantt-inner{min-width:0}
  /* hide the cramped track bars, investment lane and cursor */
  .g-row,.g-invrow,.g-cursor{display:none}

  /* year ruler becomes a wrap of tappable pills */
  .g-ruler{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.5rem}
  .g-ruler .g-corner{display:none}
  .g-year{flex:1 1 auto;min-width:60px;border:1px solid var(--line-ink);border-radius:999px;
    padding:.6rem .5rem;font-size:.78rem}
  .g-year:hover{border-color:var(--gold-bright)}
  .g-year.on{border-radius:999px;border-color:var(--gold);background:var(--gold-bright)}

  /* detail panel is now the primary view */
  .gantt-foot{margin-top:.4rem;gap:1rem}
  .gantt-panel{order:-1;background:rgba(255,255,255,.05)}
  .gp-year{font-size:clamp(2.2rem,11vw,3rem)}
  .gp-chips{gap:.7rem}
  .gp-chip{font-size:.92rem;padding:.55rem .7rem;border:1px solid var(--line-ink);border-radius:6px}

  /* controls sit comfortably under the title */
  .gantt-head{margin-bottom:1.5rem}
  .gantt-controls{margin-top:.4rem}
}