/* Cronograma GUARDIAN — estilos del Gantt del dashboard.
   Estatico: no depende de los datos. Los datos los inyecta gen_docs.py en
   cronograma.md como <script type="application/json" id="cg-data">.
   Hereda tema claro/oscuro de MkDocs Material via --md-*. */
.cronograma-guardian {
  --cg-surface: var(--md-default-bg-color, #fff);
  --cg-surface-2: color-mix(in srgb, var(--md-default-fg-color, #000) 5%, transparent);
  --cg-line: color-mix(in srgb, var(--md-default-fg-color, #000) 14%, transparent);
  --cg-line-strong: color-mix(in srgb, var(--md-default-fg-color, #000) 30%, transparent);
  --cg-ink: var(--md-default-fg-color, #1a222c);
  --cg-muted: color-mix(in srgb, var(--md-default-fg-color, #000) 55%, transparent);
  --cg-faint: color-mix(in srgb, var(--md-default-fg-color, #000) 38%, transparent);
  --sw: #3b82f6; --drn: #f59e0b; --vtp: #10b981; --int: #a855f7;
  --today: #ef4444;
  --cg-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
}
.cg-legend { display:flex; flex-wrap:wrap; gap:6px; margin: 4px 0 14px; }
.cg-chip {
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  padding:5px 11px 5px 9px; border:1px solid var(--cg-line); border-radius:999px;
  background:var(--cg-surface); cursor:pointer; user-select:none; color:var(--cg-ink);
  transition: opacity .12s, border-color .12s;
}
.cg-chip .cg-dot { width:9px; height:9px; border-radius:3px; }
.cg-chip .cg-n { font-family:var(--cg-mono); font-size:11px; color:var(--cg-muted); }
.cg-chip[aria-pressed="false"] { opacity:.35; }
.cg-chip:focus-visible { outline:2px solid var(--int); outline-offset:2px; }
.cg-dot.sw{background:var(--sw)} .cg-dot.drn{background:var(--drn)}
.cg-dot.vtp{background:var(--vtp)} .cg-dot.int{background:var(--int)}

.cg-scroll { overflow-x:auto; border:1px solid var(--cg-line); border-radius:12px; background:var(--cg-surface); }
table.cg-gantt { border-collapse:collapse; width:100%; min-width:900px; font-variant-numeric:tabular-nums; }
.cg-gantt th, .cg-gantt td { border-right:1px solid var(--cg-line); }
.cg-gantt thead th { position:sticky; top:0; z-index:3; background:var(--cg-surface-2); font-weight:600; color:var(--cg-muted); }
.cg-th-month { font-family:var(--cg-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  text-align:center; padding:8px 0 4px; border-bottom:1px solid var(--cg-line); color:var(--cg-faint); }
.cg-th-week { font-family:var(--cg-mono); font-size:10px; text-align:center; padding:4px 3px 8px; min-width:30px;
  font-weight:600; border-bottom:1px solid var(--cg-line-strong); color:var(--cg-muted); }
.cg-th-week .cg-w { display:block; color:var(--cg-ink); }
.cg-th-week .cg-d { display:block; font-size:9px; color:var(--cg-faint); font-weight:400; }

.cg-col-task { position:sticky; left:0; z-index:2; background:var(--cg-surface); text-align:left;
  padding:7px 12px 7px 14px; min-width:300px; max-width:330px; border-right:1px solid var(--cg-line-strong) !important; }
thead .cg-col-task { z-index:4; background:var(--cg-surface-2); vertical-align:bottom; padding-bottom:8px; }
.cg-col-task .cg-code { font-family:var(--cg-mono); font-size:11px; font-weight:700; padding:1px 6px;
  border-radius:5px; margin-right:8px; color:#fff; letter-spacing:.02em; white-space:nowrap; }
.cg-code.sw{background:var(--sw)} .cg-code.drn{background:var(--drn);color:#3a2600}
.cg-code.vtp{background:var(--vtp);color:#04291d} .cg-code.int{background:var(--int)}
.cg-col-task .cg-owner { font-family:var(--cg-mono); font-size:10px; color:var(--cg-muted); margin-left:2px; }

tr.cg-section td { background:var(--cg-surface-2); padding:9px 14px; font-weight:700; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; border-top:1px solid var(--cg-line-strong);
  border-bottom:1px solid var(--cg-line); position:sticky; left:0; color:var(--cg-ink); }
tr.cg-section .cg-sec-owner { font-family:var(--cg-mono); font-weight:500; text-transform:none;
  letter-spacing:0; color:var(--cg-muted); margin-left:10px; font-size:11px; }

td.cg-cell { padding:0; height:28px; }
.cg-gantt tbody tr { border-bottom:1px solid var(--cg-line); }
.cg-gantt tbody tr:hover td.cg-col-task { background:var(--cg-surface-2); }
.cg-bar { height:14px; border-radius:4px; margin:0 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.cg-bar.sw{background:var(--sw)} .cg-bar.drn{background:var(--drn)}
.cg-bar.vtp{background:var(--vtp)} .cg-bar.int{background:var(--int)}
.cg-cell.cg-today { box-shadow: inset 2px 0 0 var(--today); }
.cg-th-week.cg-today .cg-w { color:var(--today); }
tr.cg-hidden { display:none; }

.cg-foot { margin-top:16px; color:var(--cg-muted); font-size:12px; display:flex; flex-wrap:wrap; gap:6px 20px; }
.cg-foot .cg-k { font-family:var(--cg-mono); font-size:11px; }

/* filas clicables */
.cg-gantt tbody tr[data-front] { cursor:pointer; }
.cg-gantt tbody tr[data-front]:hover td.cg-col-task .cg-code { outline:2px solid var(--cg-line-strong); outline-offset:1px; }

/* --- modal ficha tecnica --- */
.cg-modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:color-mix(in srgb, #000 55%, transparent);
  display:flex; align-items:flex-start; justify-content:center;
  padding:6vh 16px 16px; overflow-y:auto;
  opacity:0; animation:cgFade .14s ease forwards;
}
@keyframes cgFade { to { opacity:1; } }
.cg-modal {
  background:var(--md-default-bg-color, #fff); color:var(--cg-ink);
  border:1px solid var(--cg-line-strong); border-radius:14px;
  max-width:640px; width:100%;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.5);
  overflow:hidden;
}
.cg-modal-head {
  display:flex; align-items:flex-start; gap:12px;
  padding:18px 20px 14px; border-bottom:1px solid var(--cg-line);
}
.cg-modal-head .cg-code { font-family:var(--cg-mono); font-size:12px; font-weight:700;
  padding:3px 8px; border-radius:6px; color:#fff; white-space:nowrap; }
.cg-modal-title { margin:0; font-size:17px; font-weight:650; line-height:1.3; flex:1; }
.cg-modal-close {
  background:transparent; border:1px solid var(--cg-line); color:var(--cg-muted);
  border-radius:8px; width:30px; height:30px; font-size:18px; line-height:1; cursor:pointer; flex:none;
}
.cg-modal-close:hover { color:var(--cg-ink); border-color:var(--cg-line-strong); }

.cg-badges { display:flex; flex-wrap:wrap; gap:6px; padding:14px 20px 4px; }
.cg-badge {
  font-family:var(--cg-mono); font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; border:1px solid var(--cg-line);
  color:var(--cg-muted); background:var(--cg-surface-2);
}
.cg-badge.crit { color:#dc2626; border-color:#dc262655; background:#dc26260f; }
.cg-badge.alta { color:#ea580c; border-color:#ea580c55; background:#ea580c0f; }
.cg-badge.ip   { color:#7c3aed; border-color:#7c3aed55; background:#7c3aed0f; }

.cg-modal-body { padding:12px 20px 20px; }
.cg-field { margin-top:14px; }
.cg-field:first-child { margin-top:6px; }
.cg-field .cg-label {
  font-family:var(--cg-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cg-faint); margin-bottom:3px;
}
.cg-field .cg-val { font-size:13.5px; line-height:1.55; }
.cg-field .cg-val.mono { font-family:var(--cg-mono); font-size:12px; }
.cg-deps { display:flex; flex-wrap:wrap; gap:5px; }
.cg-dep {
  font-family:var(--cg-mono); font-size:11px; font-weight:600; text-decoration:none;
  padding:2px 8px; border-radius:6px; border:1px solid var(--cg-line);
  color:var(--cg-ink); background:var(--cg-surface-2);
}
.cg-dep:hover { border-color:var(--cg-line-strong); }
.cg-todo {
  font-size:12.5px; line-height:1.5; color:var(--cg-ink);
  background:#f59e0b12; border-left:3px solid var(--drn); border-radius:6px;
  padding:8px 11px; margin-top:6px;
}
.cg-modal-foot {
  padding:12px 20px; border-top:1px solid var(--cg-line);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12px; color:var(--cg-muted);
}
.cg-modal-foot a { color:var(--sw); font-weight:600; text-decoration:none; font-size:12.5px; }
.cg-modal-foot a:hover { text-decoration:underline; }

@media (prefers-reduced-motion: reduce){ .cronograma-guardian *{transition:none !important} .cg-modal-overlay{animation:none;opacity:1} }