/* NOC FibraSLP · vista «Colas» (Simple Queues en vivo) — v1.13
 * Estilos de static/colas.js, con prefijo .cq-. Reutiliza las variables y clases globales de
 * index.html (.tiles.compact, .tbl-wrap, .dense, .trunc, .sub, .mono, .pill/.dot, .chips/.chip,
 * .filters, .pager, details.howto, button.icon, details.kebab) sin redefinirlas: aquí solo se
 * ajustan dentro de la vista con el prefijo propio.
 *
 * Disposición: con ancho de sobra (root ≥ 1300 px, lo decide colas.js con la clase .cq-wide) la
 * lista de routers va a la izquierda, fija al bajar; si no, se elige con un <select> en la barra.
 * Ningún contenedor de la tabla lleva overflow: el encabezado de la tabla (.tbl-wrap) es fijo y
 * se pega bajo el encabezado de la página. */

#colas-root{display:block}
.cq-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
#colas-root.cq-wide .cq-layout{grid-template-columns:236px minmax(0,1fr)}

/* ── Lista de routers (izquierda) ─────────────────────────────────────────── */
.cq-side{display:none}
#colas-root.cq-wide .cq-side{display:flex;flex-direction:column;position:sticky;
  top:calc(var(--hd-h,50px) + 12px);max-height:calc(100vh - var(--hd-h,50px) - 32px);
  background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.cq-side-head{display:flex;flex-direction:column;gap:6px;padding:8px 8px 8px;border-bottom:1px solid var(--grid)}
.cq-side-t{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cq-side-t #cq-rtotal{font-variant-numeric:tabular-nums;letter-spacing:0}
.cq-side .filters input{width:100%}
.cq-rlist{flex:1 1 auto;min-height:0;overflow:auto;padding:4px;scrollbar-width:thin}
.cq-r{position:relative;display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 10px;
  border-radius:6px;color:var(--ink-2);text-decoration:none;font-size:13px}
.cq-r:hover{background:var(--surface-2);color:var(--ink)}
.cq-r.on{background:var(--surface-2);color:var(--ink);box-shadow:inset 3px 0 0 var(--s1)}
.cq-r:focus-visible{outline:2px solid var(--s1);outline-offset:-2px}
.cq-rn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-rc{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cq-r.on .cq-rc{color:var(--ink-2)}
.cq-rc.none{opacity:.6}
.cq-rerr{display:inline-flex;align-items:center;color:var(--critical);font-size:12px}
.cq-rerr svg.i{width:14px;height:14px}
.cq-rgroup{margin-top:4px;border-top:1px solid var(--grid);padding-top:4px}
.cq-rgroup > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;height:28px;
  padding:0 10px;border-radius:6px;font-size:12px;color:var(--muted);user-select:none}
.cq-rgroup > summary::-webkit-details-marker{display:none}
.cq-rgroup > summary::before{content:"▸";font-size:10px;width:10px}
.cq-rgroup[open] > summary::before{content:"▾"}
.cq-rgroup > summary:hover{color:var(--ink-2);background:var(--surface-2)}
.cq-rgroup > summary b{font-weight:600;font-variant-numeric:tabular-nums}
/* los que no tienen colas, en gris (con color, no con opacity: el punto de estado sigue legible) */
.cq-rgroup .cq-r:not(.on){color:var(--muted)}
.cq-rmsg{padding:10px;font-size:12px;color:var(--muted);line-height:1.45}
.cq-rmsg.err{color:var(--critical)}

/* ── Columna principal ────────────────────────────────────────────────────── */
.cq-main{display:flex;flex-direction:column;gap:10px;min-width:0}
/* zonas sin contenido (pager, ayuda, avisos) no dejan huecos de 10 px entre sí */
.cq-main > :empty{display:none}
/* encabezado del router: una fila (nombre · IP · sitio · modelo · estado … en vivo · ficha) */
.cq-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;min-height:42px;min-width:0;
  padding:5px 8px 5px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.cq-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex:0 1 auto}
