/* ===== Planificador de Proyectos — estilos =====
   Diseño denso, orientado a escritorio: filas bajas, tipografía pequeña,
   máxima información útil por pantalla. */

:root{
  --row-h: 24px;
  --head-h: 46px;
  --left-w: 420px;
  --bg: #eef1f5;
  --panel: #ffffff;
  --line: #d7dce3;
  --line-soft: #e8ebf0;
  --txt: #1e2733;
  --muted: #6b7687;
  --accent: #2563eb;
  --accent-soft: #dbe6ff;
  --bar: #3b82f6;
  --bar-dark: #1d4ed8;
  --summary: #334155;
  --milestone: #7c3aed;
  --done: #16a34a;
  --warn: #dc2626;
  --warn-soft: #fdecec;
  --done-soft: #e7f6ec;
  --urgent-soft: #fdefe2;
  --weekend: #f2f4f8;
  --holiday: #fdeadf;
  --today: #ef4444;
  --crit: #e11d48;
  --shadow: 0 6px 24px rgba(15,23,42,.18);
}

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }   /* el atributo hidden manda sobre display:flex/block */
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:12px/1.35 "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button, input, select, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:#c2c9d4; border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:#a9b2c0; background-clip:padding-box; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- barra superior ---------- */
#topbar{
  display:flex; align-items:center; gap:14px; padding:0 10px; height:44px; flex:0 0 auto;
  background:#fff; border-bottom:1px solid var(--line); box-shadow:0 1px 2px rgba(16,24,40,.04); z-index:30;
}
.brand{ display:flex; align-items:center; gap:8px; min-width:210px; }
.brand .logo{ font-size:18px; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.proj-name{
  border:1px solid transparent; background:transparent; font-size:14px; font-weight:650;
  padding:1px 4px; border-radius:4px; width:230px; letter-spacing:-.2px;
}
.proj-name:hover{ border-color:var(--line); }
.proj-name:focus{ outline:none; border-color:var(--accent); background:#fff; }
.brand .sub{ font-size:10.5px; color:var(--muted); padding-left:5px; }

#viewTabs{ display:flex; gap:2px; background:#eef1f5; padding:2px; border-radius:7px; }
#viewTabs button{
  border:0; background:transparent; padding:5px 13px; border-radius:5px; font-size:12px; font-weight:550; color:#55606f;
}
#viewTabs button:hover{ background:#e2e7ef; color:var(--txt); }
#viewTabs button.active{ background:#fff; color:var(--txt); box-shadow:0 1px 2px rgba(16,24,40,.12); }

.tools{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.grp{ display:flex; align-items:center; gap:2px; }
.tools button, .file-btn{
  border:1px solid var(--line); background:#fff; padding:4px 9px; border-radius:5px; font-size:11.5px; font-weight:550; color:#3d4757;
}
.tools button:hover, .file-btn:hover{ background:#f4f6fa; border-color:#c3cad6; }
.tools button:active{ transform:translateY(1px); }
.tools button.ico{ padding:4px 8px; font-size:13px; line-height:1; min-width:26px; }
.tools button.accent{ border-color:var(--accent); color:var(--accent); }
.tools button.on{ background:var(--accent-soft); border-color:#a9c4ff; color:var(--bar-dark); }
.tools button:disabled{ opacity:.4; cursor:default; }
.file-btn{ cursor:pointer; display:inline-block; }
.chk{ display:flex; align-items:center; gap:4px; color:#4a5566; font-size:11.5px; white-space:nowrap; cursor:pointer; user-select:none; }
.chk input{ margin:0; accent-color:var(--accent); }
.save-status{ font-size:11px; padding:3px 8px; border-radius:20px; background:#eef1f5; color:var(--muted); white-space:nowrap; min-width:74px; text-align:center; }
.save-status[data-state="saving"]{ background:#fff5da; color:#92650a; }
.save-status[data-state="saved"]{ background:#e6f6ec; color:#186c36; }
.save-status[data-state="error"]{ background:var(--warn-soft); color:var(--warn); font-weight:600; }

/* ---------- vistas ---------- */
#main{ flex:1 1 auto; position:relative; overflow:hidden; }
.view{ position:absolute; inset:0; display:none; flex-direction:column; }
.view.active{ display:flex; }

.g-toolbar{
  display:flex; align-items:center; gap:6px; padding:4px 8px; background:#fff;
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.mini{ border:1px solid var(--line); background:#fff; padding:3px 8px; border-radius:5px; font-size:11.5px; color:#3d4757; white-space:nowrap; }
.mini:hover{ background:#f4f6fa; }
.tb-sep{ width:1px; height:16px; background:var(--line); margin:0 3px; }
.filter{ border:1px solid var(--line); border-radius:5px; padding:3px 8px; width:190px; font-size:11.5px; }
.filter:focus{ outline:none; border-color:var(--accent); }

/* ---------- barra de filtros ---------- */
.fbar{ display:flex; align-items:center; gap:5px; flex:1 1 auto; min-width:0; }
.fsearch{ flex:0 1 300px; display:flex; min-width:120px; }
.finput{ width:100%; border:1px solid var(--line); border-radius:5px; padding:3px 8px; font-size:11.5px; }
.finput:focus{ outline:none; border-color:var(--accent); }
.fbtn{ border:1px solid var(--line); background:#fff; border-radius:5px; padding:3px 7px; font-size:11.5px; color:#3d4757; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.fbtn:hover{ background:#f4f6fa; }
.fbtn.on{ border-color:var(--accent); color:var(--bar-dark); background:var(--accent-soft); }
.fbtn .fn{ background:var(--accent); color:#fff; border-radius:9px; padding:0 5px; font-size:10px; font-weight:700; }
.fcaret{ color:var(--muted); font-size:9px; }
.fclear{ border:1px solid #f2c2c2; background:#fff; color:var(--warn); border-radius:5px; padding:3px 7px; font-size:11.5px; white-space:nowrap; }
.fclear:hover{ background:var(--warn-soft); }
.fcount{ color:var(--muted); font-size:11px; white-space:nowrap; margin-left:auto; padding-left:6px; }
.fpop{ position:fixed; z-index:160; background:#fff; border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); min-width:210px; max-width:320px; }
.fpop-head{ display:flex; align-items:center; gap:6px; padding:6px 9px; border-bottom:1px solid var(--line-soft); font-size:11px; }
.fpop-head b{ flex:1 1 auto; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:#5a6473; }
.fpop-head button{ border:0; background:transparent; color:var(--accent); font-size:11px; padding:1px 3px; border-radius:4px; }
.fpop-head button:hover{ background:var(--accent-soft); }
.fpop-list{ max-height:280px; overflow:auto; padding:4px; }
.fpop-list label{ display:flex; align-items:center; gap:6px; padding:3px 6px; border-radius:4px; font-size:11.5px; cursor:pointer; }
.fpop-list label:hover{ background:#f2f6ff; }
.fpop-list input{ margin:0; accent-color:var(--accent); }
.fpop-list span{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fpop-list em{ color:var(--muted); font-style:normal; font-size:10.5px; }
.fdot{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.fpop-vacio{ padding:8px 10px; color:var(--muted); font-size:11.5px; }
.tb-right{ margin-left:auto; color:var(--muted); font-size:11px; }

/* ---------- gantt ---------- */
.gantt{ flex:1 1 auto; display:flex; min-height:0; background:#fff; }
.g-left{ width:var(--left-w); flex:0 0 auto; display:flex; flex-direction:column; min-width:200px; }
.g-left-head, .g-head{ height:var(--head-h); flex:0 0 auto; background:#f7f9fc; border-bottom:1px solid var(--line); }
.g-left-head{
  display:flex; align-items:flex-end; font-size:10.5px; font-weight:650; color:#5a6473;
  text-transform:uppercase; letter-spacing:.3px; padding-bottom:4px;
}
.g-left-head > div{ padding:0 5px; border-left:1px solid var(--line-soft); }
.g-left-head > div:first-child{ border-left:0; }
.c-code{ width:54px; flex:0 0 auto; }
.c-name{ flex:1 1 auto; min-width:0; }
.c-date{ width:58px; flex:0 0 auto; text-align:right; }
.c-dur{ width:44px; flex:0 0 auto; text-align:right; }
.c-pct{ width:52px; flex:0 0 auto; text-align:right; padding-right:7px !important; }
.g-left-body{ flex:1 1 auto; overflow:hidden; position:relative; }
.g-rows{ position:relative; will-change:transform; }

.g-row{
  position:absolute; left:0; right:0; height:var(--row-h); display:flex; align-items:center;
  border-bottom:1px solid var(--line-soft); font-size:11.5px; white-space:nowrap; cursor:default; user-select:none;
}
.g-row:hover{ background:#f5f8ff; }
.g-row.sel{ background:var(--accent-soft) !important; }
.g-row.chapter{ background:#f1f4f9; font-weight:650; }
.g-row.summary{ font-weight:600; }
.g-row > div{ padding:0 5px; overflow:hidden; text-overflow:ellipsis; }
.g-row .c-name{ display:flex; align-items:center; gap:3px; }
.g-row .c-date, .g-row .c-dur, .g-row .c-pct{ color:#55606f; font-variant-numeric:tabular-nums; }
.g-row .c-code{ color:var(--muted); font-size:10.5px; font-variant-numeric:tabular-nums; }
.tw{ width:13px; flex:0 0 auto; text-align:center; color:#7b8694; font-size:9px; cursor:pointer; user-select:none; }
.tw:hover{ color:var(--accent); }
.tw.empty{ cursor:default; }
.rname{ overflow:hidden; text-overflow:ellipsis; }
.rdot{ width:7px; height:7px; border-radius:2px; flex:0 0 auto; }
.rdot.ms{ transform:rotate(45deg); background:var(--milestone); }
.rflag{ color:var(--warn); font-weight:700; flex:0 0 auto; }
.g-row.st-done{ background:var(--done-soft); }
.g-row.st-urgent{ background:var(--urgent-soft); }
.g-row.st-done .rname{ color:#2f6b45; }
.rowband.done{ background:var(--done-soft); }
.rowband.urgent{ background:var(--urgent-soft); }
.wsstripe{ width:3px; height:14px; border-radius:2px; flex:0 0 auto; margin-right:1px; }
.g-row.filtered-out{ display:none; }

.g-splitter{ width:5px; flex:0 0 auto; cursor:col-resize; background:var(--line); }
.g-splitter:hover, .g-splitter.drag{ background:var(--accent); }

.g-right{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.g-head{ overflow:hidden; position:relative; }
.g-head-inner{ position:absolute; top:0; left:0; height:100%; will-change:transform; }
.hb{ position:absolute; top:0; height:22px; border-left:1px solid var(--line); font-size:10.5px; font-weight:650;
     color:#46505f; padding:3px 5px; white-space:nowrap; overflow:hidden; text-transform:uppercase; letter-spacing:.3px; }
.hc{ position:absolute; top:22px; height:24px; border-left:1px solid var(--line-soft); font-size:10px; color:#5a6473;
     text-align:center; padding-top:1px; overflow:hidden; line-height:1.05; }
.hc.we{ background:var(--weekend); color:#9aa4b2; }
.hc.hol{ background:var(--holiday); color:#a9603a; }
.hc b{ display:block; font-size:10.5px; font-weight:650; color:#3d4757; }
.hc.we b, .hc.hol b{ color:inherit; font-weight:550; }
.hc.today{ background:#fee2e2; }
.hc.today b{ color:var(--today); font-weight:700; }
.hflag{ position:absolute; top:0; height:22px; background:var(--today); color:#fff; font-size:9.5px; font-weight:700;
        padding:3px 4px; border-radius:0 3px 3px 0; z-index:2; }

.g-scroll{ flex:1 1 auto; overflow:auto; position:relative; }
.g-canvas{ position:relative; user-select:none; -webkit-user-select:none; }
.g-cols{ position:absolute; inset:0; pointer-events:none; }
.col{ position:absolute; top:0; bottom:0; }
.col.we{ background:var(--weekend); }
.col.hol{ background:var(--holiday); }
.col.grid{ border-left:1px solid var(--line-soft); }
.col.gridm{ border-left:1px solid #cfd6e0; }
.rowline{ position:absolute; left:0; right:0; height:1px; background:var(--line-soft); }
.rowband{ position:absolute; left:0; right:0; background:#f7f9fc; }
.rowband.sel{ background:var(--accent-soft); opacity:.55; }

.g-links{ position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
.g-links path.hit{ stroke:transparent; stroke-width:9px; fill:none; pointer-events:stroke; cursor:pointer; }
.g-links path.hit:hover{ stroke:rgba(37,99,235,.18); }
.g-links path{ fill:none; stroke:#8c97a8; stroke-width:1.2px; }
.g-links path.hi{ stroke:var(--accent); stroke-width:1.8px; }
.g-links path.bad{ stroke:var(--warn); stroke-dasharray:4 3; stroke-width:1.6px; }
.g-links path.dim{ opacity:.25; }
.g-links polygon{ fill:#8c97a8; }
.g-links polygon.hi{ fill:var(--accent); }
.g-links polygon.bad{ fill:var(--warn); }
.g-links polygon.dim{ opacity:.25; }

/* la capa de barras no intercepta clics en sus huecos: así se puede pinchar
   en las flechas de dependencia que quedan debajo y en el fondo del lienzo */
.g-bars{ position:absolute; inset:0; pointer-events:none; }
.bar{
  position:absolute; height:14px; border-radius:3px; background:var(--bar); cursor:grab;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12); overflow:visible; pointer-events:auto;
}
.bar:active{ cursor:grabbing; }
.bar .fill{ position:absolute; left:0; top:0; bottom:0; background:var(--bar-dark); border-radius:3px 0 0 3px; opacity:.85; pointer-events:none; }
.bar .lbl{
  position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:6px; white-space:nowrap;
  font-size:11px; color:#46505f; pointer-events:none;
}
.bar .lbl .pct{ color:var(--muted); }
/* color de la barra según el estado (el nombre del estado va siempre escrito
   en la lista y en el detalle: nunca se distingue solo por el color) */
.bar.st-pending{ background:#9aa5b4; }   .bar.st-pending .fill{ background:#5d6877; }
.bar.st-hold{ background:#c4a2f7; }      .bar.st-hold .fill{ background:#7e22ce; }
.bar.st-progress{ background:#60a5fa; }  .bar.st-progress .fill{ background:#1d4ed8; }
.bar.st-scheduled{ background:#67cfe3; } .bar.st-scheduled .fill{ background:#0e7490; }
.bar.st-urgent{ background:#fdba74; }    .bar.st-urgent .fill{ background:#ea580c; }
.bar.st-done{ background:#86efac; }      .bar.st-done .fill{ background:var(--done); }
.bar.sel{ outline:2px solid #1d4ed8; outline-offset:1px; }
.bar.bad{ box-shadow:inset 0 0 0 2px var(--warn); }
.bar.crit{ box-shadow:inset 0 0 0 2px var(--crit); }
.bar.ghost{ opacity:.45; pointer-events:none; outline:1px dashed #1d4ed8; }
.bar .warn{ position:absolute; right:-15px; top:-1px; color:var(--warn); font-size:11px; font-weight:700; pointer-events:none; }

.bar.summary{ height:9px; border-radius:2px; background:var(--summary); cursor:grab; }
.bar.summary::before, .bar.summary::after{
  content:""; position:absolute; top:100%; border-top:5px solid var(--summary);
  border-left:4px solid transparent; border-right:4px solid transparent;
}
.bar.summary::before{ left:0; }
.bar.summary::after{ right:0; }
.bar.summary .fill{ background:#0f172a; }
.bar.chapter{ background:#0f172a; }
.bar.chapter::before, .bar.chapter::after{ border-top-color:#0f172a; }

.msw .ms{
  position:absolute; width:12px; height:12px; background:var(--milestone); cursor:grab;
  transform:rotate(45deg); border-radius:2px;
}
.msw .ms.sel{ outline:2px solid #1d4ed8; outline-offset:2px; }
.msw .ms.st-done{ background:var(--done); }
.msw .ms.st-urgent{ background:#ea580c; }
.msw .ms.bad{ box-shadow:0 0 0 2px var(--warn); }
.mslbl{ position:absolute; font-size:11px; color:#46505f; white-space:nowrap; pointer-events:none; font-weight:550; }

.hnd{ position:absolute; top:0; bottom:0; width:6px; cursor:ew-resize; }
.hnd.l{ left:-2px; } .hnd.r{ right:-2px; }
.bar:hover .hnd::after, .bar.sel .hnd::after{
  content:""; position:absolute; top:3px; bottom:3px; left:2px; width:2px; background:rgba(255,255,255,.85); border-radius:1px;
}
.dot{
  position:absolute; top:50%; width:11px; height:11px; margin-top:-5.5px; border-radius:50%; background:#fff;
  border:2px solid var(--accent); cursor:crosshair; display:none; z-index:5;
}
.dot.l{ left:-16px; } .dot.r{ right:-16px; }
.bar:hover .dot, .bar.sel .dot, .msw:hover .dot, .msw.sel .dot{ display:block; }
.dot:hover{ background:var(--accent); }
.msw{ position:absolute; height:var(--row-h); cursor:grab; pointer-events:auto; }
.msw .ms{ left:50%; margin-left:-6px; top:50%; margin-top:-6px; }
.msw .dot.l{ left:-14px; } .msw .dot.r{ right:-14px; }
.msw .mslbl{ top:50%; transform:translateY(-50%); }
.droptarget{ outline:2px dashed var(--accent) !important; outline-offset:2px; }

.g-today{ position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--today); pointer-events:none; opacity:.75; z-index:4; }
.g-marquee{ position:absolute; border:1px solid var(--accent); background:rgba(37,99,235,.10); pointer-events:none; z-index:6; }
.g-linkdraw{ position:absolute; top:0; left:0; pointer-events:none; z-index:7; overflow:visible; }
.g-linkdraw path{ fill:none; stroke:var(--accent); stroke-width:1.8px; stroke-dasharray:5 3; }

.g-empty{
  position:absolute; top:10px; left:14px; color:var(--muted); font-size:12.5px; background:#fff;
  border:1px dashed var(--line); border-radius:6px; padding:7px 12px; pointer-events:none;
}
.drag-tip{
  position:fixed; z-index:200; background:#1e2733; color:#fff; padding:5px 9px; border-radius:5px; font-size:11.5px;
  pointer-events:none; box-shadow:var(--shadow); white-space:nowrap; line-height:1.4;
}
.drag-tip b{ font-weight:650; }
.drag-tip.hover{ background:#111827; max-width:340px; white-space:normal; }
.drag-tip .k{ color:#9ca3af; }
.drag-tip .sep{ display:block; height:4px; }
.drag-tip .bad{ color:#fca5a5; display:block; margin-top:2px; }
.drag-tip .ok{ color:#86efac; }

/* ---------- vista tareas ---------- */
.t-wrap{ flex:1 1 auto; overflow:auto; background:#fff; }
table.tbl{ border-collapse:separate; border-spacing:0; width:100%; font-size:11.5px; }
table.tbl th{
  position:sticky; top:0; z-index:5; background:#f7f9fc; border-bottom:1px solid var(--line); text-align:left;
  padding:5px 6px; font-size:10.5px; font-weight:650; color:#5a6473; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap;
}
table.tbl td{ border-bottom:1px solid var(--line-soft); padding:0 6px; height:var(--row-h); white-space:nowrap; }
table.tbl tr:hover td{ background:#f5f8ff; }
table.tbl tr.sel td{ background:var(--accent-soft); }
table.tbl tr.chapter td{ background:#f1f4f9; font-weight:650; }
table.tbl tr.chapter:hover td{ background:#e9eef7; }
table.tbl tr.summary td{ font-weight:600; }
td.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.grip{ color:#ccd2da; cursor:grab; text-align:center; user-select:none; font-size:11px; padding:0 !important; }
tr:hover td.grip{ color:#7b8694; }
.g-row .c-code{ cursor:grab; }
td.nm{ width:36%; }
td.nm .cellwrap{ display:flex; align-items:center; gap:3px; }
.cellinput{ border:1px solid transparent; background:transparent; border-radius:3px; padding:1px 3px; width:100%; }
.cellinput:hover{ border-color:var(--line); background:#fff; }
.cellinput:focus{ outline:none; border-color:var(--accent); background:#fff; }
.cellinput.date{ width:112px; font-variant-numeric:tabular-nums; }
.cellinput.n{ width:46px; text-align:right; font-variant-numeric:tabular-nums; }
select.cellinput{ padding:1px; }
.mini.det{ padding:0 5px; line-height:16px; color:var(--muted); }
.mini.det:hover{ color:var(--accent); border-color:var(--accent); }
.pbar{ position:relative; width:52px; height:9px; border-radius:5px; background:#e6eaf0; overflow:hidden; display:inline-block; vertical-align:middle; }
.pbar i{ position:absolute; left:0; top:0; bottom:0; background:var(--done); }
.wschip{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:#46505f; max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wschip i{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.wschip.her{ color:var(--muted); }
.calchk{ accent-color:var(--accent); margin:0; }
table.tbl tr.st-done td{ background:var(--done-soft); }
table.tbl tr.st-urgent td{ background:var(--urgent-soft); }
table.tbl tr.st-done:hover td, table.tbl tr.st-urgent:hover td{ filter:brightness(.98); }
table.tbl tr.sel td{ background:var(--accent-soft) !important; }
/* desplegables con color: estado y línea de trabajo */
select.stsel{ font-weight:600; border-radius:4px; padding:1px 2px; border:1px solid transparent; }
select.stsel:hover{ border-color:var(--line); }
select.wssel{ font-weight:600; font-size:10.5px; letter-spacing:.2px; border-radius:4px; padding:1px 2px; border:1px solid transparent; width:100%; }
select.wssel:hover{ border-color:rgba(0,0,0,.25); }
select.wssel option, select.stsel option{ background:#fff; color:#1e2733; font-weight:500; }

/* ---------- calendario ---------- */
.cal-wrap{ flex:1 1 auto; display:flex; flex-direction:column; background:#fff; min-height:0; }
.cal-bar{ display:flex; align-items:center; gap:6px; padding:5px 8px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cal-bar2{ display:flex; align-items:center; padding:4px 8px; border-bottom:1px solid var(--line); }
.cal-title{ font-size:14px; font-weight:650; min-width:150px; }
.cal-lbl{ color:var(--muted); font-size:11px; }
.cal-leg{ display:flex; flex-wrap:wrap; gap:5px; padding:5px 8px; border-bottom:1px solid var(--line); background:#fbfcfe; }
.cleg{ display:inline-flex; align-items:center; gap:5px; font-size:11px; border:1px solid var(--line); border-radius:12px;
       padding:1px 9px 1px 5px; cursor:pointer; user-select:none; background:#fff; color:#3d4757; }
.cleg:hover{ border-color:#c3cad6; }
.cleg i{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.cleg.off{ opacity:.5; text-decoration:line-through; }
.cal-main{ flex:1 1 auto; display:flex; min-height:0; }
.cal-col{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line); background:#f7f9fc; }
.cal-dow div{ padding:3px 6px; font-size:10.5px; font-weight:650; color:#5a6473; text-transform:uppercase; letter-spacing:.3px; }
.cal-grid{ flex:1 1 auto; overflow:auto; display:flex; flex-direction:column; }
.cal-key{ display:flex; flex-wrap:wrap; gap:4px 14px; padding:5px 10px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
.cal-key b{ color:var(--txt); }
.cal-key-band{ display:inline-block; width:22px; height:6px; border-radius:3px; background:var(--muted); vertical-align:middle; margin-right:3px; }

/* una semana: fondo (días), números, bandas de «toda la duración» y fichas de cada día */
.cweek{ position:relative; border-bottom:1px solid var(--line); flex:1 0 auto; min-height:96px; display:flex; flex-direction:column; }
.cbg{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr); }
.ccell{ border-right:1px solid var(--line-soft); cursor:pointer; }
.ccell.we{ background:#eceff4; }
.ccell.hol{ background:var(--holiday); }
.ccell.out{ background:#fafbfc; }
.ccell.today{ background:#fef2f2; box-shadow:inset 0 2px 0 var(--today); }
.ccell.csel{ box-shadow:inset 0 0 0 2px var(--accent); }
.ccell.today.csel{ box-shadow:inset 0 2px 0 var(--today), inset 0 0 0 2px var(--accent); }
.cnums{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); height:21px; }
.cnum{ display:flex; align-items:center; gap:4px; padding:2px 6px; font-size:11px; font-weight:650; color:#46505f; cursor:pointer; }
.cnum.out{ color:#a8b0bb; font-weight:550; }
.cnum.today span{ color:var(--today); }
.chol{ visibility:hidden; font-size:9.5px; color:var(--muted); border:1px solid var(--line); border-radius:3px;
       padding:0 3px; background:#fff; line-height:14px; cursor:pointer; }
.cnum:hover .chol{ visibility:visible; }
.chol:hover{ color:var(--accent); border-color:var(--accent); }
.cbands{ position:relative; margin:1px 0 3px; }
.cdays{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); flex:1 1 auto; padding-bottom:4px; pointer-events:none; }
.cday{ display:flex; flex-direction:column; gap:2px; padding:0 3px; min-width:0; }
.cday > *{ pointer-events:auto; }

/* fichas de un día: inicio ▸, fin ■, hito ◆ (con el color de su línea de trabajo) */
.cbar{ cursor:pointer; }
.cev{ display:flex; align-items:center; gap:4px; height:18px; padding:0 5px 0 0; border-radius:4px; background:#fff;
      border:1px solid var(--line); font-size:11px; color:var(--txt); overflow:hidden; box-shadow:0 1px 0 rgba(15,23,42,.05); }
.cev i{ flex:0 0 auto; width:4px; align-self:stretch; }
.cev b{ font-weight:700; }
.cev.ev-ms{ font-weight:650; border-color:#c4b5fd; }
.cev.ev-ms b{ color:var(--milestone); }
.cev.ev-fin b{ color:var(--txt); }
.cev.ev-ini b{ color:var(--muted); }
.cev.chapter{ font-weight:700; background:#f1f4f9; }
.cev.done .cbtxt{ color:var(--muted); }
.cev:hover{ border-color:var(--accent); }
.cev.sel, .cband.sel{ outline:2px solid #1d4ed8; outline-offset:1px; }
.cmas{ align-self:flex-start; border:0; background:transparent; color:var(--accent); font-size:10.5px; font-weight:600; padding:0 4px; cursor:pointer; }
.cmas:hover{ text-decoration:underline; }

/* bandas: la tarea entera, fina y en tono suave de su línea de trabajo */
.cband{ position:absolute; height:14px; border-radius:7px; display:flex; align-items:center; padding:0 7px; overflow:hidden;
        background:#eef1f5; background:color-mix(in srgb, var(--c) 22%, #fff); border-left:4px solid var(--c); font-size:10.5px; color:var(--txt); }
.cband.chapter{ font-weight:700; background:#e2e7ef; background:color-mix(in srgb, var(--c) 32%, #fff); }
.cband.vi{ border-top-left-radius:0; border-bottom-left-radius:0; border-left-style:dashed; }
.cband.si{ border-top-right-radius:0; border-bottom-right-radius:0; }
.cband.done{ opacity:.6; }
.cbtxt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmore{ position:relative; padding:0 6px; font-size:10.5px; color:var(--muted); pointer-events:none; }

/* panel «En curso» */
.cal-side{ flex:0 0 300px; border-left:1px solid var(--line); background:#fbfcfe; overflow:auto; padding:10px 12px; }
.cs-head{ display:flex; flex-direction:column; gap:1px; margin-bottom:6px; }
.cs-head b{ font-size:14px; }
.cs-head span{ color:var(--muted); font-size:11px; }
.cal-side h4{ margin:12px 0 5px; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:#6b7687;
              border-bottom:1px solid var(--line-soft); padding-bottom:3px; }
.cs-ev, .cs-act{ display:flex; align-items:center; gap:6px; padding:4px 6px 4px 0; border-radius:5px; cursor:pointer; background:#fff;
                 border:1px solid var(--line-soft); margin-bottom:4px; overflow:hidden; }
.cs-ev:hover, .cs-act:hover{ border-color:var(--accent); }
.cs-ev i, .cs-act i{ flex:0 0 auto; width:4px; align-self:stretch; }
.cs-ev span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-ev em{ color:var(--muted); font-style:normal; font-size:10.5px; }
.cs-nm{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.cs-nm span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-nm small{ color:var(--muted); font-size:10.5px; }
.cs-nm small b.urg{ color:#c2410c; } .cs-nm small b.hold{ color:#7e22ce; }
.cs-pr{ flex:0 0 auto; display:flex; align-items:center; gap:4px; }
.cs-pr .pbar{ width:44px; }
.cs-pr em{ font-style:normal; font-size:10.5px; color:var(--muted); width:30px; text-align:right; }
.cs-ev.done span, .cs-act.done .cs-nm span{ color:var(--muted); }
.cs-vacio{ color:var(--muted); font-size:11.5px; margin:2px 0 6px; }
.cs-ayuda{ color:var(--muted); font-size:10.5px; margin-top:14px; line-height:1.45; }

/* ---------- configuración ---------- */
.cfg{ flex:1 1 auto; overflow:auto; padding:14px; }
.cfg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; max-width:1400px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.card h3{ margin:0 0 8px; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color:#46505f; }
.card p{ margin:0 0 8px; color:var(--muted); font-size:11.5px; }
.frow{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.frow label{ width:130px; flex:0 0 auto; color:#4a5566; }
.frow input[type=text], .frow input[type=date], .frow input[type=number], .frow select, .frow textarea{
  flex:1 1 auto; border:1px solid var(--line); border-radius:5px; padding:4px 7px; min-width:0;
}
.frow input:focus, .frow select:focus, .frow textarea:focus{ outline:none; border-color:var(--accent); }
.frow input[type=date]{ min-width:132px; }
input:disabled, select:disabled, textarea:disabled{ background:#f4f6fa; color:#7b8694; cursor:not-allowed; }
.wd-row{ display:flex; gap:4px; }
.wd-row label{ width:auto; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; color:#4a5566; }
.hol-list{ max-height:210px; overflow:auto; border:1px solid var(--line-soft); border-radius:5px; }
.hol-list div{ display:flex; gap:6px; align-items:center; padding:2px 6px; border-bottom:1px solid var(--line-soft); }
.hol-list div:last-child{ border-bottom:0; }
.hol-list .d{ font-variant-numeric:tabular-nums; color:#46505f; width:86px; }
.hol-list .n{ flex:1 1 auto; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.hol-list .wscol{ width:26px; height:20px; border:1px solid var(--line); border-radius:4px; padding:0; background:#fff; flex:0 0 auto; }
.hol-list .wsname{ flex:2 1 auto; border:1px solid transparent; border-radius:4px; padding:1px 4px; min-width:0; }
.hol-list .wsname:hover{ border-color:var(--line); }
.hol-list .wsname:focus{ outline:none; border-color:var(--accent); }
.wsdot{ width:12px; height:12px; border-radius:4px; flex:0 0 auto; }
.x{ border:0; background:transparent; color:var(--muted); font-size:13px; line-height:1; padding:0 3px; }
.x:hover{ color:var(--warn); }
.btnrow{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.btnrow button, .btnrow .file-btn{ border:1px solid var(--line); background:#fff; padding:5px 10px; border-radius:5px; font-size:11.5px; font-weight:550; }
.btnrow button:hover{ background:#f4f6fa; }
/* el botón primario debe ganar a las reglas de contexto (.modal .mfoot button, .start-actions button…) */
button.primary, .btnrow button.primary, .modal .mfoot button.primary, .start-actions button.primary{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
button.primary:hover, .btnrow button.primary:hover, .modal .mfoot button.primary:hover, .start-actions button.primary:hover{ background:#1d4ed8; border-color:#1d4ed8; }
.btnrow button.danger{ color:var(--warn); border-color:#f2c2c2; }
.btnrow button.danger:hover{ background:var(--warn-soft); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:11.5px; }
.kv b{ font-weight:600; color:#46505f; }
.kv span{ color:var(--muted); font-variant-numeric:tabular-nums; }
kbd{ background:#eef1f5; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:0 4px; font:inherit; font-size:10.5px; }

/* ---------- panel de detalle ---------- */
.panel{
  position:absolute; top:0; right:0; bottom:0; width:430px; background:#fff; border-left:1px solid var(--line);
  box-shadow:var(--shadow); z-index:40; display:flex; flex-direction:column; animation:slidein .13s ease-out;
}
@keyframes slidein{ from{ transform:translateX(14px); opacity:.4 } to{ transform:none; opacity:1 } }
.panel header{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); background:#f7f9fc; }
.panel header .code{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.panel header h2{ margin:0; font-size:13px; font-weight:650; flex:1 1 auto; }
.panel .body{ flex:1 1 auto; overflow:auto; padding:10px; }
.panel .sec{ margin-bottom:14px; }
.panel .sec > h4{
  margin:0 0 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:#6b7687;
  border-bottom:1px solid var(--line-soft); padding-bottom:3px;
}
.dep-row{ display:flex; align-items:center; gap:5px; padding:2px 0; }
.dep-row .nm{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dep-row select, .dep-row input{ border:1px solid var(--line); border-radius:4px; padding:1px 3px; }
.dep-row input.lag{ width:44px; text-align:right; }
.dep-row.bad .nm{ color:var(--warn); }
.cmt{ border-left:2px solid var(--line); padding:2px 0 4px 7px; margin-bottom:6px; }
.cmt .meta{ font-size:10.5px; color:var(--muted); }
.cmt .txt{ white-space:pre-wrap; }
.panel textarea{ width:100%; resize:vertical; border:1px solid var(--line); border-radius:5px; padding:5px 7px; font:inherit; }

/* ---------- modal / menú / toast ---------- */
.modal-back{ position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:100; display:flex; align-items:center; justify-content:center; }
.modal{ background:#fff; border-radius:9px; box-shadow:var(--shadow); min-width:390px; max-width:560px; max-height:80vh; display:flex; flex-direction:column; }
.modal h3{ margin:0; padding:11px 14px; font-size:13.5px; border-bottom:1px solid var(--line); }
.modal .mbody{ padding:11px 14px; overflow:auto; font-size:12px; }
.modal .mfoot{ padding:9px 14px; border-top:1px solid var(--line); display:flex; gap:7px; justify-content:flex-end; background:#f7f9fc; border-radius:0 0 9px 9px; }
.modal .mfoot button{ border:1px solid var(--line); background:#fff; padding:6px 13px; border-radius:5px; font-weight:550; }
.modal .mfoot button:hover{ background:#f0f3f8; }
.modal .mfoot button.primary:hover{ background:#1d4ed8; }
.impact{ max-height:230px; overflow:auto; border:1px solid var(--line-soft); border-radius:6px; }
.impact div{ display:flex; gap:8px; padding:3px 8px; border-bottom:1px solid var(--line-soft); font-variant-numeric:tabular-nums; }
.impact div:last-child{ border-bottom:0; }
.impact .c{ width:60px; color:var(--muted); }
.impact .n{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.impact .d{ color:#46505f; }
.impact .d s{ color:var(--muted); }

.ctx{ position:fixed; z-index:150; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:3px; min-width:190px; }
.ctx button{ display:flex; width:100%; border:0; background:transparent; text-align:left; padding:5px 9px; border-radius:4px; font-size:11.5px; gap:8px; }
.ctx button:hover{ background:var(--accent-soft); }
.ctx button.danger{ color:var(--warn); }
.ctx button.danger:hover{ background:var(--warn-soft); }
.ctx .k{ margin-left:auto; color:var(--muted); font-size:10.5px; }
.ctx hr{ border:0; border-top:1px solid var(--line-soft); margin:3px 0; }
.ctx-head{ padding:4px 9px 5px; font-size:10.5px; color:var(--muted); border-bottom:1px solid var(--line-soft); margin-bottom:3px;
  max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#dropLine{ position:fixed; height:2px; background:var(--accent); z-index:250; pointer-events:none; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.7); }
#dropLine::before{ content:""; position:absolute; left:-5px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
#dragGhost{ position:fixed; z-index:250; background:#1e2733; color:#fff; padding:4px 10px; border-radius:5px; font-size:11.5px;
            pointer-events:none; box-shadow:var(--shadow); max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropinto{ outline:2px solid var(--accent); outline-offset:-2px; background:var(--accent-soft) !important; }
.rowdragging{ opacity:.45; }
body.dnd{ cursor:grabbing; }
body.dnd *{ cursor:grabbing !important; user-select:none; }

#toast{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.toast{ background:#1e2733; color:#fff; padding:7px 13px; border-radius:6px; font-size:12px; box-shadow:var(--shadow); animation:tin .15s ease-out; max-width:520px; }
.toast.err{ background:#b91c1c; }
.toast.ok{ background:#166534; }
@keyframes tin{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }

/* ---------- barra de estado ---------- */
#statusbar{
  height:22px; flex:0 0 auto; background:#fff; border-top:1px solid var(--line); display:flex; align-items:center;
  gap:16px; padding:0 10px; font-size:11px; color:var(--muted);
}
#statusbar .st-right{ margin-left:auto; }
#stConflicts.bad{ color:var(--warn); font-weight:650; }

/* ---------- pantalla inicial ---------- */
.start-back{ position:fixed; inset:0; background:rgba(238,241,245,.96); z-index:400; display:flex; align-items:center; justify-content:center; }
.start-card{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:26px 30px; max-width:520px; }
.start-card h1{ margin:0 0 8px; font-size:21px; letter-spacing:-.4px; }
.start-card p{ color:#4a5566; font-size:12.5px; line-height:1.5; }
.start-actions{ display:flex; gap:8px; margin:18px 0 12px; flex-wrap:wrap; }
.start-actions button, .start-actions .file-btn{ border:1px solid var(--line); background:#fff; padding:9px 15px; border-radius:7px; font-size:12.5px; font-weight:600; }
.start-actions button:hover, .start-actions .file-btn:hover{ background:#f4f6fa; }
.start-card .hint{ font-size:11.5px; color:var(--muted); margin:0; }

@media (max-width:1100px){
  .brand .sub{ display:none; }
  .tb-right{ display:none; }
  #statusbar .st-right{ display:none; }
}


/* ---------- impresión / PDF ---------- */
#printArea{ display:none; background:#fff; color:#1e2733; }
body.printing #printArea{ display:block; position:fixed; inset:0; z-index:500; overflow:auto; padding:10px 14px; }
.phead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; border-bottom:2px solid #1e2733; padding-bottom:4px; margin-bottom:6px; }
.phead h1{ font-size:15px; margin:0; letter-spacing:-.2px; }
.psub{ color:#55606f; font-size:10px; margin-top:2px; }
.pfecha{ color:#55606f; font-size:9.5px; white-space:nowrap; }
.pleyenda{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.pleg{ display:inline-flex; align-items:center; gap:4px; font-size:9px; color:#46505f; }
.pleg i{ width:9px; height:9px; border-radius:2px; display:inline-block; }
table.pgt, table.ptbl{ width:100%; border-collapse:collapse; table-layout:fixed; }
.pgt th, .ptbl th{ background:#eef1f5; font-size:8.5px; text-transform:uppercase; letter-spacing:.3px; color:#46505f;
  text-align:left; padding:3px 4px; border-bottom:1px solid #b9c1cc; }
.pgt td, .ptbl td{ padding:1.5px 4px; border-bottom:1px solid #eceff4; font-size:9px; vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pgt .pc1{ width:42px; } .pgt .pc2{ width:30%; } .pgt .pc3{ width:48px; } .pgt .pc4{ width:28px; text-align:right; }
.pgt .pchart{ position:relative; padding:0; height:12px; }
.pgt .pth{ height:28px; vertical-align:bottom; position:relative; }
.pmeses{ position:relative; height:13px; } .psem{ position:relative; height:12px; }
.pm{ position:absolute; top:0; font-size:8px; font-weight:700; color:#46505f; border-left:1px solid #b9c1cc; padding-left:2px; overflow:hidden; white-space:nowrap; }
.pm.alt{ background:#f4f6fa; }
.pw{ position:absolute; top:0; font-size:7px; color:#78828f; border-left:1px solid #dfe3e8; padding-left:1px; overflow:hidden; }
.pbar{ position:absolute; top:2.5px; height:7px; border-radius:2px; }
.pbar.sum{ top:3.5px; height:5px; border-radius:1px; }
.pbar i{ position:absolute; left:0; top:0; bottom:0; background:rgba(0,0,0,.32); border-radius:2px; }
.pms{ position:absolute; top:2px; width:8px; height:8px; transform:rotate(45deg); }
.phoy{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed #dc2626; }
.phoy.hoy{ z-index:2; }
.pgt tr.pcap td, .ptbl tr.pcap td{ background:#eef1f5; font-weight:700; }
.pgt tr.psum td, .ptbl tr.psum td{ font-weight:600; }
.pcal .cal-dow{ border:1px solid var(--line); }
.pcalgrid .cweek{ border:1px solid var(--line); border-top:0; }
.pcalgrid .cweek{ min-height:64px; }
.pcalgrid .cev{ font-size:8.5px; height:14px; }
.pcalgrid .cband{ font-size:8px; height:11px; }
.pcalgrid .cmas{ font-size:8px; }
.pcalgrid .chol{ display:none; }

@media print {
  @page{ margin:9mm; }
  html, body{ height:auto !important; overflow:visible !important; background:#fff !important; display:block !important; }
  body > *{ display:none !important; }
  body > #printArea{ display:block !important; position:static !important; padding:0 !important; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  tr{ break-inside:avoid; }
  thead{ display:table-header-group; }
  .pgt td, .ptbl td{ border-bottom:1px solid #e6e9ef; }
}

/* ======================================================================
   Versión alojada: acceso, proyectos, personas, historial y administración
   ====================================================================== */

/* qué se ve en cada modo */
.srv-only, .home-only { display: none; }
body.srv .srv-only { display: revert; }
body.srv .local-only { display: none !important; }
body.mode-home .home-only, body.mode-admin .home-only { display: inline; }
body.mode-home .proj-only, body.mode-admin .proj-only, body.mode-login .proj-only { display: none !important; }
body.mode-login #topbar, body.mode-login #statusbar { display: none; }
body.mode-login #main { display: none; }

/* solo lectura */
body.readonly .edit-only { display: none !important; }
body.readonly .hnd, body.readonly .dot { display: none !important; }
body.readonly .bar, body.readonly .msw { cursor: default; }
body.readonly .bar:active { cursor: default; }
body.readonly td.grip { visibility: hidden; }
body.readonly .g-row .c-code { cursor: default; }
body.readonly #projName { pointer-events: none; }
.readonly-banner { display: none; }
body.readonly #ganttHint::before { content: "Solo lectura · "; font-weight: 700; color: #92650a; }

/* barra superior */
#btnHome { border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 3px 9px; font-size: 14px; line-height: 1; }
#btnHome:hover { background: #f4f6fa; }
.brand-row { display: flex; align-items: center; gap: 6px; }
.brand-app { font-size: 14px; font-weight: 650; letter-spacing: -.2px; padding-left: 5px; }
.proj-name:disabled { color: var(--txt); opacity: 1; background: transparent; cursor: default; }
.userbtn { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 3px 5px 3px 11px; font-size: 11.5px; }
.userbtn:hover { background: #f4f6fa; }
.userbtn .uname { font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbadge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 10px; white-space: nowrap; letter-spacing: .2px; }
.r-admin { background: #1e2733; color: #fff; }
.r-pm, .r-owner { background: #dbeafe; color: #1d4ed8; }
.r-viewer { background: #e5e7eb; color: #374151; }
.save-status[data-state="offline"] { background: #fff5da; color: #92650a; font-weight: 600; }
.umenu { right: 10px; top: 42px; left: auto; min-width: 230px; z-index: 160; }
.um-head { padding: 6px 10px 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 3px; display: flex; flex-direction: column; gap: 1px; }
.um-head span { color: var(--muted); font-size: 11px; }

/* formularios y avisos */
.form-err { color: var(--warn); font-size: 12px; min-height: 16px; margin-top: 6px; font-weight: 600; }
.muted { color: var(--muted); font-size: 11.5px; }
button.danger, .modal .mfoot button.danger { color: var(--warn); border-color: #f2c2c2; }
.modal .mfoot button.primary.danger { background: var(--warn); border-color: var(--warn); color: #fff; }
.modal .mfoot button.primary.danger:hover { background: #b91c1c; }
.modal.wide { min-width: 640px; max-width: 760px; }
.modal .frow input[type=text], .modal .frow input[type=password], .modal .frow input[type=number], .modal .frow select { min-width: 0; }

/* acceso */
.auth-back { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #eef1f5, #dfe6f0); }
.auth-card { width: 360px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 28px 30px 22px; display: flex; flex-direction: column; }
.auth-logo { font-size: 30px; }
.auth-card h1 { margin: 6px 0 2px; font-size: 19px; letter-spacing: -.4px; }
.auth-sub { margin: 0 0 14px; color: var(--muted); }
.auth-card label { font-weight: 600; margin: 8px 0 3px; font-size: 12px; }
.auth-card input { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-card .primary { margin-top: 12px; padding: 9px; border-radius: 7px; font-size: 13px; font-weight: 650; border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.auth-card .primary:hover { background: #1d4ed8; }
.auth-card .primary:disabled { opacity: .6; cursor: default; }
.auth-help { color: var(--muted); font-size: 11.5px; margin: 14px 0 0; text-align: center; }

/* páginas: portada y administración */
.page { flex: 1 1 auto; overflow: auto; background: var(--bg); }
.page-in { max-width: 1100px; margin: 0 auto; padding: 22px 18px 40px; }
.home-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.home-head h1 { font-size: 20px; margin: 0; letter-spacing: -.4px; }
.home-head .grow { flex: 1 1 auto; }
.home-head button, .home-head .file-btn { border: 1px solid var(--line); background: #fff; padding: 6px 13px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.home-head button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.home-head button.primary:hover { background: #1d4ed8; }
.home-cupo { font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; }
.home-cupo.full { color: var(--warn); border-color: #f2c2c2; font-weight: 700; }
.home-note { color: var(--muted); }
.home-empty { background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 30px; text-align: center; color: #4a5566; line-height: 1.7; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.pcard:hover, .pcard:focus { border-color: var(--accent); box-shadow: 0 2px 10px rgba(37,99,235,.12); outline: none; }
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pc-name { font-size: 14px; font-weight: 650; letter-spacing: -.2px; word-break: break-word; }
.pc-meta { color: var(--muted); font-size: 11.5px; }
.pc-act { margin-top: 8px; display: flex; justify-content: flex-end; }
.pc-act button { border: 0; background: transparent; color: var(--muted); font-size: 11.5px; padding: 2px 6px; border-radius: 4px; }
.pc-act button:hover { background: var(--warn-soft); color: var(--warn); }

/* tablas de personas y administración */
.mtbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0 8px; }
.mtbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: #5a6473; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.mtbl td { padding: 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.mtbl.big { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mtbl.big th { background: #f7f9fc; padding: 8px 10px; }
.mtbl.big td { padding: 8px 10px; }
.mtbl tr.off td { opacity: .55; }
.mtbl td.acts { white-space: nowrap; text-align: right; }
.mtbl td.acts button { border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 2px 9px; font-size: 11px; margin-left: 4px; }
.mtbl td.acts button:hover { background: #f4f6fa; }
.mtbl td.acts button.danger:hover { background: var(--warn-soft); }
.mtbl select { border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; }
.mtbl em { color: var(--muted); font-style: normal; font-size: 11px; }
.mtbl .x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 4px; }
.mtbl .x:hover { color: var(--warn); background: var(--warn-soft); }
.mh { margin: 14px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #5a6473; border-bottom: 1px solid var(--line-soft); padding-bottom: 3px; }
.ivlink { display: flex; gap: 6px; margin: 8px 0 4px; }
.ivlink input { flex: 1 1 auto; border: 1px solid var(--accent); border-radius: 5px; padding: 5px 8px; font-size: 11.5px; background: #f2f6ff; }
.ivlink button { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 5px; padding: 4px 12px; font-weight: 600; }
.atabs { display: flex; gap: 2px; margin-bottom: 12px; }
.atabs button { border: 1px solid var(--line); background: #fff; padding: 6px 16px; font-size: 12px; font-weight: 600; color: #55606f; }
.atabs button:first-child { border-radius: 6px 0 0 6px; } .atabs button:last-child { border-radius: 0 6px 6px 0; }
.atabs button.on { background: var(--accent-soft); border-color: #a9c4ff; color: var(--bar-dark); }

/* historial */
.panel.hist { width: 360px; }
.hrow { border-bottom: 1px solid var(--line-soft); padding: 7px 4px; cursor: pointer; }
.hrow:hover { background: #f5f8ff; }
.hwho { display: flex; justify-content: space-between; font-size: 11.5px; }
.hwho span { color: var(--muted); }
.hlabel { font-size: 12px; margin-top: 1px; }
.hdet { margin-top: 5px; }
.hch { font-size: 11px; color: #46505f; padding: 2px 0 2px 8px; border-left: 2px solid var(--line); margin-top: 2px; word-break: break-word; }
.hch i { font-style: normal; color: var(--muted); }
.lastmod { color: var(--muted); font-size: 11px; border-top: 1px solid var(--line-soft); padding-top: 8px; }

/* =====================================================================
   brand.css — Project planner · identidad Appalachia (Guía de identidad 1.0)
   Paleta: Petróleo #147D83 · Pizarra #303D46 · Niebla #E2EAEB · Blanco
   Tipografía: Inter (textos y tablas) y Manrope (títulos y nombres).

   SOLO colores y tipografías: ninguna regla de este fichero cambia tamaños,
   márgenes, rellenos ni posiciones (lo comprueba test/19-marca). La única
   excepción son los huecos del logotipo, que conservan las medidas del
   icono anterior. Se carga después de styles.css y antes de touch.css.
   ===================================================================== */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --petroleo: #147D83;
  --petroleo-osc: #0F6469;
  --petroleo-claro: #D9EBEC;
  --petroleo-tinte: #F0F7F7;
  --petroleo-linea: #8CC3C6;
  --pizarra: #303D46;
  --niebla: #E2EAEB;

  --bg: #EEF3F4;
  --line: #D3DDDF;
  --line-soft: #E6EDEE;
  --txt: #303D46;
  --muted: #6A7880;
  --accent: #147D83;
  --accent-soft: #D9EBEC;
  --bar: #147D83;
  --bar-dark: #0F6469;
  --summary: #4C5B65;
  --milestone: #147D83;
  --weekend: #ECF1F2;
  --shadow: 0 6px 24px rgba(48, 61, 70, .18);
}

/* ---------- tipografía ---------- */
body { font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.proj-name, .brand-app, .start-card h1, .auth-card h1, .home-head h1, .panel header h2, .modal h3,
.cal-title, .pc-name, .phead h1 { font-family: "Manrope", "Inter", "Segoe UI", system-ui, Arial, sans-serif; }

/* ---------- logotipo: ocupa exactamente el hueco del icono anterior ---------- */
.brand .logo { display: flex; align-items: center; width: 22px; height: 24.3px; }
.brand .logo svg { display: block; width: 22px; height: 14px; }

/* ---------- barras de desplazamiento ---------- */
::-webkit-scrollbar-thumb { background-color: #BCC8CB; }
::-webkit-scrollbar-thumb:hover { background-color: #A3B2B6; }

/* ---------- barra superior ---------- */
#topbar { border-bottom-color: var(--petroleo); box-shadow: 0 1px 2px rgba(48, 61, 70, .05); }
#viewTabs { background-color: var(--niebla); }
#viewTabs button { color: #55626A; }
#viewTabs button:hover { background-color: #D3DFE1; color: var(--txt); }
#viewTabs button.active { background-color: #fff; color: var(--txt); box-shadow: 0 1px 2px rgba(48, 61, 70, .14), inset 0 -2px 0 var(--petroleo); }
.tools button, .file-btn { color: #3D4A53; }
.tools button:hover, .file-btn:hover { background-color: #F0F5F5; border-color: #B9C7CA; }
.tools button.on { border-color: var(--petroleo-linea); }
.chk { color: #4A5760; }
.save-status { background-color: var(--niebla); }
#btnHome:hover, .userbtn:hover { background-color: #F0F5F5; }

/* ---------- barras de herramientas y filtros ---------- */
.mini { color: #3D4A53; }
.mini:hover, .fbtn:hover, .btnrow button:hover { background-color: #F0F5F5; }
.fbtn { color: #3D4A53; }
.fpop-head b { color: var(--petroleo); }
.fpop-list label:hover { background-color: var(--petroleo-tinte); }

/* ---------- Gantt ---------- */
.g-left-head, .g-head { background-color: #F4F7F8; }
.g-left-head { color: #55626A; }
.g-row:hover { background-color: var(--petroleo-tinte); }
.g-row.chapter { background-color: #EBF1F2; }
.g-row .c-date, .g-row .c-dur, .g-row .c-pct { color: #55626A; }
.tw { color: #7A878E; }
.rowband { background-color: #F4F7F8; }
.hb { color: #46535C; }
.hc { color: #55626A; }
.hc b { color: #3D4A53; }
.hc.we { color: #97A4AA; }
.col.gridm { border-left-color: #C8D3D6; }
.g-links path { stroke: #8B999F; }
.g-links polygon { fill: #8B999F; }
.g-links path.hit { stroke: transparent; }
.g-links path.hit:hover { stroke: rgba(20, 125, 131, .18); }
.bar.sel, .cbar.sel { outline-color: var(--petroleo-osc); }
.msw .ms.sel { outline-color: var(--petroleo-osc); }
.bar.ghost { outline-color: var(--petroleo-osc); }
.bar.summary .fill { background-color: #1F282E; }
.bar.chapter { background-color: var(--pizarra); }
.bar.chapter::before, .bar.chapter::after { border-top-color: var(--pizarra); }
.g-marquee { background-color: rgba(20, 125, 131, .10); }
.drag-tip { background-color: var(--pizarra); }
.drag-tip.hover { background-color: #26313A; }
.drag-tip .k { color: #A9B6BB; }

/* ---------- Tareas ---------- */
table.tbl th { background-color: var(--niebla); color: #4A5760; }
table.tbl tr:hover td { background-color: var(--petroleo-tinte); }
table.tbl tr.chapter td { background-color: #EBF1F2; }
table.tbl tr.chapter:hover td { background-color: #E3ECED; }
td.grip { color: #C5D0D3; }
tr:hover td.grip { color: #7A878E; }
.pbar { background-color: var(--niebla); }
.wschip { color: #46535C; }
select.wssel option, select.stsel option { color: var(--txt); }

/* ---------- Calendario ---------- */
.cal-leg { background-color: #F8FAFA; }
.cleg { color: #3D4A53; }
.cleg:hover { border-color: #B9C7CA; }
.cal-dow { background-color: var(--niebla); }
.cal-dow div { color: #4A5760; }
.ccell.we { background-color: #E9EEEF; }
.ccell.out { background-color: #F8FAFA; }
.cnum { color: #46535C; }
.cnum.out { color: #A6B2B7; }
.ccell.csel { box-shadow: inset 0 0 0 2px var(--petroleo); }
.ccell.today.csel { box-shadow: inset 0 2px 0 var(--today), inset 0 0 0 2px var(--petroleo); }
.cev { border-color: var(--line); }
.cev.chapter { background-color: #EBF1F2; }
.cev.ev-ms { border-color: var(--petroleo-linea); }
.cev.sel, .cband.sel { outline-color: var(--petroleo-osc); }
.cal-side { background-color: #F8FAFA; }
.cal-side h4 { color: var(--petroleo); }

/* ---------- Configuración ---------- */
.card h3 { color: var(--petroleo); }
.frow label { color: #4A5760; }
.kv b { color: #46535C; }
kbd { background-color: var(--niebla); }
button.primary:hover, .btnrow button.primary:hover, .modal .mfoot button.primary:hover, .start-actions button.primary:hover,
.auth-card .primary:hover, .home-head button.primary:hover { background-color: var(--petroleo-osc); border-color: var(--petroleo-osc); }

/* ---------- panel de detalle, diálogos y menús ---------- */
.panel header { background-color: #F4F7F8; }
.panel .sec > h4 { color: var(--petroleo); }
.cmt { border-left-color: var(--petroleo-linea); }
.modal-back { background-color: rgba(48, 61, 70, .40); }
.modal .mfoot { background-color: #F4F7F8; }
.modal .mfoot button:hover { background-color: #EDF3F4; }
#dragGhost, .toast { background-color: var(--pizarra); }

/* ---------- pantalla inicial (versión local) ---------- */
.start-back { background-color: rgba(238, 243, 244, .96); }
.start-card p { color: #4A5760; }
.start-actions button:hover, .start-actions .file-btn:hover { background-color: #F0F5F5; }
.start-logo { line-height: 0; margin: 0 0 14px; }  /* espacio libre de 1X bajo el logotipo (guía) */
.start-logo svg { display: block; width: 230px; height: auto; }

/* ---------- versión alojada ---------- */
.r-admin { background-color: var(--pizarra); }
.r-pm, .r-owner { background-color: var(--petroleo-claro); color: var(--petroleo-osc); }
.auth-back { background-image: linear-gradient(160deg, #F3F7F7, var(--niebla)); }
.auth-logo { line-height: 0; margin-bottom: 8px; }   /* espacio libre de 1X bajo el logotipo (guía) */
.auth-logo svg { display: block; width: 230px; height: auto; }
.pcard:hover, .pcard:focus { box-shadow: 0 2px 10px rgba(20, 125, 131, .14); }
.mtbl th { color: #4A5760; }
.mtbl.big th { background-color: var(--niebla); }
.mtbl td.acts button:hover { background-color: #F0F5F5; }
.mh { color: var(--petroleo); }
.ivlink input { background-color: var(--petroleo-tinte); }
.atabs button { color: #55626A; }
.atabs button.on { border-color: var(--petroleo-linea); }
.hrow:hover { background-color: var(--petroleo-tinte); }
.hch { border-left-color: var(--petroleo-linea); }

/* ---------- impresión / PDF ---------- */
#printArea { color: var(--txt); }
.phead { border-bottom-color: var(--petroleo); }
.psub, .pfecha { color: #55626A; }
.pleg, .pm { color: #46535C; }
.pgt th, .ptbl th { background-color: var(--niebla); color: var(--txt); }
.pm.alt { background-color: #EEF3F4; }
.pgt tr.pcap td, .ptbl tr.pcap td { background-color: #EBF1F2; }

/* =====================================================================
   touch.css — iPad e iPhone
   TODAS las reglas empiezan por html.touch (la clase la pone touch.js solo en
   pantallas táctiles). En un ordenador con ratón ninguna se aplica: la versión
   de escritorio se ve exactamente igual (lo comprueba test/17-escritorio-intacto).
     html.touch          iPad y cualquier pantalla táctil
     html.touch.phone    pantalla estrecha o baja (iPhone)
     html.touch.tc-2f    la barra superior no cabe en una fila: dos filas
   ===================================================================== */

/* ---------- base ---------- */
html.touch { --row-h: 32px; -webkit-text-size-adjust: 100%; }
html.touch body {
  height: 100%; height: 100dvh; font-size: 13px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none;
}
html.touch .g-canvas, html.touch .g-row, html.touch .cbar, html.touch td.grip, html.touch .ctx, html.touch #tWrap td, html.touch .cal-grid,
html.touch #topbar, html.touch .g-toolbar { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.touch ::-webkit-scrollbar { width: 6px; height: 6px; }

/* ---------- barra superior ---------- */
html.touch #topbar {
  height: 54px; gap: 10px;
  padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right));
}
html.touch .brand { min-width: 190px; flex: 1 1 auto; }   /* si no cabe con el nombre visible, la barra pasa a dos filas */
html.touch .brand-txt { min-width: 0; }
html.touch .brand .logo { width: 32px; }                     /* símbolo de Appalachia a su tamaño mínimo (guía: 32 px) */
html.touch .brand .logo svg { width: 32px; height: 20.3px; }
html.touch.phone .brand .logo { display: none; }
html.touch .proj-name { width: 100%; max-width: 300px; min-width: 90px; font-size: 16px; padding: 4px 6px; }
html.touch .brand .sub, html.touch .brand-app { font-size: 15px; }
html.touch .brand .sub { display: none; }
html.touch #btnHome { min-width: 40px; min-height: 38px; font-size: 18px; }
html.touch #viewTabs { flex: 0 0 auto; }
html.touch #viewTabs button { padding: 9px 14px; font-size: 14px; }
html.touch .tools { gap: 8px; flex: 0 0 auto; }
html.touch .tools button, html.touch .file-btn { min-height: 38px; padding: 6px 12px; font-size: 14px; }
html.touch .tools button.ico { min-width: 42px; font-size: 18px; padding: 6px 8px; }
html.touch .tools .grp { gap: 4px; }
html.touch .save-status { font-size: 12px; padding: 5px 10px; }
html.touch .userbtn { min-height: 38px; font-size: 13px; }
/* lo menos frecuente pasa al menú «⋯ Más» */
html.touch #grpZoom [data-zoom], html.touch #btnFit, html.touch #topbar label.chk,
html.touch #btnPrint, html.touch #btnExport, html.touch #topbar .file-btn,
html.touch #btnMembers, html.touch #btnHistory { display: none !important; }
html.touch .tc-mas { font-weight: 700; letter-spacing: 1px; }
/* fuera de un proyecto «⋯ Más» solo hace falta en el iPhone (allí lleva a «Mi cuenta») */
html.touch body.mode-home #tcMas, html.touch body.mode-admin #tcMas, html.touch body.mode-login #tcMas { display: none; }
html.touch.phone body.mode-home #tcMas, html.touch.phone body.mode-admin #tcMas { display: inline-block; }

/* dos filas: arriba nombre y cuenta, abajo vistas y herramientas */
html.touch.tc-2f #topbar { flex-wrap: wrap; height: auto; row-gap: 8px; padding-top: 7px; padding-bottom: 7px; }
html.touch.tc-2f .tools { display: contents; }
html.touch.tc-2f #topbar::after { content: ""; order: 5; flex: 0 0 100%; height: 0; }
html.touch.tc-2f #btnHome { order: 0; }
html.touch.tc-2f .brand { order: 1; }
html.touch.tc-2f #saveStatus { order: 2; }
html.touch.tc-2f #userBtn { order: 3; }
html.touch.tc-2f #tcMas { order: 4; }
html.touch.tc-2f #viewTabs { order: 6; }
html.touch.tc-2f #grpHistory { order: 7; margin-left: auto; }
html.touch.tc-2f #grpZoom { order: 8; }

/* iPhone: vistas a todo el ancho; el zoom y la cuenta, en «⋯ Más» */
html.touch.phone #grpZoom, html.touch.phone #userBtn, html.touch.phone #btnRedo { display: none !important; }
html.touch.phone #topbar { gap: 6px; }
html.touch.phone #tcMas { order: 4; }
html.touch.phone.tc-2f #grpHistory { order: 2; margin-left: 0; }
html.touch.phone.tc-2f #saveStatus { order: 3; }
html.touch.phone.tc-2f #viewTabs { flex: 1 1 100%; }
html.touch.phone.tc-2f #viewTabs button { flex: 1 1 0; padding: 9px 4px; min-width: 0; white-space: nowrap; }
html.touch.phone #viewTabs { min-width: 0; }
html.touch.phone #viewTabs [data-view="config"] { font-size: 0; }
html.touch.phone #viewTabs [data-view="config"]::after { content: "Config."; font-size: 14px; }
html.touch.phone .proj-name { max-width: none; }
html.touch.phone .brand { min-width: 0; }
/* estado de guardado como un punto de color */
html.touch.phone .save-status { font-size: 0; min-width: 0; width: 14px; height: 14px; padding: 0; flex: 0 0 auto; }
html.touch.phone .save-status[data-state="saved"] { background: #22c55e; }
html.touch.phone .save-status[data-state="saving"] { background: #f59e0b; }
html.touch.phone .save-status[data-state="error"], html.touch.phone .save-status[data-state="offline"] { background: var(--warn); }

/* ---------- barra de herramientas y filtros ---------- */
html.touch .g-toolbar { flex-wrap: wrap; gap: 8px; padding: 6px 10px; row-gap: 6px; }
html.touch .mini { min-height: 36px; padding: 6px 12px; font-size: 14px; }
html.touch .chk { font-size: 14px; gap: 6px; }
html.touch .chk input { width: 18px; height: 18px; }
html.touch .tb-sep { height: 22px; }
html.touch #btnAddChapter, html.touch #btnAddTask, html.touch #btnAddSub, html.touch #btnAddMilestone,
html.touch .g-toolbar [data-act="chapter"], html.touch .g-toolbar [data-act="task"],
html.touch .g-toolbar [data-act="sub"], html.touch .g-toolbar [data-act="milestone"] { display: none !important; }
html.touch .tc-nuevo { font-weight: 650; color: var(--accent); border-color: var(--petroleo-linea, #a9c4ff); }
html.touch .fbar { flex: 1 1 520px; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px 0; }
html.touch .fbar::-webkit-scrollbar { display: none; }
html.touch .fsearch { flex: 1 1 220px; min-width: 150px; }
html.touch .finput { font-size: 16px; padding: 6px 10px; }
html.touch .fbtn, html.touch .fclear { min-height: 36px; padding: 6px 10px; font-size: 14px; }
html.touch .fcount { font-size: 13px; }
html.touch .fpop { max-width: min(360px, calc(100vw - 16px)); }
html.touch .fpop-head { padding: 9px 12px; font-size: 13px; }
html.touch .fpop-head button { font-size: 14px; padding: 6px 8px; }
html.touch .fpop-list { max-height: 50vh; }
html.touch .fpop-list label { padding: 9px 8px; font-size: 14px; }
html.touch .fpop-list input { width: 20px; height: 20px; }
html.touch.phone #btnExpandAll, html.touch.phone #btnCollapseAll, html.touch.phone .g-toolbar label.chk,
html.touch.phone .g-toolbar [data-act="expand"], html.touch.phone .g-toolbar [data-act="collapse"],
html.touch.phone .g-toolbar .tb-sep { display: none !important; }
html.touch.phone .fbar { flex: 1 1 0; min-width: 0; }
html.touch.phone .fsearch { flex: 0 0 150px; min-width: 0; }
html.touch.phone .fpop { left: 8px !important; right: 8px; max-width: none; }

/* ---------- Gantt ---------- */
html.touch .g-left { width: var(--tc-left-w, 40%); min-width: 120px; container-type: inline-size; }
html.touch .g-left-head { font-size: 11px; }
html.touch .g-left-body { touch-action: none; }
html.touch .g-row { font-size: 13.5px; }
html.touch .g-row .c-code { font-size: 12px; cursor: default; }
html.touch .tw { width: 26px; font-size: 12px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
html.touch .c-date { width: 64px; }
html.touch .c-pct { width: 58px; }
html.touch .wsstripe { height: 18px; }
@container (max-width: 480px) {
  html.touch .c-dur { display: none; }
}
@container (max-width: 420px) {
  html.touch .c-code { display: none; }
}
@container (max-width: 260px) {
  html.touch .c-date, html.touch .c-pct { display: none; }
}
/* asa para reorganizar: solo en la fila seleccionada y si se puede editar */
html.touch body:not(.readonly) .g-row.sel::after {
  content: "≡"; position: absolute; right: 0; top: 0; bottom: 0; width: 42px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #3D4A53; background: linear-gradient(90deg, rgba(217,235,236,0), #D9EBEC 35%);
}
html.touch .g-splitter { width: 14px; background: #EBF1F2; border-left: 1px solid var(--line); border-right: 1px solid var(--line); touch-action: none; position: relative; }
html.touch .g-splitter::after { content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 36px; margin-top: -18px; border-radius: 2px; background: #B3C1C5; }
html.touch .g-splitter.drag { background: var(--accent-soft); }
html.touch .hb { font-size: 11.5px; }
html.touch .hc { font-size: 11px; }
html.touch .hc b { font-size: 12px; }
html.touch .g-scroll { touch-action: pan-x pan-y; overscroll-behavior: contain; }

/* barras más gruesas y tiradores para el dedo */
html.touch .bar { height: 20px; border-radius: 4px; }
html.touch .bar.summary { height: 12px; }
html.touch .bar .lbl { font-size: 13px; margin-left: 8px; }
html.touch .mslbl { font-size: 13px; }
html.touch .msw .ms { width: 16px; height: 16px; margin-left: -8px; margin-top: -8px; }
html.touch .bar.sel { outline-width: 3px; }
html.touch body:not(.readonly) .bar.sel, html.touch body:not(.readonly) .bar.sel *,
html.touch body:not(.readonly) .msw:has(.ms.sel), html.touch body:not(.readonly) .msw:has(.ms.sel) * { touch-action: none; }
html.touch .hnd { width: 24px !important; }
html.touch .hnd.l { left: -14px; }
html.touch .hnd.r { right: -14px; }
html.touch .bar:hover .hnd::after { content: none; }
html.touch .bar.sel .hnd::after {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 9px; width: 6px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 0 1.5px #0F6469;
}
html.touch .dot { width: 22px; height: 22px; margin-top: -11px; border-width: 3px; }
html.touch .bar:hover .dot, html.touch .msw:hover .dot { display: none; }
html.touch .bar.sel .dot, html.touch .msw:has(.ms.sel) .dot { display: block; }
html.touch .dot.l { left: -46px; }
html.touch .dot.r { right: -46px; }
html.touch .msw .dot.l { left: -34px; }
html.touch .msw .dot.r { right: -34px; }
html.touch .g-links path.hit { stroke-width: 22px; }
html.touch .g-links path.hit:hover { stroke: transparent; }
html.touch .drag-tip { font-size: 14px; padding: 8px 12px; }
html.touch #dragGhost { font-size: 14px; padding: 8px 12px; max-width: calc(100vw - 24px); }
html.touch .g-empty { font-size: 14px; }

/* ---------- Tareas ---------- */
html.touch .t-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.touch table.tbl { font-size: 13.5px; }
html.touch table.tbl th { font-size: 11.5px; padding: 8px 6px; }
html.touch .cellinput { font-size: 14px; padding: 4px 4px; }
html.touch .cellinput.date { width: 132px; }
html.touch .cellinput.n { width: 56px; }
html.touch select.stsel, html.touch select.wssel { font-size: 13px; padding: 4px 2px; }
html.touch td.grip { width: 40px; min-width: 40px; font-size: 20px; color: #7b8694; touch-action: none; }
html.touch body.readonly td.grip { visibility: hidden; }
html.touch .mini.det { min-height: 30px; padding: 2px 10px; line-height: 24px; }
html.touch.phone table.tbl td.nm, html.touch.phone table.tbl th:nth-child(3) { position: sticky; left: 0; z-index: 3; background: #fff; box-shadow: 1px 0 0 var(--line); }
html.touch.phone table.tbl th:nth-child(3) { z-index: 6; background: #f7f9fc; }
html.touch.phone table.tbl td.nm { min-width: 220px; max-width: 260px; }

/* ---------- Calendario ---------- */
html.touch .cal-bar { gap: 8px; padding: 8px 10px; }
html.touch .cal-bar button { min-height: 38px; min-width: 42px; font-size: 14px; }
html.touch .cal-title { font-size: 16px; min-width: 0; }
html.touch .cal-lbl { font-size: 13px; }
html.touch .cal-leg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 7px 10px; }
html.touch .cal-leg::-webkit-scrollbar { display: none; }
html.touch .cleg { font-size: 13px; padding: 5px 12px 5px 8px; white-space: nowrap; flex: 0 0 auto; }
html.touch .cal-dow div { font-size: 11.5px; padding: 5px 6px; }
html.touch .cnums { height: 26px; }
html.touch .cnum { font-size: 13px; }
html.touch .chol { visibility: hidden; font-size: 11px; line-height: 18px; padding: 0 5px; }
html.touch .cnum.csel .chol { visibility: visible; }   /* sin ratón: el botón de festivo, en el día elegido */
html.touch .cev { height: 26px; font-size: 13px; }
html.touch .cband { height: 18px; font-size: 12px; }
html.touch .cmas { font-size: 13px; padding: 4px 6px; }
html.touch .cweek { min-height: 120px; }
html.touch .cal-side { flex-basis: 320px; }
html.touch .cs-ev, html.touch .cs-act { padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
html.touch .cs-nm small, html.touch .cs-ev em { font-size: 12px; }
html.touch.phone .cal-main { flex-direction: column; overflow: auto; }
html.touch.phone .cal-col { flex: 0 0 auto; }
html.touch.phone .cal-grid { overflow: visible; }
html.touch.phone .cal-side { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--line); }
html.touch.phone .cweek { min-height: 92px; }
html.touch.phone .cday { flex-direction: row; flex-wrap: wrap; gap: 3px; padding: 0 2px; }
html.touch.phone .cev { height: 24px; min-width: 24px; font-size: 12px; gap: 2px; padding: 0 4px 0 0; }   /* en el iPhone, solo el símbolo: el nombre está en el panel */
html.touch.phone .cev .cn { display: none; }
html.touch .cal-grid { overscroll-behavior: contain; }
html.touch.phone .cal-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.touch.phone .cal-bar::-webkit-scrollbar { display: none; }
html.touch.phone .cal-bar > * { flex: 0 0 auto; }
html.touch.phone .cal-lbl { display: none; }
html.touch.phone .cal-title { font-size: 15px; white-space: nowrap; }
html.touch.phone .cnum { padding: 2px 3px; }
html.touch.phone .chol { display: none; }
html.touch.phone .cband { font-size: 11px; padding: 0 4px; }

/* ---------- Configuración ---------- */
html.touch .cfg { padding: 12px; }
html.touch .cfg-grid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
html.touch .card h3 { font-size: 13.5px; }
html.touch .card p, html.touch .kv { font-size: 13px; }
html.touch .frow { gap: 10px; margin-bottom: 9px; }
html.touch .frow label { width: 120px; font-size: 13.5px; }
html.touch .frow input[type=text], html.touch .frow input[type=date], html.touch .frow input[type=number],
html.touch .frow input[type=password], html.touch .frow select, html.touch .frow textarea { font-size: 16px; padding: 7px 9px; min-height: 38px; }
html.touch .frow input[type=date] { min-width: 0; }
html.touch .btnrow button, html.touch .btnrow .file-btn { min-height: 38px; padding: 8px 14px; font-size: 14px; }
html.touch .hol-list div { padding: 6px 8px; }
html.touch .x { font-size: 18px; padding: 4px 8px; }
html.touch.phone .frow label { width: 96px; }

/* ---------- panel de detalle e historial ---------- */
html.touch .panel { width: min(460px, 100%); }
html.touch .panel.hist { width: min(400px, 100%); }
html.touch .panel header { padding: 8px 12px; }
html.touch .panel header h2 { font-size: 16px; }
html.touch .panel header .mini { min-width: 42px; }
html.touch .panel .body { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); font-size: 14px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.touch .panel .sec > h4 { font-size: 12px; }
html.touch .panel textarea { font-size: 16px; padding: 8px 10px; }
html.touch .dep-row { gap: 8px; padding: 5px 0; }
html.touch .dep-row select, html.touch .dep-row input { font-size: 15px; padding: 5px 4px; min-height: 34px; }
html.touch .dep-row input.lag { width: 56px; }
html.touch .cmt .meta { font-size: 12px; }
html.touch input[type=range] { height: 30px; }
html.touch .hrow { padding: 10px 6px; }
html.touch .hwho, html.touch .hlabel { font-size: 13.5px; }
html.touch .hch { font-size: 12.5px; }
/* iPhone: a pantalla completa y con lo más usado (fechas, estado, avance y seguimiento) arriba */
html.touch.phone .panel { width: 100%; border-left: 0; }
html.touch.phone #detailsPanel .body { display: flex; flex-direction: column; }
html.touch.phone #detailsPanel .body > .sec:nth-child(2) { order: -2; }
html.touch.phone #detailsPanel .body > .sec:nth-child(6) { order: -1; }
html.touch.phone .panel header .mini { min-width: 46px; min-height: 40px; font-size: 16px; }

/* ---------- diálogos, menús y avisos ---------- */
html.touch .modal { max-width: min(560px, calc(100vw - 24px)); min-width: min(390px, calc(100vw - 24px)); max-height: 85vh; max-height: 85dvh; }
html.touch .modal.wide { min-width: min(640px, calc(100vw - 24px)); max-width: min(760px, calc(100vw - 24px)); }
html.touch .modal h3 { font-size: 16px; padding: 13px 16px; }
html.touch .modal .mbody { font-size: 14px; padding: 13px 16px; -webkit-overflow-scrolling: touch; }
html.touch .modal .mfoot { flex-wrap: wrap; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
html.touch .modal .mfoot button { min-height: 42px; padding: 8px 16px; font-size: 15px; }
html.touch.phone .modal, html.touch.phone .modal.wide { min-width: 0; width: calc(100vw - 20px); max-width: none; }
html.touch.phone .modal .mfoot button { flex: 1 1 auto; }
html.touch.phone .modal .mbody { overflow-x: auto; }

html.touch .ctx { padding: 5px; min-width: 230px; max-height: 80vh; max-height: 80dvh; overflow-y: auto; }
html.touch .ctx button { padding: 11px 14px; font-size: 15px; border-radius: 6px; }
html.touch .ctx .k { display: none; }
html.touch .ctx-head { font-size: 12.5px; padding: 6px 12px 8px; max-width: none; }
html.touch.phone .ctx {
  left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  min-width: 0; max-height: 75dvh; border-radius: 12px; box-shadow: 0 -4px 30px rgba(15, 23, 42, .25);
}
html.touch.phone .ctx button { padding: 13px 16px; font-size: 16px; }

html.touch #toast { bottom: calc(40px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); }
html.touch .toast { font-size: 14px; padding: 10px 14px; max-width: calc(100vw - 24px); }
html.touch .tc-multi {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 290;
  background: #147D83; color: #fff; border-radius: 22px; padding: 10px 18px; font-size: 14px; font-weight: 650;
  box-shadow: var(--shadow); white-space: nowrap; cursor: pointer;
}

/* ---------- barra de estado ---------- */
html.touch #statusbar { height: auto; min-height: 26px; padding-bottom: env(safe-area-inset-bottom); font-size: 12px; }
html.touch #statusbar .st-right { display: none; }
html.touch.phone #statusbar { display: none; }

/* ---------- versión alojada y pantalla inicial ---------- */
html.touch .auth-card { width: min(380px, calc(100vw - 24px)); padding: 24px 22px 20px; }
html.touch .auth-card input { font-size: 16px; padding: 11px 12px; }
html.touch .auth-card label { font-size: 14px; }
html.touch .auth-card .primary { font-size: 16px; padding: 12px; }
html.touch .page { -webkit-overflow-scrolling: touch; }
html.touch .page-in { padding: 16px 14px calc(30px + env(safe-area-inset-bottom)); }
html.touch .home-head h1 { font-size: 22px; }
html.touch .home-head button, html.touch .home-head .file-btn { min-height: 42px; padding: 9px 16px; font-size: 14px; }
html.touch .pcards { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
html.touch .pc-name { font-size: 16px; }
html.touch .pc-meta { font-size: 13px; }
html.touch .pc-act button { min-height: 36px; font-size: 13.5px; padding: 6px 10px; }
html.touch .mtbl { font-size: 14px; }
html.touch .mtbl td { padding: 9px 6px; }
html.touch .mtbl td.acts button { min-height: 34px; padding: 5px 12px; font-size: 13px; }
html.touch .mtbl select { font-size: 15px; padding: 5px 6px; }
html.touch .ivlink input { font-size: 14px; padding: 8px 10px; }
html.touch .ivlink button { min-height: 40px; }
html.touch .atabs button { min-height: 40px; font-size: 14px; }
html.touch .umenu { right: max(10px, env(safe-area-inset-right)); top: 50px; }
html.touch.phone .mtbl { display: block; overflow-x: auto; white-space: nowrap; }
html.touch.phone .home-head .grow { flex-basis: 100%; height: 0; }
html.touch .start-card { margin: 12px; padding: 22px 20px; }
html.touch .start-actions button, html.touch .start-actions .file-btn { min-height: 44px; font-size: 15px; }