/* ══ Base visual NOC · pantallas de TV (Fresno) ══ */
:root{
  --bg:#05070e; --bg2:#0a1120; --grid:rgba(90,140,220,.09);
  --ok:#22e39a; --okglow:rgba(34,227,154,.55);
  --warn:#ffc24b; --warnglow:rgba(255,194,75,.5);
  --bad:#ff4d5e; --badglow:rgba(255,77,94,.6);
  --cyan:#38d6ff; --cyanglow:rgba(56,214,255,.5);
  --ink:#eaf2ff; --muted:#7f93b8; --line:rgba(120,160,230,.18);
  --panel:rgba(10,18,34,.72); --panelbrd:rgba(90,140,220,.22);
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:radial-gradient(120% 90% at 30% -10%, #0d1830 0%, var(--bg) 60%, #03050a 100%);
  color:var(--ink); font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased; height:100vh;
}
.mono{font-family:"SFMono-Regular",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}

/* Header */
header{height:8.2vh; min-height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 2.2vw;
  background:linear-gradient(180deg, rgba(4,8,18,.9), rgba(4,8,18,0)); flex:none}
.brand{display:flex; align-items:center; gap:1vw}
.brand .logo{width:2.7vh; height:2.7vh; min-width:20px; min-height:20px; border-radius:6px;
  background:conic-gradient(from 210deg, var(--cyan), var(--ok), var(--cyan)); box-shadow:0 0 22px var(--cyanglow); position:relative}
.brand .logo::after{content:""; position:absolute; inset:22%; border-radius:3px; background:var(--bg)}
.brand h1{font-size:2.4vh; letter-spacing:.24vw; font-weight:800}
.brand h1 b{color:var(--cyan)}
.brand .sub{font-size:1.3vh; letter-spacing:.2vw; color:var(--muted); margin-top:.2vh}
.hstat{display:flex; align-items:center; gap:2vw}
.live{display:flex; align-items:center; gap:.5vw; font-size:1.5vh; letter-spacing:.18vw; color:var(--ok)}
.live .dot{width:1.1vh; height:1.1vh; min-width:8px; min-height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px var(--okglow); animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.navlink{color:var(--cyan); text-decoration:none; font-size:1.4vh; font-weight:700; letter-spacing:.06vw; background:var(--panel); border:1px solid var(--panelbrd); border-radius:10px; padding:.6vh 1vw}
.navlink:hover{border-color:var(--cyan)}
.clock{font-size:2.5vh; letter-spacing:.1vw; text-align:right}
.clock .d{font-size:1.35vh; color:var(--muted); letter-spacing:.16vw}

/* KPI cards */
.kpis{display:flex; gap:1vw; padding:0 2.2vw 1.4vh; flex:none; flex-wrap:wrap}
.kpi{background:var(--panel); border:1px solid var(--panelbrd); border-radius:12px; padding:1vh 1.4vw; min-width:8.5vw; flex:1;
  box-shadow:0 6px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04)}
.kpi .lab{font-size:1.2vh; letter-spacing:.14vw; color:var(--muted); text-transform:uppercase}
.kpi .val{font-size:3.6vh; font-weight:800; line-height:1.05; margin-top:.3vh}
.kpi .val small{font-size:1.7vh; color:var(--muted); font-weight:600}
.kpi .ksub{font-size:1.2vh; color:var(--muted); margin-top:.3vh}
.kpi.ok .val{color:var(--ok)} .kpi.bad .val{color:var(--bad)} .kpi.warn .val{color:var(--warn)} .kpi.cyan .val{color:var(--cyan)}
.kpi .bar{height:.5vh; border-radius:3px; margin-top:.7vh; background:rgba(120,160,230,.14); overflow:hidden}
.kpi .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--ok),var(--cyan)); box-shadow:0 0 10px var(--cyanglow)}

/* Content area */
.wrap{flex:1; display:flex; gap:1.4vw; padding:0 2.2vw 1.4vh; min-height:0; overflow:hidden}
.col{display:flex; flex-direction:column; gap:1.2vh; min-height:0}
.card{background:var(--panel); border:1px solid var(--panelbrd); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-height:0}
.card > h2{font-size:1.4vh; letter-spacing:.18vw; color:var(--muted); text-transform:uppercase; padding:1.1vh 1.2vw .8vh; border-bottom:1px solid var(--line); flex:none}
.card .body{overflow:auto; min-height:0; flex:1}

