/* ===========================================================
   MUGU THEME — MORE Design System v1.0

   Arquitectura:
   - Variables CSS en :root
   - Selectores con body.page-X para ganar especificidad sin !important
   - !important solo donde Bootstrap o more.css lo requieren (documentado)

   Páginas cubiertas:
   - body.page-login      → login.php
   - body.page-dashboard  → dashboard.php
   - body.page-nodestatus → nodestatus.php
   =========================================================== */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

/* ── Variables de marca ───────────────────────────────────── */
:root {
  --mugu-navy:          #1A1A2E;
  --mugu-deep-navy:     #12122A;
  --mugu-amber:         #F5A623;
  --mugu-amber-dark:    #e09920;
  --mugu-amber-darker:  #cc8a1a;
  --mugu-white:         #FFFFFF;
  --mugu-text-primary:  #E2E8F0;
  --mugu-text-sec:      #9CA3AF;
  --mugu-text-muted:    #6B7280;
  --mugu-border:        rgba(255,255,255,0.08);
  --mugu-border-light:  rgba(255,255,255,0.12);
  --mugu-ok:            #16A34A;
  --mugu-error:         #DC2626;
  --mugu-warn:          #F5A623;
  --mugu-offline:       #374151;

  --font-primary: 'Nunito', sans-serif;
  --font-data:    'Nunito', sans-serif;
}

/* ── Base compartida ──────────────────────────────────────── */
body.page-login,
body.page-dashboard,
body.page-nodestatus {
  background: var(--mugu-navy);
  color: var(--mugu-white);
}

body.page-login *,
body.page-dashboard *,
body.page-nodestatus * {
  font-family: var(--font-primary);
}


/* ===========================================================
   LOGIN — body.page-login
   Overrides: assets/css/styles.css
   =========================================================== */

/* Hide decorative background divs */
body.page-login .bg1,
body.page-login .bg2,
body.page-login .bg3,
body.page-login .bg4 { display: none; }

/* body layout — !important necesario: styles.css usa `overflow: hidden` sin !important
   pero el selector `body` tiene misma especificidad que `body.page-login` solo si
   cargara después; como styles.css carga antes, body.page-login gana por especificidad */
body.page-login {
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
@media (min-width: 768px) {
  body.page-login { height: 100vh; }
}

/* Login card */
body.page-login .login-container {
  background: var(--mugu-deep-navy);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 40px;
  width: 440px;
  max-width: 92%;
  box-shadow: none;
  /* !important necesario: styles.css media queries pisarían border-radius con 0 */
  border-radius: 16px !important;
}
@media (min-width: 768px) {
  body.page-login .login-container {
    width: 440px;
    display: block;
  }
}
@media (max-width: 768px) {
  body.page-login .login-container {
    width: 92%;
    margin: 24px auto;
  }
}

/* Wordmark */
body.page-login .more-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
body.page-login .more-wordmark .wordmark-text {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 26px;
  color: var(--mugu-white);
  letter-spacing: 2px;
}

/* Tipografía del formulario */
body.page-login h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--mugu-text-primary);
  font-size: 22px;
  margin-bottom: 6px;
}
/* !important necesario: styles.css tiene `p { color: #AAAAAA; }` con misma especificidad
   que `body.page-login p`? No — body.page-login p (0,0,1,1) > p (0,0,0,1). Sin !important. */
body.page-login p {
  color: var(--mugu-text-sec);
  font-size: 14px;
  margin-bottom: 20px;
}
body.page-login label {
  color: var(--mugu-text-sec);
  font-weight: 500;
  font-size: 13px;
}

/* Inputs */
body.page-login input[type="email"],
body.page-login input[type="password"],
body.page-login input[type="text"] {
  background: var(--mugu-navy);
  /* !important necesario: styles.css tiene `input { border: none; }` — misma especificidad
     que input[type] pero styles.css shorthand resetea el borde; aquí gana por especificidad */
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px;
  color: var(--mugu-white);
  padding: 14px 16px;
}
body.page-login input[type="email"]:focus,
body.page-login input[type="password"]:focus,
body.page-login input[type="text"]:focus {
  /* !important necesario: la regla base de arriba fija border (shorthand) con !important;
     sin esto el borde gris de reposo ganaría por capa de importancia pese a :focus */
  border-color: #F5A623 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(245,166,35,0.3);
}
body.page-login input::placeholder {
  color: #4B5563;
  opacity: 1;
}

body.page-login .password-label-row { margin-top: 16px; }
body.page-login .forgot-password {
  color: var(--mugu-amber);
  font-size: 13px;
  text-decoration: none;
}
body.page-login .forgot-password:hover { text-decoration: underline; }
body.page-login .remember-me label {
  color: var(--mugu-text-sec);
  font-size: 13px;
}

/* Botón CTA */
body.page-login button#login-btn {
  background: var(--mugu-amber);
  color: var(--mugu-navy);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  width: 100%;
  padding: 14px 26px;
  margin: 20px 0 0;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
body.page-login button#login-btn:hover {
  background: var(--mugu-amber-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,166,35,0.4);
}
body.page-login button#login-btn:active {
  background: var(--mugu-amber-darker);
  transform: translateY(0);
  box-shadow: none;
}

body.page-login button[type="submit"] {
  background: var(--mugu-amber);
  color: var(--mugu-navy);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  width: 100%;
  padding: 14px 26px;
  margin: 20px 0 0;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
body.page-login button[type="submit"]:hover {
  background: var(--mugu-amber-dark);
  cursor: pointer;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,166,35,0.4);
}
body.page-login button[type="submit"]:active {
  background: var(--mugu-amber-darker);
  transform: translateY(0);
  box-shadow: none;
}

