/*
 * GPON Manager — Estilos globales
 * Variables CSS y clases compartidas por todos los módulos.
 * Importado en base.html via <link>.
 * NO agregar estilos específicos de módulo acá.
 */

:root{
  --bg:#0f1117;--bg2:#1a1d27;--bg3:#22263a;--bd:#2e3352;--bd2:#3d4370;
  --tx:#e8eaf6;--tx2:#9098c0;--tx3:#5c6494;
  --green:#22c55e;--gbg:#0d2818;--gbd:#166534;
  --red:#ef4444;--rbg:#1c0a0a;--rbd:#7f1d1d;
  --blue:#3b82f6;--accent:#6366f1;--bg-accent:rgba(99,102,241,.14);--amber:#f59e0b;--abg:#2a1a00;--abd:#78350f;
  --cyan:#22d3ee;--indigo:#818cf8;--purple:#c084fc;
  --r:8px;font-family:system-ui,sans-serif;
  --text-muted: #898781;
  --glow-ok:    0 0 8px rgba(12,163,12,0.45);
  --glow-blue:  0 0 8px rgba(59,130,246,0.40);
  --glow-red:   0 0 8px rgba(239,68,68,0.40);
  --transition-std: all 0.3s ease;
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.50),
                       0 0 0 1px rgba(91, 108, 249, 0.12);
  --shadow-card-selected: 0 0 0 1px rgba(91, 108, 249, 0.50),
                          0 0 16px rgba(91, 108, 249, 0.25),
                          0 6px 20px rgba(0, 0, 0, 0.50);
}

/* ══ Sidebar — acordeón (ver CLAUDE.md sección 11) ══════════════════════ */
.sb-group { margin-bottom: 2px; }
.sb-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 1rem;
  cursor: pointer;
  transition: background .1s;
}
.sb-group-header:hover { background: var(--bg3); }
.sb-group-title { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tx2); }
.sb-group-header:hover .sb-group-title,
.sb-group-header.open .sb-group-title { color: var(--tx); }
.sb-group-title i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.sb-chevron { color: var(--tx3); transition: transform .3s ease; font-size: 13px; }
.sb-group-header.open .sb-chevron { transform: rotate(180deg); }
.sb-group-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.sb-group-body.open { max-height: 500px; }

/* Íconos por módulo — colores fijos, no cambiar sin actualizar CLAUDE.md */
.sb-ic-cyan   { color: var(--cyan); }
.sb-ic-indigo { color: var(--indigo); }
.sb-ic-purple { color: var(--purple); }
.sb-ic-amber  { color: var(--amber); }
.sb-ic-green  { color: var(--green); }
.sb-ic-muted  { color: var(--tx2); }

/* Separador entre bloques (antes de Sistema) */
.sb-divisor { height: 1px; background: var(--bd2); margin: 6px 1rem; }

/* Submenú independiente (ej: Herramientas dentro de Sistema) */
.sb-subgroup { margin-top: 2px; }
.sb-subgroup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 1rem 6px 2.1rem;
  font-size: 12px;
  color: var(--tx3);
  cursor: pointer;
  transition: color .1s;
}
.sb-subgroup-header:hover, .sb-subgroup-header.open { color: var(--tx2); }
.sb-subchevron { font-size: 11px; transition: transform .3s ease; }
.sb-subgroup-header.open .sb-subchevron { transform: rotate(90deg); }
.sb-subgroup-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.sb-subgroup-body.open { max-height: 300px; }
.sb-subgroup-body .sp-row { padding-left: 2.6rem; }

/* Ítem activo (marcado por JS al cargar la página) */
.sp-row.sb-active { background: var(--bg3); }
.sp-row.sb-active .sp-label { color: var(--tx); }

/* Ítem deshabilitado (placeholder "próximamente") */
.sb-disabled {
  opacity: .35;
  pointer-events: none;
  cursor: default;
}

/* Grupo Legacy — visualmente tenue */
.sb-legacy-header { opacity: .55; }
.sb-legacy-header:hover, .sb-legacy-header.open { opacity: .85; }
.sb-legacy-item { opacity: .55; }
.sb-legacy-item:hover, .sb-legacy-item.on { opacity: .85; }

/* ══ Paginador server-side (static/js/paginacion.js) ══════════════════ */
.pag-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  gap: 8px;
  flex-wrap: wrap;
}
.pag-info {
  font-size: 0.82rem;
  color: var(--tx3);
}
.pag-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.pag-btn {
  background: var(--bg2);
  border: 1px solid var(--bd);
  color: var(--tx2);
  border-radius: var(--r);
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition-std);
}
.pag-btn:hover:not(:disabled) {
  background: var(--bg3);
  color: var(--tx);
}
.pag-btn:disabled {
  opacity: .4;
  cursor: default;
}
.pag-btn.pag-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.pag-dots {
  color: var(--tx3);
  padding: 0 4px;
  font-size: 0.82rem;
}

