/* NOC FibraSLP · vista «PPPoE» — v1.8 (posible infección: v1.16)
 * Estilos del módulo static/pppoe.js (prefijo .pppoe-). Reutiliza las variables y clases
 * de index.html (.tiles/.tile, .pill/.dot, .filters, .check, .pager, table/th/td, .res,
 * button.mini, dialog/.dlg-head/.dlg-body, .hint). */
/* Rediseño Fase 1 (v1.12): chips de routers de 26 px, encabezado del router en una fila,
   tablas .dense dentro de .tbl-wrap (encabezado fijo) y comentario en la misma línea del
   usuario. Las clases globales (.dense, .tbl-wrap, .trunc, .sub, .mono, .tiles.compact,
   .howto, .pill) NO se redefinen aquí: solo se ajustan con el prefijo .pppoe-.
   Versión 1.16.0: pppoe.js la pide así en ensureCss() e index.html debe pedir la misma. */
/* v1.16: «posible infección» va en violeta, aparte del rojo del revendedor (es más grave: el
   equipo del cliente ataca a otros desde nuestras IP). La paleta no trae violeta: se define aquí
   con el mismo esquema que el ámbar y el rojo de abajo (rgba del color base). */
#pppoe-root{display:flex;flex-direction:column;gap:12px}
#pppoe-stage{display:flex;flex-direction:column;gap:12px}
.pppoe-sec{margin:0}
.pppoe-sec .sec-head{margin-bottom:6px}
.pppoe-sec .sec-head .count{display:inline-flex;align-items:center;gap:8px}
.pppoe-sec .sec-head .count button.mini{margin:0}
/* barra de routers: chips de 26 px como los .chip globales (antes 34 px y 3 renglones) */
.pppoe-rbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pppoe-rpill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink-2);text-decoration:none;
  font-size:12.5px;white-space:nowrap;max-width:100%;font-variant-numeric:tabular-nums;line-height:1}
.pppoe-rpill:hover{color:var(--ink);border-color:var(--muted)}
.pppoe-rpill.on{color:var(--ink);border-color:var(--s1);background:color-mix(in srgb,var(--s1) 16%,var(--surface))}
/* router sin monitorear: atenuado con colores (borde punteado y texto gris), no con opacity: la
   opacidad del chip también apagaba el icono de pausa, que es lo que explica por qué está gris */
