/* ATLAS CINES NOC v4.0 — style.css | Temas: cyber | arctic | matrix */
/* Fuentes del sistema — sin dependencia externa */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ═══ CYBER (default) ═══ */
:root,[data-theme="cyber"]{
  --bg0:#020509;--bg1:#060d1c;--bg2:#0a1628;--bg3:#0f1e38;--bg4:#152549;
  --bd0:rgba(25,60,130,.28);--bd1:rgba(40,90,190,.45);--bd2:rgba(55,120,255,.65);
  --acc:#2d7fff;--acc-dim:rgba(45,127,255,.12);--acc-glow:0 0 14px rgba(45,127,255,.35);
  --tx0:#e2f0ff;--tx1:#7aadd8;--tx2:#3a5880;--tx3:#1c3050;--mono:#4da8ff;
  --ok-bg:#021a0c;--ok-bd:#0a5c38;--ok-tx:#1fe87a;--ok-dot:#1fe87a;
  --wn-bg:#1a1000;--wn-bd:#8c5800;--wn-tx:#ffb830;--wn-dot:#ffb830;
  --cr-bg:#1c0404;--cr-bd:#8c1515;--cr-tx:#ff4444;--cr-dot:#ff4444;
  --in-bg:#021230;--in-bd:#1a4898;--in-tx:#5aadff;--in-dot:#5aadff;
  --of-bg:#0c1020;--of-bd:#252e48;--of-tx:#4e607e;--of-dot:#2e3d55;
  --pu-bg:#1a0a2e;--pu-bd:#6b3fa0;--pu-tx:#c4b5fd;--pu-dot:#a78bfa;
  --scan:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(45,127,255,.025) 2px,rgba(45,127,255,.025) 4px);
  --grid:linear-gradient(rgba(45,127,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(45,127,255,.04) 1px,transparent 1px);
}
/* ═══ ARCTIC ═══ */
[data-theme="arctic"]{
  --bg0:#010810;--bg1:#020e1a;--bg2:#051624;--bg3:#081e30;--bg4:#0c273e;
  --bd0:rgba(0,130,170,.25);--bd1:rgba(0,170,210,.4);--bd2:rgba(0,210,250,.6);
  --acc:#00d0f0;--acc-dim:rgba(0,208,240,.1);--acc-glow:0 0 14px rgba(0,208,240,.3);
  --tx0:#d8f5ff;--tx1:#5bbcd8;--tx2:#2a6880;--tx3:#153448;--mono:#00d8f8;
  --ok-bg:#01180e;--ok-bd:#086040;--ok-tx:#10e880;--ok-dot:#10e880;
  --wn-bg:#181200;--wn-bd:#907000;--wn-tx:#ffc030;--wn-dot:#ffc030;
  --cr-bg:#1a0505;--cr-bd:#901818;--cr-tx:#ff5050;--cr-dot:#ff5050;
  --in-bg:#01101e;--in-bd:#006888;--in-tx:#00d8f8;--in-dot:#00d8f8;
  --of-bg:#080e16;--of-bd:#1e2e3e;--of-tx:#406070;--of-dot:#243444;
  --pu-bg:#120820;--pu-bd:#5a2a80;--pu-tx:#c4b5fd;--pu-dot:#a78bfa;
  --scan:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,208,240,.02) 2px,rgba(0,208,240,.02) 4px);
  --grid:linear-gradient(rgba(0,208,240,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,208,240,.04) 1px,transparent 1px);
}
/* ═══ MATRIX ═══ */
[data-theme="matrix"]{
  --bg0:#010801;--bg1:#050d05;--bg2:#081508;--bg3:#0c1e0c;--bg4:#102810;
  --bd0:rgba(20,100,20,.3);--bd1:rgba(30,150,30,.45);--bd2:rgba(40,200,40,.65);
  --acc:#22dd22;--acc-dim:rgba(34,221,34,.1);--acc-glow:0 0 14px rgba(34,221,34,.3);
  --tx0:#c8ffc8;--tx1:#5db85d;--tx2:#2a602a;--tx3:#163016;--mono:#44ee44;
  --ok-bg:#01140a;--ok-bd:#0a5030;--ok-tx:#22ee88;--ok-dot:#22ee88;
  --wn-bg:#141200;--wn-bd:#807000;--wn-tx:#eebb20;--wn-dot:#eebb20;
  --cr-bg:#180304;--cr-bd:#881010;--cr-tx:#ff3333;--cr-dot:#ff3333;
  --in-bg:#011208;--in-bd:#0a7030;--in-tx:#20dd60;--in-dot:#20dd60;
  --of-bg:#080c08;--of-bd:#1e281e;--of-tx:#3e583e;--of-dot:#243824;
  --pu-bg:#0e0820;--pu-bd:#5a3a90;--pu-tx:#c4b5fd;--pu-dot:#a78bfa;
  --scan:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(34,221,34,.03) 2px,rgba(34,221,34,.03) 4px);
  --grid:linear-gradient(rgba(34,221,34,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(34,221,34,.04) 1px,transparent 1px);
}