/* ══ RESPONSIVE — base ══════════════════ */
@media (max-width: 767px) {
  body { font-size: 13px; }

  .pag-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .pag-nav {
    justify-content: center;
  }

  /* Sidebar colapsa — ya manejado por base.html; acá solo reducimos el
     padding del contenido principal. .wrap es la clase real con padding
     (usada por los 27 templates "clásicos"); .page-content no tiene
     padding propio hoy, se agrega igual por si se le suma en el futuro.
     !important es necesario acá: base.css se carga ANTES del <style>
     inline de base.html donde vive ".wrap{padding:1.75rem 1.5rem}" sin
     media query — con igual especificidad, esa regla gana por orden de
     aparición salvo que se fuerce con !important. */
  .wrap,
  .page-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   TEMA CLARO — override de variables definidas en :root
   Aplica cuando <html data-theme="light">
══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:    #f8f8fc;
  --bg2:   #ffffff;
  --bg3:   #f0f0f8;
  --bd:    #e2e2ea;
  --bd2:   #c8c8d8;
  --tx:    #1a1a2e;
  --tx2:   #4a4a6a;
  --tx3:   #7070a0;
  --green: #16a34a;
  --gbg:   #dcfce7;
  --gbd:   #86efac;
  --red:   #dc2626;
  --rbg:   #fee2e2;
  --rbd:   #fca5a5;
  --blue:  #2563eb;
  --accent:#4f46e5;
  --bg-accent: rgba(79,70,229,.08);
  --amber: #d97706;
  --abg:   #fef3c7;
  --abd:   #fcd34d;

  /* Sombras — ajustadas para fondo claro */
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.10),
                       0 0 0 1px rgba(79, 70, 229, 0.18);
  --shadow-card-selected: 0 0 0 1px rgba(79, 70, 229, 0.45),
                          0 0 14px rgba(79, 70, 229, 0.18),
                          0 4px 16px rgba(0, 0, 0, 0.10);
  --glow-ok:  0 0 8px rgba(22, 163, 74, 0.4);
  --glow-red: 0 0 8px rgba(220, 38, 38, 0.4);

  --cyan:   #0891b2;
  --indigo: #4338ca;
  --purple: #7c3aed;
  --glow-blue: 0 0 8px rgba(37, 99, 235, 0.35);
}

