/* ============================================================
   REX Command — diseño del panel web que reemplaza a
   GameServer.exe / DataServer.exe / JoinServer.exe / ConnectServer.exe
   + MuMaker / REX Maker / CashShop Editor.
   Tema único y deliberado: sala de máquinas oscura, marca REX
   (abismo negro, carmín, dorado), las 8 tintas del log del GameServer.
   ============================================================ */
:root{
  --abyss:#0b0b0e; --panel:#131318; --panel-2:#1a1a20; --panel-3:#212129;
  --line:#26262f; --line-2:#353541;
  --text:#ecebf0; --text-2:#b4b3bd; --muted:#82818d;
  --carmin:#d9304a; --carmin-2:#ef4860; --carmin-deep:#93233a; --carmin-dim:rgba(217,48,74,.14);
  --gold:#e8b84b; --gold-dim:rgba(232,184,75,.14);
  --ok:#3fcf6e; --ok-dim:rgba(63,207,110,.14);
  --warn:#f2a83b; --warn-dim:rgba(242,168,59,.16);
  --crit:#ff5a6e; --crit-dim:rgba(255,90,110,.14);
  --info:#5aa9ff; --info-dim:rgba(90,169,255,.14);
  /* enum eLogColor de ServerDisplayer.h, adaptado a fondo oscuro */
  --log-black:#d8d7de; --log-red:#ff5a6e; --log-green:#3fcf6e; --log-blue:#4fb3ff;
  --log-bot:#ff4d7a; --log-user:#ff9d3c; --log-event:#6ea1ff; --log-alert:#33c8d0;
  --font-display:"Cinzel",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:4px; --r-lg:8px;
  --rail:236px; --top:56px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--abyss);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--info);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
code,kbd,.mono{font-family:var(--font-mono);font-size:12.5px}
kbd{background:var(--panel-3);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;padding:0 5px;font-size:11px;color:var(--text-2)}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--text);background:var(--abyss);border:1px solid var(--line-2);border-radius:var(--r);padding:6px 9px;font-size:13px;min-width:0;max-width:100%}
.field input,.field select{width:100%}
input:focus,select:focus,textarea:focus,button:focus-visible,.nav a:focus-visible{outline:2px solid var(--carmin);outline-offset:1px}
input[type=range]{padding:0;background:transparent;border:0;accent-color:var(--carmin)}
input[type=checkbox]{accent-color:var(--carmin);width:15px;height:15px;margin:0}
.num,.tbl td.num,.kpi .v,.count{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.topbar{position:sticky;top:0;z-index:40;height:var(--top);display:flex;align-items:center;gap:14px;overflow:hidden;padding:0 18px;background:linear-gradient(180deg,#141419,#0f0f13);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:8px;flex:none;white-space:nowrap}
.brand .rex{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.06em;color:var(--text)}
.brand .rex b{color:var(--carmin)}
.brand .sub{font-family:var(--font-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.brand .ver{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:3px;padding:1px 5px;margin-left:6px}
.worlds{display:flex;gap:4px;margin-left:4px;flex:none}
.worlds button{background:transparent;border:1px solid transparent;border-radius:var(--r);padding:5px 9px;display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:13px;white-space:nowrap}
.worlds button .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-dim)}
.worlds button .dot.standby{background:var(--warn);box-shadow:0 0 0 3px var(--warn-dim)}
.worlds button .dot.off{background:var(--muted);box-shadow:none}
.worlds button .n{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.worlds button.on{background:var(--panel-3);border-color:var(--line-2);color:var(--text)}
.worlds button:hover{color:var(--text)}
.topbar .state{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap}
.clock{font-family:var(--font-mono);font-size:12px;color:var(--text-2);padding:0 6px}
.user{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--line);font-size:12.5px;color:var(--text-2)}
.user .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--carmin-deep),var(--carmin));display:grid;place-items:center;font-family:var(--font-display);font-size:11px;font-weight:700;color:#fff}
.user .role{color:var(--gold);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
.rail{position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow:auto;border-right:1px solid var(--line);background:var(--panel);padding:14px 10px 18px;display:flex;flex-direction:column;gap:14px}
.nav h6{margin:6px 10px 4px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r);color:var(--text-2);font-size:13.5px;position:relative}
.nav a:hover{background:var(--panel-2);color:var(--text)}
.nav a.on{background:var(--carmin-dim);color:var(--text)}
.nav a.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--carmin);border-radius:2px}
.nav a .ic{width:16px;height:16px;flex:none;color:var(--muted)}
.nav a.on .ic{color:var(--carmin-2)}
.nav a.locked{opacity:.55}
.nav a.locked::after{content:attr(data-min);margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.nav a .badge{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.nav a .badge.hot{color:var(--crit)}
.rail .foot{margin-top:auto;padding:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.rail .foot label{display:flex;gap:8px;align-items:center;color:var(--text-2);cursor:pointer}

.main{padding:22px 26px 60px;min-width:0}
.screen{display:flex;flex-direction:column;gap:18px;max-width:1440px}
.screen + .screen{margin-top:48px;padding-top:36px;border-top:1px dashed var(--line-2)}
.screen-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.screen-h .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--carmin-2);font-weight:600;margin-bottom:4px}
.screen-h h1{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:.02em}
.screen-h .lead{color:var(--text-2);max-width:68ch;margin-top:6px;font-size:13.5px}
.screen-h .replaces{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:520px}
.replaces span{font-size:11px;color:var(--muted);border:1px dashed var(--line-2);border-radius:3px;padding:2px 7px;font-family:var(--font-mono)}
.replaces span b{color:var(--text-2);font-weight:500}

/* ---------- primitives ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.card .ch{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.card .ch h3{font-size:13px;font-weight:600;letter-spacing:.02em}
.card .ch .hint{font-size:11.5px;color:var(--muted)}
.card .ch .sp{margin-left:auto;display:flex;gap:6px;align-items:center}
.card > .cb{padding:14px}
.card.flush > .cb{padding:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.gA{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.gB{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.gC{grid-template-columns:240px minmax(0,1fr) 290px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:8px}
.muted{color:var(--muted)} .t2{color:var(--text-2)} .small{font-size:12px} .xs{font-size:11px}
.gold{color:var(--gold)} .ok{color:var(--ok)} .warn{color:var(--warn)} .crit{color:var(--crit)} .info{color:var(--info)}
.hr{height:1px;background:var(--line);margin:4px 0}

/* Utilidades de maquetado. Están acá para que las pantallas no repitan el mismo `style="…"`
   suelto: antes había 77 copias de estas mismas seis o siete declaraciones repartidas por
   `web/screens/`. Lo que sigue dependiendo de un dato (anchos de columna, colores de una serie,
   porcentajes de una barra) sí se calcula en línea, que es lo único que no se puede tabular acá. */
.between{justify-content:space-between}
.grow{flex:1}
.push{margin-left:auto}
.right{text-align:right}
.nowrap{white-space:nowrap}
.pre-wrap{white-space:pre-wrap}
.kicker{letter-spacing:.12em;text-transform:uppercase}
.gap-4{gap:4px} .gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px}
.mt-4{margin-top:4px} .mt-6{margin-top:6px} .mt-8{margin-top:8px} .mt-10{margin-top:10px}
.mb-12{margin-bottom:12px}
.nowrap-row{flex-wrap:nowrap}
/* Sprite de iconos SVG de index.html: no ocupa sitio y no se ve. */
.icon-defs{position:absolute}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text-2);white-space:nowrap;line-height:1.4}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.chip.ok{border-color:rgba(63,207,110,.35);background:var(--ok-dim);color:var(--ok)} .chip.ok::before{background:var(--ok)}
.chip.warn{border-color:rgba(242,168,59,.4);background:var(--warn-dim);color:var(--warn)} .chip.warn::before{background:var(--warn)}
.chip.crit{border-color:rgba(255,90,110,.4);background:var(--crit-dim);color:var(--crit)} .chip.crit::before{background:var(--crit)}
.chip.info{border-color:rgba(90,169,255,.4);background:var(--info-dim);color:var(--info)} .chip.info::before{background:var(--info)}
.chip.gold{border-color:rgba(232,184,75,.4);background:var(--gold-dim);color:var(--gold)} .chip.gold::before{background:var(--gold)}
.chip.plain::before{display:none}
.chip.mono{font-family:var(--font-mono);font-size:11px}