.cq-title b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.cq-title .cq-m{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 0;white-space:nowrap;overflow:hidden}
.cq-title .cq-m .mono{color:var(--ink-2);font-size:12.5px}
.cq-title .cq-m .sub{margin-left:0;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cq-head > .pill{flex:none}
.cq-head-r{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.cq-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.cq-live .cq-age{color:var(--muted);font-variant-numeric:tabular-nums}
.cq-live.warn{color:var(--warning)}
/* en pausa (texto seleccionado en la tabla, menú ⋯ o diálogo abierto): ámbar y SIN latido, para
   que nadie confunda una tabla congelada con datos en vivo; la edad sigue contando */
.cq-live.paused{color:var(--warning)}
.cq-live.paused .cq-age,.cq-live.warn .cq-age{color:inherit;opacity:.85}
/* punto «en vivo» que late despacio: dice que la tabla se mueve sola sin mirar la hora */
.cq-live .dot.good{animation:cq-pulse 2.4s ease-in-out infinite}
@keyframes cq-pulse{0%,100%{box-shadow:0 0 0 0 rgba(12,163,12,.55)}50%{box-shadow:0 0 0 4px rgba(12,163,12,0)}}
@media(prefers-reduced-motion:reduce){.cq-live .dot.good{animation:none}}

/* tarjetas: 5 en una fila desde ~800 px (el mínimo global de 150 px las dejaba en 6-7 columnas
   con huecos a 1920) */
.cq-tiles.tiles.compact{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media(min-width:1200px){#colas-root .cq-tiles.tiles.compact{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* avisos (sin actualizar, sin tráfico, modo simulado) */
#cq-notes{display:flex;flex-direction:column;gap:6px}
#cq-notes:empty,.cq-box-msg:empty{display:none}
.cq-note{display:flex;align-items:flex-start;gap:8px;padding:7px 12px;border-radius:8px;font-size:12.5px;
  line-height:1.45;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--s1)}
.cq-note.warn{border-left-color:var(--warning);background:color-mix(in srgb,var(--warning) 7%,var(--surface))}
.cq-note svg.i{margin-top:1px;color:var(--ink-2)}
.cq-note.warn svg.i{color:var(--warning)}
.cq-note b{color:var(--ink)}

/* barra: router (solo angosto) · búsqueda · orden · dirección · filas por página · total */
.cq-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cq-bar .filters{flex-wrap:nowrap}
#colas-root.cq-wide .cq-rpick{display:none}
.cq-rpick select{min-width:240px;max-width:min(420px,100%);font-size:13px;padding:5px 8px}
.cq-filters input[type=search]{width:300px;max-width:100%}
.cq-filters select{max-width:220px}
.cq-filters button.cq-dir{width:28px;height:28px;font-size:14px;line-height:1;color:var(--ink-2)}
.cq-count{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
#cq-help:empty{display:none}
#cq-help details.howto{margin:0}
#cq-help details.howto code,.cq-pick code{background:var(--plane);padding:0 4px;border-radius:4px}

/* ── Tabla de colas ───────────────────────────────────────────────────────── */
#cq-twrap.cq-busy > table{opacity:.6;transition:opacity .15s}
.cq-table td{white-space:nowrap}
/* el ancho que sobra (1920) se lo queda Nombre + comentario: así las tasas quedan juntas a la
   derecha y no a 300 px del nombre al que pertenecen */
.cq-table th.cq-c-name{width:34%}
.cq-table.compact th.cq-c-name{width:30%}
.cq-table th{white-space:nowrap}
.cq-table th .cq-sort{background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:3px;border-radius:3px}
.cq-table th .cq-sort:hover,.cq-table th .cq-sort.on{color:var(--ink)}
.cq-table th .cq-sort:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
/* «%» es un control (ordena por % del límite): 12 px como pide el marco; line-height 14 px para
   que con su borde mida 16 px y el th no crezca */
.cq-table th .cq-sortpct{margin-left:6px;padding:0 4px;border:1px solid var(--border);border-radius:4px;
  font-size:12px;line-height:14px;letter-spacing:0}
.cq-table th .cq-sortpct.on{border-color:var(--s1)}
.cq-table th .cq-arr{color:var(--s1);font-size:9px}
.cq-table th.on{color:var(--ink-2)}
/* nombre + comentario en un renglón. La celda mide lo que dice su th (34 %), no lo que mide su
   texto (max-width:0, el truco clásico de las tablas automáticas); dentro, el comentario se
   encoge primero (flex-shrink alto) y el nombre después, siempre con «…» y el title completo */
.cq-table td.cq-c-name{max-width:0}
.cq-nc{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden}
.cq-nc > *{flex:none}
/* el nombre no se encoge mientras quede comentario (solo se corta si él solo no cabe) */
.cq-nc > .cq-n{flex:0 0 auto;--trunc:100%;color:var(--ink)}
.cq-nc > .cq-com{flex:0 1 auto;min-width:0;--trunc:100%;margin-left:0}
.cq-table tr.dim .cq-n{color:var(--muted)}
.cq-table .cq-t{--trunc:190px;color:var(--ink-2)}
.cq-child{color:var(--muted)}
.cq-tag{display:inline-block;padding:0 6px;border-radius:999px;border:1px solid var(--border);
  font-size:12px;line-height:1.35;color:var(--muted);align-self:center}
.cq-tag.off{border-style:dashed}
/* tasa: valor · barra contra max-limit · %; columnas fijas para que no bailen al refrescar */
.cq-rate{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;vertical-align:middle}
.cq-v{min-width:78px;text-align:right}
.cq-vs{display:none;min-width:46px;text-align:right}
.cq-meter{flex:none;width:72px;height:6px;border-radius:3px;background:var(--grid);overflow:hidden}
.cq-meter > i{display:block;height:100%;border-radius:3px;background:var(--s1)}
.cq-meter.warn > i{background:var(--warning)}
/* por encima de 100 % (ráfaga): llena, ámbar y con rayas, para distinguirla de una saturada */
.cq-meter.over > i{background:repeating-linear-gradient(-45deg,var(--warning) 0 4px,#c98a0a 4px 8px)}
.cq-pct{width:34px;text-align:right;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cq-pct.warn,.cq-pct.over{color:var(--warning);font-weight:600}
.cq-nolim{width:114px;font-size:12px;color:var(--muted);text-align:left}
.cq-table td.cq-c-lim,.cq-table td.cq-c-bytes{color:var(--ink-2)}
/* cola saturada: barra ámbar de 3 px a la izquierda (sin teñir la fila entera) */
.cq-table tr.cq-sat > td:first-child{box-shadow:inset 3px 0 0 var(--warning)}

/* lista para elegir router (sin router en el hash) */
.cq-pick{color:var(--ink-2);font-size:13px;line-height:1.5;margin:0 0 8px;max-width:120ch}
.cq-ov{min-width:0}
.cq-ov .cq-ovn{--trunc:320px;color:var(--ink);text-decoration:none}
.cq-ov .cq-ovn:hover{text-decoration:underline}
.cq-ov-ago{color:var(--ink-2)}

/* vacíos y errores en lugar de la tabla */
.cq-empty{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;color:var(--ink-2);line-height:1.5;font-size:13px}
.cq-empty > svg.i{width:18px;height:18px;margin-top:1px;color:var(--muted)}
.cq-empty b{color:var(--ink);font-weight:600}
.cq-empty-t{margin-top:2px;overflow-wrap:anywhere}
.cq-empty.err{border-left:3px solid var(--critical)}
.cq-empty.err > svg.i{color:var(--critical)}

#cq-pager{margin-top:0}
#cq-pager:empty{display:none}
.cq-foot{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.cq-foot:empty{display:none}
.cq-flash{color:var(--good)}

/* ── Anchos: la tabla en un renglón a 1920, 1366 y en el celular ─────────── */
@media(max-width:1700px){
  .cq-table .cq-t{--trunc:160px}
}
@media(max-width:1500px){
  .cq-table .cq-t{--trunc:140px}
  .cq-meter{width:52px} .cq-nolim{width:94px}
}
/* ≤ 1250: el consumo acumulado (dato de consulta, no de vigilancia) sale de la tabla; queda en
   las tarjetas de totales */
@media(max-width:1250px){
  .cq-table th.cq-c-bytes,.cq-table td.cq-c-bytes{display:none}
}
@media(max-width:900px){
  .cq-table th.cq-c-lim,.cq-table td.cq-c-lim{display:none}
  .cq-filters input[type=search]{width:220px}
}
/* celular: nombre + bajada + subida con la tasa abreviada («62.5M»); el resto en los title */
@media(max-width:600px){
  .cq-table th.cq-c-target,.cq-table td.cq-c-target{display:none}
  /* sin target ni límite, el nombre se lleva el ancho que sobra (con 34 % se cortaban casi todos
     los nombres de cliente a ~12 letras y a Bajada/Subida les sobraba aire) */
  .cq-table th.cq-c-name,.cq-table.compact th.cq-c-name{width:46%}
  .cq-table .cq-tag{display:none}
  /* sin lugar para los dos: si hay comentario (en las colas por IP es el nombre del cliente) se
     muestra él en lugar del nombre genérico «Mkws_queue_…», que cortado ya no distinguía nada */
  .cq-nc:has(> .cq-com) > .cq-n{display:none}
  .cq-nc > .cq-com{color:var(--ink);font-size:13px}
  /* sin barra: la tasa abreviada y el % (en ámbar si está saturada) caben en ~85 px por columna */
  .cq-v,.cq-meter{display:none} .cq-vs{display:inline;min-width:40px}
  .cq-pct{width:30px}
  .cq-nolim{width:auto;font-size:0} .cq-nolim::after{content:"∞";font-size:12px}
  .cq-rate{gap:4px}
  /* el 46 % del nombre solo se cumple si Bajada y Subida pueden encogerse: su mínimo lo ponía el th
     («BAJADA ▼ [%]», ~97 px). El botón «%» sale del encabezado (ordenar por % sigue en «Ordenar
     por») y la tasa se aprieta: cada columna queda en ~86 px y el nombre gana ese ancho */
  .cq-table th .cq-sortpct{display:none}
  .cq-table.dense th{letter-spacing:.02em}
  .cq-table.dense td,.cq-table.dense th{padding-left:6px;padding-right:6px}
  .cq-table td.acts,.cq-table th.acts{display:none}
  .cq-bar{gap:6px}
  .cq-bar .filters{flex-wrap:wrap}
  .cq-rpick,.cq-rpick select{width:100%;min-width:0;max-width:none}
  .cq-filters{width:100%}
  .cq-filters input[type=search]{width:auto;flex:1 1 100%}
  .cq-filters select{flex:1 1 0;min-width:0;max-width:none}
  .cq-count{margin-left:0}
  .cq-head{padding:6px 10px}
  .cq-title{flex-basis:100%}
  .cq-head-r{margin-left:auto}
  /* tarjetas en dos filas (3 contadores + 2 tasas) y sin subtítulo: ~115 px en lugar de ~240 */
  #colas-root .cq-tiles.tiles.compact{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .cq-tiles .tile{grid-column:span 2;padding:6px 10px}
  .cq-tiles .tile:nth-child(n+4){grid-column:span 3}
  .cq-tiles.tiles.compact .tile .sub{display:none}
  .cq-tiles.tiles.compact .tile .value{font-size:19px}
  .cq-ov th:nth-child(2),.cq-ov td:nth-child(2),.cq-ov th:nth-child(5),.cq-ov td:nth-child(5){display:none}
  .cq-ov .cq-ovn{--trunc:170px}
  .cq-ov .sub{display:none}
  /* estado solo con el punto de color (el texto queda en el title de la píldora) */
  .cq-ov td:nth-child(3) .pill{font-size:0;gap:0;padding:4px}
  .cq-ov th:nth-child(3){font-size:0}
}
/* ≤ 900 px .tbl-wrap se desplaza a lo ancho y su caja pasa a ser la referencia del sticky: el
   thead quedaría pegado --hd-h px más abajo, encima de las filas (como en Alertas) */
@media(max-width:900px){
  #cq-twrap.tbl-wrap > table > thead > tr > th{position:static}
}

/* ── Tabla compacta de la ficha (COLAS.deviceBox) ─────────────────────────── */
.cq-box{display:flex;flex-direction:column;gap:8px;min-width:0}
.cq-box-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cq-box-stats{flex:1 1 auto;min-width:0}
.cq-box-stats:empty{display:none}
.cq-box-bar .filters input{width:220px;max-width:100%}
.cq-box-open{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--s1);
  text-decoration:none;white-space:nowrap}
.cq-box-open:hover{text-decoration:underline}
.cq-box-wrap.tbl-wrap.scroll{--tbl-max:520px}
/* La caja se desplaza dentro de sí misma: su thead va pegado a SU borde (top:0), no bajo el
   encabezado de la página. ficha.css fija los th de #view-equipo .tbl-wrap bajo sus pestañas
   (top: --hd-h + --fi-tabs-h, y position:static en ≤ 900 px) con un selector de id que le gana a
   la regla global .tbl-wrap.scroll; sin esto el encabezado quedaba a 88 px, en medio de las filas.
   :is() toma la especificidad de su argumento más fuerte (un id), así que esta gana en la ficha,
   en la vista Colas y en cualquier otro lugar donde se incruste la caja. */
:is(#view-equipo,#colas-root,body) .cq-box-wrap.tbl-wrap.scroll > table > thead > tr > th{
  position:sticky;top:0}
.cq-box-msg{display:flex;flex-direction:column;gap:6px}
.cq-box-foot{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.cq-box-foot:empty{display:none}
.cq-box-foot .cq-paused{color:var(--warning)}
.cq-box-foot .cq-age{font-variant-numeric:tabular-nums}
.cq-box-foot a{color:var(--s1);text-decoration:none}
.cq-box-foot a:hover{text-decoration:underline}