/* ============================================================
   NEXASYNC — TEMA "SALA DE CONTROL"
   Reskin visual sobre la plantilla y JS existentes.
   No renombra clases ni IDs: solo redefine su aspecto.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

/* Al navegar entre paginas, el navegador funde la pagina anterior
   con la nueva en vez de cortar en seco (solo Chrome/Edge/Opera
   por ahora; en el resto de navegadores no cambia nada). */
@view-transition {
  navigation: auto;
}

:root{
  --ns-void:#0D1117;
  --ns-panel:#161B22;
  --ns-panel-alt:#1B222C;
  --ns-panel-alert:#1F1315;
  --ns-hairline:#21262D;
  --ns-signal:#3DDC97;
  --ns-signal-bg:rgba(61,220,151,0.10);
  --ns-warn:#F2B84B;
  --ns-warn-bg:rgba(242,184,75,0.12);
  --ns-critical:#E5484D;
  --ns-critical-bg:rgba(229,72,77,0.12);
  --ns-text-hi:#E6EDF3;
  --ns-text-lo:#8B949E;
  --ns-text-lo-alert:#8B6669;
  --ns-font-display:'Space Grotesk',sans-serif;
  --ns-font-body:'Inter',sans-serif;
  --ns-font-mono:'IBM Plex Mono',monospace;
}

/* ---------- base ---------- */
html{ background:var(--ns-void) !important; min-height:100%; }
body{
  background:var(--ns-void) !important;
  color:var(--ns-text-hi) !important;
  font-family:var(--ns-font-body) !important;
  min-height:100vh;
}
.page-wrapper{ background:var(--ns-void) !important; }
a{ color:var(--ns-signal); }
a:hover{ color:var(--ns-signal); opacity:.85; }

/* ---------- topbar ---------- */
#main-wrapper .topbar,
#main-wrapper .topbar .navbar,
#main-wrapper .topbar .navbar-header,
#main-wrapper .topbar .navbar-header[data-logobg],
#main-wrapper .topbar .navbar-collapse{
  background:var(--ns-panel) !important;
  border-bottom:1px solid var(--ns-hairline);
}
.navbar-header{ background:transparent !important; }
.logo-text, .navbar-brand{ display:flex; align-items:center; }
#user-name{ font-family:var(--ns-font-mono) !important; font-size:13px !important; color:var(--ns-text-lo) !important; }
.profile-pic img{ border:1px solid var(--ns-hairline); border-radius:50%; }

/* ---------- sidebar ---------- */
#main-wrapper aside.left-sidebar,
#main-wrapper .left-sidebar[data-sidebarbg],
#main-wrapper .scroll-sidebar,
#main-wrapper .sidebar-nav,
#main-wrapper .sidebar-nav ul{
  background:var(--ns-panel) !important;
  border-right:1px solid var(--ns-hairline);
}
#main-wrapper .sidebar-nav ul .sidebar-item .sidebar-link,
#main-wrapper .sidebar-nav .sidebar-link{
  color:var(--ns-text-lo) !important;
  font-family:var(--ns-font-body);
  font-size:14px;
  border-radius:8px;
  margin:2px 8px;
}
#main-wrapper .sidebar-nav ul .sidebar-item .sidebar-link i,
#main-wrapper .sidebar-nav .sidebar-link i{ color:inherit !important; }
#main-wrapper .sidebar-nav .sidebar-link:hover,
#main-wrapper .sidebar-nav .sidebar-link:focus{
  background:var(--ns-panel-alt) !important;
  color:var(--ns-text-hi) !important;
}
#main-wrapper .sidebar-nav .sidebar-item.selected > .sidebar-link,
#main-wrapper .sidebar-nav .sidebar-link.active{
  background:var(--ns-signal-bg) !important;
  color:var(--ns-signal) !important;
}

/* ---------- breadcrumb / page head ---------- */
.page-breadcrumb, .page-breadcrumb.bg-white{
  background:var(--ns-void) !important;
  border-bottom:1px solid var(--ns-hairline);
}
.page-title{
  font-family:var(--ns-font-display) !important;
  font-weight:600 !important;
  color:var(--ns-text-hi) !important;
  letter-spacing:.2px;
}
.breadcrumb, .breadcrumb li, .breadcrumb span{
  color:var(--ns-text-lo) !important;
  font-family:var(--ns-font-mono) !important;
  font-size:12px !important;
  background:transparent !important;
}

