/* =========================================================================
   tz_panel — hoja de estilo. Modo oscuro unico: esto se mira de noche, entre
   partida y partida, y un tema claro aqui no lo usaria nadie.
   Paleta: hueso sobre negro, rojo sangre de acento, verde musgo para lo vivo.
   ========================================================================= */
:root{
  --bg:#0a0a0b; --bg2:#0d0d0f;
  --surface:#141417; --surface2:#191a1d; --surface3:#202126;
  --line:rgba(236,230,218,.10); --line2:rgba(236,230,218,.20);
  --bone:#ece6da; --text:#cfcabf; --muted:#8f8a80; --muted2:#66625b;
  --blood:#c8241f; --blood-hi:#ea3a2c; --verde:#63c96d; --ambar:#d9a441; --azul:#5aa9e6;
  --mono:ui-monospace,'Cascadia Mono',Menlo,Consolas,monospace;
  --lateral:222px;
  --r:10px;
  --sombra:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px rgba(0,0,0,.45);
}
*,*::before,*::after{ box-sizing:border-box; }
/* El atributo hidden solo vale display:none del navegador, y cualquier regla
   con clase (como .pantalla-login{display:grid}) le gana. Sin esto, ocultar
   el login no hace nada. */
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ color:var(--bone); margin:0; font-weight:600; }
a{ color:var(--azul); }
::selection{ background:rgba(200,36,31,.35); }