/* ═══ BASE ═══ */
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{background:var(--bg0);color:var(--tx0);font-family:'Segoe UI','Arial',sans-serif;font-size:14px;line-height:1.5;min-height:100vh;background-image:var(--grid);background-size:40px 40px}
body::before{content:'';position:fixed;inset:0;background:var(--scan);pointer-events:none;z-index:0}
main.container{position:relative;z-index:1}
h1,h2,h3{font-family:'Segoe UI','Arial',sans-serif;font-weight:700;letter-spacing:.04em}
h2{font-size:1.1rem;color:var(--acc)}
code,.mono{font-family:'Consolas','Courier New',monospace;color:var(--mono);font-size:.85em}

/* ═══ TOPBAR ═══ */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:50px;background:var(--bg1);border-bottom:1px solid var(--bd1);backdrop-filter:blur(8px)}
.topbar-brand{display:flex;align-items:center;gap:10px}
.topbar-brand .logo{font-family:'Segoe UI','Arial',sans-serif;font-weight:700;font-size:1.15rem;color:var(--acc);letter-spacing:.1em;text-transform:uppercase}
.topbar-brand .sub{font-size:.7rem;color:var(--tx2);font-family:'Consolas','Courier New',monospace}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-user{font-size:.75rem;color:var(--tx2);font-family:'Consolas','Courier New',monospace}
.topbar-user span{color:var(--acc)}

/* ═══ NAV ═══ */
.nav-tabs{display:flex;gap:2px}
.nav-tabs a{padding:5px 12px;font-family:'Segoe UI','Arial',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--tx2);border:1px solid transparent;border-radius:3px;transition:all .15s;white-space:nowrap}
.nav-tabs a:hover{color:var(--tx0);border-color:var(--bd1);background:var(--bg3)}
.nav-tabs a.active{color:var(--acc);border-color:var(--bd2);background:var(--acc-dim)}
.nav-sep{width:1px;height:16px;background:var(--bd0);margin:0 4px;align-self:center}