.btn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--panel-3);color:var(--text);font-size:12.5px;font-weight:500;white-space:nowrap;line-height:1.4}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--carmin);border-color:var(--carmin);color:#fff}
.btn.primary:hover{background:var(--carmin-2)}
.btn.danger{background:transparent;border-color:rgba(255,90,110,.5);color:var(--crit)}
.btn.danger:hover{background:var(--crit-dim)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--panel-2);color:var(--text)}
.btn.sm{padding:3px 8px;font-size:11.5px}
.btn.gold{background:transparent;border-color:rgba(232,184,75,.5);color:var(--gold)}
.btn kbd{margin-left:2px}
.btnrow{display:flex;gap:6px;flex-wrap:wrap}

.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:1}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:rgba(255,255,255,.015)}
.tbl td.num,.tbl th.num{text-align:right}
.tbl .acts{display:flex;gap:4px;justify-content:flex-end;opacity:.85}
.tbl .acts .btn{padding:2px 7px}
.tblwrap{overflow-x:auto}
.tbl .mini{color:var(--muted);font-size:11px}

.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .v{font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.01em;font-family:var(--font-mono)}
.kpi .v small{font-size:13px;color:var(--muted);font-weight:500}
.kpi .d{font-size:11.5px;color:var(--text-2)}
.kpi.warn{border-color:rgba(242,168,59,.45)} .kpi.warn .v{color:var(--warn)}
.kpi.crit{border-color:rgba(255,90,110,.45)} .kpi.crit .v{color:var(--crit)}
.kpi.ok .v{color:var(--ok)}
.spark{height:34px;width:100%;margin-top:6px}

.banner{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.banner > div{padding:12px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.banner > div:last-child{border-right:0}
.banner .l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.banner .v{font-family:var(--font-display);font-size:20px;letter-spacing:.06em;font-weight:600}
.banner .active .v{color:var(--ok)}
.banner .v.mono{font-family:var(--font-mono);letter-spacing:0;font-size:20px}

.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);padding:0 6px}
.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:9px 12px;color:var(--text-2);font-size:13px;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-bottom-color:var(--carmin)}
.tabs button .n{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-left:5px}
.tabpane[hidden]{display:none}

