/* ============================================================
   Rastreador de Contrataciones — sistema visual
   Mismo lenguaje que Umbra Studio: un mundo oscuro unico y
   deliberado. Todos los colores se declaran en :root.
   Las fuentes van vendorizadas: la app no pide nada a la red.
   ============================================================ */
@font-face{ font-family:"IBM Plex Sans"; font-weight:400; font-display:swap; src:url(../vendor/fonts/ibm-plex-sans-latin-400.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:"IBM Plex Sans"; font-weight:400; font-display:swap; src:url(../vendor/fonts/ibm-plex-sans-latin-ext-400.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"IBM Plex Sans"; font-weight:500; font-display:swap; src:url(../vendor/fonts/ibm-plex-sans-latin-500.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:"IBM Plex Sans"; font-weight:500; font-display:swap; src:url(../vendor/fonts/ibm-plex-sans-latin-ext-500.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"IBM Plex Sans"; font-weight:600; font-display:swap; src:url(../vendor/fonts/ibm-plex-sans-latin-600.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:"IBM Plex Sans"; font-weight:600; font-display:swap; src:url(../vendor/fonts/ibm-plex-sans-latin-ext-600.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"IBM Plex Sans Condensed"; font-weight:500; font-display:swap; src:url(../vendor/fonts/ibm-plex-sans-condensed-latin-500.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Sans Condensed"; font-weight:600; font-display:swap; src:url(../vendor/fonts/ibm-plex-sans-condensed-latin-600.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:400; font-display:swap; src:url(../vendor/fonts/ibm-plex-mono-latin-400.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url(../vendor/fonts/ibm-plex-mono-latin-500.woff2) format("woff2"); }

:root{
  color-scheme: dark;

  /* superficies: neutros con sesgo frio, los mismos de Umbra */
  --void:      #08090b;
  --panel:     #0f0f13;
  --panel-2:   #0c0c10;
  --raise:     #17171d;
  --raise-2:   #1d1d25;
  --line:      #24242c;
  --line-soft: #1a1a21;

  /* texto */
  --tx:        #e8e8ee;
  --tx-dim:    #8f8f9c;
  --tx-faint:  #5c5c67;

  /* acento de la app (interaccion, seleccion) */
  --acc:       #ff8a3c;
  --acc-deep:  #c9622a;
  --acc-glow:  rgba(255,138,60,.18);
  --cool:      #5cb8ff;

  /* identidad de los nodos: paleta categorica validada (azul, naranja, aqua) */
  --n-org:     #3987e5;
  --n-co:      #d95926;
  --n-k:       #199e70;

  /* estado: severidad de las alertas, siempre con rotulo */
  --s-alta:    #d03b3b;
  --s-media:   #ec835a;
  --s-baja:    #fab219;
  --ok:        #0ca30c;

  --r: 3px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --h-bar: 46px;
  --w-left: 292px;
  --w-right: 384px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background: var(--void); color: var(--tx);
  font: 400 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
::selection{ background: var(--acc); color:#140a04; }
.mono{ font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim{ color: var(--tx-dim); }
.faint{ color: var(--tx-faint); }
.grow{ flex:1 1 auto; }
[hidden]{ display:none !important; }
:focus-visible{ outline: 1px solid var(--cool); outline-offset: 1px; }
b{ font-weight:600; }

*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background: var(--panel-2); }
*::-webkit-scrollbar-thumb{ background: #2b2b34; border:2px solid var(--panel-2); border-radius:6px; }
*::-webkit-scrollbar-thumb:hover{ background: #3a3a46; }

/* ── shell ────────────────────────────────────────────── */
#app{ height:100vh; display:grid; grid-template-rows: var(--h-bar) minmax(0,1fr) 24px; }
#body{ display:grid; min-height:0; grid-template-columns: var(--w-left) minmax(0,1fr) var(--w-right); }
.panel{ background: var(--panel); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
#left{ border-right:1px solid var(--line-soft); }
#right{ border-left:1px solid var(--line-soft); }

/* ── barra de comandos ────────────────────────────────── */
#bar{
  display:flex; align-items:center; gap:18px; padding:0 12px;
  background: linear-gradient(180deg,#131318,#0c0c10);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:baseline; gap:8px; flex:none; }
.mark{
  width:11px; height:11px; border-radius:2px; align-self:center;
  background: linear-gradient(140deg, var(--n-org) 0 33%, var(--n-k) 33% 66%, var(--n-co) 66% 100%);
  box-shadow: 0 0 10px rgba(57,135,229,.25);
}
.wordmark{ font:600 14px/1 var(--cond); letter-spacing:.22em; }
.sub{ font:500 9px/1 var(--cond); letter-spacing:.3em; color: var(--tx-faint); }

.search{ position:relative; flex:1 1 auto; max-width:620px; margin-inline:auto; }
#q{
  width:100%; height:30px; padding:0 34px 0 12px;
  background: var(--panel-2); border:1px solid var(--line); border-radius: var(--r);
  color: var(--tx); font:400 13px var(--sans);
}
#q::placeholder{ color: var(--tx-faint); }
#q:focus{ border-color: #3a3a48; outline:none; background: var(--raise); }
#q::-webkit-search-cancel-button{ filter: invert(.6); }
.search kbd{ position:absolute; right:9px; top:7px; font-size:10.5px; color: var(--tx-faint); border:1px solid var(--line); border-radius:3px; padding:0 5px; line-height:15px; pointer-events:none; }
#q:focus + kbd{ display:none; }
.qres{
  position:absolute; top:36px; left:0; right:0; z-index:40;
  background: var(--raise); border:1px solid var(--line); border-radius:5px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55); max-height: 70vh; overflow:auto; padding:4px;
}
.qres .qh{ font:600 10px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color: var(--tx-faint); padding:9px 8px 5px; }
.qres .qi{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:3px; cursor:pointer; }
.qres .qi:hover, .qres .qi.on{ background: var(--raise-2); }
.qres .qi .qn{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qres .qi .qm{ color: var(--tx-dim); font-size:11.5px; flex:none; }
.qres .qe{ padding:12px 10px; color: var(--tx-dim); }

.bar-right{ display:flex; align-items:center; gap:8px; flex:none; }
.pill{
  font:500 10px/1 var(--mono); letter-spacing:.06em; color: var(--tx-dim);
  border:1px solid var(--line); border-radius:10px; padding:4px 8px;
}
.pill.warn{ color:#1b1204; background: var(--s-baja); border-color: var(--s-baja); font-weight:500; }

/* ── botones y campos ─────────────────────────────────── */
.btn{
  background: var(--raise); color: var(--tx); border:1px solid var(--line);
  font:500 12.5px var(--sans); height:28px; padding:0 12px; border-radius: var(--r); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn:hover{ background: var(--raise-2); border-color:#30303a; }
.btn:disabled{ opacity:.45; cursor:default; }
.btn.accent{ background: var(--acc); color:#1a0c03; border-color: var(--acc); }
.btn.accent:hover{ background:#ff9a55; }
.btn.ghost{ background:transparent; border-color:transparent; color: var(--tx-dim); }
.btn.ghost:hover{ background: var(--raise); color: var(--tx); }
.btn.ghost.on{ color: var(--tx); background: var(--raise-2); }
.btn.danger{ color: #ffb3a8; border-color:#4a2222; background:#1d1112; }
.btn.danger:hover{ background:#2a1415; }
.btn.sm{ height:24px; padding:0 9px; font-size:12px; }
.btn.xs{ height:20px; padding:0 7px; font-size:11px; }
.field, .fld input, select, .set input{
  background: var(--panel-2); border:1px solid var(--line); color: var(--tx);
  border-radius: var(--r); height:26px; padding:0 8px; font:400 12.5px var(--sans); width:100%;
}
.field:focus, .fld input:focus, select:focus, .set input:focus{ outline:none; border-color:#3a3a48; background: var(--raise); }
input[type=date]{ font-family: var(--mono); font-size:11.5px; padding:0 6px; }
input[type=date]::-webkit-calendar-picker-indicator{ filter: invert(.7); cursor:pointer; }
select{ padding:0 6px; }

/* ── panel izquierdo ──────────────────────────────────── */
.phead{
  display:flex; align-items:center; justify-content:space-between; height:34px; flex:none;
  padding:0 10px 0 12px; border-bottom:1px solid var(--line-soft);
  font:600 11px/1 var(--cond); letter-spacing:.16em; text-transform:uppercase; color: var(--tx-dim);
}
.pscroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; }
.group{ padding:12px 12px 14px; border-bottom:1px solid var(--line-soft); }
.group-head{
  display:flex; align-items:baseline; gap:8px;
  font:600 10.5px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color: var(--tx-dim); margin-bottom:9px;
}
.group-head .unit{ margin-left:auto; letter-spacing:0; text-transform:none; font-size:11px; color: var(--tx-faint); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fld{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.fld span{ font-size:11px; color: var(--tx-faint); }
.chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.chip{
  font:500 11px/1 var(--mono); color: var(--tx-dim); background: var(--panel-2);
  border:1px solid var(--line); border-radius:10px; padding:4px 8px; cursor:pointer; user-select:none;
}
.chip:hover{ color: var(--tx); border-color:#34343f; }
.chip.on{ color:#1a0c03; background: var(--acc); border-color: var(--acc); }

.histo-wrap{ position:relative; margin-top:10px; }
#histo{ width:100%; height:64px; display:block; cursor:crosshair; }
.histo-axis{ display:flex; justify-content:space-between; font-size:10px; color: var(--tx-faint); margin-top:3px; }
.histo-tip{
  position:absolute; top:-30px; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  background: var(--raise-2); border:1px solid var(--line); border-radius:3px; padding:3px 7px; font-size:11px; color: var(--tx);
}

.checks{ display:flex; flex-direction:column; gap:2px; }
.check{ display:flex; align-items:center; gap:8px; padding:3px 2px; cursor:pointer; border-radius:3px; }
.check:hover{ background: var(--raise); }
.check input{ accent-color: var(--acc); margin:0; }
.check .cn{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.check .cm{ font-size:11px; color: var(--tx-faint); }

.group.orgs{ flex:1 1 auto; display:flex; flex-direction:column; min-height:260px; border-bottom:0; }
.orglist{ flex:1 1 auto; min-height:120px; overflow-y:auto; margin-top:8px; }
.orow{ display:grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items:center; gap:8px; padding:4px 2px; border-radius:3px; }
.orow:hover{ background: var(--raise); }
.orow input{ accent-color: var(--acc); margin:0; }
.orow .on{ cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orow .on:hover{ color:#fff; text-decoration: underline; text-decoration-color: var(--tx-faint); }
.orow .om{ font-size:11px; color: var(--tx-faint); }
.orow .ob{ grid-column: 2 / 4; height:2px; background: var(--line-soft); border-radius:1px; overflow:hidden; margin-top:-2px; }
.orow .ob i{ display:block; height:100%; background: var(--n-org); opacity:.8; }
.orow.dimmed .on, .orow.dimmed .om{ color: var(--tx-faint); }
.orow.osub{ padding-left:22px; }
.jrow{ display:grid; grid-template-columns: 14px 16px minmax(0,1fr) auto; align-items:center; gap:2px 8px; padding:5px 2px 6px; border-radius:3px; }
.jrow:hover{ background: var(--raise); }
.jrow .caret{ background:none; border:0; color: var(--tx-faint); cursor:pointer; padding:0; width:14px; font-size:10px; line-height:1; transition: transform .12s; }
.jrow .caret:hover{ color: var(--tx); }
.jrow .caret.open{ transform: rotate(90deg); }
.jrow input{ accent-color: var(--acc); margin:0; }
.jrow .jn{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.jrow .jn:hover{ color:#fff; }
.jrow .om{ font-size:11px; color: var(--tx-dim); }
.jrow .jm{ grid-column: 3 / 5; font-size:10.5px; color: var(--tx-faint); margin-top:-1px; }
.jrow .ob{ grid-column: 3 / 5; height:2px; background: var(--line-soft); border-radius:1px; overflow:hidden; }
.jrow .ob i{ display:block; height:100%; background: var(--n-org); }
.jrow.dimmed .jn, .jrow.dimmed .om{ color: var(--tx-faint); }

.summary{ flex:none; border-top:1px solid var(--line); padding:10px 12px 11px; background: var(--panel-2); display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.stat .sl{ font-size:10.5px; color: var(--tx-faint); }
.stat .sv{ font:600 15px/1.2 var(--sans); }
.stats .stat .sv{ font-size:14px; white-space:nowrap; }
.summary .snote{ grid-column: 1 / 3; font-size:11px; color: var(--tx-faint); line-height:1.4; }

/* ── escenario ────────────────────────────────────────── */
#stage{
  position:relative; min-width:0; min-height:0; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 42%, #111620 0%, #0b0d12 45%, var(--void) 80%);
}
#gl{ position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; }
.labels{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.lbl{
  position:absolute; left:0; top:0; white-space:nowrap; will-change:transform;
  font:500 11px/1.2 var(--sans); color: var(--tx-dim);
  padding:1px 5px; border-radius:3px; background: rgba(8,9,11,.62);
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.lbl.org{ color:#cfe2fb; font-weight:600; }
.lbl.flag{ color: var(--tx); }
.lbl.nb{ color: var(--tx); }
.lbl.sel{ color:#fff; background: rgba(20,22,28,.9); border:1px solid #3a3a48; font-weight:600; }
.lbl.hov{ color:#fff; }

.tip{
  position:absolute; left:0; top:0; z-index:5; pointer-events:none; max-width:280px;
  background: rgba(23,23,29,.97); border:1px solid var(--line); border-radius:4px; padding:7px 9px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.tip .tt{ font:600 9.5px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; display:flex; align-items:center; gap:6px; color: var(--tx-dim); }
.tip .tt::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--c, #888); box-shadow:0 0 0 2px var(--raise); }
.tip .tt.org{ --c: var(--n-org); } .tip .tt.co{ --c: var(--n-co); } .tip .tt.k{ --c: var(--n-k); }
.tip .tn{ font-weight:500; line-height:1.3; }
.tip .tm{ color: var(--tx-dim); font-size:12px; margin-top:2px; }
.tip .tf{ margin-top:5px; font-size:11.5px; display:flex; align-items:center; gap:6px; }
.tip .tf::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--c); }

.hud{
  position:absolute; left:12px; top:10px; font-size:11px; color: var(--tx-faint); pointer-events:none;
  line-height:1.6; text-shadow: 0 1px 2px #000; max-width: calc(100% - 440px);
}
.hud b{ color: var(--tx-dim); font-weight:500; }
.legend{
  position:absolute; left:12px; bottom:12px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  font-size:11.5px; color: var(--tx-dim); background: rgba(12,12,16,.72); border:1px solid var(--line-soft);
  border-radius:4px; padding:6px 10px; backdrop-filter: blur(4px);
}
.lg{ display:flex; align-items:center; gap:6px; }
.lg.sep{ padding-left:12px; border-left:1px solid var(--line); }
.sw{ width:10px; height:10px; display:inline-block; }
.sw.org{ background: var(--n-org); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.sw.co{ background: var(--n-co); border-radius:50%; }
.sw.k{ background: var(--n-k); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.halo{ width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow: inset 0 0 0 3px var(--c); opacity:.9; }
.halo.alta{ --c: var(--s-alta); } .halo.media{ --c: var(--s-media); } .halo.baja{ --c: var(--s-baja); }
.stage-tools{
  position:absolute; right:10px; top:8px; display:flex; gap:2px; align-items:center;
  background: rgba(12,12,16,.72); border:1px solid var(--line-soft); border-radius:4px; padding:3px; backdrop-filter: blur(4px);
}
.mini-sel{ display:flex; align-items:center; gap:6px; font-size:11.5px; color: var(--tx-dim); padding:0 4px 0 8px; }
.mini-sel select{ height:22px; width:auto; font-size:11.5px; background: var(--panel-2); }

.empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; z-index:6;
  background: radial-gradient(ellipse at 50% 45%, rgba(17,22,32,.55), rgba(8,9,11,.92) 70%); }
.empty-card{ max-width:560px; background: rgba(15,15,19,.94); border:1px solid var(--line); border-radius:8px; padding:28px 30px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.empty-mark{ width:34px; height:34px; border-radius:6px; margin-bottom:14px;
  background: linear-gradient(140deg, var(--n-org) 0 33%, var(--n-k) 33% 66%, var(--n-co) 66% 100%); }
.empty h1{ font:600 21px/1.25 var(--sans); margin:0 0 10px; letter-spacing:-.005em; }
.empty .lead{ color: var(--tx-dim); margin:0 0 14px; font-size:13.5px; line-height:1.55; }
.t-org{ color:#8cbcf2; } .t-co{ color:#f09368; } .t-k{ color:#5cc9a0; }
.steps{ margin:0 0 18px; padding-left:20px; color: var(--tx-dim); line-height:1.7; }
.steps b{ color: var(--tx); font-weight:500; }
.empty-actions{ display:flex; gap:8px; }
.empty .fine{ margin:16px 0 0; font-size:11.5px; color: var(--tx-faint); line-height:1.5; }

/* ── panel derecho ────────────────────────────────────── */
.tabs{ display:flex; border-bottom:1px solid var(--line); flex:none; padding:0 6px; height:34px; align-items:stretch; }
.tab{
  background:none; border:0; border-bottom:2px solid transparent; color: var(--tx-dim);
  font:500 12.5px var(--sans); padding:0 12px; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.tab:hover{ color: var(--tx); }
.tab.on{ color: var(--tx); border-bottom-color: var(--acc); }
.tab .count{ font-size:10.5px; color: var(--tx-faint); background: var(--raise); border-radius:8px; padding:1px 6px; }
.pane{ display:none; flex:1 1 auto; min-height:0; flex-direction:column; }
.pane.on{ display:flex; }
.pane-foot{ flex:none; display:flex; align-items:center; gap:8px; padding:6px 10px; border-top:1px solid var(--line-soft); font-size:11.5px; }

.atypes{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:10px 10px 6px; flex:none; }
.atype{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:4px; cursor:pointer; user-select:none;
  border:1px solid var(--line); background: var(--panel-2); color: var(--tx-dim); font-size:12px;
}
.atype:hover{ border-color:#34343f; color: var(--tx); }
.atype.on{ color: var(--tx); background: var(--raise); border-color:#3a3a48; }
.atype .g{ width:18px; text-align:center; font-size:13px; color: var(--tx-dim); }
.atype .n{ margin-left:auto; font-family: var(--mono); font-size:11px; color: var(--tx-faint); }
.atype.on .n{ color: var(--tx-dim); }
.atype:not(.on){ opacity:.6; }
.anote{ padding:0 12px 8px; font-size:11px; color: var(--tx-faint); line-height:1.4; flex:none; }
.alist{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 6px 8px; }
.alert{
  display:grid; grid-template-columns:4px minmax(0,1fr); gap:10px; padding:8px 8px 8px 6px; margin:2px 0;
  border-radius:4px; cursor:pointer; border:1px solid transparent;
}
.alert:hover{ background: var(--raise); }
.alert.on{ background: var(--raise-2); border-color:#3a3a48; }
.alert .sb{ border-radius:2px; background: var(--line); position:relative; overflow:hidden; }
.alert .sb i{ position:absolute; left:0; right:0; bottom:0; background: var(--c); border-radius:2px; }
.alert .ah{ display:flex; align-items:center; gap:6px; font-size:10.5px; color: var(--tx-faint); margin-bottom:2px; }
.alert .ah .g{ color: var(--tx-dim); }
.alert .ah .lvl{ margin-left:auto; display:flex; align-items:center; gap:5px; }
.alert .ah .lvl::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--c); }
.alert .at{ font-weight:500; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.alert .as{ font-size:11.5px; color: var(--tx-dim); line-height:1.35; margin-top:2px; }
.alist .more{ display:block; margin:8px auto; }
.alist .none{ padding:24px 14px; color: var(--tx-faint); text-align:center; line-height:1.5; }

/* ── detalle ──────────────────────────────────────────── */
.detail{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 14px 24px; }
.detail .none{ color: var(--tx-faint); text-align:center; padding:40px 10px; line-height:1.6; }
.dkind{ display:flex; align-items:center; gap:7px; font:600 10px/1 var(--cond); letter-spacing:.16em; text-transform:uppercase; color: var(--tx-dim); margin-bottom:7px; }
.dkind .sw{ width:9px; height:9px; }
.dtitle{ font:600 17px/1.28 var(--sans); margin:0 0 4px; word-break:break-word; }
.dsub{ color: var(--tx-dim); font-size:12px; margin-bottom:12px; }
.dsub .warn{ color: var(--s-baja); }
.kv{ display:grid; grid-template-columns: 112px minmax(0,1fr); gap:5px 10px; font-size:12.5px; margin:10px 0 4px; }
.kv dt{ color: var(--tx-faint); }
.kv dd{ margin:0; word-break:break-word; }
.stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background: var(--line-soft); border:1px solid var(--line-soft); border-radius:5px; overflow:hidden; margin:12px 0; }
.stats .stat{ background: var(--panel-2); padding:8px 10px; }
.dsec{ margin-top:18px; }
.dsec > h3{ font:600 10.5px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color: var(--tx-dim); margin:0 0 8px; display:flex; align-items:baseline; gap:8px; }
.dsec > h3 .dim{ letter-spacing:0; text-transform:none; font:400 11px var(--sans); margin-left:auto; }
.link{ color: var(--tx); cursor:pointer; text-decoration: underline; text-decoration-color: #45454f; text-underline-offset:2px; }
.link:hover{ text-decoration-color: var(--tx-dim); }

.why{
  border:1px solid var(--line); border-left:3px solid var(--c); background: var(--panel-2); border-radius:4px;
  padding:9px 11px 10px; margin:0 0 12px; font-size:12.5px; line-height:1.5; color: #cfcfd8;
}
.why .wh{ display:flex; align-items:center; gap:7px; font-size:11px; color: var(--tx-dim); margin-bottom:5px; }
.why .wh .lvl{ margin-left:auto; display:flex; align-items:center; gap:5px; }
.why .wh .lvl::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--c); }
.why b{ color: var(--tx); }
.why .ev{ margin-top:8px; border-top:1px solid var(--line-soft); padding-top:6px; }

.rows{ display:flex; flex-direction:column; }
.rowi{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap:2px 10px; padding:6px 4px; border-bottom:1px solid var(--line-soft); cursor:pointer; border-radius:3px; }
.rowi:hover{ background: var(--raise); }
.rowi .rn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowi .rv{ font-family: var(--mono); font-size:12px; text-align:right; }
.rowi .rs{ grid-column: 1 / 3; font-size:11px; color: var(--tx-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowi.flag .rn::after{ content:" ●"; color: var(--c); font-size:10px; }

.bars{ display:flex; flex-direction:column; gap:7px; }
.bar{ cursor:pointer; }
.bar .bl{ display:flex; gap:8px; font-size:12px; margin-bottom:3px; }
.bar .bl .bn{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar .bl .bv{ font-family: var(--mono); font-size:11.5px; color: var(--tx-dim); flex:none; white-space:nowrap; }
.bar .bt{ height:8px; background: var(--raise); border-radius:0 4px 4px 0; overflow:hidden; }
.bar .bt i{ display:block; height:100%; background: var(--n-co); border-radius:0 4px 4px 0; }
.bar.rest .bt i{ background: #4a4a55; }
.bar:hover .bl .bn{ color:#fff; }

.rowi.nolink{ cursor:default; }
.rowi.nolink:hover{ background:none; }
.lgd{ display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color: var(--tx-dim); margin:2px 0 6px; }
.lgd span{ display:flex; align-items:center; gap:6px; }
.lgd i{ width:10px; height:10px; border-radius:2px; display:inline-block; }
.bchart{ position:relative; }
.bchart svg{ display:block; width:100%; overflow:visible; }
.bchart .ttip{ position:absolute; pointer-events:none; transform: translate(-50%, -100%); white-space:nowrap;
  background: var(--raise-2); border:1px solid var(--line); border-radius:3px; padding:3px 7px; font-size:11px; }
.chart-note{ font-size:11px; color: var(--tx-faint); margin-top:6px; line-height:1.45; }
.empty.loading{ z-index:8; background: rgba(8,9,11,.86); }
.spin{ width:28px; height:28px; border-radius:50%; border:3px solid var(--line); border-top-color: var(--acc); animation: spin .8s linear infinite; margin-bottom:14px; }
.timeline{ position:relative; }
.timeline svg{ display:block; width:100%; overflow:visible; }
.timeline .ttip{
  position:absolute; pointer-events:none; transform: translate(-50%, -100%); white-space:nowrap;
  background: var(--raise-2); border:1px solid var(--line); border-radius:3px; padding:3px 7px; font-size:11px;
}
.more-btn{ margin-top:8px; }

/* ── barra de estado ──────────────────────────────────── */
#status{
  display:flex; align-items:center; gap:12px; padding:0 12px; font-size:11.5px; color: var(--tx-dim);
  background: var(--panel-2); border-top:1px solid var(--line);
}
#statusMsg.busy::before{
  content:""; display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%;
  border:2px solid var(--acc); border-right-color:transparent; animation: spin .8s linear infinite; vertical-align:-1px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

#statusNote{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.btn{ text-decoration:none; }

/* ── precios ──────────────────────────────────────────── */
.pstats{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1px; background: var(--line-soft); border-bottom:1px solid var(--line-soft); flex:none; }
.pstats .stat{ background: var(--panel-2); padding:8px 10px; }
.pstats .stat .sv{ font-size:14px; white-space:nowrap; }
.pviews{ display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px; flex:none; }
.plist{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 10px 10px; }
.pnote{ font-size:11px; color: var(--tx-faint); line-height:1.4; margin:2px 0 8px; }
.pfoot{ flex-wrap:wrap; }
.bar .bs{ font-size:11px; color: var(--tx-faint); margin-top:3px; }
.bar.borg .bt i{ background: var(--n-org); }
.rcard{ border:1px solid var(--line); border-radius:5px; padding:8px 10px; margin:0 0 6px; background: var(--panel-2); }
.rct{ font-weight:500; line-height:1.35; }
.rcn{ font-size:11px; color: var(--s-baja); margin-top:3px; }
.rcb, .rcf{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; align-items:center; }
.rcb .btn, .rcf .btn{ height:auto; min-height:20px; padding:3px 7px; white-space:normal; text-align:left; line-height:1.3; }
.field.sm{ height:22px; font-size:11.5px; width:auto; flex:1 1 140px; }
.pchart{ position:relative; }
.pchart svg{ display:block; width:100%; overflow:visible; }
.pchart .ttip{ position:absolute; pointer-events:none; transform: translate(-50%, -100%); white-space:nowrap;
  background: var(--raise-2); border:1px solid var(--line); border-radius:3px; padding:3px 7px; font-size:11px; }

/* ── pantallas chicas: el grafo arriba y los paneles apilados ── */
@media (max-width: 1000px){
  body{ overflow:auto; }
  #app{ height:auto; min-height:100vh; grid-template-rows: auto auto auto; grid-template-columns: minmax(0, 1fr); }
  #bar, #body, #status{ min-width:0; }
  #bar{ flex-wrap:wrap; padding:8px 12px; gap:8px 12px; }
  .brand .sub{ display:none; }
  .search{ order:3; flex:1 1 100%; max-width:none; margin:0; }
  .bar-right{ margin-left:auto; flex:1 1 auto; min-width:0; flex-wrap:wrap; justify-content:flex-end; }
  .brand{ flex:none; }
  #body{ grid-template-columns: minmax(0, 1fr); }
  #left, #right, #stage{ min-width:0; }
  .row2{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  input[type=date]{ min-width:0; }
  #stage{ order:-1; height:62vh; min-height:360px; }
  #left, #right{ border:0; border-top:1px solid var(--line); }
  #left{ max-height:none; }
  .pscroll{ overflow:visible; }
  #right{ height:80vh; }
  .stage-tools{ flex-wrap:wrap; max-width:calc(100% - 20px); }
  .legend{ display:none; }
  .hud{ display:none; }
  #status{ flex-wrap:wrap; height:auto; padding:4px 12px; }
  .modal-back{ padding:8px; }
  .pstats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ── modales ──────────────────────────────────────────── */
#modalRoot:empty{ display:none; }
.modal-back{ position:fixed; inset:0; z-index:100; background: rgba(4,4,6,.66); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal{
  width: min(760px, 100%); max-height: calc(100vh - 48px); display:flex; flex-direction:column;
  background: var(--panel); border:1px solid var(--line); border-radius:7px; box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.modal.wide{ width: min(920px, 100%); }
.modal > header{ display:flex; align-items:center; gap:10px; padding:14px 16px 12px; border-bottom:1px solid var(--line-soft); }
.modal > header h2{ margin:0; font:600 15px/1.2 var(--sans); }
.modal > header .x{ margin-left:auto; }
.modal .mbody{ padding:14px 16px; overflow-y:auto; min-height:0; }
.modal > footer{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid var(--line-soft); }

.dz{
  border:1px dashed #34343f; border-radius:6px; padding:22px; text-align:center; color: var(--tx-dim); background: var(--panel-2);
  transition: border-color .12s, background .12s;
}
.dz.over{ border-color: var(--acc); background: rgba(255,138,60,.05); color: var(--tx); }
.dz .dzi{ font-size:22px; color: var(--tx-faint); line-height:1; margin-bottom:8px; }
.dz p{ margin:4px 0; }
.jobs{ display:flex; flex-direction:column; gap:6px; margin:12px 0 4px; }
.job{ border:1px solid var(--line); border-radius:5px; padding:8px 10px; background: var(--panel-2); }
.job .jh{ display:flex; align-items:center; gap:8px; }
.job .jn{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.job .jk{ font-size:10.5px; color: var(--tx-dim); border:1px solid var(--line); border-radius:9px; padding:1px 7px; flex:none; }
.job .jp{ height:3px; background: var(--raise); border-radius:2px; margin-top:7px; overflow:hidden; }
.job .jp i{ display:block; height:100%; width:0; background: var(--acc); transition: width .15s; }
.job .jr{ font-size:11.5px; color: var(--tx-dim); margin-top:6px; line-height:1.45; }
.job.ok .jp i{ background: var(--ok); }
.job.err{ border-color:#4a2222; }
.job.err .jr{ color:#ffb3a8; }
.help{ margin-top:14px; font-size:12.5px; color: var(--tx-dim); line-height:1.55; }
.help h4{ margin:0 0 6px; font:600 10.5px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color: var(--tx-dim); }
.help ol{ margin:0 0 12px; padding-left:18px; }
.help li{ margin-bottom:4px; }
.help b{ color: var(--tx); font-weight:500; }
.help .ext{ color: var(--cool); cursor:pointer; text-decoration:underline; text-decoration-color: rgba(92,184,255,.35); }
.privacy{ border:1px solid var(--line); border-radius:5px; padding:9px 11px; background: var(--panel-2); font-size:12px; color: var(--tx-dim); line-height:1.5; }

.set{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.set .sn{ font-weight:500; }
.set .sd{ grid-column: 1 / 2; font-size:11.5px; color: var(--tx-faint); line-height:1.4; }
.set input{ font-family: var(--mono); text-align:right; width:110px; }
.set-h{ font:600 10.5px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color: var(--tx-dim); margin:18px 0 4px; }
.set-h:first-child{ margin-top:2px; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius: var(--r); overflow:hidden; }
.seg button{ background: var(--panel-2); color: var(--tx-dim); border:0; font:500 12px var(--sans); padding:5px 12px; cursor:pointer; white-space:nowrap; }
.seg button.on{ background: var(--raise-2); color: var(--tx); }
.rates{ display:grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap:6px; margin-top:6px; }
.rates label{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--tx-dim); min-width:0; }
.rates input{ font-family: var(--mono); font-size:12px; height:24px; text-align:right; flex:1 1 auto; min-width:0; width:100%;
  background: var(--panel-2); border:1px solid var(--line); color: var(--tx); border-radius: var(--r); padding:0 6px; }
.rates input:focus{ outline:none; border-color:#3a3a48; background: var(--raise); }
table.src{ width:100%; border-collapse:collapse; font-size:12px; }
table.src th{ text-align:left; font:600 10px/1 var(--cond); letter-spacing:.12em; text-transform:uppercase; color: var(--tx-faint); padding:6px 8px; border-bottom:1px solid var(--line); }
table.src td{ padding:7px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.src td.num{ font-family: var(--mono); text-align:right; white-space:nowrap; }