/* Eye icon — imagen PNG oscura, invertir para dark bg */
body.page-login .eye-icon { filter: brightness(10) opacity(0.5); }

/* Alertas */
body.page-login .error-box {
  background: rgba(255,76,81,0.12);
  border: 1px solid rgba(255,76,81,0.25);
  color: #FCA5A5;
  border-radius: 8px;
}
body.page-login .error-box a { color: var(--mugu-amber); }
body.page-login .success-box {
  background: rgba(40,199,111,0.12);
  border: 1px solid rgba(40,199,111,0.25);
  color: #6EE7B7;
  border-radius: 8px;
}

/* Footer */
body.page-login .login-footer {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-primary);
  font-size: 11px;
  color: var(--mugu-text-sec);
}
body.page-login .login-footer a {
  color: var(--mugu-text-sec);
  text-decoration: none;
}


/* ===========================================================
   APP PAGES — estilos compartidos entre dashboard y nodestatus
   Overrides: assets/css/more.css + Bootstrap
   =========================================================== */

/* Body y container */
body.page-dashboard,
body.page-nodestatus {
  font-family: var(--font-primary);
}

body.page-dashboard .dashboard-container,
body.page-nodestatus .dashboard-container {
  background: transparent;
}

/* Status badges — more.css usa colores claros; body scope gana por especificidad */
body.page-dashboard .status-grey,
body.page-nodestatus .status-grey   { background: var(--mugu-offline); color: var(--mugu-text-sec); }
body.page-dashboard .status-green,
body.page-nodestatus .status-green  { background: var(--mugu-ok); color: var(--mugu-white); }
body.page-dashboard .status-red,
body.page-nodestatus .status-red    { background: var(--mugu-error); color: var(--mugu-white); }
body.page-dashboard .status-orange,
body.page-nodestatus .status-orange { background: var(--mugu-warn); color: var(--mugu-navy); }

/* Node cards — Bootstrap `.card` y more.css `.card` ambos con fondo blanco */
body.page-dashboard .card,
body.page-nodestatus .card {
  background: var(--mugu-deep-navy);
  background-color: var(--mugu-deep-navy); /* cubre Bootstrap CSS custom property */
  border: 1px solid var(--mugu-border);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
body.page-dashboard .card:hover,
body.page-nodestatus .card:hover {
  border-color: rgba(245,166,35,0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  cursor: pointer;
}

/* Card content */
body.page-dashboard .card-location,
body.page-nodestatus .card-location {
  color: var(--mugu-text-sec);
  font-family: var(--font-primary);
  font-size: 12px;
}
body.page-dashboard .card-name,
body.page-nodestatus .card-name {
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--mugu-text-primary);
}
body.page-dashboard .card-horometro,
body.page-nodestatus .card-horometro {
  color: var(--mugu-text-sec);
  font-family: var(--font-primary);
}
body.page-dashboard .card-date,
body.page-nodestatus .card-date { color: var(--mugu-text-muted); }

/* Card status badges MUGU */
body.page-dashboard .card-badge-green,
body.page-nodestatus .card-badge-green  { background: var(--mugu-ok); color: var(--mugu-white); }
body.page-dashboard .card-badge-red,
body.page-nodestatus .card-badge-red    { background: var(--mugu-error); color: var(--mugu-white); }
body.page-dashboard .card-badge-orange,
body.page-nodestatus .card-badge-orange { background: var(--mugu-amber); color: var(--mugu-navy); }
body.page-dashboard .card-badge-grey,
body.page-nodestatus .card-badge-grey   { background: #1F2937; color: var(--mugu-text-sec); }

/* Map button y location button */
body.page-dashboard .map-btn-small,
body.page-nodestatus .map-btn-small {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: var(--mugu-text-sec);
}
body.page-dashboard .map-btn-small:hover,
body.page-nodestatus .map-btn-small:hover {
  background: rgba(255,255,255,0.1);
  color: var(--mugu-white);
}
body.page-dashboard .location-btn,
body.page-nodestatus .location-btn {
  border-color: rgba(255,255,255,0.15);
  color: var(--mugu-text-sec);
  background: transparent;
}
body.page-dashboard .location-btn:hover,
body.page-nodestatus .location-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--mugu-white);
  border-color: rgba(255,255,255,0.3);
}

/* Section titles */
body.page-dashboard .section-title,
body.page-nodestatus .section-title { color: var(--mugu-text-primary); }

/* Param cards (telemetría) */
body.page-nodestatus .param-card {
  background: var(--mugu-deep-navy);
  border: 1px solid var(--mugu-border);
  box-shadow: none;
  color: var(--mugu-text-primary);
}
body.page-nodestatus .param-label {
  color: var(--mugu-text-sec);
  font-family: var(--font-primary);
}
body.page-nodestatus .param-value {
  color: var(--mugu-text-primary);
  font-family: var(--font-primary);
}
body.page-nodestatus .param-extra { color: var(--mugu-text-sec); }
body.page-nodestatus .param-alert { color: var(--mugu-amber); }

