/* ===== Hydrix · consola operativa (oscuro, pulcro, denso) ===== */
:root{
  --bg:#070b16; --bg2:#0b1120; --panel:#0e1526; --panel2:#111a2e;
  --line:#1b2butf; --line:#1b263f; --line2:#243350;
  --ink:#e8eefc; --ink2:#aab8d4; --mut:#6b7ba0;
  --cyan:#22d3ee; --blue:#3b82f6; --teal:#2dd4bf;
  --ok:#22c55e; --anom:#f43f5e; --mute:#f59e0b; --macro:#a855f7;
  --grad:linear-gradient(100deg,#22d3ee,#3b82f6 55%,#a855f7);
  --radius:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:
    radial-gradient(1200px 700px at 80% -10%, rgba(34,211,238,.06), transparent 60%),
    radial-gradient(1000px 600px at 0% 110%, rgba(168,85,247,.06), transparent 60%),
    var(--bg);
  color:var(--ink);font-family:"Inter",system-ui,sans-serif;
  display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand-name{font-family:"Space Grotesk",sans-serif;letter-spacing:-.02em}
.mono{font-family:"JetBrains Mono",monospace}

/* ===== TOP ===== */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--line);background:rgba(8,12,22,.7);backdrop-filter:blur(10px);z-index:10}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--grad);box-shadow:0 6px 18px -6px rgba(34,211,238,.6)}
.brand-mark .drop{width:12px;height:12px;background:#071018;border-radius:50% 50% 50% 0;transform:rotate(45deg)}
.brand-name{font-size:1.28rem;font-weight:700}
.brand-name .x{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-sub{color:var(--mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;margin-left:.3rem;font-family:"JetBrains Mono",monospace}
.top-mid{color:var(--ink2);font-size:.82rem;font-family:"JetBrains Mono",monospace;display:flex;align-items:center;gap:.5rem}
.top-mid .live,.net-pill i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.top-right{display:flex;align-items:center;gap:.8rem}
.net-pill{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--ink2);
  border:1px solid var(--line2);border-radius:999px;padding:.35rem .8rem;background:var(--panel)}
.ava{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;
  background:var(--panel2);border:1px solid var(--line2);color:var(--ink2)}

/* ===== KPIs ===== */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;padding:.8rem 1.1rem}
.kpi{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:.7rem .85rem;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--cyan))}
.kpi b{display:block;font-family:"Space Grotesk";font-weight:700;font-size:1.5rem;line-height:1.1}
.kpi small{color:var(--mut);font-size:.68rem;text-transform:uppercase;letter-spacing:.11em}
.kpi .k-sub{color:var(--ink2);font-size:.72rem;margin-top:.15rem;font-family:"JetBrains Mono",monospace}
.kpi.grad b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===== MAIN LAYOUT ===== */
.main{flex:1;display:grid;grid-template-columns:230px 1fr 320px;gap:.7rem;padding:0 1.1rem 1rem;min-height:0}
.rail,.detail{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);padding:.9rem;overflow:auto}
.rail-h{font-family:"Space Grotesk";font-weight:600;font-size:.95rem;margin-bottom:.7rem}
.rail-lab{color:var(--mut);font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;margin:.9rem 0 .5rem}
.search,.sel{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:9px;color:var(--ink);
  padding:.55rem .7rem;font-size:.82rem;font-family:inherit;outline:none}
.search:focus,.sel:focus{border-color:var(--cyan)}
.chips{display:flex;flex-direction:column;gap:.4rem}
.chip{display:flex;align-items:center;gap:.55rem;background:var(--bg);border:1px solid var(--line2);border-radius:9px;
  color:var(--ink2);padding:.5rem .6rem;font-size:.82rem;cursor:pointer;text-align:left;transition:.15s;font-family:inherit}
.chip:hover{border-color:var(--line2);color:var(--ink)}
.chip.on{color:var(--ink);border-color:var(--cyan);background:rgba(34,211,238,.06)}
.chip:not(.on){opacity:.5}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--mut);flex:none}
.c-ok{background:var(--ok)!important}.c-anom{background:var(--anom)!important}
.c-mute{background:var(--mute)!important}.c-macro{background:var(--macro)!important}
.rail-foot{margin-top:1rem;color:var(--mut);font-size:.72rem;font-family:"JetBrains Mono",monospace;line-height:1.6}

/* ===== MAP ===== */
.map-wrap{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
#map{position:absolute;inset:0;background:#0a1120}
.leaflet-container{background:#0a1120;font-family:inherit}
.map-legend{position:absolute;left:12px;bottom:12px;z-index:500;display:flex;gap:.9rem;
  background:rgba(10,17,32,.82);border:1px solid var(--line2);border-radius:10px;padding:.5rem .8rem;
  font-size:.74rem;color:var(--ink2);backdrop-filter:blur(8px)}
.map-legend span{display:flex;align-items:center;gap:.4rem}
.map-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.map-load{position:absolute;inset:0;display:grid;place-items:center;z-index:600;color:var(--ink2);
  background:rgba(7,11,22,.75);font-size:.9rem;gap:.6rem}
.map-load .spin{width:26px;height:26px;border:3px solid var(--line2);border-top-color:var(--cyan);border-radius:50%;
  display:inline-block;margin-right:.5rem;vertical-align:middle;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===== DETAIL ===== */
.detail-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;color:var(--mut);text-align:center;padding:1rem}
.de-ic{font-size:2.2rem;opacity:.5}
.detail-empty p{font-size:.85rem;max-width:200px}
.dc-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.2rem}
.dc-predio{font-family:"Space Grotesk";font-weight:700;font-size:1.35rem}
.dc-badge{font-size:.68rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.b-ok{background:rgba(34,197,94,.15);color:#4ade80}.b-anom{background:rgba(244,63,94,.15);color:#fb7185}
.b-mute{background:rgba(245,158,11,.15);color:#fbbf24}.b-macro{background:rgba(168,85,247,.15);color:#c084fc}
.dc-cli{color:var(--ink2);font-size:.86rem;margin-bottom:.9rem}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.9rem}
.dc-cell{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem}
.dc-cell small{color:var(--mut);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em}
.dc-cell b{display:block;font-family:"Space Grotesk";font-weight:700;font-size:1.15rem;margin-top:.15rem}
.dc-cell.full{grid-column:1/-1}
.dc-row{display:flex;justify-content:space-between;font-size:.82rem;padding:.4rem 0;border-top:1px solid var(--line)}
.dc-row span{color:var(--mut)}.dc-row b{color:var(--ink);font-weight:600}
.dc-spark{margin-top:.5rem;color:var(--mut);font-size:.72rem}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.main{grid-template-columns:1fr}.rail,.detail{display:none}}