/* barras de scroll discretas: el panel tiene tablas y terminales por todas partes */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#2a2b30; border-radius:6px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#3a3c42; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---------- controles ---------- */
button,input,select{ font:inherit; color:inherit; }
.btn{
  background:var(--surface3); border:1px solid var(--line2); color:var(--text);
  padding:7px 13px; border-radius:7px; cursor:pointer; transition:.14s;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.btn:hover{ border-color:var(--bone); color:var(--bone); }
.btn.principal{ background:var(--blood); border-color:var(--blood); color:#fff; }
.btn.principal:hover{ background:var(--blood-hi); border-color:var(--blood-hi); color:#fff; }
.btn.fino{ background:transparent; padding:6px 11px; font-size:13.5px; }
.btn.peligro{ color:#e88; border-color:rgba(234,58,44,.4); }
.btn.peligro:hover{ background:rgba(234,58,44,.14); color:#fff; border-color:var(--blood-hi); }
.btn.ancho{ width:100%; justify-content:center; }
input,select{
  background:#0b0b0d; border:1px solid var(--line2); border-radius:7px; padding:8px 11px;
  transition:.14s;
}
input:focus,select:focus{ outline:none; border-color:var(--blood); box-shadow:0 0 0 3px rgba(200,36,31,.16); }
input[type=checkbox]{ accent-color:var(--blood); width:14px; height:14px; margin:0; }
.crece{ flex:1; min-width:170px; }

/* ---------- login ---------- */
.pantalla-login{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(200,36,31,.16), transparent 60%),
    var(--bg);
}
.caja-login{
  width:min(390px,94vw); background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:34px 30px 28px; text-align:center; box-shadow:var(--sombra);
}
.logo-login{ width:190px; max-width:70%; height:auto; }
.caja-login .sub{ color:var(--muted); font-size:13px; margin:2px 0 22px;
  text-transform:uppercase; letter-spacing:.16em; }
.caja-login input{ width:100%; margin-bottom:12px; text-align:center; }
.err{ color:var(--blood-hi); font-size:13.5px; min-height:20px; margin:12px 0 0; }

/* ---------- estructura ---------- */
#app{ display:grid; grid-template-columns:var(--lateral) 1fr; min-height:100vh; }
.lateral{
  background:linear-gradient(180deg,#111114,#0c0c0e); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px; padding:18px 12px;
  position:sticky; top:0; height:100vh;
}
.marca{ padding:4px 8px 16px; }
.marca img{ width:150px; height:auto; opacity:.95; }
#nav{ display:flex; flex-direction:column; gap:3px; }
#nav button{
  background:none; border:0; color:var(--muted); text-align:left; cursor:pointer;
  padding:9px 12px; border-radius:8px; display:flex; align-items:center; gap:11px;
  font-size:14.5px; transition:.14s; position:relative;
}
#nav button:hover{ color:var(--bone); background:var(--surface2); }
#nav button.on{ color:var(--bone); background:var(--surface3); }
#nav button.on::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--blood);
}
.pie-lateral{ margin-top:auto; display:flex; flex-direction:column; gap:9px; padding:0 4px; }
.ver{ color:var(--muted2); font-size:11.5px; font-family:var(--mono); }

.cuerpo{ display:flex; flex-direction:column; min-width:0; }
.superior{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 22px; border-bottom:1px solid var(--line);
  background:rgba(13,13,15,.86); backdrop-filter:blur(9px);
  position:sticky; top:0; z-index:6;
}
.superior h1{ font-size:16px; letter-spacing:.13em; text-transform:uppercase; }
.tiras{ display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap; }
main{ padding:20px 22px 40px; max-width:1560px; width:100%; }
section[hidden]{ display:none; }
.barra{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.solo-movil{ display:none; }

/* ---------- piezas ---------- */
.tira{
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px;
  border:1px solid var(--line); background:var(--surface); border-radius:99px;
  font-size:13px; color:var(--muted);
}
.tira b{ color:var(--bone); font-variant-numeric:tabular-nums; }
.tira.sutil{ border-color:transparent; background:transparent; color:var(--muted2); }
.pip{ width:8px; height:8px; border-radius:50%; background:var(--muted2); flex:none; }
.pip.on{ background:var(--verde); box-shadow:0 0 9px var(--verde); }
.pip.mal{ background:var(--blood-hi); box-shadow:0 0 9px var(--blood-hi); animation:latido 1.6s infinite; }
@keyframes latido{ 50%{ opacity:.35 } }

.tarjeta{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; margin-bottom:16px; box-shadow:var(--sombra);
}
.tarjeta.sin-relleno{ padding:0; overflow:hidden; }
.cab-tarjeta{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cab-tarjeta.con-relleno{ padding:14px 18px; margin:0; border-bottom:1px solid var(--line); }
.cab-tarjeta.separa{ margin-top:20px; }
.cab-tarjeta h2{ font-size:13px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); }
.cab-tarjeta .tira{ margin-left:auto; }
.dos-col{ display:grid; gap:16px; grid-template-columns:1.55fr 1fr; align-items:start; }

.seg{ display:flex; gap:2px; margin-left:auto; background:var(--surface2); padding:3px; border-radius:8px; }
.seg button{ background:none; border:0; color:var(--muted); padding:4px 10px; border-radius:6px;
  cursor:pointer; font-size:12.5px; }
.seg button.on{ background:var(--surface3); color:var(--bone); }

/* ---------- KPIs ---------- */
.kpis{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); margin-bottom:16px; }
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; position:relative; overflow:hidden;
}
.kpi::after{ content:''; position:absolute; inset:auto 0 0 0; height:2px; background:var(--linea-kpi,transparent); }
.kpi b{ display:block; font-size:27px; line-height:1.15; color:var(--bone); font-variant-numeric:tabular-nums; }
.kpi b.chico{ font-size:17px; }
.kpi span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
/* Las tarjetas con detalle detrás se anuncian con un chevron y reaccionan al
   ratón: si no, nadie adivina que se pueden abrir. */
.kpi.abrible{ cursor:pointer; }
.kpi.abrible::before{
  content:'›'; position:absolute; right:13px; top:9px; color:var(--muted2);
  font-size:17px; line-height:1; transition:.14s;
}
.kpi.abrible:hover{ border-color:var(--line2); background:var(--surface2); }
.kpi.abrible:hover::before{ color:var(--bone); transform:translateX(2px); }
.kpi.ok{ --linea-kpi:var(--verde); }
.kpi.avi{ --linea-kpi:var(--ambar); }
.kpi.mal{ --linea-kpi:var(--blood-hi); }

.avisos{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.aviso{ padding:11px 15px; border-radius:8px; border-left:3px solid; font-size:14px; }
.aviso.alto { background:rgba(200,36,31,.10);  border-color:var(--blood-hi); }
.aviso.medio{ background:rgba(217,164,65,.09); border-color:var(--ambar); }
.aviso.ok   { background:rgba(99,201,109,.07); border-color:var(--verde); color:var(--muted); }

/* ---------- grafica ---------- */
.grafica{ height:210px; }
.grafica svg{ width:100%; height:100%; display:block; overflow:visible; }
.grafica .eje{ stroke:var(--line); stroke-width:1; }
.grafica .marca-txt{ fill:var(--muted2); font-size:10.5px; font-family:var(--mono); }
.grafica .linea{ fill:none; stroke:var(--blood-hi); stroke-width:2; stroke-linejoin:round; }
.grafica .zona{ fill:url(#degradado); }
.grafica .punto{ fill:var(--blood-hi); }
.pie-grafica{ display:flex; gap:16px; color:var(--muted2); font-size:12px; margin-top:8px; }
.pie-grafica b{ color:var(--text); }

/* ---------- barras de sistema ---------- */
.barras{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.medidor span{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.medidor span b{ color:var(--bone); font-variant-numeric:tabular-nums; }
.pista{ height:7px; border-radius:99px; background:var(--surface3); overflow:hidden; }
.relleno{ height:100%; border-radius:99px; background:var(--verde); transition:width .5s; }
.relleno.avi{ background:var(--ambar); }
.relleno.mal{ background:var(--blood-hi); }

/* ---------- tablas ---------- */
.tabla-scroll{ overflow:auto; max-height:70vh; }
.tabla-scroll.alto{ max-height:56vh; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding:9px 14px; border-bottom:1px solid var(--line); }
thead th{
  position:sticky; top:0; z-index:1; background:var(--surface2);
  color:var(--muted); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.11em;
}
tbody tr:hover{ background:var(--surface2); }
tbody tr:last-child td{ border-bottom:0; }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.clic{ cursor:pointer; }
.vacio{ color:var(--muted2); padding:20px 14px; }
.sec{ color:var(--muted2); font-size:11.5px; font-family:var(--mono); }
.etq{ display:inline-block; padding:1px 7px; border-radius:5px; background:var(--surface3);
  color:var(--muted); font-size:11.5px; margin:1px 3px 1px 0; }

/* ---------- feed ---------- */
.feed{ display:flex; flex-direction:column; gap:1px; max-height:340px; overflow:auto; }
.feed.grande{ max-height:none; }
.ev{ display:flex; gap:11px; align-items:baseline; padding:7px 4px; border-bottom:1px solid var(--line); font-size:13.8px; }
.ev:last-child{ border-bottom:0; }
.ev time{ color:var(--muted2); font:12px var(--mono); flex:none; }
.ev .quien{ color:var(--bone); }
.ev .que{ color:var(--muted); }
.ev::before{
  content:''; width:7px; height:7px; border-radius:2px; flex:none; margin-top:5px;
  background:var(--muted2);
}
.ev.kill::before{ background:var(--blood-hi); }
.ev.muerte::before{ background:var(--ambar); }
.ev.zombi::before{ background:#7a8a4a; }
.ev.entra::before{ background:var(--verde); }
.ev.sale::before{ background:var(--muted2); }
.ev.brusco::before{ background:var(--ambar); }
.ev.expulsion::before{ background:var(--blood-hi); }
.ev.respawn::before{ background:var(--azul); }

/* ---------- terminal ---------- */
.terminal{
  background:#08080a; border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; height:calc(100vh - 232px); min-height:320px; overflow:auto;
  font:12.5px/1.6 var(--mono); white-space:pre-wrap; word-break:break-word;
}
.terminal.bajo{ height:auto; min-height:190px; max-height:38vh; }
.l-err{ color:var(--blood-hi); }
.l-avi{ color:var(--ambar); }
.l-ok { color:var(--verde); }
.l-net{ color:var(--azul); }
.l-mut{ color:#5f5c56; }

/* ---------- mapa ---------- */
.marco-mapa{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r);
  background:#05070a; height:calc(100vh - 210px); min-height:420px; cursor:grab;
  box-shadow:var(--sombra);
}
.marco-mapa.arrastrando{ cursor:grabbing; }
.lienzo{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
.lienzo img{ display:block; width:1024px; height:1024px; image-rendering:auto; user-select:none; }
.rejilla-mapa{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(236,230,218,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(236,230,218,.14) 1px,transparent 1px);
  background-size:102.4px 102.4px;   /* 1 km */
}
.marcador{ position:absolute; transform:translate(-50%,-50%); pointer-events:auto; }
.marcador .punto-jug{
  width:11px; height:11px; border-radius:50%; background:var(--verde);
  border:2px solid #06210a; box-shadow:0 0 12px rgba(99,201,109,.85);
}
.marcador.muerte .punto-jug{ width:9px; height:9px; border-radius:2px; transform:rotate(45deg);
  background:var(--blood-hi); border-color:#2a0705; box-shadow:0 0 10px rgba(234,58,44,.7); }
.marcador .etiqueta{
  position:absolute; left:14px; top:-7px; white-space:nowrap;
  background:rgba(10,10,11,.86); border:1px solid var(--line2); border-radius:6px;
  padding:2px 7px; font-size:11.5px; color:var(--bone); pointer-events:none;
}
.marcador.muerte .etiqueta{ color:#e9a29c; }
.leyenda{ position:absolute; right:12px; bottom:12px; display:flex; gap:14px;
  background:rgba(10,10,11,.8); border:1px solid var(--line); border-radius:8px;
  padding:7px 12px; font-size:12px; color:var(--muted); }
.leyenda i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }

/* ---------- ficha ---------- */
dialog{
  position:relative;   /* el boton de cerrar va absoluto dentro */
  background:var(--surface); color:var(--text); border:1px solid var(--line2);
  /* Con solo max-width el dialogo se encoge al contenido y la rejilla de KPIs
     se cae a una columna: hay que fijar el ancho. */
  border-radius:14px; padding:24px 26px; width:min(760px,94vw);
  max-height:88vh; overflow:auto; box-shadow:var(--sombra);
}
dialog .kpis{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
dialog .kpi b{ font-size:22px; }
dialog::backdrop{ background:rgba(0,0,0,.72); backdrop-filter:blur(2px); }
.cierra{ position:absolute; right:16px; top:14px; }
.mini{ font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:9px; }
.dos{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

/* ---------- avisos flotantes ---------- */
.avisador{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:9px; z-index:40; }
.pan{
  background:var(--surface3); border:1px solid var(--line2); border-left:3px solid var(--verde);
  border-radius:9px; padding:11px 15px; font-size:13.5px; box-shadow:var(--sombra);
  animation:entra .18s ease-out; max-width:340px;
}
.pan.mal{ border-left-color:var(--blood-hi); }
@keyframes entra{ from{ opacity:0; transform:translateY(8px) } }

/* ---------- atajos rcon ---------- */
.atajos{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }

/* ---------- iconos (mascaras svg, heredan color) ---------- */
.ic{ width:17px; height:17px; flex:none; background:currentColor;
  -webkit-mask:var(--u) center/contain no-repeat; mask:var(--u) center/contain no-repeat; }
.ic-resumen{ --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='9'/%3E%3Crect x='14' y='3' width='7' height='5'/%3E%3Crect x='14' y='12' width='7' height='9'/%3E%3Crect x='3' y='16' width='7' height='5'/%3E%3C/svg%3E"); }
.ic-mapa{ --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M9 3 3 5v16l6-2 6 2 6-2V3l-6 2z'/%3E%3Cpath d='M9 3v16M15 5v16'/%3E%3C/svg%3E"); }
.ic-jug{ --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.ic-act{ --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h5l3-8 4 16 3-8h5'/%3E%3C/svg%3E"); }
.ic-logs{ --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M5 3h9l5 5v13H5z'/%3E%3Cpath d='M14 3v5h5M8 13h8M8 17h6'/%3E%3C/svg%3E"); }
.ic-rcon{ --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='2'/%3E%3Cpath d='M7 10l3 2.5L7 15M13 15h4'/%3E%3C/svg%3E"); }
.ic-eco{ --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .dos-col{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  #app{ grid-template-columns:1fr; }
  .lateral{
    position:fixed; z-index:20; left:0; top:0; width:var(--lateral);
    transform:translateX(-100%); transition:transform .2s;
  }
  .lateral.abierta{ transform:none; box-shadow:0 0 40px rgba(0,0,0,.7); }
  .solo-movil{ display:inline-flex; }
  main{ padding:16px 14px 32px; }
  .superior{ padding:11px 14px; }
  .terminal{ height:60vh; }
}