@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

/* No cambiar diseño base: oscuro + blur suave */
:root{
  --bg:#0b0f14;
  --panel:rgba(20,26,35,.72);
  --panel2:rgba(24,31,42,.62);
  --stroke:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --btn:rgba(255,255,255,.08);
  --btn2:rgba(255,255,255,.12);
  --ok:rgba(120,255,180,.25);
  --warn:rgba(255,210,120,.25);
  --bad:rgba(255,120,120,.25);

  /* layout constants (kept as CSS vars so scale + rows stay aligned) */
  /* matches .label below */
  --labelW:340px;
  /* matches .row gap below */
  --rowGap:4px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Tipografía más angosta para ganar ancho útil */
  font-family: 'Roboto Condensed','Arial Narrow',Arial,system-ui,sans-serif;
  font-size:13px;
  line-height:1.2;
  color:var(--text);
  background: radial-gradient(1200px 700px at 20% 10%, rgba(64,150,255,.15), transparent 60%),
              radial-gradient(900px 700px at 70% 30%, rgba(255,64,150,.10), transparent 55%),
              var(--bg);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
}

.brand{display:flex;align-items:center;gap:14px;min-width:260px}
.logo{width:44px;height:44px;border-radius:10px;border:1px solid var(--stroke);background:#0d1320}
.title{font-size:28px;font-weight:800;letter-spacing:.2px}
.badge{font-size:22px;vertical-align:baseline;margin-left:6px}
.sub{margin-top:4px;color:var(--muted);font-size:14px}

.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lbl{display:none}

.date, .select{
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}

.select{padding-right:28px}

.btn{
  height:36px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:var(--btn);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{background:var(--btn2)}
.btn-primary{background:rgba(120,220,170,.12)}
.btn-primary:hover{background:rgba(120,220,170,.18)}

.wrap{padding:0 18px 18px}
.card{
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border-radius:18px;
  padding:14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.error{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,120,120,.25);
  background:rgba(255,120,120,.08);
  color:rgba(255,220,220,.95);
  white-space:pre-wrap;
}

/* Calendar icon to white (Chrome/Edge) */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.6);
  opacity: .9;
  cursor: pointer;
}
input[type="date"]{color-scheme: dark;} /* helps in some browsers */

.gantt{display:flex;flex-direction:column;gap:10px}
.scale{
  display:flex;
  gap:0;
  overflow:auto;
  /* start ticks right above the track (timeline) */
  padding:8px 8px 0 calc(8px + var(--labelW) + var(--rowGap));
  color:var(--muted);
  font-size:12px;
}
.scale .tick{
  width:calc(var(--px-per-day) * var(--days));
  min-width:40px;
  padding:0 6px 6px;
  border-bottom:1px solid var(--stroke);
  white-space:nowrap;
}

.body{
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.18);
}

.rows{
  position:relative;
  padding:10px;
  min-height:220px;
}

.row{
  position:relative;
  height: 24px;
  display:flex;
  align-items:center;
  /* acercar el bloque de barras hacia la izquierda */
  gap: 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.row:last-child{border-bottom:none}
.label{
  /* Mantener números alineados pero con letra angosta */
  font-family: 'Roboto Condensed','Arial Narrow',Arial,sans-serif;
  font-variant-numeric: tabular-nums;
  /* antes 380px dejaba hueco; reducir para aprovechar espacio */
  width: var(--labelW);
  min-width: var(--labelW);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: pre;
  color:rgba(255,255,255,.85);
  font-size: 10px;
}
.track{
  position:relative;
  height: 14px;
  border-radius:9px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}
.bar{
  position:absolute;
  height:100%;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  /* allow overlay text to extend beyond the bar (useful when bars get short in semana/mes) */
  overflow:visible;
}
.bar.p100{background:var(--ok)}
.bar.p75{background:rgba(120,220,170,.18)}
.bar.p50{background:var(--warn)}
.bar.p25{background:rgba(255,200,120,.16)}
.bar.p0{background:var(--bad)}
.bar .txt{
  position:absolute;
  left:8px;
  top:50%;
  transform:translate(0,-50%);
  font-size:10px;
  color:rgba(255,255,255,.85);
  padding:0 8px 0 0;
  white-space:nowrap;
  /* no clipping: show full ESTADO · ITEM even if it spills outside the bar */
  overflow:visible;
  text-overflow:clip;
  width:auto;
  max-width:none;
  pointer-events:none;
}

/* texto post-barras: ESTADO · ITEM */
.tail{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 11px;
  color:rgba(255,255,255,.85);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  flex: 0 0 360px;
  min-width: 260px;
}
.tail .status{ font-weight: 600; }
.tail .status.p0{ color: rgba(255, 140, 140, .9); }
.tail .status.p25{ color: rgba(255, 190, 120, .9); }
.tail .status.p50{ color: rgba(255, 220, 140, .9); }
.tail .status.p75{ color: rgba(170, 230, 170, .9); }
.tail .status.p100{ color: rgba(120, 255, 190, .95); }

/* % después del DIFF (misma paleta que estado/barra) */
.pctTag.p0{ color: rgba(255, 140, 140, .9); }
.pctTag.p25{ color: rgba(255, 190, 120, .9); }
.pctTag.p50{ color: rgba(255, 220, 140, .9); }
.pctTag.p75{ color: rgba(170, 230, 170, .9); }
.pctTag.p100{ color: rgba(120, 255, 190, .95); }


/* --- Columnas compactas (monoespaciado) --- */
.label .col{
  display: inline-block;
  vertical-align: top;
  padding-right: 1ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.label .col.id{ width: 6ch; }
.label .col.resp{ width: 12ch; }
.label .col.areas{ width: 14ch; }
.label .col.ini{ width: 10ch; }
.label .col.fin{ width: 10ch; }
.label .col.diff{ width: 4ch; text-align: right; padding-right: 2ch; }
.label .col.pct{ width: 4ch; text-align: right; padding-right: 1ch; }

.pctTag{
  display: inline-block;
  min-width: 4ch;
  text-align: right;
  font-weight: 700;
  letter-spacing: .02em;
}
.label .col.status{ width: 11ch; }
.label .col.item{ width: auto; max-width: 40ch; }

/* Color tenue para estado, según avance */
.label .col.status.p0{ color: rgba(255, 140, 140, .9); }
.label .col.status.p25{ color: rgba(255, 190, 120, .9); }
.label .col.status.p50{ color: rgba(255, 220, 140, .9); }
.label .col.status.p75{ color: rgba(170, 230, 170, .9); }
.label .col.status.p100{ color: rgba(120, 255, 190, .95); }