.pppoe-rpill.off{border-style:dashed;color:var(--muted)}
.pppoe-rpill.off b{font-weight:500}
.pppoe-rpill b{font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.pppoe-rpill .n{color:var(--muted);font-size:12px}
.pppoe-rpill svg.pppoe-off{width:12px;height:12px;color:var(--ink-2);vertical-align:0}
.pppoe-rerr{display:inline-flex;color:var(--critical)}
.pppoe-rerr svg.i{width:14px;height:14px;vertical-align:0}
.pppoe-b{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;font-size:12px;
  font-weight:700;text-align:center;line-height:17px}
.pppoe-b.warn{background:var(--warning);color:#1a1a19}
.pppoe-b.crit{background:var(--critical);color:#fff}
.pppoe-b.inf{background:#a855f7;color:#fff}
.dot.pppoe-inf{background:#a855f7}
#pppoe-root .tile .value.pppoe-v-inf{color:#c084fc}
/* encabezado del router: UNA fila (antes tres apiladas, ~108 px) que se parte solo si no cabe */
.pppoe-head{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:7px 14px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px;min-width:0}
.pppoe-title{display:flex;align-items:baseline;gap:10px;min-width:0}
/* sin lugar, se recorta primero el sitio y el host y el nombre del router solo después (en celular
   se leía «MIKROTIk CI…» con el sitio y la IP completos): .m parte de 0 y crece hasta lo que deje
   libre el nombre; el nombre solo encoge si no cabe ni solo. (Con flex-shrink 1000 contra 1, el
   nombre igual encogía una fracción de píxel y ya salía con «…».) */
.pppoe-title b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.pppoe-title .m{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1 1 0;min-width:0}
.pppoe-title .pill{align-self:center;flex:none}
.pppoe-meta{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);min-width:0}
.pppoe-meta .err{color:var(--critical);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pppoe-actions{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0}
.pppoe-actions button{padding:3px 10px;font-size:12px;white-space:nowrap}
.pppoe-actions .check{font-size:12px;white-space:nowrap}
.pppoe-actions .res{min-width:0;max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pppoe-actions .res:empty{display:none}
/* barra de filtros */
.pppoe-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pppoe-bar .count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.pppoe-filters input[type=search]{width:240px;max-width:44vw}
/* la regla global «.filters input{width:240px}» también estiraba la casilla «solo activos»
   (quedaba un hueco de 240 px antes del texto) */
.pppoe-filters .check input{width:auto}
.pppoe-filters .check{font-size:12px;color:var(--ink-2)}
.pppoe-filters button.mini{margin-left:0;min-width:30px}
/* tarjetas que filtran: embudo pequeño junto a la etiqueta */
#pppoe-root .tile svg.pppoe-tf{width:11px;height:11px;margin-right:5px;vertical-align:-1px;opacity:.7}
#pppoe-root button.tile.on svg.pppoe-tf{color:var(--s1);opacity:1}
/* ayuda plegable del criterio (UI.howto): su resumen es el criterio en una línea */
#pppoe-crit details.howto{margin:0}
#pppoe-crit details.howto > summary{max-width:100%}
#pppoe-crit details.howto:not([open]) > summary{color:var(--ink-2)}
#pppoe-crit details.howto code{background:var(--plane);padding:0 4px;border-radius:4px}
#pppoe-crit:empty{display:none}
.pppoe-sec #pppoe-crit{margin-bottom:6px}
/* tabla: .dense (fila ≈ 31 px) dentro de .tbl-wrap (encabezado fijo) */
.pppoe-table th.sortable{cursor:pointer;user-select:none}
.pppoe-table th.sortable:hover{color:var(--ink)}
.pppoe-table th.on{color:var(--ink)}
.pppoe-table th .arrow{color:var(--s1);font-size:9px}
/* los encabezados SÍ pueden partirse en dos renglones («CONEX. / AHORA»): con la tabla
   automática solo se parten cuando no cabe a lo ancho (1366 px), y así no la ensanchan los
   títulos, que eran más anchos que los números de debajo */
.pppoe-table th{white-space:normal;vertical-align:bottom}
.pppoe-table td{white-space:nowrap}
.pppoe-table td.num.warn{color:var(--warning);font-weight:600}
.pppoe-table td.num.crit{color:var(--critical);font-weight:600}
.pppoe-table tr.pppoe-lv-suspect td{background:rgba(250,178,25,.06)}
.pppoe-table tr.pppoe-lv-reseller td{background:rgba(208,59,59,.10)}
.pppoe-table tr.pppoe-lv-suspect:hover td{background:rgba(250,178,25,.12)}
.pppoe-table tr.pppoe-lv-reseller:hover td{background:rgba(208,59,59,.16)}
.pppoe-table tr.pppoe-lv-suspect td:first-child{box-shadow:inset 3px 0 0 var(--warning)}
.pppoe-table tr.pppoe-lv-reseller td:first-child{box-shadow:inset 3px 0 0 var(--critical)}
.pppoe-table tr.pppoe-lv-infected td{background:rgba(168,85,247,.12)}
.pppoe-table tr.pppoe-lv-infected:hover td{background:rgba(168,85,247,.19)}
.pppoe-table tr.pppoe-lv-infected td:first-child{box-shadow:inset 3px 0 0 #a855f7}
/* RESUMEN: ahí todas las filas son sospechosas o revendedoras, así que el tinte ámbar en todas
   ya no distinguía nada (la tabla se veía amarilla y el revendedor se perdía). Se quita el
   tinte ámbar y queda la barra de 3 px; el revendedor conserva su tinte rojo. En la tabla del
   router sí se deja, porque ahí sí hay filas normales. */
#pppoe-top tr.pppoe-lv-suspect td{background:none}
#pppoe-top tr.pppoe-lv-suspect:hover td{background:var(--surface-2)}
.pppoe-table td.pppoe-rt{color:var(--ink-2);--trunc:190px}
.pppoe-table .pppoe-mac{color:var(--ink-2)}
.pppoe-rate{color:var(--ink-2)}
/* velocidad: completa («↓ 1.05 Mbps · ↑ 20 Mbps») o abreviada («↓1.05M ↑20M»); pppoe.js pinta las
   dos y aquí se elige una según el ancho (la completa siempre queda en el title de la celda) */
.pppoe-rate .pppoe-rs{display:none}
/* ≤ 1680 px: sin la columna MAC (va en el title de la IP) y con la velocidad abreviada, la tabla
   del router baja de ~1,300 a ~1,070 px y cabe a 1366 sin desplazarse dentro de su caja (con 1600
   de corte, entre 1601 y 1650 px todavía no cabía) */
@media(max-width:1680px){
  .pppoe-table th.pppoe-mac,.pppoe-table td.pppoe-mac{display:none}
  .pppoe-rate .pppoe-rl{display:none}
  .pppoe-rate .pppoe-rs{display:inline}
}
.pppoe-lvl .pppoe-score{font-variant-numeric:tabular-nums}
.pppoe-inactive{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;font-size:12px;
  line-height:1.3;border:1px solid var(--border);color:var(--muted);vertical-align:1px}
/* comentario de la sesión (nombre/contrato real del cliente): en gris en la MISMA línea del
   usuario (.sub.trunc); el ancho tope se achica en pantallas angostas para que la tabla quepa */
.pppoe-table .pppoe-comment{--trunc:260px}
@media(max-width:1700px){.pppoe-table .pppoe-comment{--trunc:200px} .pppoe-table td.pppoe-rt{--trunc:150px}}
@media(max-width:1450px){.pppoe-table .pppoe-comment{--trunc:150px} .pppoe-table td.pppoe-rt{--trunc:120px}}
/* 1280: la tabla del resumen (1,053 px) no cabía en su caja de 1,008 */
@media(max-width:1320px){.pppoe-table .pppoe-comment{--trunc:110px} .pppoe-table td.pppoe-rt{--trunc:100px}}
/* celular: los chips de routers en UNA fila que se desplaza a lo ancho (antes 14 renglones, ~470 px
   antes de las tarjetas). .pppoe-rbar no envuelve a ninguna tabla, así que su overflow no afecta
   al encabezado fijo de .tbl-wrap */
@media(max-width:600px){
  .pppoe-rbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
  .pppoe-rbar > *{flex:none}
}
/* vacíos y pie */
.pppoe-empty{color:var(--muted);padding:18px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;line-height:1.5}
.pppoe-empty.inline{height:26px;display:inline-flex;align-items:center;padding:0 12px;font-size:12px}
.pppoe-foot{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.pppoe-foot .err{color:var(--critical)}
/* diálogo de detalle */
dialog.pppoe-dlg{max-width:900px}
.pppoe-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
@media(max-width:700px){.pppoe-dgrid{grid-template-columns:1fr}}
.pppoe-kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-content:start;font-size:13px}
.pppoe-kv .k{color:var(--muted);white-space:nowrap}
.pppoe-kv .v{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;min-width:0;overflow-wrap:anywhere}
.pppoe-kv .v .m{color:var(--muted);font-size:12px}
.pppoe-kv .v.warn{color:var(--warning);font-weight:600}
.pppoe-kv .v.crit{color:var(--critical);font-weight:600}
.pppoe-kv .v.pppoe-v-inf{color:#c084fc;font-weight:600}
.pppoe-why{margin-top:12px;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.5;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2)}
.pppoe-why.lv-suspect{border-color:rgba(250,178,25,.55);background:rgba(250,178,25,.12);color:#ffd479}
.pppoe-why.lv-reseller{border-color:rgba(208,59,59,.6);background:rgba(208,59,59,.12);color:#ff9a9a}
.pppoe-why.lv-infected{border-color:rgba(168,85,247,.6);background:rgba(168,85,247,.13);color:#d8b4fe}
.pppoe-why ul{margin:4px 0 0;padding-left:18px}
.pppoe-why b{color:inherit}
.pppoe-chart{margin-top:12px}
.pppoe-chart svg{display:block;width:100%;height:auto;overflow:visible}
.pppoe-chart .bar.dn{fill:var(--s1);opacity:.8}
.pppoe-chart .bar.up{fill:#7fb3f0;opacity:.8}
.pppoe-chart .bar.today{opacity:1}
.pppoe-chart .conn{fill:none;stroke:var(--warning);stroke-width:2}
.pppoe-chart .cdot{fill:var(--warning)}
.pppoe-chart .th{stroke-width:1;stroke-dasharray:4 3;opacity:.7}
.pppoe-chart .th.g{stroke:var(--s1)}
.pppoe-chart .th.w{stroke:var(--warning)}
.pppoe-chart .th.c{stroke:var(--critical)}
.pppoe-chart .axis{stroke:var(--axis)}
.pppoe-chart text{fill:var(--muted);font-size:9.5px}
.pppoe-chart text.today{fill:var(--ink);font-weight:600}
.pppoe-chart text.c{fill:var(--warning)}
.pppoe-chart .lbl{font-size:9px;font-weight:600}
.pppoe-chart .lbl.g{fill:#7fb3f0}
.pppoe-chart .lbl.w{fill:#ffd479}
.pppoe-chart .lbl.c{fill:#ff9a9a}
.pppoe-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px}
.pppoe-legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;margin-right:4px}
.pppoe-legend .sw.dn{background:var(--s1)}
.pppoe-legend .sw.up{background:#7fb3f0}
.pppoe-legend .sw.ln{background:var(--warning);height:3px;border-radius:2px}
.pppoe-daily{margin-top:12px;font-size:12px}
.pppoe-daily td,.pppoe-daily th{padding:5px 8px}
.pppoe-daily td .m{color:var(--muted)}
.pppoe-daily tr.flag td{background:rgba(250,178,25,.08)}
.pppoe-daily tr.inf td{background:rgba(168,85,247,.12)}
.pppoe-daily td.num.inf{color:#c084fc;font-weight:600}
.pppoe-daily td.num.warn{color:var(--warning);font-weight:600}
.pppoe-daily td.num.crit{color:var(--critical);font-weight:600}