/* ══════════════════════════════════════════════════════════════════
   TEMA AUTO — sigue la preferencia del sistema operativo
   Si el OS está en claro → aplica el mismo override que light.
   Si el OS está en oscuro → mantiene :root (ya es oscuro por defecto).
══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg:    #f8f8fc;
    --bg2:   #ffffff;
    --bg3:   #f0f0f8;
    --bd:    #e2e2ea;
    --bd2:   #c8c8d8;
    --tx:    #1a1a2e;
    --tx2:   #4a4a6a;
    --tx3:   #7070a0;
    --green: #16a34a;
    --gbg:   #dcfce7;
    --gbd:   #86efac;
    --red:   #dc2626;
    --rbg:   #fee2e2;
    --rbd:   #fca5a5;
    --blue:  #2563eb;
    --accent:#4f46e5;
    --bg-accent: rgba(79,70,229,.08);
    --amber: #d97706;
    --abg:   #fef3c7;
    --abd:   #fcd34d;

    --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.10),
                         0 0 0 1px rgba(79, 70, 229, 0.18);
    --shadow-card-selected: 0 0 0 1px rgba(79, 70, 229, 0.45),
                            0 0 14px rgba(79, 70, 229, 0.18),
                            0 4px 16px rgba(0, 0, 0, 0.10);
    --glow-ok:  0 0 8px rgba(22, 163, 74, 0.4);
    --glow-red: 0 0 8px rgba(220, 38, 38, 0.4);

    --cyan:   #0891b2;
    --indigo: #4338ca;
    --purple: #7c3aed;
    --glow-blue: 0 0 8px rgba(37, 99, 235, 0.35);
  }
}

/* Botones de selección de tema (usados en /perfil) */
.th-btn {
  border: 0.5px solid var(--bd2);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  background: var(--bg2);
  color: var(--tx2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
.th-btn:hover {
  background: var(--bg3);
  color: var(--tx);
}
.th-btn.th-selected {
  border-color: var(--accent);
  background: var(--bg3);
  color: var(--tx);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   WIDE LAYOUT — pantallas grandes (1440px+)
   Monitores 23"+ (1680x1050, 1920x1080, 2560x1440)
   No afecta mobile ni tablet — solo suma espacio en wide.
   !important necesario: .wrap y .sb-panel viven sin media query
   dentro del <style> inline de base.html (líneas 41 y 57), que
   carga DESPUÉS de este archivo — misma igual especificidad, la
   regla sin media query gana por orden de aparición salvo que se
   fuerce (mismo motivo ya documentado arriba para el fix mobile
   de .wrap padding).
══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .wrap {
    max-width: 1520px !important;
  }

  .sb-panel {
    width: 240px !important;
  }

  /* .metrics NO se toca: las 4 instancias reales (panel/index.html,
     router_detail.html, olt/_tab_dashboard.html, genieacs/index.html)
     tienen 3 a 5 hijos directos, nunca 8 — forzar 8 columnas dejaría
     entre 3 y 5 columnas vacías a la derecha (regresión visual, no
     mejora). La regla actual (repeat(4,minmax(0,1fr))) ya aprovecha
     el ancho extra automáticamente al agrandarse .wrap.

     .theme-btns NO existe: los botones de tema en /perfil están en un
     <div style="display:flex;gap:8px;flex-wrap:wrap"> inline, sin
     clase — ya no envuelve a ningún ancho relevante (3 botones cortos),
     no había gap real que cerrar. */
}


/* ══════════════════════════════════════════════════════════════════
   LAYOUT GLOBAL — migrado de templates/base.html <style> inline
   Fase 2 migración CSS — 2026-07-07
══════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--tx);min-height:100vh;display:flex;flex-direction:column;}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar{background:var(--bg2);border-bottom:1px solid var(--bd);height:48px;display:flex;align-items:center;padding:0 1rem;gap:.75rem;flex-shrink:0;z-index:100;position:relative;}
.brand{font-size:15px;font-weight:600;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;}
.brand span{color:var(--accent);}
.sb-brand-txt{color:var(--tx);}
.sb-logo-img{max-height:28px;max-width:160px;object-fit:contain;}
.topbar-sp{flex:1;}
.nav-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px;border-radius:6px;background:var(--bg3);border:1px solid var(--bd);flex-shrink:0;position:relative;transition:border-color .15s;}
.nav-user:hover{border-color:var(--bd2);}
.nav-avatar-img{width:26px;height:26px;border-radius:50%;object-fit:cover;}
.nav-user-name{font-size:13px;color:var(--tx2);white-space:nowrap;}
.user-menu{display:none;position:absolute;top:48px;right:0;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:200;overflow:hidden;}
.user-menu.open{display:block;}
.user-menu-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--bd);}
.user-menu-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.user-menu-item{display:block;padding:10px 1.25rem;font-size:13px;color:var(--tx2);text-decoration:none;}
.user-menu-item:hover{background:var(--bg3);color:var(--tx);}
.user-menu-sep{height:1px;background:var(--bd);margin:2px 0;}

/* ── Layout principal ────────────────────────────────────────────────────── */
.app-body{display:flex;flex:1;min-height:0;}

/* ── Botón hamburguesa (topbar) ──────────────────────────────────────────── */
.topbar-menu-btn{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;transition:background .15s;flex-shrink:0;}
.topbar-menu-btn:hover{background:var(--bg3);}

/* ── Panel lateral expandido ─────────────────────────────────────────────── */
.sb-panel{width:220px;background:var(--bg2);border-right:1px solid var(--bd);padding:.75rem 0;overflow-y:auto;flex-shrink:0;transition:width .2s;}
.sb-panel.collapsed{width:0;overflow:hidden;padding:0;}
.sp-section{margin-bottom:1.25rem;}
.sp-title{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);padding:0 1rem .4rem;}
.sp-row{display:flex;align-items:center;gap:10px;padding:7px 1rem;cursor:pointer;transition:background .1s;text-decoration:none;}
.sp-row:hover{background:var(--bg3);}
.sp-row.on{background:var(--bg3);}
.sp-row i{font-size:16px;color:var(--tx3);flex-shrink:0;width:18px;text-align:center;}
.sp-row:hover i,.sp-row.on i{color:var(--tx2);}
.sp-label{font-size:13px;color:var(--tx2);flex:1;}
.sp-row:hover .sp-label,.sp-row.on .sp-label{color:var(--tx);}
.sp-val{font-size:13px;font-weight:600;flex-shrink:0;}
.sp-sep{height:1px;background:var(--bd);margin:4px 1rem;}

/* ── Contenido de página ─────────────────────────────────────────────────── */
.page-content{flex:1;overflow-y:auto;min-width:0;}
.wrap{max-width:1200px;margin:0 auto;padding:1.75rem 1.5rem;}

/* ── Utilidades comunes ──────────────────────────────────────────────────── */
.ph{margin-bottom:1.5rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.ph h1{font-size:20px;font-weight:600;margin-bottom:3px;}.ph p{font-size:13px;color:var(--tx2);}
.badge{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:500;}
.badge-ok{background:var(--gbg);color:var(--green);border:1px solid var(--gbd);}
.badge-no{background:var(--bg3);color:var(--tx3);border:1px solid var(--bd);}
.badge-warn{background:var(--abg);color:var(--amber);border:1px solid var(--abd);}
.badge-err{background:var(--rbg);color:var(--red);border:1px solid var(--rbd);}
.badge-uisp.on{background:var(--gbg);color:var(--green);border:1px solid var(--gbd);font-size:11px;padding:2px 8px;border-radius:20px;}
.badge-uisp.off{background:var(--bg3);color:var(--tx3);border:1px solid var(--bd);font-size:11px;padding:2px 8px;border-radius:20px;}
.mono{font-family:monospace;font-size:12px;}
.tx2{color:var(--tx2);}.tx3{color:var(--tx3);}
.spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .6s linear infinite;vertical-align:middle;}
@keyframes sp{to{transform:rotate(360deg);}}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:400;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:.75rem 1.25rem;font-size:14px;max-width:360px;transform:translateY(80px);opacity:0;transition:all .25s;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.ok{border-color:var(--gbd);color:var(--green);}
.toast.err{border-color:var(--rbd);color:var(--red);}

/* ── Topbar mobile + drawer del sidebar ─────────────────────────────────── */
.mob-topbar{
  display:none;
  align-items:center;
  gap:12px;
  padding:0 16px;
  height:52px;
  background:var(--bg2);
  border-bottom:1px solid var(--bd);
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
}
.mob-hamburger{
  background:none;
  border:none;
  color:var(--tx);
  cursor:pointer;
  padding:6px;
  font-size:20px;
  display:flex;
  align-items:center;
  border-radius:6px;
  transition:background .15s;
}
.mob-hamburger:hover{background:var(--bg3);}
.mob-brand{
  font-size:14px;
  font-weight:600;
  color:var(--tx);
  flex:1;
}
.mob-logo-img{max-height:24px;max-width:140px;object-fit:contain;}
.mob-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:200;
  backdrop-filter:blur(2px);
}
.mob-overlay.open{display:block;}