/* Grid de nodos */
.grid{display:grid; gap:1vw; padding:1vw}
.node{background:linear-gradient(180deg, rgba(16,26,46,.6), rgba(8,14,26,.5)); border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:12px; padding:1.1vh 1vw}
.node.warn{border-left-color:var(--warn); box-shadow:0 0 18px rgba(255,194,75,.12)}
.node.bad{border-left-color:var(--bad); box-shadow:0 0 22px rgba(255,77,94,.18); animation:pulseb 1.6s infinite}
@keyframes pulseb{0%,100%{box-shadow:0 0 14px rgba(255,77,94,.12)}50%{box-shadow:0 0 28px rgba(255,77,94,.30)}}
.node .nh{display:flex; align-items:baseline; justify-content:space-between; gap:.5vw}
.node .nn{font-size:1.9vh; font-weight:800}
.node .eq{font-size:1.15vh; color:var(--muted)}
.node .meters{display:flex; gap:1vw; margin-top:.9vh}
.node .m{flex:1}
.node .m .ml{font-size:1.1vh; color:var(--muted); text-transform:uppercase; letter-spacing:.08vw; display:flex; justify-content:space-between}
.node .m .ml b{color:var(--ink); font-weight:700}
.node .m .mb{height:.7vh; border-radius:4px; margin-top:.35vh; background:rgba(120,160,230,.14); overflow:hidden}
.node .m .mb i{display:block; height:100%; border-radius:4px}
.node .foot{display:flex; gap:1.2vw; margin-top:.9vh; font-size:1.2vh; color:#9fb4d8; flex-wrap:wrap}
.node .foot b{color:var(--ink)}
.chip{display:inline-block; font-size:1.1vh; font-weight:800; padding:.15vh .5vw; border-radius:6px; letter-spacing:.05vw}
.chip.ok{color:var(--ok); background:rgba(34,227,154,.12); border:1px solid rgba(34,227,154,.3)}
.chip.warn{color:var(--warn); background:rgba(255,194,75,.12); border:1px solid rgba(255,194,75,.3)}
.chip.bad{color:var(--bad); background:rgba(255,77,94,.14); border:1px solid rgba(255,77,94,.35)}

/* Listas / tablas */
.rowline{display:flex; align-items:center; gap:.8vw; padding:.9vh 1.1vw; border-bottom:1px solid rgba(120,160,230,.07); font-size:1.6vh}
.rowline:last-child{border-bottom:0}
.rowline .dot{width:1.1vh; height:1.1vh; min-width:9px; min-height:9px; border-radius:50%; flex:none}
.rowline .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rowline .grow span{display:block; font-size:1.2vh; color:var(--muted)}
.rowline .num{font-weight:800; font-size:1.8vh}
.rowline .num small{font-size:1.1vh; color:var(--muted); font-weight:500}
.d-ok{background:var(--ok); box-shadow:0 0 10px var(--okglow)}
.d-warn{background:var(--warn); box-shadow:0 0 10px var(--warnglow)}
.d-bad{background:var(--bad); box-shadow:0 0 10px var(--badglow)}
.d-cyan{background:var(--cyan); box-shadow:0 0 10px var(--cyanglow)}
.t-up{color:var(--ok)} .t-down{color:var(--bad)} .t-mut{color:var(--muted)}

/* Ticker */
.ticker{height:4.4vh; display:flex; align-items:center; background:linear-gradient(180deg, rgba(4,8,18,0), rgba(3,6,12,.96)); flex:none}
.ticker .tag{height:100%; display:flex; align-items:center; padding:0 1.3vw; font-size:1.45vh; font-weight:800; letter-spacing:.14vw; background:var(--ok); color:#022017; box-shadow:0 0 22px var(--okglow)}
.ticker.alerta .tag{background:var(--bad); color:#2a0207; box-shadow:0 0 26px var(--badglow)}
.ticker .track{flex:1; overflow:hidden; white-space:nowrap}
.ticker .track .move{display:inline-block; padding-left:100%; animation:scroll 34s linear infinite; font-size:1.6vh}
.ticker .track .move i{color:var(--muted); font-style:normal; margin:0 1.4vw}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Gate */
#gate,#nocdesact{position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center; background:rgba(3,6,12,.92); text-align:center}
#nocdesact{background:rgba(3,6,12,.96)}
#gate .box,#nocdesact .box{background:var(--panel); border:1px solid var(--panelbrd); border-radius:16px; padding:4vh 4vw; max-width:520px}
#gate h3,#nocdesact h3{font-size:3vh; margin-bottom:1.4vh; color:var(--warn)}
#gate p,#nocdesact p{color:var(--muted); font-size:2vh; line-height:1.5}
#gate a,#nocdesact a{color:var(--cyan); font-weight:700; text-decoration:none}
#gate .gatef{display:flex; gap:.8vw; margin-top:2vh; justify-content:center}
#gate input{background:#0a1120; border:1px solid var(--panelbrd); color:var(--ink); border-radius:10px; padding:1.2vh 1.4vw; font-size:2vh; width:16vw}
#gate button{background:linear-gradient(90deg,var(--cyan),var(--ok)); color:#03121a; font-weight:800; border:none; border-radius:10px; padding:1.2vh 2vw; font-size:2vh; cursor:pointer}
#gate .gerr{color:var(--bad); font-size:1.6vh; margin-top:1.4vh; min-height:1.6vh}
.updated{position:fixed; right:1.6vw; bottom:.5vh; z-index:7; font-size:1.1vh; color:var(--muted)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(120,160,230,.25);border-radius:8px}