/* NOC FibraSLP · ficha del equipo como PÁGINA (#/equipo/<id>[/<pestaña>]) — v1.13
 *
 * La pinta index.html (openDevice / FICHA, prefijo .fi-). Antes era un <dialog> modal de 1 080 px
 * con 12 secciones apiladas; ahora es una vista: resumen compacto arriba (siempre el mismo),
 * pestañas fijas al bajar y el contenido de cada pestaña. Reutiliza los tokens de :root y las
 * clases globales (.pill/.dot, .chip, .mono, .sub, .trunc, .dense, .tbl-wrap, button.icon,
 * .kebab, .meter, .hintbox, .legend/.swatch, .tip, .seg, .mini) SIN redefinirlas: lo que cambia
 * va acotado a #view-equipo o con prefijo propio. */

#view-equipo{margin-bottom:0}
.fi{display:flex;flex-direction:column;gap:10px;min-width:0}
/* las tarjetas son <section>: sin el margen inferior global de 22 px (el hueco lo da el gap) */
.fi section{margin-bottom:0}
.fi-grow{flex:1 1 auto}
.fi-missing{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fi-missing a,.fi-link{color:var(--s1);text-decoration:none;font-size:12px;white-space:nowrap}
button.fi-link{background:none;border:0;padding:0;cursor:pointer}
.fi-missing a:hover,.fi-link:hover{text-decoration:underline;color:var(--s1)}

/* ── Encabezado global en esta vista ─────────────────────────────────────────────────────────
   «Red / Equipos / <nombre>»: «Equipos» es un enlace de vuelta a la lista. El nombre del equipo
   puede ser largo («SAN LUIS POTOSI - DEDICADO-WANTELCO»): aquí el título SÍ se encoge con «…»
   (en las demás vistas va fijo) para que las acciones quepan en una fila a 1 366 px. */
header .crumb a{color:inherit;text-decoration:none}
header .crumb a:hover{color:var(--ink);text-decoration:underline}
/* max-width + overflow: en el celular el h1 sobresalía 0.7 px (redondeo del encogimiento) y la
   página quedaba con 1 px de desplazamiento lateral */
body[data-view="equipo"] header .hd-title{flex:0 .35 auto;min-width:0;max-width:100%;overflow:hidden}
body[data-view="equipo"] header h1{overflow:hidden;text-overflow:ellipsis;min-width:60px}
/* el ⋯ de la ficha vive en el encabezado: sus opciones no deben heredar el tamaño de los botones
   del encabezado (header button / :has(> svg.i) los dejaría de 30 px de ancho en ≤ 1 100 px).
   Acotado a SU ⋯ (.fi-hd-more): ficha.css se carga en todas las vistas */
.fi-hd-more .kebab-menu > button{width:100%;height:auto;padding:7px 10px;justify-content:flex-start}
/* Ping y Traceroute: solo el icono hasta 1 500 px (el texto sigue en su title) */
@media(max-width:1500px){
  body[data-view="equipo"] #page-actions .fi-act-tool > .lbl{display:none}
  body[data-view="equipo"] #page-actions .fi-act-tool{width:30px;padding:0;justify-content:center}
}

/* ── Resumen compacto (siempre arriba) ──────────────────────────────────────────────────── */
.fi-top{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:8px 14px 10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fi-id{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--ink-2);
  min-width:0;min-height:26px}
.fi-id > span{white-space:nowrap}
.fi-id .fi-k{color:var(--muted);margin-right:4px}
.fi-host{display:inline-flex;align-items:center;gap:2px}
.fi-host .mono{color:var(--ink)}
.fi-host button.icon{width:24px;height:24px}
.fi-host button.icon svg{width:14px;height:14px}
.fi-id .fi-notes-txt{max-width:420px;overflow:hidden;text-overflow:ellipsis}
.fi-id .res{white-space:normal;max-width:520px}
/* indicadores: rótulo arriba y valor grande, separados por una raya (≈ 40 px de alto) */
.fi-kpis{display:flex;flex-wrap:wrap;row-gap:8px}
.fi-kpi{display:flex;flex-direction:column;gap:1px;padding:0 18px 0 14px;border-left:1px solid var(--grid);
  min-width:0}
.fi-kpi:first-child{padding-left:0;border-left:0}
.fi-kpi .l{font-size:12px;color:var(--muted);white-space:nowrap}
.fi-kpi .v{font-size:17px;font-weight:600;line-height:1.25;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fi-kpi .v small{font-size:12px;font-weight:400;color:var(--muted)}
.fi-kpi.warn .v{color:var(--warning)}
.fi-kpi.crit .v{color:var(--critical)}
.fi-kpi.good .v{color:var(--good)}
/* alarmas abiertas como chips (clic: su detalle) */
.fi-alarms{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fi-alarms .fi-alarms-t{font-size:12px;color:var(--muted);margin-right:2px}
/* tope por chip: a 1 366 px caben 3 alarmas en un renglón (el texto completo va en su title) */
.fi-alarms .chip{max-width:min(340px,100%)}
@media(min-width:1700px){.fi-alarms .chip{max-width:min(460px,100%)}}
.fi-alarms .chip .fi-chip-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fi-alarms .chip.crit{border-color:color-mix(in srgb,var(--critical) 55%,var(--border))}
.fi-alarms .chip.warn{border-color:color-mix(in srgb,var(--warning) 45%,var(--border))}
.fi-alarms .chip .sub{margin-left:0}

/* pistas de error con su arreglo y el umbral propio del equipo */
#fi-notes{display:flex;flex-direction:column;gap:8px}
#view-equipo .hintbox{margin:0}
.fi-note{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fi-note button.mini{margin:0}

/* ── Pestañas (fijas bajo el encabezado al bajar) ───────────────────────────────────────── */
.fi-tabs{position:sticky;top:var(--hd-h,50px);z-index:6;display:flex;align-items:flex-end;gap:12px;
  background:var(--plane);border-bottom:1px solid var(--border);min-width:0}
.fi-tablist{display:flex;gap:2px;min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:thin}
button.fi-tab{display:inline-flex;align-items:center;gap:6px;flex:none;background:none;border:0;
  border-bottom:2px solid transparent;border-radius:0;padding:9px 11px 7px;color:var(--ink-2);
  font-size:13px;white-space:nowrap}
button.fi-tab:hover{color:var(--ink);border-bottom-color:var(--muted)}
button.fi-tab.on{color:var(--ink);border-bottom-color:var(--s1);font-weight:600}
.fi-tab .n{font-size:12px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.fi-tab .n.bad{color:var(--critical);font-weight:600}
.fi-tabmeta{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:6px;padding:0 2px 9px;
  font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
.fi-tabmeta .dot{flex:none}
@media(max-width:1250px){.fi-tabmeta{display:none}}
/* el encabezado de las tablas largas (Interfaces, Vecinos) se pega bajo las pestañas. Las que
   se desplazan dentro de su propia caja (.tbl-wrap.scroll, p. ej. la de Colas) lo pegan al borde
   de esa caja: ahí el desplazamiento por la página no aplica */
#view-equipo .tbl-wrap:not(.scroll) > table > thead > tr > th{top:calc(var(--hd-h,50px) + var(--fi-tabs-h,38px))}
@media(max-width:900px){#view-equipo .tbl-wrap:not(.scroll) > table > thead > tr > th{position:static}}

/* ── Contenido de las pestañas ──────────────────────────────────────────────────────────── */
.fi-pane{min-width:0;padding-top:2px}
.fi-cols{display:grid;gap:14px;grid-template-columns:minmax(0,2fr) minmax(340px,1fr);align-items:start}
@media(max-width:1100px){.fi-cols{grid-template-columns:minmax(0,1fr)}}
.fi-main,.fi-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.fi-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  min-width:0}
.fi-card-h{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-bottom:8px;min-height:26px}
.fi-card-h h3{margin:0;font-size:12px}
.fi-card-h .sub{margin-left:0}
.fi-cnt{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--surface-2);
  color:var(--ink-2);font-size:12px;font-weight:600;line-height:18px;text-align:center;
  font-variant-numeric:tabular-nums}
.fi-cnt.crit{background:var(--critical);color:#fff}
.fi-cnt.warn{background:var(--warning);color:#111}
.fi-sel{background:var(--plane);color:var(--ink);border:1px solid var(--border);border-radius:6px;
  padding:4px 8px;font:inherit;font-size:13px;max-width:360px;min-width:0}
.fi-sel:focus,.fi-search:focus{outline:none;border-color:var(--s1)}
.fi-search{background:var(--plane);color:var(--ink);border:1px solid var(--border);border-radius:6px;
  padding:4px 8px;font:inherit;font-size:13px;width:220px;max-width:100%}
.fi-iflabel{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.fi-rng button{padding:3px 10px;font-size:12px}
button.fi-live{margin:0;display:inline-flex;align-items:center;gap:5px}
button.fi-live svg.i{width:13px;height:13px}
.fi-more > summary{cursor:pointer;color:var(--muted);font-size:12px;margin:8px 0 6px}
.fi-more > summary:hover{color:var(--ink-2)}

/* gráficas dibujadas a su ancho REAL (el SVG mide lo que mide la caja: rótulos de 12 px siempre) */
.fi-chart{position:relative;min-width:0}
.fi-chart svg{display:block;max-width:100%;overflow:visible}
.fi-chart .tip{top:8px}
.fi-chart.fi-busy svg{opacity:.35;transition:opacity .2s}
.fi-chart-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;
  border:1px dashed var(--grid);border-radius:8px;text-align:center;padding:0 12px}
.fi-legend{margin:4px 0 0}
.fi-band{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle;
  background:color-mix(in srgb,var(--ink-2) 28%,transparent)}
.fi-sw{display:inline-block;width:12px;height:3px;border-radius:2px;vertical-align:middle;margin:0 2px}
/* «ahora · promedio · pico» de Rx y Tx sobre la gráfica */
.fi-stats{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:12.5px;color:var(--ink-2);margin:0 0 6px}
.fi-stats b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.fi-stats .rx{color:var(--s1);font-weight:600}
.fi-stats .tx{color:var(--s2);font-weight:600}
.fi-stats .sub{margin-left:.3em}
.fi-live-row{font-size:12.5px;margin:0 0 4px;font-variant-numeric:tabular-nums}
#live-chart{margin-bottom:6px}

/* salud: CPU+memoria, latencia y temperatura lado a lado */
/* 200 px: a 1 366 px caben las 3 (con 230 la temperatura quedaba sola en otra fila) */
.fi-health{display:grid;gap:10px 18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fi-mini-h{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:2px}
.fi-mini-h b{color:var(--ink);font-size:13px;margin-left:auto;font-variant-numeric:tabular-nums}

/* listas compactas de la columna derecha (alarmas, interfaces, vecinos, respaldo e IPAM) */
.fi-list{display:flex;flex-direction:column;min-width:0}
.fi-row{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px 6px;border-top:1px solid var(--grid);
  font-size:13px;min-width:0;border-radius:4px}
.fi-row:first-child{border-top:0}
.fi-row.clickable:hover{background:var(--surface-2)}
.fi-row.sel{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--s1)}
.fi-row .fi-msg{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-row .fi-msg .sub{margin-left:.45em}
.fi-row > .sub{margin-left:0;flex:none;white-space:nowrap}
/* la interfaz del vecino es «fi-msg sub»: la regla de arriba (misma especificidad, va después) la
   dejaba sin encoger y una interfaz larga sacaba la fila de la tarjeta (página con scroll lateral) */
.fi-row > .fi-msg{flex:1 1 auto;min-width:0}
.fi-row .fi-ifn{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-row .fi-proto{flex:none;width:34px;font-size:12px;color:var(--muted)}
.fi-row .fi-rate{flex:none;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fi-row .fi-rate .rx{color:var(--s1)} .fi-row .fi-rate .tx{color:var(--s2)}
.fi-row .fi-lbl{flex:none;width:72px;color:var(--muted);font-size:12px}
.fi-row button.icon{width:24px;height:24px;margin:-2px 0}
.fi-row button.icon svg{width:14px;height:14px}
.fi-row .pill{flex:none}
.fi-ok{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px;padding:4px 2px}
/* respaldo e IPAM: la línea puede pasar a dos renglones; con «…» se perdía «1 conflicto» a 1 366 px */
.fi-adm .fi-msg{white-space:normal;line-height:1.35}
.fi-foot{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:12px;color:var(--muted)}

/* barrita de proporción (ONU en línea de un PON) */
.fi-bar{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--grid);overflow:hidden;
  vertical-align:middle;margin-right:6px}
.fi-bar > i{display:block;height:100%;background:var(--s1)}

/* «Interfaces con más tráfico» (Resumen): un renglón por interfaz; la descripción toma lo que sobra */
#view-equipo td.fi-desc{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-equipo th.fi-desc{width:100%}
.fi-top-tbl .meter{min-width:120px}
.fi-top-tbl .fi-rx{color:var(--s1)} .fi-top-tbl .fi-tx{color:var(--s2)}

/* Interfaces: filtros en una fila y la tabla densa con su encabezado fijo */
.fi-ifbar{margin-bottom:8px}
#view-equipo #iface-table{overflow:visible}
#view-equipo #iface-table .meter{min-width:110px}
/* nombres de puerto largos de RouterOS (sfp-sfpplus8-RB-ADMIN-CORIENTE): con tope y «…» (el
   nombre completo en el title) para que a 1366 la tabla no se pase del ancho y no corte la
   columna del botón de gráfica */
#view-equipo #iface-table .fi-ifn{vertical-align:bottom;--trunc:280px}
/* por debajo de 1500 px las 12 columnas pueden no caber (depende de los nombres y de la óptica):
   la tabla se desplaza dentro de su caja en vez de ensanchar la página. Ahí el encabezado ya no
   queda fijo al bajar (un overflow en el envoltorio lo impide), a cambio de no cortar columnas */
@media(max-width:1500px){
  #view-equipo #iface-table .fi-ifn{--trunc:180px}
  #view-equipo #iface-table .tbl-wrap{overflow-x:auto}
  #view-equipo #iface-table .tbl-wrap > table > thead > tr > th{position:static}
}
#view-equipo #iface-table td{white-space:nowrap}
#view-equipo #iface-table td.fi-desc{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis}
#view-equipo #iface-table th.fi-desc{width:100%}
#view-equipo #iface-table .bb{margin-right:0}
#view-equipo .fi-optc{display:inline-flex;align-items:center;gap:4px}
#view-equipo .fi-optc button.icon{width:22px;height:22px}
#view-equipo .fi-optc button.icon svg{width:13px;height:13px}
#view-equipo .fi-tbl td{white-space:nowrap}

/* Óptica e historial del enlace: lado a lado cuando hay ancho */
.fi-opt{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(620px,100%),1fr));align-items:start}
/* dentro de su tarjeta la gráfica de optica.js no lleva otro marco (antes: caja dentro de caja) */
#view-equipo .op-box .chart{background:none;border:0;border-radius:0;padding:4px 0 0}

/* cajas de otros módulos dentro de la página: sin el scroll interno que tenían en el diálogo */
#view-equipo .ipam-box .ipam-tablewrap{max-height:none}
#view-equipo .mute-add input[type=text]{background:var(--plane);color:var(--ink);border:1px solid var(--border);
  border-radius:6px;padding:5px 8px;font:inherit;font-size:13px}
#view-equipo .mute-add input[type=text]:focus{outline:none;border-color:var(--s1)}
#view-equipo .mute-add button{display:inline-flex;align-items:center;gap:6px}

/* tablas chicas del Resumen (más tráfico, PON): en el celular se desplazan dentro de su caja,
   nunca la página entera */
.fi-scroll{overflow-x:auto;border-radius:10px;min-width:0}
@media(max-width:700px){
  /* en el celular lo que importa son las tasas: sin descripción (width:100 %) Rx y Tx caben */
  .fi-top-tbl .fi-c-util,.fi-top-tbl .fi-desc{display:none}
  /* y el nombre (sfp-sfpplus7-OSPF-PORTEZUELO) toma solo lo que dejan Rx y Tx, con «…»: el
     truco max-width:0 + width:100 % de .fi-desc (el nombre completo sigue en el title de la fila) */
  #view-equipo .fi-top-tbl td:first-child{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis}
  #view-equipo .fi-top-tbl th:first-child{width:100%}
  .fi-kpi{padding:0 12px 0 10px}
  .fi-kpi .v{font-size:15px}
  .fi-search{width:100%}
}