/* ============================================================
   DARK THEME (default)
   ============================================================ */
:root{
  --cyan:#00e5ff;--green:#00ff88;--orange:#ff6d00;--red:#ff1744;--amber:#ffab40;
  --bg:#020c10;--panel:#041520;--border:#0a3a4a;--txt:#e0f7ff;--txt2:rgba(0,229,255,.55);--txt3:rgba(0,229,255,.35);
  --neon-cyan:0 0 4px #00e5ff,0 0 12px #00e5ff,0 0 28px rgba(0,229,255,.5);
  --neon-green:0 0 4px #00ff88,0 0 12px #00ff88,0 0 28px rgba(0,255,136,.5);
  --neon-red:0 0 4px #ff1744,0 0 12px #ff1744,0 0 28px rgba(255,23,68,.5);
  --neon-amber:0 0 4px #ffab40,0 0 12px #ffab40,0 0 28px rgba(255,171,64,.5);
  --font-main:'Share Tech Mono',monospace;
  --font-title:'Rajdhani',sans-serif;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
body.light{
  --cyan:#0284c7;--green:#059669;--orange:#ea580c;--red:#dc2626;--amber:#d97706;
  --bg:#f0f6ff;--panel:#ffffff;--border:#dbeafe;--txt:#0f172a;--txt2:#475569;--txt3:#94a3b8;
  --neon-cyan:0 2px 8px rgba(2,132,199,.15);
  --neon-green:0 2px 8px rgba(5,150,105,.15);
  --neon-red:0 2px 8px rgba(220,38,38,.15);
  --neon-amber:0 2px 8px rgba(217,119,6,.15);
  --font-main:'Inter',sans-serif;
  --font-title:'Rajdhani',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:var(--bg);
  font-family:var(--font-main);
  color:var(--txt);
  min-height:100vh;display:flex;flex-direction:column;
  background-image:linear-gradient(rgba(0,229,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.018) 1px,transparent 1px);
  background-size:40px 40px;
  transition:background .3s,color .3s;
}
body.light{
  background-image:
    radial-gradient(ellipse at 15% 40%,rgba(2,132,199,.07) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 15%,rgba(5,150,105,.05) 0%,transparent 50%),
    linear-gradient(rgba(2,132,199,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(2,132,199,.02) 1px,transparent 1px);
  background-size:auto,auto,32px 32px,32px 32px;
}

/* HDR */
.hdr{padding:18px 32px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:linear-gradient(180deg,rgba(0,229,255,.04) 0%,transparent 100%);}
body.light .hdr{background:linear-gradient(180deg,rgba(2,132,199,.07) 0%,transparent 100%);}
.hdr-tag{font-size:10px;letter-spacing:.35em;color:var(--cyan);opacity:.7;text-transform:uppercase;font-family:var(--font-main);}
.hdr-title{font-family:var(--font-title);font-size:clamp(22px,2.6vw,36px);font-weight:700;color:var(--txt);
  letter-spacing:.08em;text-transform:uppercase;text-shadow:var(--neon-cyan);}
body.light .hdr-title{text-shadow:none;}
.hdr-sub{font-size:10px;letter-spacing:.2em;color:var(--txt3);font-family:var(--font-main);}
.hdr-line{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.3;margin-top:3px;}

/* STATUS BAR */
.status-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 20px;
  background:rgba(0,229,255,.025);border-bottom:1px solid var(--border);font-size:9.5px;
  letter-spacing:.08em;color:var(--txt2);flex-wrap:wrap;gap:8px;font-family:var(--font-main);}
body.light .status-bar{background:rgba(2,132,199,.04);}
.si{display:flex;align-items:center;gap:6px;}
.si span{color:var(--txt2);}
.sdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot-g{background:var(--green);box-shadow:var(--neon-green);animation:blink 2s ease-in-out infinite;}
.dot-a{background:var(--amber);box-shadow:var(--neon-amber);}
.dot-r{background:var(--red);box-shadow:var(--neon-red);animation:blink .8s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

/* THEME BTN */
.theme-btn{
  display:flex;align-items:center;gap:6px;
  background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.25);
  color:var(--cyan);font-family:'Share Tech Mono',monospace;
  font-size:10px;letter-spacing:.08em;padding:5px 14px;
  cursor:pointer;transition:all .3s;border-radius:2px;white-space:nowrap;
}
.theme-btn:hover{background:rgba(0,229,255,.12);border-color:var(--cyan);}
body.light .theme-btn{background:rgba(2,132,199,.08);border-color:rgba(2,132,199,.3);font-family:'Share Tech Mono',monospace!important;font-size:10px!important;letter-spacing:.08em!important;padding:5px 14px!important;}
body.light .theme-btn:hover{background:rgba(2,132,199,.15);}

/* MAIN GRID */
.main{display:grid;grid-template-columns:1fr 390px;gap:14px;padding:14px 20px;flex:1;}

/* MAP CARD */
.map-card{background:var(--panel);border:1px solid var(--border);border-radius:2px;position:relative;
  overflow:hidden;min-height:280px;display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(0,229,255,.04);}
body.light .map-card{box-shadow:0 4px 24px rgba(2,132,199,.08);}
.map-card::before,.map-card::after,.map-card .br,.map-card .bl{content:'';position:absolute;
  width:14px;height:14px;border-color:var(--cyan);border-style:solid;opacity:.7;z-index:500;}
.map-card::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.map-card::after{top:-1px;right:-1px;border-width:2px 2px 0 0;}
.map-card .br{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}
.map-card .bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px;}
body.light .map-card::before,body.light .map-card::after,
body.light .map-card .br,body.light .map-card .bl{opacity:.3;}
.map-label{position:absolute;top:10px;left:12px;z-index:400;font-family:var(--font-title);
  font-size:12px;font-weight:700;color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;
  background:rgba(2,12,16,.92);padding:4px 10px;border:1px solid rgba(0,229,255,.3);
  pointer-events:none;text-shadow:var(--neon-cyan);}