/* ---------- log viewer ---------- */
.log{font-family:var(--font-mono);font-size:12px;line-height:1.55;background:#0a0a0d;border:1px solid var(--line);border-radius:var(--r);padding:8px 0;overflow:auto;max-height:520px}
.log .ln{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:1px 12px;white-space:pre-wrap;word-break:break-word}
.log .ln:hover{background:rgba(255,255,255,.03)}
.log .t{color:var(--muted)}
.log .c-black{color:var(--log-black)} .log .c-red{color:var(--log-red)} .log .c-green{color:var(--log-green)} .log .c-blue{color:var(--log-blue)}
.log .c-bot{color:var(--log-bot)} .log .c-user{color:var(--log-user)} .log .c-event{color:var(--log-event)} .log .c-alert{color:var(--log-alert)}
.log .tag{color:inherit;opacity:.85}
.log.compact{max-height:300px;font-size:11.5px}
.log .ln.hide{display:none}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filters .f{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 9px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text-2);cursor:pointer;user-select:none}
.filters .f i{width:8px;height:8px;border-radius:50%;background:var(--sw)}
.filters .f.off{opacity:.4;text-decoration:line-through}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--text-2)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ---------- misc widgets ---------- */
.evlist{display:flex;flex-direction:column}
.evlist .ev{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.evlist .ev:last-child{border-bottom:0}
.evlist .ev .i{font-family:var(--font-mono);color:var(--muted);font-size:11px}
.evlist .ev .tm{font-family:var(--font-mono);font-size:12px;min-width:74px;text-align:right}
.evlist .ev .tm.off{color:var(--crit)} .evlist .ev .tm.on{color:var(--ok)} .evlist .ev .tm.soon{color:var(--ok)} .evlist .ev .tm.far{color:var(--text-2)}
.evlist .ev .acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
/* sin `min-width:0` la columna 1fr no baja del ancho de su texto y la fila se sale de la tarjeta */
.evlist .ev > *{min-width:0}
.evlist .ev > span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.countdown{font-family:var(--font-mono);font-size:30px;font-weight:600;letter-spacing:.02em;color:var(--warn)}
.gate{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.gate .big{font-size:13.5px;font-weight:600}
.toggle{width:34px;height:18px;border-radius:99px;background:var(--line-2);position:relative;flex:none;border:0;padding:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.toggle.on{background:var(--carmin)} .toggle.on::after{left:18px}
.toggle.ok.on{background:var(--ok)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field .val{font-family:var(--font-mono);font-size:12.5px}
.form{display:grid;gap:10px 14px}
/* M15: columnas por clase (antes iban en estilo en línea y no se adaptaban al ancho) */
.form.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split-side.side-s{--side:170px}
.split-side.side-m{--side:290px}
.split-side.side-l{--side:300px}
@media (max-width:1100px){
  .form.cols-4,.form.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-side.side-m,.split-side.side-l{--side:230px}
}
.note{padding:10px 12px;border-radius:var(--r);font-size:12.5px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text-2)}
.note.warn{border-color:rgba(242,168,59,.4);background:var(--warn-dim);color:#f6d29a}
.note.crit{border-color:rgba(255,90,110,.4);background:var(--crit-dim);color:#ffb3bd}
.note.ok{border-color:rgba(63,207,110,.35);background:var(--ok-dim);color:#b8f0cb}
.note.info{border-color:rgba(90,169,255,.4);background:var(--info-dim);color:#bcd8ff}
.note b{color:var(--text);font-weight:600}
.pill{display:inline-block;padding:1px 6px;border-radius:3px;font-family:var(--font-mono);font-size:10.5px;background:var(--panel-3);color:var(--text-2);border:1px solid var(--line-2)}
.pill.hot{background:var(--carmin-dim);color:var(--carmin-2);border-color:rgba(217,48,74,.4)}
.pill.restart{background:var(--warn-dim);color:var(--warn);border-color:rgba(242,168,59,.4)}
.pill.new{background:var(--gold-dim);color:var(--gold);border-color:rgba(232,184,75,.4)}
.pill.same{background:var(--ok-dim);color:var(--ok);border-color:rgba(63,207,110,.35)}
.pill.better{background:var(--info-dim);color:var(--info);border-color:rgba(90,169,255,.4)}
.pill.partial{background:var(--warn-dim,rgba(232,150,75,.15));color:var(--warn,#e8964b);border-color:rgba(232,150,75,.4)}
.bar{height:6px;background:var(--panel-3);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--carmin);border-radius:3px}
.bar.ok i{background:var(--ok)} .bar.warn i{background:var(--warn)} .bar.info i{background:var(--info)} .bar.gold i{background:var(--gold)}
.proc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.proc .nm{font-weight:600;font-size:13px;display:flex;gap:8px;align-items:center}
.proc .nm .port{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-weight:400}
.proc .meta{font-size:11.5px;color:var(--text-2);display:flex;gap:10px;flex-wrap:wrap;margin-top:3px}
.proc .meta b{color:var(--text);font-weight:500;font-family:var(--font-mono);font-size:11.5px}
.proc .acts{display:flex;gap:4px;align-items:flex-start}
.timeline{display:flex;flex-direction:column;gap:0}
.timeline .tl{display:grid;grid-template-columns:64px 14px 1fr;gap:10px;padding:6px 0;font-size:12.5px}
.timeline .tl .t{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.timeline .tl .d{width:8px;height:8px;border-radius:50%;background:var(--muted);margin-top:6px}
.timeline .tl .d.crit{background:var(--crit)} .timeline .tl .d.warn{background:var(--warn)} .timeline .tl .d.ok{background:var(--ok)} .timeline .tl .d.info{background:var(--info)}
.term{background:#050507;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--text-2);overflow-x:auto}
.term .p{color:var(--muted)} .term .ok{color:var(--ok)} .term .h{color:var(--text)} .term .u{color:var(--info);text-decoration:underline} .term .w{color:var(--warn)} .term .g{color:var(--gold)}
.term .dim{color:#55545f}

/* ---------- inventario / item maker ---------- */
.doll{display:grid;grid-template-columns:repeat(4,44px);grid-auto-rows:44px;gap:4px;justify-content:center}
.slot{background:var(--abyss);border:1px solid var(--line-2);border-radius:3px;position:relative;display:grid;place-items:center;font-size:9.5px;color:var(--muted);text-align:center;line-height:1.1;padding:2px;overflow:hidden}
.slot.has{border-color:rgba(232,184,75,.5);background:linear-gradient(160deg,#1b1a12,#111)}
.slot.has .nm{color:var(--gold);font-weight:600;font-size:9px}
.slot.exc{border-color:rgba(63,207,110,.55)} .slot.exc .nm{color:#8ee6a8}
.slot.anc{border-color:rgba(90,169,255,.55)} .slot.anc .nm{color:#9ec6ff}
.slot .lv{position:absolute;right:2px;bottom:1px;font-family:var(--font-mono);font-size:8.5px;color:var(--text-2)}
.bag{display:grid;grid-template-columns:repeat(8,34px);grid-auto-rows:34px;gap:2px}
.bag .slot{font-size:8px;border-radius:2px}
.bag .slot.w2{grid-column:span 2} .bag .slot.h2{grid-row:span 2} .bag .slot.h3{grid-row:span 3} .bag .slot.h4{grid-row:span 4}
.vault{display:grid;grid-template-columns:repeat(8,30px);grid-auto-rows:30px;gap:2px}
.vault .slot{font-size:7.5px;border-radius:2px}
.catlist{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--abyss)}
.catlist .it{display:grid;grid-template-columns:44px 1fr auto;gap:8px;padding:5px 10px;font-size:12px;border-bottom:1px solid var(--line);align-items:center;cursor:pointer}
.catlist .it:hover{background:var(--panel-2)}
.catlist .it.on{background:var(--carmin-dim)}
.catlist .it .id{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.catlist .it .sz{font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.preview{aspect-ratio:1;background:radial-gradient(ellipse at 50% 40%,#2a1a20 0%,#121215 60%,#0b0b0e 100%);border:1px solid var(--line-2);border-radius:var(--r-lg);display:grid;place-items:center;position:relative;overflow:hidden}
.preview .nm{position:absolute;left:0;right:0;top:12px;text-align:center;font-weight:600;font-size:13.5px;color:#8ee6a8;text-shadow:0 0 12px rgba(63,207,110,.4)}
.preview .nm.anc{color:#9ec6ff}
.preview .lv{position:absolute;right:12px;bottom:10px;font-family:var(--font-mono);font-size:12px;color:var(--gold)}
.preview svg{width:62%;height:62%;filter:drop-shadow(0 0 16px rgba(217,48,74,.35))}
.bits{display:grid;grid-template-columns:1fr;gap:4px}
.bits label{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);cursor:pointer}
.bits label .m{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.hex{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;background:var(--abyss);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px;word-break:break-all;line-height:1.7}
.hex b{font-weight:500}
.hex .b0{color:var(--gold)} .hex .b1{color:var(--info)} .hex .b2{color:var(--text-2)} .hex .b3{color:var(--muted)} .hex .b7{color:var(--ok)} .hex .b8{color:#9ec6ff} .hex .b9{color:var(--gold)} .hex .b10{color:var(--log-alert)} .hex .b11{color:var(--log-user)} .hex .b16{color:var(--carmin-2)}
.sockets{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sock{border:1px solid var(--line-2);border-radius:var(--r);padding:6px;display:flex;flex-direction:column;gap:4px;background:var(--panel-2)}
.sock .t{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sock select{padding:3px 5px;font-size:11.5px;width:100%}

/* ---------- mapas ---------- */
.maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.map{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--panel-2);display:flex;flex-direction:column;gap:5px;cursor:pointer}
.map .n{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.map .n b{font-weight:500}
.map .n span{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.map .cnt{font-family:var(--font-mono);font-size:18px;font-weight:600}
.map.hot .cnt{color:var(--carmin-2)} .map.warm .cnt{color:var(--warn)} .map.cool .cnt{color:var(--text-2)} .map.zero .cnt{color:var(--muted)}
.map.on{outline:1px solid var(--carmin)}
.heat{border:1px solid var(--line-2);border-radius:var(--r);background:#0d0f0c;aspect-ratio:1;width:100%;position:relative;overflow:hidden}
.heat canvas{width:100%;height:100%;display:block}
.heat .lbl{position:absolute;font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,.7);text-shadow:0 0 4px #000;pointer-events:none}

/* ---------- cobertura ---------- */
.cov .src{font-size:11px;color:var(--muted);font-family:var(--font-mono)}
.cov td:nth-child(2){font-weight:500}
.cov td:nth-child(3){color:var(--text-2)}
.srcfilters{display:flex;gap:6px;flex-wrap:wrap}

@media (max-width:1600px){.brand .ver,.brand .sub{display:none}}
@media (max-width:1380px){.clock{display:none}.user span:not(.av){display:none}}
@media (max-width:1100px){
  .g4,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.gA,.gB,.gC{grid-template-columns:minmax(0,1fr)}
  .banner{grid-template-columns:1fr}
  .banner > div{border-right:0;border-bottom:1px solid var(--line)}
}
/* formModal v2: validación en línea */
.field .field-err{display:block;min-height:0;font-size:11px;color:var(--log-red,#e5484d)}.field .field-err:empty{display:none}
.field [aria-invalid="true"]{border-color:var(--log-red,#e5484d)!important;box-shadow:0 0 0 2px rgba(229,72,77,.18)}
.field label .req{color:var(--log-red,#e5484d)}.mb-4{margin-bottom:4px}
/* sparklines del tablero de salud */
.spark{display:block}.spark-cell{display:flex;align-items:center;gap:8px}.spark-empty{fill:var(--muted);font-size:10px}
/* búsqueda global (Ctrl+K) */
.search-btn{gap:6px}.search-btn kbd{font-family:var(--font-mono);font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.palette-back{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:10vh}
.palette{width:min(680px,94vw);background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden}
.palette-input{width:100%;border:0;border-bottom:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:16px;padding:14px 16px;outline:none}
.palette-list{max-height:52vh;overflow:auto}
.palette-it{display:grid;grid-template-columns:82px 1fr;column-gap:12px;padding:8px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
.palette-it .kind{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.palette-it .label{font-weight:600}.palette-it .hint{grid-column:2;font-size:12px;color:var(--muted)}
.palette-it.on,.palette-it:hover{background:var(--carmin-dim)}
.palette-empty{padding:16px}.palette-foot{padding:8px 14px;border-top:1px solid var(--line)}
@media (max-width:820px){.search-btn kbd{display:none}}
.menu-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:18px;flex:none}
.menu-btn[aria-expanded="true"]{background:var(--carmin-dim);border-color:var(--carmin)}
@media (max-width:820px){
  /* M15: bajo 820 px el menú de 24 entradas va en un cajón que abre el botón ☰ del topbar */
  .menu-btn{display:inline-flex}
  .app{grid-template-columns:1fr}
  .rail{position:fixed;top:var(--top);left:0;bottom:0;width:min(280px,86vw);height:auto;z-index:45;border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .18s ease;box-shadow:0 0 0 rgba(0,0,0,0)}
  .app.nav-open .rail{transform:none;box-shadow:12px 0 40px rgba(0,0,0,.55)}
  .app.nav-open::before{content:"";position:fixed;inset:var(--top) 0 0 0;background:rgba(0,0,0,.5);z-index:44}
  .rail .foot{display:none}
  .topbar{gap:10px;flex-wrap:wrap;height:auto;padding:8px 12px}
  .worlds{flex-wrap:wrap}
  .g2{grid-template-columns:minmax(0,1fr)}
  .main{padding:16px 12px 40px}
  .tbl th{position:static}
}
@media (prefers-reduced-motion:reduce){.toggle::after{transition:none}}

/* ---------- assets reales (gif de la web, minimapas del panel de logs) ---------- */
.catlist .it{grid-template-columns:32px 44px 1fr auto}
.catlist .it img{width:28px;height:40px;object-fit:contain;background:#0d0d11;border:1px solid var(--line);border-radius:3px;padding:2px}
.catlist .more{padding:8px 10px;font-size:11px;color:var(--muted)}
.preview img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(217,48,74,.5))}
.slot img{width:100%;height:100%;object-fit:contain;padding:3px;display:block}
.slot.has .nm{display:none}
.bag{grid-auto-flow:dense}
.map{position:relative;overflow:hidden;min-height:108px;background-size:cover;background-position:center;isolation:isolate;justify-content:flex-end}
.map::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,14,.2) 0%,rgba(11,11,14,.55) 45%,rgba(11,11,14,.92) 100%);z-index:-1}
.map .n b,.map .cnt{text-shadow:0 1px 3px #000}
.map.on{outline:2px solid var(--carmin)}
.heat img.base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.heat canvas{position:absolute;inset:0;width:100%;height:100%}
.heat .mk{position:absolute;width:13px;height:13px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 2px #000)}
.heat .mk.p{width:18px;height:18px}
.heat .mk.gm{width:16px;height:16px}
.heat .hover{position:absolute;right:8px;bottom:8px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-2);background:rgba(11,11,14,.8);padding:2px 6px;border-radius:3px;pointer-events:none}
.ico{width:22px;height:30px;object-fit:contain;vertical-align:middle;margin-right:4px;background:#0d0d11;border:1px solid var(--line);border-radius:3px;padding:1px}

/* ============================================================
   REX Command — aplicación (lo que el diseño no tenía que mostrar):
   login, estados vacíos, cargando, errores, modales, toasts,
   tablas paginadas, editor con números de línea, drag & drop.
   Todo con la misma paleta y las mismas primitivas de arriba.
   ============================================================ */

/* ---------- visibilidad ---------- */
[hidden]{display:none!important}

/* ---------- login / acceso ---------- */
.gate-screen{min-height:100vh;display:grid;place-items:center;padding:28px 16px;background:
  radial-gradient(1200px 600px at 50% -10%,rgba(217,48,74,.10),transparent 60%),var(--abyss)}
.gate-card{width:100%;max-width:392px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.gate-card .brand{justify-content:center;margin-bottom:2px}
.gate-card .brand .rex{font-size:26px}
.gate-card .sub{font-family:var(--font-display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-align:center}
.gate-card form{display:flex;flex-direction:column;gap:12px}
.gate-card .btn{justify-content:center}
.gate-foot{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.6}
.gate-card .note{margin:0}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;background:var(--panel-2);border:1px solid var(--line-2);border-left-width:3px;border-radius:var(--r);padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.45);display:flex;gap:10px;align-items:flex-start;font-size:12.5px;animation:toast-in .16s ease-out}
.toast .tx{min-width:0;flex:1}
.toast .tt{font-weight:600;color:var(--text);margin-bottom:2px}
.toast .hint{color:var(--muted);font-size:11.5px;margin-top:3px}
.toast.ok{border-left-color:var(--ok)} .toast.ok .tt{color:var(--ok)}
.toast.warn{border-left-color:var(--warn)} .toast.warn .tt{color:var(--warn)}
.toast.crit{border-left-color:var(--crit)} .toast.crit .tt{color:var(--crit)}
.toast.info{border-left-color:var(--info)} .toast.info .tt{color:var(--info)}
.toast .x{background:transparent;border:0;color:var(--muted);padding:0 2px;line-height:1;font-size:15px}
.toast .x:hover{color:var(--text)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- modales ---------- */
.modal-back{position:fixed;inset:0;z-index:80;background:rgba(5,5,8,.72);display:grid;place-items:center;padding:20px}
.modal{width:100%;max-width:520px;max-height:min(86vh,760px);overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal.wide{max-width:860px}
.modal > .mh{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.modal > .mh h3{font-size:14px;font-weight:600}
.modal > .mh .x{margin-left:auto;background:transparent;border:0;color:var(--muted);font-size:17px;line-height:1;padding:0 4px}
.modal > .mh .x:hover{color:var(--text)}
.modal > .mb{padding:16px;display:flex;flex-direction:column;gap:12px}
.modal > .mf{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.modal .confirm-word{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.modal .danger-head{border-bottom-color:rgba(255,90,110,.35)}
.modal .danger-head h3{color:var(--crit)}

/* ---------- estados: vacío, cargando, error ---------- */
.nodata{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:34px 20px;color:var(--text-2);min-height:120px}
.nodata .ttl{font-size:13.5px;font-weight:600;color:var(--text)}
.nodata .sub{font-size:12.5px;color:var(--muted);max-width:56ch;line-height:1.6}
.nodata .ic{width:26px;height:26px;color:var(--line-2)}
.nodata.err .ttl{color:var(--crit)}
.nodata .btnrow{margin-top:4px;justify-content:center}
.nodata.tiny{padding:16px 12px;min-height:0}
td .nodata,th .nodata{padding:20px 12px}
.loading{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.loading::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--carmin);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 37%,var(--panel-2) 63%);background-size:400% 100%;animation:skel 1.3s ease infinite;border-radius:var(--r);height:12px}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
.busy{opacity:.55;pointer-events:none}
[disabled],button:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line-2)}

/* ---------- tablas: orden y paginación ---------- */
.tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.tbl th.sortable:hover{color:var(--text-2)}
.tbl th.sortable::after{content:"";opacity:0;margin-left:5px;font-size:9px}
.tbl th.sortable.asc::after{content:"▲";opacity:.75}
.tbl th.sortable.desc::after{content:"▼";opacity:.75}
.tbl tr.on td{background:var(--carmin-dim)}
.tbl tr.clickable{cursor:pointer}
.pager{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);flex-wrap:wrap}
.pager .sp{margin-left:auto;display:flex;gap:6px;align-items:center}
/* createTable v2: barra de herramientas (masivas, columnas, CSV), filtros por columna y selección */
.tbl-tools{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);flex-wrap:wrap}
.tbl-tools .l,.tbl-tools .r{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tbl-tools .r{margin-left:auto}
.tbl-tools .tbl-sel{margin-right:4px}
.tbl-colmenu{position:relative}
.tbl-colmenu summary{list-style:none;cursor:pointer}
.tbl-colmenu summary::-webkit-details-marker{display:none}
.tbl-colmenu .menu{position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:200px;max-height:320px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tbl-colmenu .menu label{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:6px;font-size:12px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.tbl-colmenu .menu label:hover{background:var(--panel-2,rgba(255,255,255,.04))}
.tbl tr.tbl-filters th{padding:4px 8px;background:var(--panel);text-transform:none;letter-spacing:0;position:sticky;top:34px}
.tbl tr.tbl-filters input{width:100%;min-width:60px;font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--text)}
.tbl th.sel,.tbl td.sel{width:28px;text-align:center;padding-left:8px;padding-right:4px}
.tbl tr.selected td{background:rgba(214,60,60,.10)}
/* Tablas: edición en grilla */
.grid-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:12px}
.grid-bar .sp{margin-left:auto;display:flex;gap:6px}
.tbl td.cell-edit{cursor:text}
.tbl td.cell-edit:hover{box-shadow:inset 0 0 0 1px var(--line)}
.tbl td.edited{background:rgba(214,160,60,.12);box-shadow:inset 2px 0 0 var(--gold,#d6a03c)}
.tbl td .cell-in{width:100%;min-width:60px;font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--gold,#d6a03c);border-radius:5px;background:var(--panel);color:var(--text)}

/* ---------- editor de Data con números de línea ---------- */
.editor{display:grid;grid-template-columns:auto minmax(0,1fr);background:#050507;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-family:var(--font-mono);font-size:12.5px;line-height:1.6}
.editor .gutter{padding:10px 8px 10px 12px;text-align:right;color:#4a4a55;background:#08080b;border-right:1px solid var(--line);user-select:none;overflow:hidden;white-space:pre}
.editor textarea{background:transparent;border:0;border-radius:0;padding:10px 12px;color:var(--text-2);resize:vertical;min-height:320px;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;overflow-x:auto;tab-size:4}
.editor textarea:focus{outline:none}
.editor.focus{border-color:var(--carmin)}
.editor .gutter .bad{color:var(--crit);font-weight:600}
.parse-errors{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:11.5px}
.parse-errors .e{color:var(--crit)}
.parse-errors .e b{color:var(--text-2);font-weight:500}
.diff{font-family:var(--font-mono);font-size:12px;line-height:1.55;background:#050507;border:1px solid var(--line);border-radius:var(--r);overflow:auto;max-height:420px;padding:8px 0}
.diff .dl{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:0 12px;white-space:pre-wrap;word-break:break-word}
.diff .dl .n{color:#4a4a55;text-align:right}
.diff .dl.add{background:rgba(63,207,110,.08);color:#b8f0cb}
.diff .dl.del{background:rgba(255,90,110,.08);color:#ffb3bd}
.diff .dl.ctx{color:var(--text-2)}
.tree{max-height:420px;overflow:auto}
.tree .nd{display:flex;align-items:center;gap:8px;padding:4px 12px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--line)}
.tree .nd:hover{background:var(--panel-2)}
.tree .nd.on{background:var(--carmin-dim)}
.tree .nd .sz{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.tree .nd.dir{color:var(--gold)}

/* ---------- drag & drop de slots ---------- */
.slot[draggable="true"]{cursor:grab}
.slot.dragging{opacity:.4}
.slot.drop-ok{outline:2px solid var(--ok);outline-offset:-1px}
.slot.drop-bad{outline:2px solid var(--crit);outline-offset:-1px}
.slot.sel{outline:2px solid var(--carmin);outline-offset:-1px}
.slot.locked{cursor:not-allowed}

/* ---------- barra superior en vivo ---------- */
.worlds button[disabled]{opacity:.5}
.topbar .state .chip{cursor:default}
.topbar .state .chip.clickable{cursor:pointer}
.topbar .state .chip.clickable:hover{border-color:var(--muted)}
.user .logout{background:transparent;border:0;color:var(--muted);font-size:11px;padding:0 2px}
.user .logout:hover{color:var(--text)}
.offline-banner{padding:8px 18px;background:var(--crit-dim);border-bottom:1px solid rgba(255,90,110,.4);color:#ffb3bd;font-size:12.5px;display:flex;gap:10px;align-items:center}
.offline-banner b{color:var(--text)}

/* línea de opción: el control y su texto no se separan aunque el texto sea largo */
.optline{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text-2);line-height:1.5}
.optline input{flex:none;margin-top:2px}
.optline b{color:var(--text)}

/* ---------- misceláneo de la app ---------- */
.screen[hidden]{display:none}
.log .ln.match{background:rgba(232,184,75,.10)}
.log .hl{background:rgba(232,184,75,.28);color:var(--text);border-radius:2px}
.heat .mk.pl{width:9px;height:9px;border-radius:50%;background:var(--carmin-2);box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.heat .mk.pl.gmp{background:var(--gold)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px;align-items:baseline}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-family:var(--font-mono);font-size:12px;text-align:right}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav a:focus-visible,.worlds button:focus-visible,.tabs button:focus-visible,.btn:focus-visible{outline:2px solid var(--carmin);outline-offset:1px}
@media (prefers-reduced-motion:reduce){
  .toast{animation:none}
  .loading::before{animation-duration:2.4s}
  .skel{animation:none;background:var(--panel-2)}
  *{scroll-behavior:auto!important}
}

/* ---------- responsive de la aplicación (mismos cortes que el diseño) ---------- */
@media (max-width:1100px){
  .gC{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .card > .ch{flex-wrap:wrap}
  .card > .ch input[type=search],.card > .ch input[type=text]{width:100%}
  .card > .ch .sp{margin-left:0;width:100%;justify-content:flex-start;flex-wrap:wrap}
  .screen-h .replaces{justify-content:flex-start;max-width:100%}
  .form,.form[class*="cols-"]{grid-template-columns:minmax(0,1fr)}
  .modal{max-width:100%}
  .doll{grid-template-columns:repeat(4,40px);grid-auto-rows:40px}
  .toasts{left:12px;right:12px;max-width:none}
  .pager{flex-wrap:wrap}
}

/* ---------- consola: filtros, columnas, resumen y facetas ---------- */
.confil .filters .fl{min-width:74px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.filters .f.mono{font-family:var(--font-mono);font-size:11px;padding:2px 8px}
.filters .f.mono i{display:none}
.filters .f b{font-weight:500;color:var(--muted);margin-left:5px;font-size:10.5px}
.filters .f.dim{opacity:.55}
.filters .f.dim.off{opacity:.3}
.row.wrap{flex-wrap:wrap}
.gap-4{gap:4px} .gap-6{gap:6px} .gap-10{gap:10px}
.mb-4{margin-bottom:4px} .mb-6{margin-bottom:6px} .mt-6{margin-top:6px}
.log .ln{grid-template-columns:70px auto 1fr;align-items:baseline;cursor:pointer}
.log .ln.cn .t{color:var(--log-alert)}
.log .ln.sv .t{color:var(--crit)}
.log .pr{color:var(--muted);font-size:11px;padding:0 1px;white-space:nowrap}
.log .chn{color:var(--muted);font-size:10.5px;letter-spacing:.02em;border:1px solid var(--line);border-radius:3px;padding:0 5px;line-height:1.5;white-space:nowrap;align-self:center}
.log .ln:has(.pr):has(.chn){grid-template-columns:70px auto auto 1fr}
.log .ln:not(:has(.pr)):not(:has(.chn)){grid-template-columns:70px 1fr}
.log .tg{opacity:.8}
.log .c-black .tg{color:var(--gold)}
.kpi.mini{padding:8px 10px;gap:0}
.kpi.mini .v{font-size:18px}
.kpi.mini .d{font-size:10.5px}
.kpi.crit .v{color:var(--crit)} .kpi.warn .v{color:var(--warn)}
.sparkwrap{margin:2px 0 8px}
.hbar{display:grid;grid-template-columns:minmax(60px,1fr) minmax(40px,2fr) auto;gap:8px;align-items:center;font-size:11.5px;margin:2px 0}
.hbar .k{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .n{color:var(--muted);font-size:11px}
.facet{margin-bottom:8px}
.facet .fv{background:var(--panel-3);border:1px solid var(--line-2);border-radius:99px;padding:2px 9px;font-size:11.5px;color:var(--text-2);display:inline-flex;align-items:center;gap:5px}
.facet .fv b{font-weight:500;color:var(--muted);font-size:10.5px}
.facet .fv:hover{border-color:var(--muted);color:var(--text)}
.facet .fv.on{border-color:var(--carmin);background:var(--carmin-dim);color:var(--text)}
.tbl.kv th{width:130px;text-align:left;text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted);position:static;background:transparent}
.tbl.kv td{font-size:12.5px}
.tbl.kv td .btn{margin-left:4px}

/* ---------- tips ricos ([data-tip]): una capa global (#tip, lib/tips.js), sin recortes ---------- */
#tip{
  position:fixed;z-index:120;max-width:280px;width:max-content;
  padding:7px 10px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--panel-3);color:var(--text);font-size:12px;font-weight:400;line-height:1.35;
  letter-spacing:0;text-transform:none;white-space:normal;text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .12s linear;
}
#tip.on{opacity:1}
#tip[hidden]{display:none}
/* tooltip de ítem estilo MU (lib/inventory.js) */
#itemtip{position:fixed;z-index:121;width:max-content;max-width:300px;padding:9px 12px;border-radius:var(--r);border:1px solid rgba(232,184,75,.55);background:rgba(12,11,9,.97);color:var(--text);font-size:12px;line-height:1.4;box-shadow:0 10px 28px rgba(0,0,0,.55);pointer-events:none}
#itemtip[hidden]{display:none}
#itemtip .it-name{font-weight:600;font-size:13px;color:var(--gold);margin-bottom:4px;text-align:center}
#itemtip .it-name.exc{color:#8ee6a8}
#itemtip .it-name.anc{color:#9ec6ff}
#itemtip .it-name.s380{color:#d9a6ff}
#itemtip .it-line.exc{color:#8ee6a8}
#itemtip .it-line.anc{color:#9ec6ff}
#itemtip .it-line.har{color:#ffc46b}
#itemtip .it-line.sock{color:#c9b3ff}
#itemtip .it-line.s380{color:#d9a6ff}
#itemtip .it-line.crit{color:var(--danger,#ff6b6b)}
#itemtip .it-line.muted{color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  #tip{transition:none}
}

/* Dos columnas (lateral fijo + contenido) que se apilan en pantallas angostas: reemplaza a las
   `grid-template-columns:290px 1fr` en estilo inline, que en un celular dejaban 50 px al contenido. */
.split-side{display:grid;grid-template-columns:var(--side,290px) minmax(0,1fr);gap:16px}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:820px){.split-side,.split-2{grid-template-columns:minmax(0,1fr)}}

/* ---------- CashShop Editor (lib/cashshop.js): árbol tienda → pestaña → paquete ---------- */
.cs-tree{max-height:min(640px,70vh);border:1px solid var(--line);border-radius:var(--r)}
.cs-tree details > summary{display:flex;align-items:center;gap:6px;padding:6px 10px;cursor:pointer;border-bottom:1px solid var(--line);font-size:12.5px}
.cs-tree details.cs-shop > summary{background:var(--panel-2);font-weight:600}
.cs-tree details.cs-cat > summary{padding-left:24px}
.cs-tree .cs-pk .nd{padding-left:38px}
.cs-tree .cs-name{cursor:pointer;border-radius:4px;padding:1px 4px}
.cs-tree .cs-name:hover{text-decoration:underline}
.cs-tree .cs-name.on{background:var(--carmin-dim);color:var(--text)}
.cs-tree .cs-empty{padding:6px 24px}
.cs-detail{min-width:0}
.cs-prod{border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cs-pre{max-height:40vh;overflow:auto;margin:6px 0 0}
@media (max-width:820px){.cs-tree{max-height:50vh}.cs-tree .cs-pk .nd{padding-left:24px}}

/* ---------- Tablas: editores especiales (panel.md P2): ítem con ícono, tienda visual, spawns en el minimapa ---------- */
/* celda de ítem: ícono + nombre + sección,tipo en vez de dos números sueltos */
.itc{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:inherit}
.itc .ico{width:18px;height:24px;margin:0;flex:none}
.itc.missing,.itc.missing span{color:var(--crit)}
a.itc:hover span:first-of-type{text-decoration:underline}
.tbl td.cell-item.cell-edit{cursor:pointer}

/* tienda visual (lib/tienda.js): la grilla de 8×15 del cliente al lado del orden de carga */
.shop-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shop-head > .sp{margin-left:auto;display:flex;gap:6px}
.shop-head select{max-width:min(420px,100%)}
.shop-split{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px;align-items:start}
.shopgrid{display:grid;grid-template-columns:repeat(8,34px);grid-template-rows:repeat(15,34px);gap:2px;padding:6px;width:max-content;
  background:linear-gradient(180deg,#141216,#0b0b0e);border:1px solid rgba(232,184,75,.35);border-radius:var(--r)}
.shopgrid .slot{border-radius:2px}
.shopgrid .slot.has{z-index:1}
.shop-list{min-width:0}
.shop-list .tblwrap{max-height:min(560px,70vh);overflow:auto}
.shop-opt{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
.shop-prev .preview{width:150px}
@media (max-width:820px){
  .shop-split{grid-template-columns:minmax(0,1fr)}
  .shopgrid{grid-template-columns:repeat(8,30px);grid-template-rows:repeat(15,30px)}
  .shop-opt{grid-template-columns:minmax(0,1fr)}
  .shop-prev .preview{width:110px;margin:0 auto}
}

/* spawns sobre el minimapa (lib/spawnmapa.js): punto = una unidad, rectángulo = zona */
.spm-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.spm-box{max-width:640px;touch-action:none;user-select:none}
.spm-box.spm-noimg::after{content:"Sin minimapa para este mapa: las posiciones se dibujan igual";position:absolute;left:0;right:0;bottom:0;padding:6px 10px;font-size:11px;color:var(--text-2);background:rgba(11,11,14,.72)}
.spm-layer{position:absolute;inset:0}
.spm{position:absolute;box-sizing:border-box;cursor:pointer}
.spm:focus-visible{outline:2px solid #fff;outline-offset:1px}
.spm.pt{width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:var(--carmin-2);box-shadow:0 0 0 1px rgba(0,0,0,.85);z-index:2}
.spm.pt.npc{background:var(--gold)}
.spm.area{border:1px solid rgba(255,128,150,.9);background:rgba(217,48,74,.16);z-index:1}
.spm.area.npc{border-color:rgba(232,184,75,.9);background:rgba(232,184,75,.14)}
.spm.b3{border-style:dashed}
.spm.b5{opacity:.45}
.spm.on{box-shadow:0 0 0 2px #fff,0 0 10px rgba(255,255,255,.6);z-index:3}
.spm.edited{box-shadow:0 0 0 2px var(--gold)}
.spm.dragging{opacity:.75;z-index:4}
.spm-legend .spm-k{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--carmin-2);margin-right:5px;vertical-align:-1px}
.spm-legend .spm-k.npc{background:var(--gold)}
.spm-legend .spm-k.area{border-radius:1px;background:rgba(217,48,74,.2);border:1px solid rgba(255,128,150,.9)}
@media (max-width:820px){.spm-wrap{grid-template-columns:minmax(0,1fr)}}