/* NOC FibraSLP · vista «IPAM» — v1.10
 * Estilos de static/ipam.js (prefijo .ipam-; la parte static/ipam_subredes.js trae los suyos,
 * .ipam-sub-, y de aquí solo hereda dialog.ipam-dlg y las variables --ipam-*). Reutiliza las
 * variables y clases de index.html (.tiles/.tile, .pill/.dot, .seg, .filters, .check, .pager,
 * table/th/td, .num, .res, .banner, .empty, button.mini/.on/.danger, dialog/.dlg-head/.dlg-body,
 * .form/.grid2, label.f, .actions, .hint, .sec-head/.count). Tema oscuro con los tokens de
 * index.html: los colores del módulo son variables --ipam-* declaradas en #ipam-root,
 * dialog.ipam-dlg y .ipam-box (la caja de la ficha), así un tema futuro solo cambia los tokens.
 * Estados de una IP: la clase .ipam-st-<estado> fija --c (color del estado) y la usan la píldora
 * (.ipam-status), los chips de conteo (.chip con .ipam-dot) y la leyenda (.ipam-lg).
 * Rediseño v1.12.2 (Fase 1): usa además los componentes globales del marco (.tbl-wrap, .dense,
 * .tiles.compact, .chips/.chip, details.howto, details.kebab, button.icon, td.acts/.acts-row,
 * .on-hover, .sub); aquí NO se redefinen, solo se agregan variantes con prefijo .ipam-. */
#ipam-root,dialog.ipam-dlg,.ipam-box{
  --ipam-used:var(--good);                                   /* en uso ahora */
  --ipam-offline:var(--s1);                                  /* asignada por secret, desconectado */
  --ipam-recent:color-mix(in srgb,var(--good) 45%,var(--muted));   /* vista hace ≤ 30 d */
  --ipam-stale:var(--muted);                                 /* sin confirmar */
  --ipam-reserved:var(--warning);
  --ipam-assigned:color-mix(in srgb,var(--s1) 55%,var(--ink));     /* anotada asignada */
  --ipam-blocked:color-mix(in srgb,var(--muted) 70%,var(--plane));
  --ipam-retired:var(--axis);
  --ipam-pool:color-mix(in srgb,var(--s1) 45%,var(--critical));    /* rango de un pool */
  --ipam-free:var(--grid);
  --ipam-conflict:var(--critical);
  --ipam-disc:var(--serious);
  --ipam-special:var(--surface-2);                           /* red / broadcast */
  --ipam-gw:var(--s2);                                       /* marca de gateway */
  --ipam-full:var(--serious);
  --ipam-folder:var(--warning);
  --ipam-public:var(--s1);
}
/* rediseño v1.12.2: huecos de 10 px (antes 14) entre barra, filtros y tablas */
#ipam-root{display:flex;flex-direction:column;gap:10px;min-width:0}
#ipam-stage{display:flex;flex-direction:column;gap:10px;min-width:0}
.ipam-muted{color:var(--muted)}
.ipam-mono,.ipam-cidr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  font-variant-numeric:normal;overflow-wrap:anywhere}
.ipam-sub{color:var(--muted);font-size:11px;font-weight:400;line-height:1.3}
.ipam-count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.ipam-empty{color:var(--muted);padding:18px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;line-height:1.55}
.ipam-empty b{color:var(--ink-2)}
.ipam-empty.inline{padding:8px 12px;font-size:12px}
.ipam-err{color:var(--critical)}
.ipam-warn{color:var(--warning)}
.ipam-ok{color:var(--good)}
.ipam-foot{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:11px}
.ipam-foot .err{color:var(--critical)}
.ipam-note{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--s1);
  border-radius:8px;padding:9px 14px;font-size:12px;color:var(--ink-2);line-height:1.5}
.ipam-note:empty{display:none}
.ipam-note b{color:var(--ink)}
.ipam-note code,.ipam-empty code{background:var(--plane);padding:0 4px;border-radius:4px}
/* punto con pulso: descubrimiento en curso */
.dot.ipam-run{background:var(--s1);animation:ipam-pulse 1.3s ease-in-out infinite}
@keyframes ipam-pulse{0%,100%{box-shadow:0 0 0 0 rgba(57,135,229,.55)}60%{box-shadow:0 0 0 5px rgba(57,135,229,0)}}
@media(prefers-reduced-motion:reduce){.dot.ipam-run{animation:none}}