/* History */
body.page-dashboard .history-date,
body.page-nodestatus .history-date { color: var(--mugu-text-sec); }
body.page-dashboard .history-row,
body.page-nodestatus .history-row  { border-bottom-color: var(--mugu-border); }
body.page-dashboard .history-time,
body.page-nodestatus .history-time {
  color: var(--mugu-text-sec);
  font-family: var(--font-primary);
}
/* Bootstrap .text-muted usa `color: … !important` internamente */
body.page-dashboard .text-muted,
body.page-nodestatus .text-muted { color: var(--mugu-text-sec) !important; }
body.page-dashboard .history-status.green,
body.page-nodestatus .history-status.green { color: #4ade80; }
body.page-dashboard .history-status.grey,
body.page-nodestatus .history-status.grey  { color: var(--mugu-text-muted); }
body.page-dashboard .history-status.blue,
body.page-nodestatus .history-status.blue  { color: #60A5FA; }


/* ===========================================================
   DASHBOARD — body.page-dashboard
   =========================================================== */

/* Body y container */
body.page-dashboard .dashboard-container { padding-top: 0; }

/* Header full-bleed */
body.page-dashboard .header {
  background: var(--mugu-deep-navy);
  border-bottom: 1px solid var(--mugu-border);
  padding: 16px 8px 14px;
  margin: 0 -8px 20px -8px;
}
@media (min-width: 800px) {
  body.page-dashboard .header {
    padding-left: 8em;
    padding-right: 8em;
    margin-left: -8em;
    margin-right: -8em;
  }
}

body.page-dashboard .greeting { color: var(--mugu-text-sec); }
body.page-dashboard .user-name {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--mugu-text-primary);
}
body.page-dashboard .icon-btn { background: none; }
body.page-dashboard .icon-btn:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: none;
}
/* Imagen PNG de logout oscura — invertir para dark bg */
body.page-dashboard .icon-btn img { filter: brightness(0) invert(1) opacity(0.5); }

/* Buscador */
body.page-dashboard .search-bar {
  background: var(--mugu-deep-navy);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: none;
}
body.page-dashboard .search-input {
  background: transparent;
  color: var(--mugu-white);
}
body.page-dashboard .search-input::placeholder { color: #4B5563; opacity: 1; }
/* Imagen PNG de lupa oscura — invertir */
body.page-dashboard .search-icon-left { filter: brightness(0) invert(1) opacity(0.5); }

/* Tabs categoría
   !important en background necesario: more.css tiene `.tab-categoria { background: #ffffff; }`
   y el selector body.page-dashboard .dashboard-container .tab-categoria (0,0,3,1)
   debería ganar, pero se mantiene !important por historial de conflictos verificados */
body.page-dashboard .dashboard-container .tab-categoria,
body.page-dashboard .tabs-categorias .tab-categoria {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--mugu-text-sec);
}
body.page-dashboard .tabs-categorias .tab-categoria p { color: var(--mugu-text-sec); }
/* Imagen SVG de categoría — invertir para visible en dark */
body.page-dashboard .tabs-categorias .tab-categoria img {
  filter: brightness(0) invert(1) opacity(0.4);
}
body.page-dashboard .dashboard-container .tab-categoria.active,
body.page-dashboard .tabs-categorias .tab-categoria.active {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--mugu-amber);
  color: var(--mugu-white);
}
body.page-dashboard .tabs-categorias .tab-categoria.active p { color: var(--mugu-white); }
body.page-dashboard .tabs-categorias .tab-categoria.active img {
  filter: brightness(0) invert(1);
}

/* Tabs estado */
body.page-dashboard .tabs-estado { border-bottom: none; margin-bottom: 16px; }
body.page-dashboard .tabs-estado .tab {
  background: var(--mugu-deep-navy);
  border: 1px solid var(--mugu-border-light);
  border-radius: 8px;
  color: var(--mugu-text-sec);
  padding: 8px 16px;
  box-shadow: none;
}
body.page-dashboard .tabs-estado .tab.active {
  background: transparent;
  background-color: transparent;
  border: 1px solid var(--mugu-amber);
  color: var(--mugu-amber);
  box-shadow: none;
}

/* Tab badges */
body.page-dashboard .tab-badge-danger  { background: var(--mugu-error); color: var(--mugu-white); }
body.page-dashboard .tab-badge-warning { background: var(--mugu-warn);  color: var(--mugu-navy); }
body.page-dashboard .tab-badge-ok      { background: var(--mugu-ok);    color: var(--mugu-white); }
body.page-dashboard .tabs-estado .tab.active .tab-badge-danger  { background: rgba(255,255,255,0.15); color: var(--mugu-white); }
body.page-dashboard .tabs-estado .tab.active .tab-badge-warning { background: rgba(255,255,255,0.15); color: var(--mugu-navy); }
body.page-dashboard .tabs-estado .tab.active .tab-badge-ok      { background: rgba(255,255,255,0.15); color: var(--mugu-white); }

/* Tab hover */
body.page-dashboard .tab,
body.page-dashboard .tab-categoria {
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
body.page-dashboard .tab:hover,
body.page-dashboard .tab-categoria:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,166,35,0.15);
}
body.page-dashboard .tab:active,
body.page-dashboard .tab-categoria:active {
  transform: translateY(0);
  box-shadow: none;
}


/* ===========================================================
   NODE STATUS — body.page-nodestatus
   =========================================================== */

/* Back button */
body.page-nodestatus .back-btn {
  background-color: var(--mugu-deep-navy);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* Imagen PNG de flecha oscura — invertir */
body.page-nodestatus .back-btn img { filter: brightness(0) invert(1) opacity(0.7); }

/* Node header */
body.page-nodestatus .node-label {
  color: var(--mugu-amber);
  font-size: 12px;
  letter-spacing: 1px;
}
body.page-nodestatus .node-title {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--mugu-text-primary);
}
body.page-nodestatus .node-desc { color: var(--mugu-text-sec); }