/* ═══ THEME SWITCHER ═══ */
.theme-sw{display:flex;gap:5px;align-items:center}
.theme-btn{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;background:none;padding:0;transition:border-color .15s}
.theme-btn .dot{width:12px;height:12px;border-radius:50%;margin:2px auto}
.theme-btn[data-t="cyber"]  .dot{background:#2d7fff}
.theme-btn[data-t="arctic"] .dot{background:#00d0f0}
.theme-btn[data-t="matrix"] .dot{background:#22dd22}
.theme-btn.active{border-color:var(--acc)}

/* ═══ LAYOUT ═══ */
.container{width:calc(100vw - 28px);max-width:none;margin:18px auto;padding:0}

/* ═══ KPI ROW ═══ */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:16px}
.kpi{background:var(--bg2);border:1px solid var(--bd0);border-radius:6px;padding:12px 14px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--tx2);opacity:.3}
.kpi.ok::before{background:var(--ok-dot);opacity:1}.kpi.warn::before{background:var(--wn-dot);opacity:1}
.kpi.crit::before{background:var(--cr-dot);opacity:1}.kpi.info::before{background:var(--in-dot);opacity:1}
.kpi.off::before{background:var(--of-dot);opacity:.6}
.kpi-val{font-family:'Consolas','Courier New',monospace;font-size:1.9rem;font-weight:700;line-height:1}
.kpi-label{font-size:.68rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.kpi.ok .kpi-val{color:var(--ok-tx)}.kpi.warn .kpi-val{color:var(--wn-tx)}
.kpi.crit .kpi-val{color:var(--cr-tx)}.kpi.info .kpi-val{color:var(--in-tx)}.kpi.off .kpi-val{color:var(--of-tx)}

/* ═══ PANEL ═══ */
.panel{background:var(--bg2);border:1px solid var(--bd0);border-radius:6px;padding:16px 18px;margin-bottom:14px}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel-title{font-family:'Segoe UI','Arial',sans-serif;font-weight:700;font-size:.95rem;color:var(--acc);text-transform:uppercase;letter-spacing:.06em}

/* ═══ TABLE ═══ */
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1600px}
thead th{background:var(--bg3);color:var(--tx2);font-family:'Segoe UI','Arial',sans-serif;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;padding:8px 10px;border-bottom:1px solid var(--bd1);white-space:nowrap}
tbody td{padding:8px 10px;border-bottom:1px solid var(--bd0);font-size:.88rem;vertical-align:middle}
tbody tr:hover td{background:var(--bg3)}
tbody tr.row-crit td{background:rgba(140,21,21,.1);box-shadow:inset 3px 0 0 var(--cr-dot)}
tbody tr.row-warn td{background:rgba(140,88,0,.09);box-shadow:inset 3px 0 0 var(--wn-dot)}
tbody tr.row-off  td{background:rgba(30,46,88,.12);box-shadow:inset 3px 0 0 var(--of-dot)}
tbody tr.row-info td{background:rgba(26,72,152,.08);box-shadow:inset 3px 0 0 var(--in-dot)}

/* ═══ BADGES ═══ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:3px;font-family:'Consolas','Courier New',monospace;font-size:.7rem;font-weight:500;white-space:nowrap;border:1px solid}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.badge.ok    {background:var(--ok-bg);color:var(--ok-tx);border-color:var(--ok-bd)}.badge.ok::before{background:var(--ok-dot);box-shadow:0 0 4px var(--ok-dot)}
.badge.warn,.badge.cambio{background:var(--wn-bg);color:var(--wn-tx);border-color:var(--wn-bd)}.badge.warn::before,.badge.cambio::before{background:var(--wn-dot);box-shadow:0 0 4px var(--wn-dot)}
.badge.crit,.badge.port{background:var(--cr-bg);color:var(--cr-tx);border-color:var(--cr-bd)}.badge.crit::before,.badge.port::before{background:var(--cr-dot);box-shadow:0 0 4px var(--cr-dot)}
.badge.info,.badge.nuevo{background:var(--in-bg);color:var(--in-tx);border-color:var(--in-bd)}.badge.info::before,.badge.nuevo::before{background:var(--in-dot);box-shadow:0 0 4px var(--in-dot)}
.badge.off,.badge.offline,.badge.sin_datos{background:var(--of-bg);color:var(--of-tx);border-color:var(--of-bd)}.badge.off::before,.badge.offline::before,.badge.sin_datos::before{background:var(--of-dot)}
.badge.driver,.badge.pu{background:var(--pu-bg);color:var(--pu-tx);border-color:var(--pu-bd)}.badge.driver::before,.badge.pu::before{background:var(--pu-dot);box-shadow:0 0 4px var(--pu-dot)}
.badge.agente{background:var(--in-bg);color:var(--in-tx);border-color:var(--in-bd)}.badge.agente::before{background:var(--in-dot)}
.badge.usuario{background:var(--pu-bg);color:var(--pu-tx);border-color:var(--pu-bd)}.badge.usuario::before{background:var(--pu-dot);box-shadow:0 0 4px var(--pu-dot)}

/* ═══ METRIC BAR ═══ */
.mbar{display:flex;align-items:center;gap:6px;min-width:85px}
.mbar-track{flex:1;height:3px;background:var(--bg4);border-radius:2px;overflow:hidden}
.mbar-fill{height:100%;border-radius:2px}
.mbar-val{font-family:'Consolas','Courier New',monospace;font-size:.72rem;min-width:36px;text-align:right;color:var(--tx1)}
.mbar-fill.ok{background:var(--ok-dot)}.mbar-fill.warn{background:var(--wn-dot)}.mbar-fill.crit{background:var(--cr-dot)}

/* ═══ SCORE RING ═══ */
.score-ring{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;font-family:'Consolas','Courier New',monospace;font-size:.78rem;font-weight:700;border:2px solid var(--bd1)}
.score-ring.ok{border-color:var(--ok-bd);color:var(--ok-tx);background:var(--ok-bg)}
.score-ring.warn{border-color:var(--wn-bd);color:var(--wn-tx);background:var(--wn-bg)}
.score-ring.crit{border-color:var(--cr-bd);color:var(--cr-tx);background:var(--cr-bg)}

/* ═══ COMPLEX CARDS ═══ */
.complex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}
.complex-card{background:var(--bg2);border:1px solid var(--bd0);border-radius:6px;padding:14px;position:relative;overflow:hidden}
.complex-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.complex-card.ok::after{background:var(--ok-dot);opacity:.7}.complex-card.warn::after{background:var(--wn-dot)}.complex-card.crit::after{background:var(--cr-dot)}
.complex-name{font-family:'Segoe UI','Arial',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.05em;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.complex-name .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.complex-card.ok .dot{background:var(--ok-dot);box-shadow:0 0 5px var(--ok-dot)}
.complex-card.warn .dot{background:var(--wn-dot);box-shadow:0 0 5px var(--wn-dot)}
.complex-card.crit .dot{background:var(--cr-dot);box-shadow:0 0 5px var(--cr-dot)}
.cmx-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.cmx-m{background:var(--bg3);border-radius:4px;padding:7px 8px;text-align:center}
.cmx-m strong{display:block;font-family:'Consolas','Courier New',monospace;font-size:1.2rem;line-height:1}
.cmx-m span{font-size:.65rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em}
.cmx-m.ok strong{color:var(--ok-tx)}.cmx-m.warn strong{color:var(--wn-tx)}
.cmx-m.crit strong{color:var(--cr-tx)}.cmx-m.off strong{color:var(--of-tx)}
.prob-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.prob-item{background:var(--bg3);border:1px solid var(--bd0);border-radius:4px;padding:7px 9px}
.prob-hdr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}
.prob-host{font-family:'Consolas','Courier New',monospace;font-size:.76rem;color:var(--tx0)}
.prob-meta{font-size:.73rem;color:var(--tx2);display:flex;gap:8px;flex-wrap:wrap}
.prob-meta .lbl{color:var(--tx3)}
.more-note{font-size:.72rem;color:var(--tx2);margin-top:5px}