/* ---------- container / fondo general (anula imágenes de fondo antiguas) ---------- */
.container-fluid{
  background:var(--ns-void) !important;
  background-image:none !important;
}

/* ---------- footer ---------- */
.footer{
  background:var(--ns-void) !important;
  color:var(--ns-text-lo) !important;
  border-top:1px solid var(--ns-hairline);
}
.footer a{ color:var(--ns-signal); }

/* ---------- tarjetas de dispositivo (generadas por datosList.js) ---------- */
.white-box.analytics-info,
.white-box{
  background:var(--ns-panel) !important;
  border:none !important;
  border-radius:12px !important;
  position:relative;
  overflow:hidden;
  padding:16px 16px 14px 20px !important;
}
.white-box.analytics-info::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--ns-signal);
}
.white-box.analytics-info.alerta::before{ background:var(--ns-critical); }
.white-box.analytics-info.alerta{ background:var(--ns-panel-alert) !important; }

.hover-div{ border-radius:12px !important; transition:transform .15s ease, box-shadow .15s ease; }
.hover-div:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 10px 24px rgba(0,0,0,0.35) !important;
}

.box-title{
  background:transparent !important;
  color:var(--ns-text-hi) !important;
  font-family:var(--ns-font-display) !important;
  font-weight:500 !important;
  font-size:14px !important;
  padding-left:0 !important;
}

.box-title.fa, .box-title.fas, .box-title.far, .box-title.fal,
.counter.fa, .counter.fas, .counter.far, .counter.fal{
  font-family:"Font Awesome 5 Free" !important;
  font-weight:900 !important;
}
.box-title.fab, .counter.fab{
  font-family:"Font Awesome 5 Brands" !important;
  font-weight:400 !important;
}

.box-title.fa-power-off{
  margin-left:6px !important;
}