.sb-mob-user{display:none;}
.sb-mob-user-info{display:flex;align-items:center;gap:10px;padding:8px 1rem 10px;}
.sb-mob-user-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.sb-mob-user-name{font-size:13px;font-weight:600;color:var(--tx);}
.sb-mob-user-rol{font-size:11px;color:var(--tx3);}

@media(max-width:700px){
  .topbar{display:none;}

  .mob-topbar{display:flex;}

  .sb-mob-user{display:block;}

  .sb-panel{
    display:block !important;
    position:fixed;
    top:0; left:-280px;
    width:280px;
    height:100vh;
    z-index:300;
    transition:left .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.5);
  }

  .sb-panel.mob-open{
    left:0;
  }

  .main-content,
  .page-content,
  main {
    margin-top:52px;
    margin-left:0 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   Componentes compartidos — usados en múltiples templates
   ══════════════════════════════════════════════════════════ */

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--bd);margin-bottom:1.25rem;overflow-x:auto;}
.tab{display:flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;color:var(--tx3);margin-bottom:-1px;white-space:nowrap;transition:color .15s,border-color .15s;}
.tab.active{color:var(--tx);border-bottom-color:var(--accent);}
.tab:hover:not(.active){color:var(--tx2);}
.tab-count{font-size:11px;background:var(--bg3);border:1px solid var(--bd);border-radius:20px;padding:1px 7px;color:var(--tx3);}
.tab.active .tab-count{background:var(--accent);border-color:var(--accent);color:#fff;}
.section{display:none;}
.section.active{display:block;}

/* ── Cards ────────────────────────────────────────────────── */
.card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:1rem;}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.1rem;border-bottom:1px solid var(--bd);}
.card-head h3{font-size:13px;font-weight:600;margin:0;display:flex;align-items:center;gap:.5rem;color:var(--tx);}
.card-body{padding:.85rem 1.1rem;}
.card-hint{font-size:11px;color:var(--tx3);padding:.5rem 1.1rem;display:flex;align-items:center;gap:.4rem;border-top:1px solid var(--bd);}