body.light .map-label{background:rgba(255,255,255,.95);border-color:rgba(2,132,199,.2);text-shadow:none;backdrop-filter:blur(8px);}
.edit-toggle{position:absolute;top:10px;right:12px;z-index:1000;background:rgba(2,12,16,.92);
  border:1px solid rgba(0,229,255,.3);color:rgba(0,229,255,.6);font-family:var(--font-main);
  font-size:9px;letter-spacing:.1em;padding:6px 12px;cursor:pointer;transition:all .2s;}
body.light .edit-toggle{background:rgba(255,255,255,.95);border-color:rgba(2,132,199,.2);color:#475569;backdrop-filter:blur(8px);}
.edit-toggle:hover{border-color:var(--cyan);color:var(--cyan);}
.edit-toggle.active{background:rgba(255,171,64,.1);border-color:var(--amber);color:var(--amber);}
.edit-banner{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:400;
  background:rgba(2,12,16,.95);border:1px solid rgba(255,171,64,.5);padding:6px 18px;
  font-size:9px;letter-spacing:.12em;color:var(--amber);white-space:nowrap;display:none;}
.edit-banner.visible{display:block;}
.map-wrap{position:relative;flex:1;min-height:280px;}
#map{width:100%;height:100%;min-height:280px;}
#pktCanvas{position:absolute;top:0;left:0;pointer-events:none;z-index:650;}
.leaflet-container{background:#020c10!important;}
body.light .leaflet-container{background:#e8f4fd!important;}
.leaflet-tile{filter:brightness(1.02) saturate(.75);}
body.light .leaflet-tile{filter:brightness(1.02) saturate(.75);}
.leaflet-control-zoom a{background:rgba(4,21,32,.95)!important;border-color:var(--border)!important;
  color:var(--cyan)!important;font-family:var(--font-main)!important;}
body.light .leaflet-control-zoom a{background:rgba(255,255,255,.95)!important;border-color:#dbeafe!important;}
.leaflet-control-attribution{background:rgba(2,12,16,.8)!important;color:var(--txt3)!important;font-size:8px!important;}
body.light .leaflet-control-attribution{background:rgba(255,255,255,.8)!important;}
.leaflet-control-attribution a{color:var(--txt3)!important;}
.leaflet-popup-content-wrapper{background:rgba(4,21,32,.97)!important;border:1px solid var(--cyan)!important;
  border-radius:2px!important;box-shadow:0 0 24px rgba(0,229,255,.25)!important;
  color:var(--txt)!important;font-family:var(--font-main)!important;}
body.light .leaflet-popup-content-wrapper{background:#fff!important;border-color:#dbeafe!important;
  box-shadow:0 8px 32px rgba(0,0,0,.12)!important;}
.leaflet-popup-tip-container{display:none;}
.leaflet-popup-content{margin:12px 16px!important;font-size:10px!important;}
.popup-title{font-family:var(--font-title);font-size:14px;font-weight:700;color:var(--cyan);
  letter-spacing:.1em;margin-bottom:8px;text-shadow:var(--neon-cyan);}
body.light .popup-title{text-shadow:none;}
.popup-row{display:flex;justify-content:space-between;gap:20px;margin-bottom:4px;
  color:var(--txt2);font-size:9.5px;}
.popup-val{color:var(--txt);font-weight:bold;}
.popup-coords{margin-top:8px;padding-top:6px;border-top:1px solid rgba(0,229,255,.15);
  font-size:8px;color:var(--txt3);letter-spacing:.05em;}
body.light .popup-coords{border-color:#e2e8f0;}

/* NODE MARKERS */
.node-pulse-ring{position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid var(--green);
  animation:ringPulse 2.4s ease-out infinite;}
@keyframes ringPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.node-dot{width:14px;height:14px;border-radius:50%;background:rgba(0,255,136,.15);
  border:2.5px solid var(--green);box-shadow:var(--neon-green);z-index:1;}
.node-dot.warn{border-color:var(--amber);background:rgba(255,171,64,.15);box-shadow:var(--neon-amber);}
.node-dot.crit{border-color:var(--red);background:rgba(255,23,68,.15);box-shadow:var(--neon-red);}
.gw-icon-wrap{display:flex;align-items:center;justify-content:center;position:relative;}
.gw-hex-icon{width:28px;height:28px;background:rgba(0,229,255,.12);border:2px solid var(--cyan);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--neon-cyan);
  animation:gwGlow 3s ease-in-out infinite;}
@keyframes gwGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.gw-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:var(--neon-cyan);}

/* RIGHT PANEL */
.right-panel{display:flex;flex-direction:column;gap:10px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:2px;padding:13px 15px;position:relative;transition:all .3s ease;}
body.light .card{box-shadow:0 1px 4px rgba(2,132,199,.06),0 4px 16px rgba(0,0,0,.04);}
.card-l-cyan::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--cyan);box-shadow:var(--neon-cyan);}
.card-l-green::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--green);box-shadow:var(--neon-green);}
.card-l-amber::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--amber);box-shadow:var(--neon-amber);}body.light .card-l-amber::before{box-shadow:0 0 8px rgba(217,119,6,.4);}body.light .card-l-red::before{box-shadow:0 0 8px rgba(220,38,38,.4);}body.light .card-l-green::before{box-shadow:0 0 8px rgba(5,150,105,.3);}
.card-l-red::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--red);box-shadow:var(--neon-red);}
.card-l-stale::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:rgba(255,255,255,.15);}
body.light .card-l-stale::before{background:#cbd5e1;}
.card.stale-card{background:rgba(5,15,22,0.4)!important;border-color:rgba(255,255,255,.05)!important;box-shadow:none;}
body.light .card.stale-card{background:rgba(248,250,252,.8)!important;border-color:#e2e8f0!important;}
.card-title{font-family:var(--font-title);font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:10px;padding-left:8px;display:flex;align-items:center;gap:7px;}
.ct-c{color:var(--cyan);text-shadow:var(--neon-cyan);}
.ct-g{color:var(--green);text-shadow:var(--neon-green);}
.ct-s{color:var(--txt3);text-shadow:none;}
body.light .ct-c{text-shadow:none;}
body.light .ct-g{text-shadow:none;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:var(--neon-green);animation:blink 1.4s ease-in-out infinite;}
body.light .live-dot{box-shadow:0 0 6px rgba(5,150,105,.5);}
.stale-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);box-shadow:none;}
body.light .stale-dot{background:#cbd5e1;}
.drow{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;
  border-bottom:1px solid rgba(0,229,255,.05);font-size:9px;letter-spacing:.07em;color:var(--txt2);}
body.light .drow{border-color:rgba(2,132,199,.08);}
.drow:last-child{border-bottom:none;}
.dval{color:var(--txt);font-size:11px;font-family:var(--font-main);}
.dval.g{color:var(--green);text-shadow:var(--neon-green);}
body.light .dval.g{text-shadow:none;}
.dval.r{color:var(--red);}
.dval.a{color:var(--amber);}

/* NODE SEL */
.node-sel{display:flex;gap:4px;margin-bottom:10px;}
.nbtn{flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(0,229,255,.18);
  color:var(--txt2);font-family:var(--font-main);font-size:8.5px;
  letter-spacing:.05em;padding:5px 2px;cursor:pointer;text-align:center;transition:all .2s;border-radius:1px;}
body.light .nbtn{background:#f8fafc;border-color:#e2e8f0;color:#64748b;border-radius:4px;}
.nbtn:hover{border-color:var(--cyan);color:var(--cyan);}
body.light .nbtn:hover{border-color:var(--cyan);color:var(--cyan);background:#eff6ff;}
.nbtn.active{background:rgba(0,229,255,.1);border-color:var(--cyan);color:var(--cyan);
  box-shadow:inset 0 0 10px rgba(0,229,255,.1),0 0 6px rgba(0,229,255,.2);}
body.light .nbtn.active{background:linear-gradient(135deg,#0284c7,#0ea5e9);color:#fff;box-shadow:0 2px 8px rgba(2,132,199,.3);}
.nbtn.off{border-color:rgba(40,40,40,.5);color:rgba(60,60,60,.7);cursor:default;pointer-events:none;}
body.light .nbtn.off{border-color:#f1f5f9;color:#cbd5e1;background:#fafafa;}

/* MAIN BIG VALUE */
.mbig{text-align:center;padding:8px 0;border-bottom:1px solid rgba(0,229,255,.06);margin-bottom:8px;}
body.light .mbig{border-color:#e2e8f0;}
.mbig-lbl{font-size:9.5px;letter-spacing:.18em;color:var(--txt3);text-transform:uppercase;margin-bottom:2px;font-family:var(--font-main);}
.mbig-val{font-family:var(--font-title);font-size:56px;font-weight:700;line-height:1;}
.mbig-unit{font-size:13px;color:var(--txt3);margin-top:1px;}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px;}
.mmini{background:rgba(0,0,0,.22);border:1px solid rgba(0,229,255,.08);padding:8px 10px;text-align:center;}
body.light .mmini{background:linear-gradient(135deg,#f0f9ff,#f0fdf4);border-color:#bfdbfe;border-radius:4px;}
.mmini-lbl{font-size:9px;letter-spacing:.12em;color:var(--txt3);text-transform:uppercase;margin-bottom:2px;font-family:var(--font-main);}
.mmini-val{font-family:var(--font-title);font-size:28px;font-weight:700;line-height:1;}
.mmini-unit{font-size:10px;color:var(--txt3);margin-top:1px;}
.vt{color:#ff8f00;}.vt.hot{color:#ff1744;text-shadow:var(--neon-red);}
body.light .vt.hot{text-shadow:none;}
.vh{color:#00b8d4;}.vs{color:#4caf50;}.vs.dry{color:#ff6d00;}

/* ALERT */
.alert-box{background:rgba(255,23,68,.04);border:1px solid rgba(255,23,68,.25);border-radius:2px;padding:9px 13px;display:none;}
.alert-box.on{display:block;}
body.light .alert-box{background:#fef2f2;border-color:#fecaca;}
.alert-ttl{font-family:var(--font-title);font-size:12px;font-weight:700;color:var(--red);
  letter-spacing:.12em;text-transform:uppercase;animation:blink .8s ease-in-out infinite;margin-bottom:3px;}
.alert-msg{font-size:8.5px;color:rgba(255,23,68,.8);letter-spacing:.05em;}
body.light .alert-msg{color:#ef4444;}

/* HISTORIAL */
.hrow{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid rgba(0,229,255,.04);font-size:11px;color:var(--txt2);}
body.light .hrow{border-color:#f1f5f9;color:#475569;}
.hrow:last-child{border-bottom:none;}
.ht{color:#ff8f00;font-weight:600;}.hh{color:#00b8d4;font-weight:600;}.hs{color:#4caf50;font-weight:600;}

/* SENSOR SECTION */
.sensor-section{padding:0 20px 18px;}
.sec-hdr{display:flex;align-items:center;gap:12px;padding:14px 0 10px;border-top:1px solid rgba(0,229,255,.07);margin-bottom:10px;}
body.light .sec-hdr{border-color:#e2e8f0;}
.sec-hdr::before{content:'';display:block;width:4px;height:24px;background:var(--green);border-radius:2px;box-shadow:var(--neon-green);}
body.light .sec-hdr::before{background:linear-gradient(180deg,#0284c7,#059669);box-shadow:none;}
.sec-hdr h2{font-family:var(--font-title);font-size:17px;font-weight:700;color:var(--txt);letter-spacing:.12em;text-transform:uppercase;}
.sec-sub{font-size:9px;color:var(--txt3);letter-spacing:.12em;}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:9px;}
.scard{background:var(--panel);border:1px solid var(--border);border-radius:2px;padding:12px 14px;position:relative;transition:all .3s ease;}
body.light .scard{box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 16px rgba(2,132,199,.04);border-radius:6px;}
.scard:hover{border-color:rgba(0,229,255,.28);}
body.light .scard:hover{border-color:#bfdbfe;}
.sacc{position:absolute;top:0;left:0;width:3px;height:100%;border-radius:2px 0 0 2px;transition:background .3s,box-shadow .3s;}
.shdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.sid{font-family:var(--font-title);font-size:14px;font-weight:700;letter-spacing:.08em;}
.sst{display:flex;align-items:center;gap:4px;font-size:8.5px;color:var(--txt2);}
.svals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:7px;}
.sv{background:rgba(0,0,0,.22);border:1px solid rgba(0,229,255,.07);padding:6px 8px;text-align:center;}
body.light .sv{background:linear-gradient(135deg,#f0f9ff,#f0fdf4);border-color:#bfdbfe;border-radius:4px;}
.svl{font-size:7px;letter-spacing:.1em;color:var(--txt3);text-transform:uppercase;margin-bottom:1px;font-family:var(--font-main);}
body.light .svl{color:#64748b;}
.svn{font-family:var(--font-title);font-size:1.9rem;font-weight:700;line-height:1;}
.svu{font-size:7.5px;color:var(--txt3);}
body.light .svu{color:#64748b;}
.sftr{display:flex;justify-content:space-between;font-size:7.5px;color:var(--txt3);letter-spacing:.04em;padding-top:5px;border-top:1px solid rgba(0,229,255,.06);}
body.light .sftr{border-color:#e2e8f0;color:#475569;}
.srisk{font-size:8.5px;font-weight:bold;letter-spacing:.04em;}

/* COORDS BAR */
.coords-bar{display:flex;justify-content:space-between;align-items:center;padding:5px 20px;
  background:rgba(0,0,0,.25);border-top:1px solid var(--border);font-size:8.5px;color:var(--txt3);letter-spacing:.08em;flex-wrap:wrap;gap:6px;}
body.light .coords-bar{background:rgba(255,255,255,.6);border-color:#dbeafe;color:#475569;backdrop-filter:blur(4px);}

/* SPECS */
.specs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);margin:0 20px 12px;}
body.light .specs{background:#e2e8f0;border-radius:4px;overflow:hidden;}
.spec{background:var(--panel);padding:9px 12px;text-align:center;}
.spec-lbl{font-size:8px;letter-spacing:.18em;color:var(--txt3);text-transform:uppercase;margin-bottom:1px;font-family:var(--font-main);}
body.light .spec-lbl{color:#64748b;}
.spec-val{font-family:var(--font-title);font-size:17px;font-weight:700;color:var(--cyan);}
.spec-unit{font-size:9px;color:var(--txt3);margin-left:2px;}
body.light .spec-unit{color:#64748b;}

/* BOTTOM */
.btm{padding:7px 20px;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(0,229,255,.07);font-size:9px;letter-spacing:.08em;color:var(--txt3);flex-wrap:wrap;gap:6px;}
body.light .btm{border-color:#dbeafe;color:#64748b;background:rgba(255,255,255,.5);}
.btm a{color:var(--txt2);text-decoration:none;transition:color .2s;}
.btm a:hover{color:var(--cyan);}

@media(max-width:768px){
  .hdr{padding:14px 16px 10px;}
  .hdr-title{font-size:clamp(18px,5.5vw,26px);text-align:center;}
  .main{grid-template-columns:1fr;gap:12px;padding:10px 12px;}
  .map-card{min-height:320px;}
  .map-wrap{min-height:320px;}
  #map{min-height:320px;}
  .node-sel{flex-wrap:wrap;}
  .nbtn{flex:1 1 calc(33% - 4px);}
  .sgrid{grid-template-columns:1fr;}
  .specs{grid-template-columns:repeat(3,1fr);margin:0 12px 12px;}
}

/* Light - sin neon en sacc y punto de telemetria */
body.light .sacc{box-shadow:none!important;}
body.light .sst span{box-shadow:none!important;}

/* ── MENU HAMBURGUESA GLOBAL ─────────────────────────────── */
#global-menu-btn{
  position:absolute;top:10px;left:10px;z-index:2000;
  width:36px;height:36px;background:rgba(4,21,32,.95);
  border:1px solid rgba(0,229,255,.35);color:var(--cyan);
  cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  transition:all .2s;
}
#global-menu-btn:hover{border-color:var(--cyan);box-shadow:0 0 10px rgba(0,229,255,.2);}
#global-menu-btn span{
  display:block;width:16px;height:1.5px;
  background:currentColor;transition:all .2s;
}
body.light #global-menu-btn{background:rgba(255,255,255,.95);border-color:rgba(2,132,199,.3);color:#0284c7;}

#global-panel{
  position:absolute;top:0;left:0;height:100%;width:240px;
  background:rgba(4,21,32,.97);backdrop-filter:blur(24px);
  border-right:1px solid rgba(0,229,255,.12);
  z-index:1999;transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:16px 0;
  pointer-events:none;
}
#global-panel.open{transform:translateX(0);pointer-events:all;}
body.light #global-panel{background:rgba(255,255,255,.97);border-color:#dbeafe;}

.gp-title{
  font-family:var(--font-title);font-size:10px;
  letter-spacing:.2em;color:var(--cyan);
  padding:0 16px 14px;border-bottom:1px solid rgba(0,229,255,.1);
  margin-bottom:8px;
}
body.light .gp-title{color:#0284c7;border-color:#dbeafe;}

.gp-section{
  padding:8px 16px 4px;font-size:7.5px;letter-spacing:.18em;
  color:var(--txt3);text-transform:uppercase;
}

.gp-btn{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;cursor:pointer;transition:all .15s;
  border:none;background:none;width:100%;text-align:left;
  font-family:var(--font-main);font-size:9.5px;
  letter-spacing:.06em;color:var(--txt2);
  border-left:2px solid transparent;
}
.gp-btn:hover:not(:disabled){
  background:rgba(0,229,255,.06);
  color:var(--cyan);border-left-color:var(--cyan);
}
.gp-btn.active{
  background:rgba(0,229,255,.1);
  color:var(--cyan);border-left-color:var(--cyan);
}
.gp-btn.active-red{background:rgba(255,23,68,.08);color:var(--red);border-left-color:var(--red);}
.gp-btn.active-green{background:rgba(0,255,136,.08);color:var(--green);border-left-color:var(--green);}
.gp-btn:disabled{opacity:.35;cursor:default;}
body.light .gp-btn{color:#475569;}
body.light .gp-btn:hover:not(:disabled){background:#f0f9ff;color:#0284c7;border-left-color:#0284c7;}
body.light .gp-btn.active{background:#e0f2fe;color:#0284c7;border-left-color:#0284c7;}

.gp-icon{font-size:13px;width:18px;text-align:center;}
.gp-check{margin-left:auto;color:var(--cyan);font-size:10px;}

.gp-divider{height:1px;background:rgba(0,229,255,.08);margin:10px 16px;}
body.light .gp-divider{background:#e2e8f0;}

.gp-status{
  margin-top:auto;padding:14px 16px;
  border-top:1px solid rgba(0,229,255,.1);
  font-size:7.5px;color:var(--txt3);letter-spacing:.08em;
}
body.light .gp-status{border-color:#e2e8f0;color:#94a3b8;}

#los-hint{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  background:rgba(4,21,32,.95);border:1px solid var(--cyan);
  color:var(--cyan);font-family:var(--font-main);font-size:9px;
  letter-spacing:.1em;padding:8px 16px;z-index:2001;
  display:none;white-space:nowrap;pointer-events:none;
}

/* ── MENU HAMBURGUESA ────────────────────────────────────── */
#hmenu-btn{
  position:absolute;top:10px;right:12px;z-index:2000;
  width:36px;height:36px;background:rgba(4,21,32,.95);
  border:1px solid rgba(0,229,255,.2);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;transition:all .2s;
  padding:0;box-sizing:border-box;
}
#hmenu-btn:hover{border-color:#00e5ff;box-shadow:0 0 8px rgba(0,229,255,.2);}
#hmenu-btn span{display:block;width:16px;height:2px;background:#00e5ff;flex-shrink:0;margin:0;}
body.light #hmenu-btn{background:rgba(255,255,255,.95);border-color:rgba(2,132,199,.3);}
body.light #hmenu-btn span{background:#000;}
body.light #hmenu-svg line{stroke:#000;}

#hmenu-panel{
  position:absolute;top:46px;right:12px;height:auto;width:220px;
  border-radius:4px;border:1px solid rgba(0,229,255,.2);
  background:rgba(4,21,32,.97);backdrop-filter:blur(20px);
  z-index:1999;transform:translateY(-10px);opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:8px 0;
}
#hmenu-panel.open{transform:translateY(0);opacity:1;pointer-events:all;}
body.light #hmenu-panel{background:rgba(255,255,255,.97);border-color:#dbeafe;box-shadow:0 8px 32px rgba(0,0,0,.12);}

.hm-title{font-family:var(--font-title);font-size:10px;letter-spacing:.2em;
  color:#00e5ff;padding:0 14px 12px;border-bottom:1px solid rgba(0,229,255,.1);margin-bottom:6px;}
body.light .hm-title{color:#0284c7;border-color:#dbeafe;}

.hm-section{padding:7px 14px 3px;font-size:7px;letter-spacing:.18em;color:var(--txt3);text-transform:uppercase;}

.hm-btn{display:flex;align-items:center;gap:9px;padding:5px 14px;
  white-space:nowrap;
  border:none;background:none;width:100%;text-align:left;cursor:pointer;
  font-family:var(--font-main);font-size:9px;letter-spacing:.06em;
  color:var(--txt2);border-left:2px solid transparent;transition:all .15s;}
.hm-btn:hover:not(:disabled){background:rgba(0,229,255,.06);color:#00e5ff;border-left-color:#00e5ff;}
.hm-btn.active{background:rgba(0,229,255,.1);color:#00e5ff;border-left-color:#00e5ff;}
.hm-btn.act-green{background:rgba(0,255,136,.08);color:#00ff88;border-left-color:#00ff88;}
.hm-btn.act-red{background:rgba(255,23,68,.08);color:#ff1744;border-left-color:#ff1744;}
.hm-btn:disabled{opacity:.3;cursor:default;}
.hm-btn span:first-child{display:inline-block;width:16px;text-align:center;}
body.light .hm-btn{color:#475569;}
body.light .hm-btn:hover:not(:disabled){background:#f0f9ff;color:#0284c7;border-left-color:#0284c7;}
body.light .hm-btn.active{background:#e0f2fe;color:#0284c7;border-left-color:#0284c7;}

.hm-chk{margin-left:auto;color:#00e5ff;font-size:10px;}
.hm-div{height:1px;background:rgba(0,229,255,.08);margin:8px 14px;}
body.light .hm-div{background:#e2e8f0;}

.hm-status{margin-top:auto;padding:12px 14px;border-top:1px solid rgba(0,229,255,.1);
  font-size:7px;color:var(--txt3);letter-spacing:.08em;}
body.light .hm-status{border-color:#e2e8f0;}

  #los-hint{position:absolute;bottom:36px;right:12px;left:auto;transform:none;
  background:rgba(4,21,32,.95);border:1px solid #00e5ff;color:#00e5ff;
  font-family:var(--font-main);font-size:8.5px;letter-spacing:.1em;
  padding:7px 14px;z-index:2001;white-space:nowrap;pointer-events:none;}

#hm-view-sat{display:none;}
#hm-view-3d{display:none;}
#hm-view-carto{display:block;}

/* ── PANEL ELEVACIÓ ──────────────────────────────────────── */
#elev-panel{
  position:absolute;bottom:20px;left:12px;z-index:10000;
  width:720px;background:#1a2635;
  backdrop-filter:blur(20px);border:1px solid rgba(0,229,255,.2);
  border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.6);
  font-family:var(--font-main);overflow:hidden;color:#fff;
}
#elev-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:10px 12px 8px;border-bottom:1px solid rgba(0,229,255,.1);
  gap:8px;
}
#elev-info{flex:1;display:flex;flex-direction:column;gap:3px;}
#elev-info-a,#elev-info-b{font-size:9.5px;color:#00e5ff;letter-spacing:0;font-weight:600;text-shadow:none;-webkit-font-smoothing:antialiased;white-space:nowrap;overflow:visible;}
#elev-info-rf{font-size:9px;color:inherit;letter-spacing:0;margin-top:3px;-webkit-font-smoothing:antialiased;}
#elev-actions{display:flex;gap:4px;flex-shrink:0;}
.elev-btn{
  width:24px;height:24px;background:rgba(0,229,255,.08);
  border:1px solid rgba(0,229,255,.2);color:rgba(0,229,255,.6);
  cursor:pointer;font-size:11px;line-height:1;padding-bottom:2px;display:flex;align-items:center;
  justify-content:center;transition:all .15s;border-radius:3px;
}
.elev-btn:hover{background:rgba(0,229,255,.18);color:#00e5ff;}
#elev-cfg-btn{font-size:14px;padding-top:2px;}
#elev-chart-wrap{padding:8px 12px 10px;height:260px;background:#1a2635;}
#elev-chart{width:100%!important;height:100%!important;}

/* ── MENU 3 PUNTS LOS ───────────────────────────────────── */
#los-dots-btn{
  width:32px;height:32px;background:rgba(4,21,32,.95);
  border:1px solid rgba(0,229,255,.3);color:#00e5ff;
  cursor:pointer;font-size:18px;display:flex;
  align-items:center;justify-content:center;
  font-weight:bold;letter-spacing:0;line-height:1;
}
#los-dots-btn:hover{border-color:#00e5ff;}
#rf-dots-btn{
  width:32px;height:32px;background:rgba(4,21,32,.95);
  border:1px solid rgba(0,229,255,.3);color:#00e5ff;
  cursor:pointer;font-size:18px;display:flex;
  align-items:center;justify-content:center;
  font-weight:bold;letter-spacing:0;line-height:1;
}
#rf-dots-btn:hover{border-color:#00e5ff;}
#rf-dots-menu{
  display:none;flex-direction:column;
  background:rgba(4,14,22,.97);backdrop-filter:blur(16px);
  border:1px solid rgba(0,229,255,.2);border-radius:4px;
  margin-top:4px;min-width:160px;overflow:hidden;
}
#rf-dots-menu.open{display:flex;}
#los-dots-menu{
  display:none;flex-direction:column;
  background:rgba(4,14,22,.97);backdrop-filter:blur(16px);
  border:1px solid rgba(0,229,255,.2);border-radius:4px;
  margin-top:4px;min-width:160px;overflow:hidden;
}
#los-dots-menu.open{display:flex;}
.los-menu-item{
  padding:9px 14px;background:none;border:none;
  color:var(--txt2);font-family:var(--font-main);
  font-size:9px;letter-spacing:.06em;text-align:left;
  cursor:pointer;transition:all .15s;border-bottom:1px solid rgba(0,229,255,.06);display:flex;align-items:center;gap:9px;
}
.los-menu-item:last-child{border-bottom:none;}
.los-menu-item span:first-child{display:inline-block;width:16px;text-align:center;}
.los-menu-item:hover{background:rgba(0,229,255,.06);color:#00e5ff;}

/* HISTORIAL SCROLL */
#histList{max-height:140px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,229,255,.35) transparent;}
#histList::-webkit-scrollbar{width:4px;}
#histList::-webkit-scrollbar-track{background:transparent;}
#histList::-webkit-scrollbar-thumb{background:rgba(0,229,255,.35);border-radius:2px;}
#histList::-webkit-scrollbar-thumb:hover{background:rgba(0,229,255,.6);}




/* PAGE UNZOOM */
.hdr,.status-bar,.bot-bar,.coords-bar,.sensor-section,.specs,.footer{zoom:0.94;}
.right-panel{zoom:0.94;}

/* Labels LOS 2D */
.los-label-2d {
  background: rgba(2,10,16,.70) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: none !important;
  font-family: Share Tech Mono, monospace !important;
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
}
.los-label-a { color: #ffff00 !important; }
.los-label-b { color: #00e5ff !important; }

/* Cursor crosshair global quan waiting */
body.waiting-click * {
  cursor: crosshair !important;
}

.los-label-2d {
  background: rgba(0,0,0,0.65) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.los-label-2d::before {
  display: none !important;
}





/* RF node label tooltip */
.rf-node-label {
  background: white !important;
  border: 1px solid #555 !important;
  color: black !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: bold !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.25) !important;
  white-space: nowrap;
}
.rf-node-label::before { display:none !important; }

/* RF Panel scrollbar */
#rf-panel::-webkit-scrollbar { width: 5px; }
#rf-panel::-webkit-scrollbar-track { background: rgba(0,229,255,.04); border-radius: 3px; }
#rf-panel::-webkit-scrollbar-thumb { background: rgba(0,229,255,.25); border-radius: 3px; }
#rf-panel::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,.5); }
#rf-panel { scrollbar-width: thin; scrollbar-color: rgba(0,229,255,.25) rgba(0,229,255,.04); }

/* Dashboard overlay — controles del mapa por detrás */
#node-dashboard { z-index: 998 !important; }
#hmenu-btn      { z-index: 2100 !important; }
#hmenu-panel    { z-index: 2101 !important; }
.leaflet-control-zoom    { z-index: 400 !important; }
.leaflet-control-container { z-index: 400 !important; }
.leaflet-top, .leaflet-bottom { z-index: 400 !important; }

/* Dashboard light mode */
body.light #node-dashboard {
  background: linear-gradient(160deg,#f0f6ff 0%,#e8f2fb 40%,#eef4fc 100%) !important;
}
body.light .db-kpi {
  background: #ffffff !important;
  border-color: rgba(2,132,199,.2) !important;
}
body.light .db-kpi-lbl { color: rgba(2,132,199,.7) !important; }
body.light .db-kpi-val { color: #0284c7 !important; }
body.light .db-kpi-unit { color: rgba(2,132,199,.5) !important; }
body.light .db-kpi::before { background: linear-gradient(90deg,transparent,#0284c7,transparent) !important; }
body.light #node-dashboard [style*="background:#041520"],
body.light #node-dashboard [style*="background:#061a2a"] {
  background: #ffffff !important;
  border-color: rgba(2,132,199,.2) !important;
}
body.light #node-dashboard [style*="color:rgba(0,229,255"] { color: rgba(2,132,199,.7) !important; }
body.light #node-dashboard [style*="color:#00e5ff"] { color: #0284c7 !important; }
body.light .db-range-btn { font-family: Share Tech Mono,monospace !important; }
body.light #node-dashboard { color: #0f172a !important; }
body.light .db-hist-row { color: #334155 !important; }
body.light #db-node-title { color: #0284c7 !important; }
body.light #db-last-update { color: rgba(2,132,199,.5) !important; }

/* Quan el dashboard està obert, els panells del mapa no el tapen */
body.dashboard-open #los-dots-wrap,
body.dashboard-open #rf-dots-wrap,
body.dashboard-open #tool-info,
body.dashboard-open #rf-legend,
body.dashboard-open .los-hint,
body.dashboard-open #rf-overlay {
  z-index: 1 !important;
  pointer-events: none !important;
}

body.dashboard-open #tool-info {
  display: none !important;
}

/* Hamburger ocult quan dashboard obert */
body.dashboard-open #hmenu-btn   { z-index: 1 !important; pointer-events:none; opacity:0; }
body.dashboard-open #hmenu-panel { z-index: 1 !important; pointer-events:none; }


#hm-firms-btn.active,#hm-power-btn.active,#hm-eonet-btn.active {
  background:rgba(0,255,136,.1) !important;
  color:#00ff88 !important;
  border-left-color:#00ff88 !important;
}
#hm-ndvi-btn.active { background:rgba(0,255,100,.1) !important; color:#00ff64 !important; border-left-color:#00ff64 !important; }
#hm-burned-btn.active { background:rgba(255,68,68,.1) !important; color:#ff4444 !important; border-left-color:#ff4444 !important; }
#hm-aq-btn.active { background:rgba(0,229,255,.1) !important; color:#00e5ff !important; border-left-color:#00e5ff !important; }
#hm-aemet-btn.active { background:rgba(255,200,0,.1) !important; color:#ffc800 !important; border-left-color:#ffc800 !important; }
#hm-wind-btn.active { background:rgba(100,200,255,.1) !important; color:#64c8ff !important; border-left-color:#64c8ff !important; }
#hm-los.active { background:rgba(0,229,255,.1) !important; color:#00e5ff !important; border-left-color:#00e5ff !important; }
#hm-cov.active { background:rgba(0,229,255,.1) !important; color:#00e5ff !important; border-left-color:#00e5ff !important; }
#hm-eonet-btn.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }
#hm-aemet-btn.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }
#hm-aq-btn.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }
#hm-wind-btn.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }
#hm-los.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }
#hm-cov.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }
#hm-ndvi-btn.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }
#hm-power-btn.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }
#hm-firms-btn.active { background:rgba(0,255,136,.1) !important; color:#00ff88 !important; border-left-color:#00ff88 !important; }

#pn-dots-btn{
  width:32px;height:32px;background:rgba(4,21,32,.95);
  border:1px solid rgba(0,229,255,.3);color:#00e5ff;
  cursor:pointer;font-size:18px;display:flex;
  align-items:center;justify-content:center;
  font-weight:bold;letter-spacing:0;line-height:1;
}
#pn-dots-btn:hover{border-color:#00e5ff;}
#pn-dots-menu{
  display:none;flex-direction:column;
  background:rgba(4,14,22,.97);backdrop-filter:blur(16px);
  border:1px solid rgba(0,229,255,.2);border-radius:4px;
  margin-top:4px;min-width:160px;overflow:hidden;
}
#pn-dots-menu.open{display:flex;}
body.dashboard-open #pn-dots-wrap,
body.dashboard-open #pn-panel,
body.dashboard-open #wind-legend{display:none!important;}

#pn-dots-btn{
  width:32px;height:32px;background:rgba(4,21,32,.95);
  border:1px solid rgba(0,229,255,.3);color:#00e5ff;
  cursor:pointer;font-size:18px;display:flex;
  align-items:center;justify-content:center;
  font-weight:bold;letter-spacing:0;line-height:1;
}
#pn-dots-btn:hover{border-color:#00e5ff;}
#pn-dots-menu{
  display:none;flex-direction:column;
  background:rgba(4,14,22,.97);backdrop-filter:blur(16px);
  border:1px solid rgba(0,229,255,.2);border-radius:4px;
  margin-top:4px;min-width:160px;overflow:hidden;
}
#pn-dots-menu.open{display:flex;}
body.dashboard-open #pn-dots-wrap,
body.dashboard-open #pn-panel,
body.dashboard-open #wind-legend{display:none!important;}