.counter{
  font-family:var(--ns-font-mono) !important;
  font-size:15px !important;
  margin-right:3px;
}
.counter.text-orange{ color:#E6EDF3 !important; }
.counter.text-purple{ color:#E6EDF3 !important; }
.counter.text-info{ color:#E6EDF3 !important; }
.counter.text-success{ color:#E6EDF3 !important; }

.two-part li{ display:flex; flex-wrap:wrap; gap:10px 14px; justify-content:flex-start !important; }
.two-part .fas, .two-part .far{ font-size:13px; color:var(--ns-text-lo) !important; margin-right:2px !important; }

.alerta{
  animation:ns-pulse 1.6s infinite !important;
  background:var(--ns-panel-alert) !important;
}
@keyframes ns-pulse{
  0%{ box-shadow:0 0 0 0 rgba(229,72,77,0.35); }
  70%{ box-shadow:0 0 0 8px rgba(229,72,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,72,77,0); }
}

/* batería / alimentación */
.fa-battery-empty.text-muted{ color:var(--ns-text-lo) !important; }
.fa-battery-three-quarters.text-primary,
.fa-battery-full.text-primary{ color:var(--ns-signal) !important; }
.text-success{ color:var(--ns-signal) !important; }
.text-danger{ color:var(--ns-critical) !important; }
.text-warning{ color:var(--ns-warn) !important; }
.text-muted{ color:var(--ns-text-lo) !important; }

/* ---------- tarjetas genéricas / configuración ---------- */
.card, .config-card{
  background:var(--ns-panel) !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:12px !important;
}
.config-card .card-header{
  background:var(--ns-panel-alt) !important;
  color:var(--ns-text-hi) !important;
  border-bottom:1px solid var(--ns-hairline) !important;
  font-family:var(--ns-font-display) !important;
  font-weight:500 !important;
}
.config-card .card-body{
  background:var(--ns-panel) !important;
  color:var(--ns-text-hi) !important;
}
.form-group label{ color:var(--ns-text-hi) !important; }
.form-group .help-text{ color:var(--ns-text-lo) !important; }
.section-divider{ border-top:1px solid var(--ns-hairline) !important; }

.form-control{
  background:var(--ns-void) !important;
  border:1px solid var(--ns-hairline) !important;
  color:var(--ns-text-hi) !important;
}
.form-control:focus{
  border-color:var(--ns-signal) !important;
  box-shadow:0 0 0 2px var(--ns-signal-bg) !important;
  background:var(--ns-void) !important;
  color:var(--ns-text-hi) !important;
}
.input-group-addon{
  background:var(--ns-panel-alt) !important;
  border:1px solid var(--ns-hairline) !important;
  color:var(--ns-text-lo) !important;
}

.btn-guardar{
  background:var(--ns-signal) !important;
  color:#04342C !important;
  border:none !important;
  border-radius:8px !important;
  font-weight:500 !important;
}
.btn-guardar:hover{ opacity:.88 !important; color:#04342C !important; }
.btn-restaurar{
  background:transparent !important;
  border:1px solid var(--ns-hairline) !important;
  color:var(--ns-text-lo) !important;
  border-radius:8px !important;
}
.btn-restaurar:hover{ background:var(--ns-panel-alt) !important; color:var(--ns-text-hi) !important; }

.badge-warning-level{ background:var(--ns-warn-bg) !important; color:var(--ns-warn) !important; }
.badge-critical-level{ background:var(--ns-critical-bg) !important; color:var(--ns-critical) !important; }

.threshold-visual{ background:var(--ns-panel-alt) !important; color:var(--ns-text-lo) !important; }
.noise-bar-wrap{ background:var(--ns-hairline) !important; }
.noise-bar-warning{ background:linear-gradient(90deg,var(--ns-signal),var(--ns-warn)) !important; }
.noise-bar-danger{ background:var(--ns-critical) !important; }

#msg-resultado.alert-success{ background:var(--ns-signal-bg) !important; color:var(--ns-signal) !important; border:1px solid var(--ns-signal); }
#msg-resultado.alert-danger{ background:var(--ns-critical-bg) !important; color:var(--ns-critical) !important; border:1px solid var(--ns-critical); }

/* ---------- tablas ---------- */
table thead{ background:var(--ns-panel-alt) !important; color:var(--ns-text-hi) !important; }
table, table td, table th{ color:var(--ns-text-hi) !important; border-color:var(--ns-hairline) !important; }
.table-striped tbody tr:nth-of-type(odd){ background:rgba(255,255,255,0.02) !important; }

/* ---------- modales ---------- */
.modal-content{
  background:var(--ns-panel) !important;
  color:var(--ns-text-hi) !important;
  border:1px solid var(--ns-hairline) !important;
}
.modal-header{ border-bottom:1px solid var(--ns-hairline) !important; }
.modal-footer{ border-top:1px solid var(--ns-hairline) !important; }
#confirmationModal, #errorModal{ background-color:rgba(0,0,0,0.6) !important; }

/* ---------- spinner ---------- */
.spinner{
  border:6px solid var(--ns-hairline) !important;
  border-top:6px solid var(--ns-signal) !important;
}

/* ---------- login ---------- */
.backstretch{ display:none !important; }
body.login-page, .top-content{
  background:var(--ns-void) !important;
}
.top-content .description, .top-content h1, .top-content h1 strong{
  color:var(--ns-text-hi) !important;
  font-family:var(--ns-font-display) !important;
}
.form-box{
  background:var(--ns-panel) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  border:1px solid var(--ns-hairline) !important;
  overflow:hidden;
}
.form-top{ background:var(--ns-panel-alt) !important; border-bottom:1px solid var(--ns-hairline) !important; }
.form-top-left h3{ color:var(--ns-text-hi) !important; font-family:var(--ns-font-display) !important; }
.form-top-right i{ color:var(--ns-signal) !important; }
.form-bottom{ background:var(--ns-panel) !important; padding:24px !important; }
.form-bottom input.form-control{
  background:var(--ns-void) !important;
  border:1px solid var(--ns-hairline) !important;
  color:var(--ns-text-hi) !important;
}
.form-bottom .btn, .login-page .btn{
  background:var(--ns-signal) !important;
  color:#04342C !important;
  border:none !important;
  font-weight:500 !important;
  border-radius:8px !important;
}
.form-bottom .btn:hover{ opacity:.88 !important; }

/* ---------- graficas (chartist) ---------- */
.ct-label{
  color:var(--ns-text-lo) !important;
  fill:var(--ns-text-lo) !important;
  opacity:1 !important;
}
.ct-grid{
  stroke:var(--ns-hairline) !important;
}

/* ---------- responsive ---------- */
@media (max-width:768px){
  .white-box.analytics-info{ padding:14px 14px 12px 18px !important; }
  .page-title{ font-size:17px !important; }
  .config-card .card-body{ padding:18px !important; }
}