/* ── Tabla genérica .dt ───────────────────────────────────── */
.dt{width:100%;border-collapse:collapse;font-size:12px;}
.dt th{background:var(--bg3);color:var(--tx3);padding:5px 10px;text-align:left;border-bottom:1px solid var(--bd);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.dt td{padding:6px 10px;border-bottom:1px solid var(--bd);color:var(--tx2);vertical-align:middle;}
.dt tr:last-child td{border-bottom:none;}
.dt tr:hover td{background:var(--bg3);}
.dt .nm{color:var(--tx);font-weight:600;font-family:monospace;font-size:12px;}
.dt .num{color:var(--accent);font-family:monospace;font-size:12px;}
.dt .dim{color:var(--tx3);font-size:11px;}

/* ── Info filas (clave:valor) ─────────────────────────────── */
.info-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:13px;padding:.45rem 1.1rem;border-bottom:1px solid var(--bd);}
.info-row:last-child{border-bottom:none;}
.info-row .lbl{color:var(--tx3);flex-shrink:0;font-size:12px;}
.info-row .val{color:var(--tx2);font-family:monospace;font-size:12px;text-align:right;}
.info-row .val.hi{color:var(--tx);font-family:inherit;}

/* ── Badges adicionales ───────────────────────────────────── */
.badge-green{background:var(--gbg);color:var(--green);border:1px solid var(--gbd);}
.badge-blue{background:var(--bg3);color:var(--blue);border:1px solid var(--bd2);}
.badge-amber{background:var(--abg);color:var(--amber);border:1px solid var(--abd);}
.badge-gray{background:var(--bg3);color:var(--tx3);border:1px solid var(--bd);}
.badge-red{background:var(--rbg);color:var(--red);border:1px solid var(--rbd);}