/* Nodestatus badges */
body.page-nodestatus .nodestatus.grey  { background: var(--mugu-offline); color: var(--mugu-text-sec); }
body.page-nodestatus .nodestatus.green { background: var(--mugu-ok); }
body.page-nodestatus .nodestatus.red   { background: var(--mugu-error); }

/* Switch card */
body.page-nodestatus .node-status-switch {
  background: var(--mugu-deep-navy);
  border: 1px solid var(--mugu-border);
  box-shadow: none;
}
body.page-nodestatus .switch-label { color: var(--mugu-text-primary); }
body.page-nodestatus .slider { background-color: var(--mugu-offline); }
body.page-nodestatus .switch input:checked + .slider { background-color: var(--mugu-amber); }

/* Estado panel (TTA) */
body.page-nodestatus .estado-panel {
  background: var(--mugu-deep-navy);
  border: 1px solid var(--mugu-border);
  box-shadow: none;
}
body.page-nodestatus .estado-titulo { color: var(--mugu-text-sec); font-size: 14px; }
body.page-nodestatus .estado-sep   { background: var(--mugu-border); }

/* Mark done button */
body.page-nodestatus .mark-done-btn {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  color: var(--mugu-text-sec);
}
body.page-nodestatus .mark-done-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--mugu-white);
  border-color: rgba(255,255,255,0.4);
}

/* Alerta combustible */
body.page-nodestatus .alerta-combustible {
  background: rgba(245,166,35,0.12);
  color: var(--mugu-amber);
}