/* barra: pestañas de la vista (la ÚNICA navegación del módulo: la barra lateral tiene un solo
   enlace «IPAM») y, a la derecha, el estado del descubrimiento («Descubrir ahora» está en el
   encabezado de la página) */
.ipam-bar,.ipam-bar2{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.ipam-bar .seg,.ipam-bar2 .seg{flex-wrap:wrap}
.ipam-bar .seg button{padding:6px 12px;font-size:13px}
.ipam-bar .seg button.on,.ipam-bar2 .seg button.on{background:var(--surface);box-shadow:inset 0 -2px 0 var(--s1)}
.ipam-bar2 .seg button{padding:5px 11px;font-size:12px}
.ipam-n{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--grid);
  color:var(--ink-2);font-size:11px;line-height:17px;font-variant-numeric:tabular-nums}
.ipam-n.crit{background:var(--critical);color:#fff}
.ipam-n.warn{background:var(--warning);color:#1a1a19}
.ipam-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end;
  min-width:0;font-size:12px}
.ipam-tools button{padding:5px 11px;font-size:12px}
.ipam-tools .res{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ipam-notices{display:grid;gap:10px}
.ipam-notices:empty{display:none}
.ipam-notices .banner{margin:0;line-height:1.5}
.ipam-notices .banner b{color:var(--ink)}

/* filtros (form.filters de index.html). Los <select> tomaban el ancho de su opción más larga
   (un nombre de equipo, «asignada (cliente desconectado)»): con tope, la fila de filtros cabe en un
   renglón a 1920 px. Las fechas tenían los 240 px de todo .filters input */
.ipam-filters input[type=search]{width:260px;max-width:70vw}
.ipam-filters select{max-width:180px}
.ipam-filters select[name=device_id]{max-width:220px}
.ipam-filters input[type=date]{background:var(--plane);color:var(--ink);border:1px solid var(--border);
  border-radius:6px;padding:4px 8px;font:inherit;font-size:12px;width:140px}
.ipam-filters .check{font-size:12px;color:var(--ink-2);white-space:nowrap}
/* .filters input de index.html da 240px a todo input: las casillas vuelven a su tamaño */
.ipam-filters input[type=checkbox]{width:auto;padding:0;margin:0;accent-color:var(--s1)}
.ipam-filters label.ipam-fl{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.ipam-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ipam-chips:empty{display:none}

/* secciones y columnas */
.ipam-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.ipam-sec>.sec-head{margin:0}
/* panel: dos PILAS de listas (izquierda más ancha: la tabla de redes de acceso tiene 5 columnas);
   cada pila apila sus secciones sin huecos. En pantallas angostas, una sola columna */
.ipam-pcols{display:grid;gap:14px 18px;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
.ipam-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:1199px){.ipam-pcols{grid-template-columns:minmax(0,1fr)}}
/* portátil (1366 px): con 3fr/2fr la pila derecha quedaba en ~430 px y en «Hojas más usadas» el
   nombre de la subred se cortaba a 2–3 letras; 1.3fr/1fr le pasa ~40 px sin dejar a la izquierda
   sin el nombre del equipo */
@media(min-width:1200px) and (max-width:1599px){.ipam-pcols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
/* 7 tarjetas de hallazgos en una fila también a 1366 px (mínimo 130 en vez de los 150 del marco) */
.tiles.compact.ipam-tiles-find{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

/* mosaicos accionables del panel */
a.tile.ipam-tile{display:block;text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .12s,background .12s}
a.tile.ipam-tile:hover{border-color:var(--muted);background:var(--surface-2)}
a.tile.ipam-tile:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
/* tablas: el scroll horizontal vive en el contenedor, nunca en la página */
.ipam-tablewrap{overflow-x:auto;max-width:100%;border-radius:10px}
.ipam-table{min-width:880px;overflow:visible}
.ipam-table.narrow{min-width:560px}
.ipam-table th,.ipam-table td{padding:8px 10px}
.ipam-table td{vertical-align:top}
.ipam-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.ipam-table th.sortable:hover,.ipam-table th.on{color:var(--ink)}
.ipam-table th .arrow{display:inline-block;width:12px;margin-left:4px;color:var(--s1);font-size:9px}
.ipam-table td.nw{white-space:nowrap}
/* IPs, redes y MAC en tablas no se parten (la tabla se desplaza dentro de su contenedor) */
.ipam-table .ipam-mono,.ipam-table td.ipam-mono{white-space:nowrap;overflow-wrap:normal}
.ipam-table tr.clickable:hover td{background:var(--surface-2)}
.ipam-table tr.ipam-row-crit td{background:rgba(208,59,59,.08)}
.ipam-table tr.ipam-row-crit td:first-child{box-shadow:inset 3px 0 0 var(--critical)}
.ipam-table tr.ipam-row-warn td{background:rgba(250,178,25,.05)}
.ipam-table tr.ipam-row-warn td:first-child{box-shadow:inset 3px 0 0 var(--warning)}
.ipam-table tr.ipam-row-sel td{background:rgba(57,135,229,.10)}
/* (las acciones de las filas van en td.acts > .acts-row del marco; la columna pegada a la derecha
   .ipam-actions de la v1.10 ya no existe) */
.ipam-rowres{font-size:12px;margin-top:5px;max-width:300px;white-space:normal;overflow-wrap:anywhere}
.ipam-rowres.ok{color:var(--good)}
.ipam-rowres.err{color:var(--critical)}
.ipam-table input[type=checkbox]{accent-color:var(--s1);width:15px;height:15px;cursor:pointer;margin:0;vertical-align:middle}

/* Tablas de las vistas (rediseño v1.12.2): <table class="ipam-table ipam-fixed dense"> dentro de
   .tbl-wrap (encabezado fijo del marco) o de .ipam-tablewrap. Anchos por columna con <colgroup> y
   table-layout:fixed: UN renglón por fila y lo que no cabe se corta con «…» (el title de la celda
   lo dice completo). Así ninguna tabla ensancha la página ni se desplaza a lo ancho en escritorio;
   en ≤ 900 px recuperan su ancho mínimo y se desplazan dentro de su caja (abajo). */
.ipam-table.ipam-fixed{table-layout:fixed;min-width:0}
.ipam-fixed th,.ipam-fixed td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.ipam-fixed th.acts,.ipam-fixed td.acts{overflow:visible;text-overflow:clip}
.ipam-fixed .ipam-chip{margin:0}
.ipam-fixed .ipam-sub,.ipam-fixed .ipam-rowres{font-size:12px}
.ipam-fixed .ipam-rowres{display:inline;margin:0 6px 0 0}
/* un enlace-botón (IP, equipo) que no cabe también se corta con «…» */
.ipam-fixed td>.ipam-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* varias piezas en un renglón: cada una se encoge con «…»; chips, píldoras e insignias no */
.ipam-line{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.ipam-line>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ipam-line>.ipam-chip,.ipam-line>.pill,.ipam-line>.ipam-badge{flex:none}
.ipam-line+.ipam-line{margin-top:3px}
.ipam-if{color:var(--ink-2)}
/* si no cabe todo, se corta antes la interfaz que el nombre del equipo */
.ipam-line>.ipam-if{flex-shrink:3}
/* la barra de uso se ajusta al ancho de su columna (fuera de estas tablas mide 130–240 px) */
.ipam-fixed .ipam-meter{min-width:0;max-width:none}
/* «Qué se leyó» de Conflictos y hallazgos → Por equipo: los chips de conteo primero (se cortan con
   «…» si no caben) y «lecturas (N)» al final sin encogerse, así el plegable siempre se alcanza.
   Abierto baja a su propia línea (la fila crece solo mientras se consulta) */
/* (flex-wrap solo con el plegable abierto: siempre activo, los chips bajaban de línea en vez de
   encogerse y la fila medía 2 renglones) */
.ipam-read:has(>details.ipam-fetch[open]){flex-wrap:wrap}
.ipam-read>.ipam-read-c{flex:0 1 auto}
.ipam-line>details.ipam-fetch{flex:none;overflow:visible}
details.ipam-fetch{display:inline-block;vertical-align:middle}
details.ipam-fetch>summary{cursor:pointer}
details.ipam-fetch[open]{display:block;white-space:normal;margin:0 0 4px}
.ipam-read>details.ipam-fetch[open]{flex:1 0 100%}
/* hueco vacío del tamaño de un button.icon (28 px; 26 en .dense): en Discrepancias → Corregir cada
   acción tiene su lugar fijo y el mismo icono queda alineado de una fila a otra */
.acts-row>.ipam-slot{flex:none;display:inline-block;width:28px;height:1px}
.dense .acts-row>.ipam-slot{width:26px}
/* paginador y «por página» en la misma fila (el <select> sigue en el formulario con form=) */
.ipam-pagerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ipam-pagerow .pager{margin:0}
.ipam-pagerow .pager:empty{display:none}
.ipam-perpage{background:var(--plane);color:var(--ink);border:1px solid var(--border);border-radius:6px;
  padding:4px 8px;font:inherit;font-size:12px}
/* chips de conteo por estado (Inventario): el punto toma el color del estado (--c de .ipam-st-*) */
.chip .ipam-dot{background:var(--c,var(--muted))}
.chip.ipam-st-libre .ipam-dot{background:transparent;box-shadow:inset 0 0 0 1px var(--muted)}

/* enlaces con aspecto de texto (botón o <a>) */
.ipam-link{background:none;border:none;padding:0;color:var(--ink);font:inherit;cursor:pointer;text-align:left;
  text-decoration:none;border-radius:3px}
a.ipam-link{color:var(--ink)}
.ipam-link:hover{color:var(--s1);text-decoration:underline}
/* `font:inherit` de .ipam-link le quitaba la monoespaciada a las IP y redes con enlace */
.ipam-link.ipam-mono{font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ipam-link.strong{font-weight:600}

/* chips e insignias */
.ipam-chip{display:inline-block;margin:0 4px 3px 0;padding:1px 8px;border-radius:999px;font-size:11px;
  line-height:17px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
button.ipam-chip{cursor:pointer;font:inherit;font-size:11px}
button.ipam-chip:hover{border-color:var(--s1);color:var(--ink)}
.ipam-chip.on{border-color:var(--s1);color:var(--ink);box-shadow:inset 0 0 0 1px var(--s1)}
.ipam-chip.full{border-color:var(--ipam-full);color:var(--ipam-full);font-weight:700;letter-spacing:.02em}
.ipam-chip.folder{border-color:var(--ipam-folder);color:var(--ipam-folder)}
.ipam-chip.pub{border-color:var(--ipam-public);color:var(--ipam-public)}
.ipam-chip.crit{border-color:var(--critical);color:var(--critical);background:rgba(208,59,59,.10)}
.ipam-chip.warn{border-color:var(--warning);color:var(--warning);background:rgba(250,178,25,.08)}
.ipam-chip.ok{border-color:var(--good);color:var(--good)}
.ipam-chip.gw{border-color:var(--ipam-gw);color:var(--ipam-gw)}
.ipam-chip.flag{border-style:dashed}
.ipam-badge{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;
  letter-spacing:.02em;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.ipam-badge.cgnat{background:var(--critical);border-color:var(--critical);color:#fff}
.ipam-badge.nat{background:var(--s1);border-color:var(--s1);color:#fff}
.ipam-badge.port_forward{background:var(--serious);border-color:var(--serious);color:#1a1a19}
.ipam-badge.masquerade{color:var(--ink-2)}
.ipam-badge.pppoe{background:var(--good);border-color:var(--good);color:#fff}
.ipam-badge.dhcp{background:var(--ipam-pool);border-color:var(--ipam-pool);color:#fff}
.ipam-badge.vpn{background:var(--s1);border-color:var(--s1);color:#fff}
/* propósito de una subred: color por etiqueta (el resto, neutro) */
.ipam-pp{--c:var(--muted);display:inline-block;padding:0 7px;border-radius:5px;font-size:11px;line-height:18px;
  white-space:nowrap;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 15%,transparent);color:color-mix(in srgb,var(--c) 70%,var(--ink))}
.ipam-pp-loopback{--c:#a07be0}.ipam-pp-ptp{--c:#4fb3e8}.ipam-pp-backbone{--c:#6d7be8}
.ipam-pp-hotspot{--c:var(--s2)}.ipam-pp-cgnat{--c:#e0607e}.ipam-pp-pppoe{--c:var(--good)}
.ipam-pp-tr069{--c:#2fb3a0}.ipam-pp-olt{--c:#35c0d0}.ipam-pp-router{--c:var(--s1)}
.ipam-pp-dedicado{--c:var(--warning)}.ipam-pp-nat{--c:#d56bb8}

/* estados de una IP (--c) */
.ipam-st-conflicto{--c:var(--ipam-conflict)}
.ipam-st-discrepancia{--c:var(--ipam-disc)}
.ipam-st-en_uso{--c:var(--ipam-used)}
.ipam-st-asignada_offline{--c:var(--ipam-offline)}
.ipam-st-reciente{--c:var(--ipam-recent)}
.ipam-st-sin_confirmar{--c:var(--ipam-stale)}
.ipam-st-reservada{--c:var(--ipam-reserved)}
.ipam-st-asignada{--c:var(--ipam-assigned)}
.ipam-st-bloqueada{--c:var(--ipam-blocked)}
.ipam-st-retirada{--c:var(--ipam-retired)}
.ipam-st-pool{--c:var(--ipam-pool)}
.ipam-st-libre{--c:var(--ipam-free)}
.ipam-st-network,.ipam-st-broadcast{--c:var(--ipam-special)}
.pill.ipam-status .dot{background:var(--c)}
.pill.ipam-status.ipam-st-libre .dot{background:transparent;box-shadow:inset 0 0 0 1px var(--muted)}
.ipam-legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);align-items:center}
.ipam-lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ipam-lg i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;
  background:var(--c);color:#fff;font-style:normal;font-size:10px;font-weight:700}
.ipam-lg.ipam-st-libre i{background:transparent;box-shadow:inset 0 0 0 1px var(--axis);color:var(--muted)}

/* barra de uso real */
.ipam-meter{display:flex;align-items:center;gap:8px;min-width:130px;max-width:240px}
.ipam-meter .track{flex:1;height:8px;background:var(--grid);border-radius:4px;overflow:hidden;min-width:50px}
.ipam-meter .fill{height:100%;border-radius:4px;background:var(--s1)}
.ipam-meter .fill.warn{background:var(--warning)}
.ipam-meter .fill.crit{background:var(--critical)}
.ipam-meter .pct{font-size:12px;color:var(--ink-2);min-width:40px;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* clave/valor */
.ipam-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:13px;align-items:baseline}
.ipam-kv .k{color:var(--muted);white-space:nowrap}
.ipam-kv .v{color:var(--ink);min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ipam-kv .v.pre{white-space:pre-line}

/* conflictos: una tarjeta por dirección. Sus tablas tienen los mismos anchos de columna
   (<colgroup> + .ipam-fixed), así las columnas quedan alineadas de una tarjeta a la siguiente */
#ipam-f-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.ipam-conf-list{display:flex;flex-direction:column;gap:8px}
.ipam-conf{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--muted);border-radius:10px;
  padding:8px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ipam-conf.activo{border-left-color:var(--critical)}
.ipam-conf.latente{border-left-color:var(--warning)}
.ipam-conf.ignored{opacity:.62}
.ipam-conf-head{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.ipam-conf-head .ipam-link{font-size:15px;font-weight:600}
.ipam-conf-head .sp{flex:1}
.ipam-conf-head button{padding:3px 10px;font-size:12px}
.ipam-conf table{background:var(--surface-2)}
.ipam-conf .ipam-table{min-width:720px}
.ipam-conf .ipam-table.ipam-fixed{min-width:0}

/* selección múltiple (Sin subred) */
.ipam-bulk{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;background:var(--surface-2);
  border:1px solid var(--grid);border-radius:8px;flex-wrap:wrap;font-size:13px}
.ipam-bulk:empty{display:none}

/* diálogos del módulo */
dialog.ipam-dlg{max-width:760px}
dialog.ipam-dlg.wide{max-width:1040px}
dialog.ipam-dlg.narrow{max-width:560px}
#ipam-dialogs .dlg-body{display:flex;flex-direction:column;gap:12px}
.ipam-dlg .dlg-head .ipam-mono{font-size:15px}
.ipam-form{display:grid;gap:12px}
.ipam-form textarea{min-height:64px}
.ipam-form .ipam-ro{padding:7px 9px;border-radius:6px;background:var(--plane);border:1px dashed var(--border);
  color:var(--ink-2);font-size:13px;min-height:34px;overflow-wrap:anywhere}
.ipam-diff td{font-size:12px;vertical-align:top;overflow-wrap:anywhere}
.ipam-diff td.k{color:var(--muted);white-space:nowrap}
.ipam-diff tr.chg td{background:rgba(250,178,25,.07)}
.ipam-diff .old{color:#ff9a9a}
.ipam-diff .new{color:#9fe39f}
.ipam-pre{margin:0;padding:8px 10px;background:var(--plane);border:1px solid var(--border);border-radius:6px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:pre-wrap;
  overflow:auto;max-height:40vh;overflow-wrap:anywhere}
.ipam-bulk-list .ipam-table{min-width:640px}
.ipam-bulk-list input[type=text]{width:100%;min-width:160px;background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:4px 7px;font:inherit;font-size:12px}

/* caja compacta de la ficha del equipo */
.ipam-box{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:10px 14px;font-size:13px;color:var(--ink-2);margin-bottom:10px;min-width:0}
.ipam-box-line{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.ipam-box-line b{color:var(--ink)}
.ipam-box-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ipam-box-actions button,.ipam-box button.mini{padding:3px 9px;font-size:12px;margin:0}
.ipam-box .ipam-table{min-width:620px;background:var(--surface)}
.ipam-box .ipam-tablewrap{max-height:340px;overflow:auto}
.ipam-box .ipam-table th,.ipam-box .ipam-table td{padding:5px 8px;font-size:12px}
.ipam-box h4{margin:4px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:600}
.ipam-box .ipam-err{font-size:12px}
.ipam-netline{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:3px 0;border-top:1px solid var(--grid)}
.ipam-netline:first-of-type{border-top:none}
.ipam-netline .ipam-meter{min-width:120px}

/* en el celular y la tableta las tablas de las vistas recuperan un ancho mínimo y se desplazan
   dentro de su caja (.tbl-wrap del marco y .ipam-tablewrap lo hacen en ≤ 900 px). El mínimo de
   cada tabla lo calcula tbl() de ipam.js (--ipam-minw: columnas fijas + ~170 px por columna libre);
   un mínimo único menor que la suma de las columnas fijas dejaba en 0 px las columnas libres.
   Con overflow-x:auto la propia .tbl-wrap pasa a ser la referencia del sticky y el thead quedaba
   --hd-h px más abajo, encima de las dos primeras filas: aquí el encabezado vuelve a ser estático
   (se pierde el thead fijo, no el dato), como #events/#alerts/#devices del marco */
@media(max-width:900px){
  .ipam-table.ipam-fixed{min-width:var(--ipam-minw,880px)}
  .ipam-table.ipam-fixed.narrow{min-width:var(--ipam-minw,560px)}
  .ipam-conf .ipam-table.ipam-fixed{min-width:var(--ipam-minw,720px)}
  .tbl-wrap > .ipam-table > thead > tr > th{position:static}
}
@media(max-width:700px){
  .ipam-tools{margin-left:0;justify-content:flex-start;width:100%}
  .ipam-filters input[type=search]{flex:1 1 180px;width:auto;max-width:none}
  .ipam-kv{grid-template-columns:1fr}
  .ipam-kv .k{margin-top:4px}
}