/* ── Botones compartidos ──────────────────────────────────── */
.btn-sm{font-size:12px;padding:5px 13px;border-radius:6px;border:1px solid var(--bd2);background:transparent;color:var(--tx2);cursor:pointer;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;}
.btn-sm:hover{color:var(--tx);border-color:var(--accent);}
.btn-sm.accent{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-sm.accent:hover{opacity:.85;}
.btn-sm.success{background:var(--gbg);color:var(--green);border-color:var(--gbd);}
.btn-sm.danger{background:transparent;color:var(--red);border-color:var(--rbd);}
.btn-sm.danger:hover{background:var(--rbg);border-color:var(--red);}
.btn-sm:disabled{opacity:.5;cursor:wait;}
.btn-new{font-size:12px;padding:4px 11px;border-radius:6px;background:var(--accent);color:#fff;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;}
.btn-new:hover{opacity:.85;}
.btn-del{background:none;border:1px solid var(--bd2);border-radius:5px;padding:3px 7px;cursor:pointer;color:var(--tx3);font-size:12px;}
.btn-del:hover{color:var(--red);border-color:var(--red);}
.btn-edit{background:none;border:1px solid var(--bd2);border-radius:5px;padding:3px 7px;cursor:pointer;color:var(--tx3);font-size:12px;}
.btn-edit:hover{color:var(--blue);border-color:var(--blue);}

/* ── Spinner / estados de carga ───────────────────────────── */
.spinner{width:14px;height:14px;border:2px solid var(--bd2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-st{display:flex;align-items:center;gap:.6rem;color:var(--tx3);font-size:13px;padding:1.5rem 1.1rem;}
.error-st{color:var(--red);font-size:13px;padding:1rem 1.1rem;}
.empty-st{color:var(--tx3);font-size:13px;padding:1.5rem;text-align:center;}

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:300;opacity:0;pointer-events:none;transition:opacity .15s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r);width:500px;max-width:95vw;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;border-bottom:1px solid var(--bd);}
.modal-head h2{font-size:14px;font-weight:600;margin:0;color:var(--tx);}
.modal-x{background:none;border:none;cursor:pointer;color:var(--tx3);font-size:20px;line-height:1;padding:2px;}
.modal-x:hover{color:var(--tx);}
.modal-body{padding:1.1rem;}
.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.85rem 1.1rem;border-top:1px solid var(--bd);}
.mfield{margin-bottom:.85rem;}
.mfield label{display:block;font-size:12px;color:var(--tx3);margin-bottom:.3rem;}
.mfield input,.mfield select,.mfield textarea{width:100%;font-size:13px;padding:6px 10px;border-radius:6px;border:1px solid var(--bd2);background:var(--bg);color:var(--tx);height:34px;box-sizing:border-box;}
.mfield textarea{height:auto;}
.mfield input:focus,.mfield select:focus,.mfield textarea:focus{outline:none;border-color:var(--accent);}
.mfield-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.mfield-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;}
.msep{font-size:11px;color:var(--tx3);margin:.25rem 0 .75rem;display:flex;align-items:center;gap:.5rem;}
.msep::before,.msep::after{content:'';flex:1;height:1px;background:var(--bd);}
/* Badge sidebar TR-069 */
.sb-badge{position:absolute;top:3px;right:3px;min-width:14px;height:14px;border-radius:7px;background:var(--amber);color:#000;font-size:9px;font-weight:700;text-align:center;line-height:14px;padding:0 3px;box-sizing:border-box;pointer-events:none;}
/* Buscador de parámetros TR-069 (modal plantillas) */
.param-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:.4rem;align-items:center;margin-bottom:.4rem;}
.param-row input,.param-row select{font-size:12px;padding:5px 8px;border-radius:5px;border:1px solid var(--bd2);background:var(--bg);color:var(--tx);height:30px;box-sizing:border-box;width:100%;}
.param-row input:focus,.param-row select:focus{outline:none;border-color:var(--accent);}
.param-path-wrap{position:relative;}
.param-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r);z-index:400;max-height:200px;overflow-y:auto;display:none;box-shadow:0 4px 16px rgba(0,0,0,.3);}
.param-dropdown.open{display:block;}
.param-dopt{padding:5px 8px;cursor:pointer;display:flex;gap:.5rem;align-items:baseline;}
.param-dopt:hover{background:var(--bg3);}
.pd-path{font-family:monospace;font-size:11px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
.pd-val{color:var(--tx3);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;flex-shrink:0;}
/* Chips de variables en modal plantillas */
.var-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.6rem;}
.var-chip{font-size:11px;font-family:monospace;padding:2px 8px;border-radius:4px;background:var(--bg3);border:1px solid var(--bd2);color:var(--accent);cursor:pointer;transition:background .1s;}
.var-chip:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-cancel-m{font-size:12px;padding:5px 14px;border-radius:6px;background:none;color:var(--tx2);border:1px solid var(--bd2);cursor:pointer;}
.btn-save-m{font-size:12px;padding:5px 14px;border-radius:6px;background:var(--accent);color:#fff;border:none;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:.3rem;}
.btn-save-m:disabled{opacity:.5;cursor:wait;}
.cmd-preview{font-size:11px;color:var(--tx3);background:var(--bg3);border-radius:6px;padding:.5rem .75rem;font-family:monospace;border:1px solid var(--bd);line-height:1.6;white-space:pre-wrap;word-break:break-all;margin-top:.5rem;}

/* ── Confirm overlay ──────────────────────────────────────── */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:400;opacity:0;pointer-events:none;transition:opacity .15s;}
.confirm-overlay.open{opacity:1;pointer-events:all;}
.confirm-box{background:var(--bg2);border:1px solid var(--bd2);border-radius:var(--r);width:360px;padding:1.25rem;}
.confirm-box h3{font-size:14px;font-weight:600;margin-bottom:.4rem;color:var(--tx);}
.confirm-box p{font-size:13px;color:var(--tx2);margin-bottom:1rem;line-height:1.5;}
.confirm-actions{display:flex;justify-content:flex-end;gap:.5rem;}
.btn-del-ok{font-size:12px;padding:5px 14px;border-radius:6px;background:var(--red);color:#fff;border:1px solid var(--red);cursor:pointer;font-weight:500;}
.btn-del-ok:hover{opacity:.85;}

/* ── Toast (#toast) ───────────────────────────────────────── */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--bg2);border:1px solid var(--bd2);border-radius:8px;padding:.75rem 1.1rem;font-size:13px;color:var(--tx);display:none;z-index:500;max-width:340px;line-height:1.4;}
#toast.ok{border-color:var(--gbd);color:var(--green);}
#toast.err{border-color:var(--rbd);color:var(--red);}

/* ── Grid 2 columnas ──────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem;}
@media(max-width:700px){.grid2{grid-template-columns:1fr;}}

/* ── Barras de progreso ───────────────────────────────────── */
.progress{height:4px;background:var(--bg3);border-radius:2px;margin-top:6px;}
.progress-bar{height:4px;border-radius:2px;transition:width .3s;}
.progress-bar.ok{background:var(--green);}
.progress-bar.warn{background:var(--amber);}
.progress-bar.danger{background:var(--red);}