/* ═══ INLINE EDIT ═══ */
.inline-edit-form{display:none}
.inline-edit-form.open{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;padding:8px;background:var(--bg3);border-radius:4px;border:1px solid var(--bd1)}
.inline-edit-form input,.inline-edit-form select{background:var(--bg1);color:var(--tx0);border:1px solid var(--bd1);border-radius:3px;padding:4px 8px;font-family:'Consolas','Courier New',monospace;font-size:.78rem;min-width:100px}
.inline-edit-form input:focus,.inline-edit-form select:focus{outline:none;border-color:var(--acc)}
.edit-link{color:var(--tx2);font-size:.7rem;cursor:pointer;text-decoration:none;font-family:'Consolas','Courier New',monospace;padding:2px 4px;border-radius:2px;border:1px solid transparent}
.edit-link:hover{color:var(--acc);border-color:var(--bd1)}

/* ═══ FILTERS ═══ */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters input,.filters select{background:var(--bg1);color:var(--tx0);border:1px solid var(--bd1);border-radius:4px;padding:6px 10px;font-family:'Segoe UI','Arial',sans-serif;font-size:.88rem;min-width:130px}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--bd2);box-shadow:0 0 0 2px var(--acc-dim)}
.filters label.chk{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:.8rem;color:var(--tx2);padding:6px 0;white-space:nowrap}
.filters label.chk input{min-width:unset;width:13px;height:13px}
.btn,.btn-sec,.btn-danger,.btn-sm{padding:6px 14px;border:1px solid;border-radius:4px;font-family:'Segoe UI','Arial',sans-serif;font-weight:600;font-size:.88rem;letter-spacing:.04em;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.btn{background:var(--acc);color:#fff;border-color:var(--acc)}.btn:hover{filter:brightness(1.12)}
.btn-sec{background:var(--bg3);color:var(--tx1);border-color:var(--bd1)}.btn-sec:hover{border-color:var(--bd2);color:var(--tx0)}
.btn-danger{background:var(--cr-bg);color:var(--cr-tx);border-color:var(--cr-bd)}.btn-danger:hover{filter:brightness(1.2)}
.btn-sm{padding:3px 8px;font-size:.75rem}
a.small-link{color:var(--acc);font-size:.76rem;text-decoration:none;font-family:'Consolas','Courier New',monospace}
a.small-link:hover{text-decoration:underline}
a.small-link.danger{color:var(--cr-tx)}

/* ═══ ALERTS ═══ */
.alert{padding:9px 13px;border-radius:4px;font-size:.88rem;margin:8px 0}
.alert-ok,.alert-green{background:var(--ok-bg);color:var(--ok-tx);border:1px solid var(--ok-bd)}
.alert-warn{background:var(--wn-bg);color:var(--wn-tx);border:1px solid var(--wn-bd)}
.alert-crit,.alert-red{background:var(--cr-bg);color:var(--cr-tx);border:1px solid var(--cr-bd)}
.alert-info{background:var(--in-bg);color:var(--in-tx);border:1px solid var(--in-bd)}

/* ═══ BULK / ADMIN ═══ */
.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bulk-bar span{color:var(--tx2);font-size:.8rem}
.select-col{width:34px;text-align:center}
input[type="checkbox"]{accent-color:var(--acc)}

/* ═══ LOGIN ═══ */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg0);background-image:var(--grid);background-size:40px 40px}
.login-wrap{width:340px;position:relative;z-index:1}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo .brand{font-family:'Segoe UI','Arial',sans-serif;font-weight:700;font-size:1.9rem;color:var(--acc);letter-spacing:.12em;text-transform:uppercase}
.login-logo .sub{font-family:'Consolas','Courier New',monospace;font-size:.68rem;color:var(--tx2);margin-top:3px}
.login-card{background:var(--bg2);border:1px solid var(--bd1);border-radius:6px;padding:26px;box-shadow:var(--acc-glow);position:relative}
.login-card h2{text-align:center;margin-bottom:18px;font-size:.95rem;color:var(--tx1);font-weight:500}
.login-card input{width:100%;margin:5px 0;padding:9px 11px;background:var(--bg1);color:var(--tx0);border:1px solid var(--bd1);border-radius:4px;font-family:'Segoe UI','Arial',sans-serif;font-size:.95rem}
.login-card input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-dim)}
.login-card .btn{width:100%;justify-content:center;margin-top:12px;padding:9px}
.corner{position:absolute;width:18px;height:18px;border-color:var(--acc);border-style:solid;opacity:.5}
.corner.tl{top:-1px;left:-1px;border-width:2px 0 0 2px}.corner.tr{top:-1px;right:-1px;border-width:2px 2px 0 0}
.corner.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}.corner.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}

/* ═══ UTILS ═══ */
.text-ok{color:var(--ok-tx)}.text-warn{color:var(--wn-tx)}.text-crit{color:var(--cr-tx)}
.text-info{color:var(--in-tx)}.text-dim{color:var(--tx2)}.text-mono{font-family:'Consolas','Courier New',monospace;font-size:.84em;color:var(--mono)}
.nowrap{white-space:nowrap}.narrow{max-width:700px;margin:0 auto}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .topbar{flex-direction:column;height:auto;padding:8px 14px;gap:7px}
  .nav-tabs{flex-wrap:wrap;justify-content:center}
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .complex-grid{grid-template-columns:1fr}
  .cmx-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .filters{flex-direction:column}
  .filters input,.filters select{width:100%}
}