/* APR cards */
body.page-nodestatus .apr-estado-card {
  background: var(--mugu-deep-navy);
  border-color: var(--mugu-border);
  box-shadow: none;
}
body.page-nodestatus .apr-estado-label { color: var(--mugu-text-sec); }
body.page-nodestatus .apr-bomba-card {
  background: var(--mugu-deep-navy);
  border-color: var(--mugu-border);
}
body.page-nodestatus .apr-bomba-header {
  background: rgba(255,255,255,0.04);
  border-bottom-color: var(--mugu-border);
  color: var(--mugu-text-primary);
}
body.page-nodestatus .apr-bomba-row   { border-bottom-color: rgba(255,255,255,0.06); }
body.page-nodestatus .apr-bomba-row-label { color: var(--mugu-text-sec); }
body.page-nodestatus .apr-bomba-row-value { color: var(--mugu-text-primary); }
body.page-nodestatus .apr-badge-off   { background: #1F2937; color: var(--mugu-text-muted); }
body.page-nodestatus .apr-badge-ok    {
  background: rgba(22,163,74,0.12);
  border-color: var(--mugu-ok);
  color: #4ade80;
}

/* SmartGen badges y barras */
body.page-nodestatus .sg-badge-red    { background: rgba(220,38,38,0.12);  color: #FCA5A5; border-color: rgba(220,38,38,0.3); }
body.page-nodestatus .sg-badge-orange { background: rgba(245,166,35,0.12); color: var(--mugu-amber); border-color: rgba(245,166,35,0.3); }
body.page-nodestatus .sg-badge-green  { background: rgba(22,163,74,0.12);  color: #4ade80; border-color: rgba(22,163,74,0.3); }
body.page-nodestatus .sg-badge-grey   { background: rgba(255,255,255,0.06); color: var(--mugu-text-sec); border-color: rgba(255,255,255,0.1); }
body.page-nodestatus .sg-bar-track    { background: rgba(255,255,255,0.08); }
body.page-nodestatus .sg-bar-label    { color: var(--mugu-text-sec); }

/* Modales */
body.page-nodestatus .modal-maint { background: rgba(0,0,0,0.65); }
body.page-nodestatus .modal-maint-content {
  background: var(--mugu-deep-navy);
  border: 1px solid var(--mugu-border);
  box-shadow: 0 8px 36px rgba(0,0,0,0.5);
}
body.page-nodestatus .modal-maint-title { color: var(--mugu-text-primary); }
body.page-nodestatus .modal-maint-desc  { color: var(--mugu-text-sec); }
body.page-nodestatus .modal-maint-desc .bold { color: var(--mugu-text-primary); }
body.page-nodestatus .modal-maint-close:hover { background: rgba(255,255,255,0.06); }
body.page-nodestatus .modal-maint-action {
  background: var(--mugu-amber);
  color: var(--mugu-navy);
  font-family: var(--font-primary);
  font-weight: 700;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
body.page-nodestatus .modal-maint-action:hover {
  background: var(--mugu-amber-dark);
  color: var(--mugu-navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,166,35,0.4);
}
body.page-nodestatus .modal-maint-action:active {
  background: var(--mugu-amber-darker);
  transform: translateY(0);
  box-shadow: none;
}

/* ============================================================
   Respaldo Eléctrico (category=1): ATS + Red + Grupo Generador + UPS
   ============================================================ */
body.page-nodestatus .re-wrap { margin-top: 8px; font-family: var(--font-primary, 'Nunito', sans-serif); }
body.page-nodestatus .re-sec-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  border: 0.5px solid rgba(255,255,255,0.08);
  border-bottom: none;
  background: #1A1A2E;
}
body.page-nodestatus .re-sec-icon { font-size: 14px; color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .re-sec-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mugu-text-sec, #9CA3AF);
}
body.page-nodestatus .re-sec-header-right { margin-left: auto; }
body.page-nodestatus .re-sec-body {
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 0 0 12px 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: #1E1E36;
  color: var(--mugu-text-primary, #E2E8F0);
}
body.page-nodestatus .re-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
body.page-nodestatus .re-pill-ok    { background: rgba(16,185,129,0.15); color: #10B981; }
body.page-nodestatus .re-pill-fail  { background: rgba(239,68,68,0.15);  color: #EF4444; }
body.page-nodestatus .re-pill-warn  { background: rgba(245,166,35,0.15); color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .re-pill-idle  { background: rgba(156,163,175,0.10); color: var(--mugu-text-sec, #9CA3AF); border: 0.5px solid rgba(156,163,175,0.2); }
body.page-nodestatus .re-pill-amber { background: rgba(245,166,35,0.20); color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .re-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
body.page-nodestatus .re-dot-ok   { background: #10B981; }
body.page-nodestatus .re-dot-fail { background: #EF4444; }
body.page-nodestatus .re-dot-warn { background: var(--mugu-amber, #F5A623); }
body.page-nodestatus .re-dot-idle { background: var(--mugu-text-sec, #9CA3AF); }
body.page-nodestatus .re-mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
body.page-nodestatus .re-mc {
  background: var(--mugu-deep-navy, #12122A); border-radius: 8px; padding: 10px 12px;
  border: 0.5px solid rgba(255,255,255,0.06);
}
body.page-nodestatus .re-ml { font-size: 10px; color: var(--mugu-text-sec, #9CA3AF); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; font-weight: 700; }
body.page-nodestatus .re-mv { font-size: 18px; font-weight: 700; color: var(--mugu-text-primary, #E2E8F0); line-height: 1.2; }
body.page-nodestatus .re-mu { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); font-weight: 400; }
body.page-nodestatus .re-mv.re-mna { color: var(--mugu-text-sec, #9CA3AF); font-size: 15px; font-weight: 700; }
body.page-nodestatus .re-divider { height: 0.5px; background: rgba(255,255,255,0.08); margin: 12px 0; }

body.page-nodestatus .re-ats-hero { display: flex; align-items: center; gap: 0; margin: 4px 0; flex-wrap: wrap; }
body.page-nodestatus .re-ats-source {
  flex: 1; text-align: center; padding: 14px 8px; min-width: 90px;
  border-radius: 8px; border: 0.5px solid rgba(255,255,255,0.08);
  background: var(--mugu-deep-navy, #12122A);
}
body.page-nodestatus .re-ats-source.active { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); }
body.page-nodestatus .re-ats-source.inactive { opacity: 0.4; }
body.page-nodestatus .re-ats-icon-wrap { margin-bottom: 5px; font-size: 18px; }
body.page-nodestatus .re-ats-src-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
body.page-nodestatus .re-ats-src-label.active { color: #10B981; }
body.page-nodestatus .re-ats-src-label.inactive { color: var(--mugu-text-sec, #9CA3AF); }
body.page-nodestatus .re-ats-src-sub { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); margin-top: 3px; }
body.page-nodestatus .re-ats-arrow { display: flex; align-items: center; padding: 0 10px; color: var(--mugu-text-sec, #9CA3AF); flex-shrink: 0; font-size: 16px; }
body.page-nodestatus .re-ats-load {
  flex: 0.8; text-align: center; padding: 14px 8px; min-width: 80px;
  border-radius: 8px;
  background: rgba(245,166,35,0.12);
  border: 0.5px solid rgba(245,166,35,0.3);
}
body.page-nodestatus .re-ats-load-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .re-ats-load-sub { font-size: 11px; color: rgba(245,166,35,0.7); margin-top: 3px; }

body.page-nodestatus .re-modo-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
body.page-nodestatus .re-modo-label { font-size: 12px; color: var(--mugu-text-sec, #9CA3AF); }

body.page-nodestatus .re-ctrl-title { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
body.page-nodestatus .re-ctrl-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
body.page-nodestatus .re-ctrl-btn {
  flex: 1; min-width: 60px; padding: 7px 4px;
  border-radius: 8px;
  border: 0.5px solid rgba(255,255,255,0.12);
  background: var(--mugu-deep-navy, #12122A); color: var(--mugu-text-sec, #9CA3AF);
  font-size: 12px; font-weight: 700; cursor: pointer; text-align: center;
  font-family: var(--font-primary, 'Nunito', sans-serif);
}
body.page-nodestatus .re-ctrl-btn.active {
  border-color: rgba(245,166,35,0.5);
  background: rgba(245,166,35,0.12);
  color: var(--mugu-amber, #F5A623);
}
body.page-nodestatus .re-ctrl-action-row { display: flex; gap: 6px; margin-top: 8px; }
body.page-nodestatus .re-ctrl-action {
  flex: 1; padding: 8px 0;
  border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: center; font-family: var(--font-primary, 'Nunito', sans-serif);
}
body.page-nodestatus .re-ctrl-start { background: rgba(16,185,129,0.15); color: #10B981; border: 0.5px solid rgba(16,185,129,0.3); }
body.page-nodestatus .re-ctrl-stop  { background: rgba(239,68,68,0.15);  color: #EF4444;  border: 0.5px solid rgba(239,68,68,0.3); }

body.page-nodestatus .re-ups-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.page-nodestatus .re-ups-card {
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 12px;
  background: var(--mugu-deep-navy, #12122A);
}
body.page-nodestatus .re-ups-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
body.page-nodestatus .re-ups-card-title { font-size: 12px; font-weight: 700; color: var(--mugu-text-primary, #E2E8F0); line-height: 1.3; }
body.page-nodestatus .re-ups-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.page-nodestatus .re-ups-metrics .re-mc { background: #1A1A2E; border-radius: 6px; padding: 7px 10px; border: 0.5px solid rgba(255,255,255,0.05); }
body.page-nodestatus .re-ups-empty { font-size: 12px; color: var(--mugu-text-sec, #9CA3AF); text-align: center; padding: 12px 0; }

@media (max-width: 560px) {
  body.page-nodestatus .re-ups-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Climatización Gree U-Match (category=2): .cl-*
   Reutiliza al máximo .re-sec-header/.re-sec-body/.re-pill/.re-dot/
   .re-mgrid/.re-mc/.re-ml/.re-mv/.re-mu/.re-divider/.re-ctrl-title
   ============================================================ */
body.page-nodestatus .cl-hero-row { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
body.page-nodestatus .cl-hero-label { font-size: 10px; color: var(--mugu-text-sec, #9CA3AF); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
body.page-nodestatus .cl-hero-value { display: flex; align-items: baseline; gap: 4px; font-size: 48px; font-weight: 800; color: var(--mugu-text-primary, #E2E8F0); line-height: 1; }
body.page-nodestatus .cl-hero-unit { font-size: 20px; color: var(--mugu-text-sec, #9CA3AF); font-weight: 400; }
body.page-nodestatus .cl-hero-pills { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
body.page-nodestatus .cl-hero-pill-row { display: flex; align-items: center; gap: 8px; }
body.page-nodestatus .cl-hero-pill-label { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); min-width: 50px; }

body.page-nodestatus .cl-mv-warn { color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .cl-mv-text { font-size: 14px; }

body.page-nodestatus .cl-ctrl-disabled { opacity: 0.5; pointer-events: none; }

body.page-nodestatus .cl-toggle-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
body.page-nodestatus .cl-toggle-label { font-size: 13px; font-weight: 700; color: var(--mugu-text-primary, #E2E8F0); }

body.page-nodestatus .cl-ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
body.page-nodestatus .cl-fan-block { margin-top: 12px; }

body.page-nodestatus .cl-sp-row { display: flex; align-items: center; gap: 12px; }
body.page-nodestatus .cl-sp-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--mugu-deep-navy, #12122A); border: 0.5px solid rgba(255,255,255,0.12);
  color: var(--mugu-text-sec, #9CA3AF); font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: var(--font-primary, 'Nunito', sans-serif);
}
body.page-nodestatus .cl-sp-center { text-align: center; }
body.page-nodestatus .cl-sp-value { font-size: 24px; font-weight: 800; color: var(--mugu-amber, #F5A623); min-width: 60px; }
body.page-nodestatus .cl-sp-label { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); margin-top: 2px; }

body.page-nodestatus .cl-chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
body.page-nodestatus .cl-chip {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.12);
  background: var(--mugu-deep-navy, #12122A); color: var(--mugu-text-sec, #9CA3AF);
  font-family: var(--font-primary, 'Nunito', sans-serif);
}
body.page-nodestatus .cl-chip-active { border-color: rgba(245,166,35,0.5); background: rgba(245,166,35,0.12); color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .cl-chip-active-blue { border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.1); color: #60A5FA; }

body.page-nodestatus .cl-equipo-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
body.page-nodestatus .cl-equipo-row:last-child { border-bottom: none; }
body.page-nodestatus .cl-equipo-nombre { font-size: 13px; font-weight: 700; color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .cl-equipo-sub { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); margin-top: 2px; }

@media (max-width: 560px) {
  body.page-nodestatus .cl-ctrl-grid { grid-template-columns: 1fr; }
  body.page-nodestatus .cl-hero-row { gap: 12px; }
}

/* ============================================================
   Historial de eventos (category=1,2): .he-*
   ============================================================ */
body.page-nodestatus .historial-electrico-section {
  background: #1E1E36;
  border-radius: 16px;
  padding: 16px;
  margin: 24px 0;
  font-family: var(--font-primary, 'Nunito', sans-serif);
  color: var(--mugu-text-primary, #E2E8F0);
}
body.page-nodestatus .he-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
body.page-nodestatus .he-header-title { display: flex; align-items: center; gap: 10px; }
body.page-nodestatus .he-header-title i { color: var(--mugu-amber, #F5A623); font-size: 22px; }
body.page-nodestatus .he-header-title h4 { margin: 0; font-size: 18px; font-weight: 800; color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .he-pill-estado { padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; background: #2A2A45; color: var(--mugu-text-sec, #9CA3AF); }
body.page-nodestatus .he-pill-falla { background: #FF4C51; color: #fff; }
body.page-nodestatus .he-pill-alarma { background: var(--mugu-amber, #F5A623); color: #1A1A2E; }
body.page-nodestatus .he-pill-evento { background: #3B82F6; color: #fff; }
body.page-nodestatus .he-pill-normalizacion { background: #28C76F; color: #fff; }
body.page-nodestatus .he-pill-neutro { background: #2A2A45; color: var(--mugu-text-sec, #9CA3AF); }
body.page-nodestatus .he-filtros { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
body.page-nodestatus .he-filtro-fechas { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
body.page-nodestatus .he-filtro-fechas label { display: flex; flex-direction: column; font-size: 12px; color: var(--mugu-text-sec, #9CA3AF); gap: 4px; }
body.page-nodestatus .he-filtro-fechas input[type="date"] {
  background: var(--mugu-deep-navy, #12122A);
  border: 1px solid #33335A;
  color: var(--mugu-text-primary, #E2E8F0);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
}
body.page-nodestatus .he-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
body.page-nodestatus .he-btn-aplicar { background: var(--mugu-amber, #F5A623); color: #1A1A2E; }
body.page-nodestatus .he-btn-aplicar:hover { background: var(--mugu-amber-dark, #e09920); }
body.page-nodestatus .he-btn-pdf { background: var(--mugu-deep-navy, #12122A); color: var(--mugu-text-primary, #E2E8F0); border: 1px solid #33335A; }
body.page-nodestatus .he-btn-pdf:hover { border-color: var(--mugu-amber, #F5A623); color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .he-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
body.page-nodestatus .he-chip {
  background: var(--mugu-deep-navy, #12122A);
  border: 1px solid #33335A;
  color: var(--mugu-text-sec, #9CA3AF);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
body.page-nodestatus .he-chip-falla.is-active { background: #FF4C51; color: #fff; border-color: #FF4C51; }
body.page-nodestatus .he-chip-alarma.is-active { background: var(--mugu-amber, #F5A623); color: #1A1A2E; border-color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .he-chip-evento.is-active { background: #3B82F6; color: #fff; border-color: #3B82F6; }
body.page-nodestatus .he-chip-normalizacion.is-active { background: #28C76F; color: #fff; border-color: #28C76F; }
body.page-nodestatus .he-chip-todos.is-active { background: var(--mugu-text-primary, #E2E8F0); color: #1A1A2E; border-color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .he-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 24px; }
body.page-nodestatus .he-card { background: var(--mugu-deep-navy, #12122A); border-radius: 12px; padding: 16px; text-align: center; border-left: 4px solid transparent; }
body.page-nodestatus .he-card-falla { border-left-color: #FF4C51; }
body.page-nodestatus .he-card-alarma { border-left-color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .he-card-evento { border-left-color: #3B82F6; }
body.page-nodestatus .he-card-normalizacion { border-left-color: #28C76F; }
body.page-nodestatus .he-card-valor { font-size: 24px; font-weight: 800; color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .he-card-label { font-size: 12px; color: var(--mugu-text-sec, #9CA3AF); margin-top: 4px; }
body.page-nodestatus .he-tabla-wrap { overflow-x: auto; background: var(--mugu-deep-navy, #12122A); border-radius: 12px; margin-bottom: 16px; }
body.page-nodestatus .he-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
body.page-nodestatus .he-tabla th { text-align: left; padding: 12px 16px; color: var(--mugu-text-sec, #9CA3AF); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #26264A; white-space: nowrap; }
body.page-nodestatus .he-tabla td { padding: 12px 16px; color: var(--mugu-text-primary, #E2E8F0); border-bottom: 1px solid #22223F; }
body.page-nodestatus .he-tabla tr:last-child td { border-bottom: none; }
body.page-nodestatus .he-tabla-msg { text-align: center; color: var(--mugu-text-sec, #9CA3AF); padding: 24px !important; }
body.page-nodestatus .he-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; white-space: nowrap; }
body.page-nodestatus .he-badge-falla { background: rgba(255, 76, 81, 0.15); color: #FF4C51; }
body.page-nodestatus .he-badge-alarma { background: rgba(245, 166, 35, 0.15); color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .he-badge-evento { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
body.page-nodestatus .he-badge-normalizacion { background: rgba(40, 199, 111, 0.15); color: #28C76F; }
body.page-nodestatus .he-paginacion { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mugu-text-sec, #9CA3AF); flex-wrap: wrap; gap: 8px; }
body.page-nodestatus .he-btn-pag { background: var(--mugu-deep-navy, #12122A); color: var(--mugu-text-primary, #E2E8F0); border: 1px solid #33335A; }
body.page-nodestatus .he-btn-pag:hover:not(:disabled) { border-color: var(--mugu-amber, #F5A623); color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .he-btn-pag:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 560px) {
  body.page-nodestatus .he-filtros, body.page-nodestatus .he-filtro-fechas { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Vista gerencial v2 — Impacto financiero (category=1): .gf-*
   UPS + Grupo generador + Consolidado, selector de período
   ============================================================ */
body.page-nodestatus .gf-section {
  background: #1E1E36;
  border-radius: 16px;
  padding: 16px;
  margin: 24px 0;
  font-family: var(--font-primary, 'Nunito', sans-serif);
  color: var(--mugu-text-primary, #E2E8F0);
}
body.page-nodestatus .gf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
body.page-nodestatus .gf-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.page-nodestatus .gf-header-title { display: flex; align-items: center; gap: 10px; }
body.page-nodestatus .gf-header-title i { color: var(--mugu-amber, #F5A623); font-size: 22px; }
body.page-nodestatus .gf-header-title h4 { margin: 0; font-size: 18px; font-weight: 800; color: var(--mugu-text-primary, #E2E8F0); }

body.page-nodestatus .gf-period-selector {
  background: var(--mugu-deep-navy, #12122A);
  border: 1px solid rgba(245,166,35,0.4);
  border-radius: 8px;
  padding: 6px 32px 6px 14px;
  color: var(--mugu-amber, #F5A623);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-primary, 'Nunito', sans-serif);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F5A623' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
body.page-nodestatus .gf-period-selector:focus { outline: none; border-color: var(--mugu-amber, #F5A623); }

body.page-nodestatus .gf-sec-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px 8px 0 0; border: 1px solid rgba(255,255,255,0.08); border-bottom: none; background: #1A1A2E; margin-top: 18px; }
body.page-nodestatus .gf-sec-header:first-of-type { margin-top: 0; }
body.page-nodestatus .gf-sec-header i { font-size: 14px; color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .gf-sec-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mugu-text-sec, #9CA3AF); }
body.page-nodestatus .gf-sec-pill { margin-left: auto; }
body.page-nodestatus .gf-sec-body { border: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 12px 12px; padding: 16px; background: var(--mugu-deep-navy, #12122A); }

body.page-nodestatus .gf-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 14px 0; }

body.page-nodestatus .gf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
body.page-nodestatus .gf-pill-ok     { background: rgba(40, 199, 111, 0.15); color: #28C76F; }
body.page-nodestatus .gf-pill-warn   { background: rgba(245, 166, 35, 0.15); color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .gf-pill-danger { background: rgba(255, 76, 81, 0.15); color: #FF4C51; }
body.page-nodestatus .gf-pill-gray   { background: rgba(156, 163, 175, 0.12); color: var(--mugu-text-sec, #9CA3AF); border: 1px solid rgba(156, 163, 175, 0.2); }

body.page-nodestatus .gf-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
body.page-nodestatus .gf-kpi-card { background: #1E1E36; border-radius: 10px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.06); }
body.page-nodestatus .gf-kpi-label { font-size: 10px; color: var(--mugu-text-sec, #9CA3AF); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 5px; }
body.page-nodestatus .gf-kpi-valor { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .gf-kpi-sub { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); margin-top: 4px; }
body.page-nodestatus .gf-kpi-valor-ok     { color: #28C76F; }
body.page-nodestatus .gf-kpi-valor-warn   { color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .gf-kpi-valor-danger { color: #FF4C51; }

body.page-nodestatus .gf-ups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
body.page-nodestatus .gf-ups-card { background: #1E1E36; border-radius: 10px; padding: 14px; border: 1px solid rgba(255,255,255,0.06); }
body.page-nodestatus .gf-ups-card.gf-ups-card-warn { border-color: rgba(245,166,35,0.25); }
body.page-nodestatus .gf-ups-card.gf-ups-card-danger { border-color: rgba(255,76,81,0.3); }
body.page-nodestatus .gf-ups-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
body.page-nodestatus .gf-ups-name { font-size: 12px; font-weight: 700; color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .gf-ups-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.page-nodestatus .gf-ups-m { background: var(--mugu-deep-navy, #12122A); border-radius: 8px; padding: 8px 10px; }
body.page-nodestatus .gf-ups-ml { font-size: 10px; color: var(--mugu-text-sec, #9CA3AF); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
body.page-nodestatus .gf-ups-mv { font-size: 14px; font-weight: 700; color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .gf-ups-mv-ok     { color: #28C76F; }
body.page-nodestatus .gf-ups-mv-warn   { color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .gf-ups-mv-danger { color: #FF4C51; }
body.page-nodestatus .gf-ups-empty { color: var(--mugu-text-sec, #9CA3AF); font-size: 13px; padding: 12px 0; }

body.page-nodestatus .gf-disponibilidad-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
body.page-nodestatus .gf-disponibilidad-label { font-size: 12px; color: var(--mugu-text-sec, #9CA3AF); font-weight: 700; white-space: nowrap; }
body.page-nodestatus .gf-bar-track { background: rgba(255,255,255,0.08); border-radius: 8px; height: 10px; overflow: hidden; flex: 1; }
body.page-nodestatus .gf-bar-fill { height: 100%; border-radius: 8px; transition: width 0.3s; }
body.page-nodestatus .gf-bar-fill.gf-bar-ok   { background: #28C76F; }
body.page-nodestatus .gf-bar-fill.gf-bar-warn { background: var(--mugu-amber, #F5A623); }
body.page-nodestatus .gf-bar-fill.gf-bar-fail { background: #FF4C51; }
body.page-nodestatus .gf-disponibilidad-pct { font-size: 18px; font-weight: 800; color: var(--mugu-text-primary, #E2E8F0); min-width: 60px; text-align: right; }
body.page-nodestatus .gf-disponibilidad-texto { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); }

body.page-nodestatus .gf-consolidado-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
body.page-nodestatus .gf-c-kpi { background: #1E1E36; border-radius: 10px; padding: 14px; border: 1px solid rgba(255,255,255,0.06); text-align: center; }
body.page-nodestatus .gf-c-kpi-label { font-size: 10px; font-weight: 700; color: var(--mugu-text-sec, #9CA3AF); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
body.page-nodestatus .gf-c-kpi-value { font-size: 22px; font-weight: 800; color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .gf-c-kpi-sub { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); margin-top: 4px; }

body.page-nodestatus .gf-semaforo-label { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
body.page-nodestatus .gf-semaforo { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
body.page-nodestatus .gf-sem-item { flex: 1; min-width: 110px; background: #1E1E36; border-radius: 10px; padding: 12px; border: 1px solid rgba(255,255,255,0.06); text-align: center; }
body.page-nodestatus .gf-sem-icon { font-size: 20px; margin-bottom: 6px; }
body.page-nodestatus .gf-sem-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mugu-text-primary, #E2E8F0); }
body.page-nodestatus .gf-sem-sub { font-size: 11px; color: var(--mugu-text-sec, #9CA3AF); margin-top: 3px; }

body.page-nodestatus .gf-banner-accion { margin-top: 14px; padding: 10px 14px; background: #1E1E36; border-radius: 8px; border: 1px solid rgba(245,166,35,0.2); font-size: 12px; color: var(--mugu-amber, #F5A623); }
body.page-nodestatus .gf-banner-accion.gf-banner-critico { border-color: rgba(255,76,81,0.3); color: #FF4C51; }
body.page-nodestatus .gf-banner-accion i { font-size: 13px; vertical-align: -2px; margin-right: 6px; }

@media (max-width: 560px) {
  body.page-nodestatus .gf-ups-metrics { grid-template-columns: 1fr; }
  body.page-nodestatus .gf-disponibilidad-row { flex-wrap: wrap; }
}