/* ── Submenús (variante 3 — tinte accent) ─────────────────── */
.sub-tabs{display:flex;flex-wrap:wrap;gap:0;padding:0 .75rem;background:var(--bg3);border-bottom:1px solid var(--bd);overflow-x:hidden;}
.stab{font-size:12px;padding:.5rem .9rem;cursor:pointer;color:var(--tx3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all .15s;}
.stab:hover{color:var(--tx2);}
.stab.on{color:#fff;border-bottom-color:var(--accent);font-weight:500;}

/* ── Tabs principales (multi-nivel) ──────────────────────── */
.main-tabs{display:flex;border-bottom:1px solid var(--bd);background:var(--bg2);padding:0 1rem;overflow-x:auto;}
.mtab{display:flex;align-items:center;gap:.4rem;padding:.7rem 1.1rem;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;color:var(--tx3);margin-bottom:-1px;white-space:nowrap;transition:color .15s,border-color .15s;}
.mtab:hover{color:var(--tx2);}
.mtab.on{color:var(--tx);border-bottom-color:var(--accent);}
.mtab i{font-size:15px;}

/* ── Secciones show/hide ─────────────────────────────────── */
.sec{display:none;}
.sec.on{display:block;}
.tab-body{padding:1.25rem;}

/* ── Cabecera OLT ────────────────────────────────────────── */
.olt-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--bd);flex-wrap:wrap;background:var(--bg2);}
.olt-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.olt-icon.zte    {background:#0d1a2e;border:1px solid #1e3a6e;}
.olt-icon.huawei {background:#1a0a00;border:1px solid #7f2a00;}
.olt-icon.vsol   {background:#0a1a0a;border:1px solid #1a5c1a;}
.olt-icon.tplink {background:#1a1a00;border:1px solid #5c5c00;}
.olt-icon.tenda  {background:#1a0a1a;border:1px solid #5c005c;}
.olt-badge{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:600;border:1px solid;white-space:nowrap;}
.badge-zte    {background:#0d1a2e;color:var(--blue);border-color:#1e3a6e;}
.badge-huawei {background:#2a1000;color:#fb923c;border-color:#7f2a00;}
.badge-vsol   {background:#0a1a0a;color:#86efac;border-color:#1a5c1a;}
.badge-tplink {background:#1a1a00;color:#fde047;border-color:#5c5c00;}
.badge-tenda  {background:#1a0a1a;color:#e879f9;border-color:#5c005c;}

/* ── Métricas dashboard ──────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem;}
@media(max-width:700px){.metrics{grid-template-columns:1fr 1fr;}}
.mbox{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);padding:.85rem 1rem;}
.mbox.danger{border-color:var(--rbd);}
.mbox.warn  {border-color:var(--abd);}
.mbox.clickable{cursor:pointer;transition:border-color .12s,background .12s;}
.mbox.clickable:hover{border-color:var(--accent);}
.mval{font-size:22px;font-weight:700;line-height:1.1;margin-top:4px;color:var(--tx);}
.mval.ok    {color:var(--green);}
.mval.danger{color:var(--red);}
.mval.warn  {color:var(--amber);}
.mlbl{font-size:11px;color:var(--tx3);}
.msub{font-size:10px;color:var(--tx3);margin-top:3px;}
.prog{height:4px;background:var(--bg);border-radius:2px;margin-top:7px;}
.progb{height:4px;border-radius:2px;transition:width .3s;}
.progb.ok    {background:var(--green);}
.progb.accent{background:var(--accent);}
.progb.warn  {background:var(--amber);}
.progb.err   {background:var(--red);}

/* ── Estados inline ──────────────────────────────────────── */
.st-ok  {color:var(--green);}
.st-err {color:var(--red);}
.st-warn{color:var(--amber);}

/* ── Dot de estado de interfaz de red ────────────────────── */
.iface-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;margin-right:4px;vertical-align:middle;}
.iface-dot.up{background:var(--green);}
.iface-dot.down{background:var(--red);}
.iface-dot.disabled{background:var(--tx3);}

/* ── Alarmas ─────────────────────────────────────────────── */
.alarm-row{display:flex;align-items:flex-start;gap:8px;padding:.45rem .7rem;border-radius:6px;margin-bottom:5px;}
.alarm-row.critical,.alarm-row.major{background:var(--rbg);border:1px solid var(--rbd);}
.alarm-row.minor,.alarm-row.warning{background:var(--abg);border:1px solid var(--abd);}
.alarm-row.cleared{background:var(--gbg);border:1px solid var(--gbd);}
.alarm-nivel{font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.alarm-nivel.critical,.alarm-nivel.major{background:#7f1d1d;color:#fca5a5;}
.alarm-nivel.minor,.alarm-nivel.warning{background:var(--abd);color:#fcd34d;}
.alarm-nivel.cleared{background:var(--gbg);color:var(--green);}

/* ── Cards de configuración (Config ONU, Sistema, etc.) ─── */
.cfg-card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:1rem;}
.cfg-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.1rem;border-bottom:1px solid var(--bd);}
.cfg-head h3{font-size:13px;font-weight:600;margin:0;display:flex;align-items:center;gap:.5rem;color:var(--tx);}
.cfg-actions{display:flex;align-items:center;gap:.5rem;}
.cfg-hint{font-size:11px;color:var(--tx3);padding:.5rem 1.1rem;display:flex;align-items:center;gap:.4rem;border-top:1px solid var(--bd);}
.btn-new-cfg{font-size:12px;padding:4px 11px;border-radius:6px;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.3rem;}
.btn-new-cfg:hover{opacity:.85;}

/* ── Tabla de configuración (.cfg-table) ─────────────────── */
.cfg-table-wrap{overflow-x:auto;}
.cfg-table{width:100%;border-collapse:collapse;font-size:12px;}
.cfg-table th{background:var(--bg3);color:var(--tx3);padding:6px 10px;text-align:left;border-bottom:1px solid var(--bd);font-weight:600;white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.03em;}
.cfg-table td{padding:7px 10px;border-bottom:1px solid var(--bd);color:var(--tx2);vertical-align:middle;}
.cfg-table tr:last-child td{border-bottom:none;}
.cfg-table tr:hover td{background:var(--bg3);}
.cfg-table .nm{color:var(--tx);font-weight:600;font-family:monospace;font-size:12px;}
.cfg-table .num{color:var(--accent);font-family:monospace;font-size:12px;white-space:nowrap;}
.cfg-table .dim{color:var(--tx3);font-size:11px;}

/* ── Badges de velocidad (upload/download) ───────────────── */
.badge-up  {background:var(--gbg);color:var(--green);border:1px solid var(--gbd);}
.badge-down{background:var(--bg3);color:var(--blue);border:1px solid var(--bd2);}
.badge-bridge{background:#0d1f2d;color:#38bdf8;border:1px solid #0c4a6e;}
.badge-router{background:#1a1a2e;color:#a78bfa;border:1px solid #3b1f6e;}

/* ── Capacidades ONU type (eth, pots, wifi, rf) ──────────── */
.onu-caps{display:flex;flex-wrap:wrap;gap:.3rem;}
.cap-tag{font-size:10px;padding:1px 6px;border-radius:12px;background:var(--bg3);border:1px solid var(--bd);color:var(--tx3);white-space:nowrap;}
.cap-tag.eth {color:var(--blue);border-color:#1e3a6e;background:#0d1a2e;}
.cap-tag.pots{color:#f59e0b;border-color:#5c3a00;background:#2a1f00;}
.cap-tag.wifi{color:var(--green);border-color:var(--gbd);background:var(--gbg);}
.cap-tag.rf  {color:#e879f9;border-color:#5c005c;background:#1a0a1a;}
.desc-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:11px;color:var(--tx2);}
.desc-pill i{font-size:13px;color:var(--tx3);}

/* ── Tabla Puertos PON ───────────────────────────────────── */
.ports-table{width:100%;border-collapse:collapse;font-size:12px;}
.ports-table th{background:var(--bg3);color:var(--tx3);padding:6px 8px;text-align:left;border-bottom:1px solid var(--bd);font-weight:600;white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.03em;}
.ports-table td{padding:5px 6px;border-bottom:1px solid var(--bd);color:var(--tx2);}
.ports-table tr:last-child td{border-bottom:none;}
.ports-table tr:hover td{background:var(--bg3);}
.ports-table .pon-num{font-weight:700;color:var(--tx);font-size:13px;}
.ports-table .cell-ro{display:block;font-size:12px;color:var(--tx2);font-family:monospace;padding:2px 0;white-space:nowrap;}
.ports-table .cell-profile{color:var(--accent);}
.ports-table input{background:transparent;border:none;color:var(--tx2);font-size:12px;width:100%;outline:none;font-family:monospace;padding:2px 0;}
.ports-table input:focus{background:var(--bg3);border-radius:3px;padding:2px 4px;}
.ports-table select{background:var(--bg3);border:1px solid var(--bd2);color:var(--tx2);font-size:12px;width:100%;outline:none;border-radius:4px;padding:3px 4px;cursor:pointer;}
.ports-table select:focus{border-color:var(--accent);}
.onu-cnt{color:var(--tx3);font-size:11px;text-align:center;}