/* NOC FibraSLP · vista «Starlinks» — v1.7
 * Estilos del módulo static/starlinks.js (prefijo .wan-). Reutiliza las variables y clases
 * de index.html (.tiles/.tile, .pill/.dot, .check, .card, .grid2, label.f, .res, .meter). */
/* Rediseño Fase 1 (v1.12): tarjetas .tiles.compact, tarjeta de bienvenida sin líneas, acciones
   de cada línea como iconos (Eliminar en el ⋯ y en el diálogo) y letra de 12 px como mínimo. Las
   clases globales (.tiles.compact, .howto, .pill, button.icon, .kebab) no se redefinen aquí.
   Versión 1.8.0: starlinks.js la pide así en ensureCss() e index.html debe pedir la misma. */
#starlinks-root{display:flex;flex-direction:column;gap:12px}
.wan-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wan-bar .legend{margin:0}
.wan-bar .spacer{flex:1}
.wan-bar input[type=search]{width:220px;max-width:44vw;background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:5px 9px;font:inherit;font-size:13px}
.wan-bar input[type=search]:focus{outline:none;border-color:var(--s1)}
.wan-bar .check{font-size:12px}
/* mínimo de 720 px por tarjeta: con el contenido a todo el ancho, 520 px dejaba TRES columnas a
   1920 y el panel lateral partía cada valor en dos renglones (y la gráfica quedaba diminuta) */
.wan-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(720px,100%),1fr))}
@media(max-width:1100px){.wan-list{grid-template-columns:1fr}}
.wan-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px;min-width:0;
  border-top:3px solid var(--muted)}
.wan-card.lv-ok{border-top-color:var(--good)}
.wan-card.lv-warn{border-top-color:var(--warning)}
.wan-card.lv-crit,.wan-card.lv-emerg,.wan-card.lv-exhausted{border-top-color:var(--critical)}
.wan-card.lv-none{border-top-color:var(--s1)}
.wan-card.off{opacity:.6}
.wan-card.hidden{display:none}
.wan-head{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.wan-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 280px;flex-wrap:wrap}
.wan-title b{font-size:15px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wan-title .wan-sub{color:var(--muted);font-size:12px;min-width:0;flex:1 1 160px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.wan-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wan-actions{display:flex;gap:2px;align-items:center;margin-left:auto}
.wan-actions button.icon[aria-pressed="true"]{color:var(--ink);border-color:var(--s1)}
.wan-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(200px,1fr);gap:16px}
@media(max-width:640px){.wan-body{grid-template-columns:1fr}}
.wan-quota{min-width:0;display:flex;flex-direction:column;gap:6px}
.wan-qline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.wan-qline b{color:var(--ink);font-size:15px}
.wan-badge{margin-left:auto;font-weight:700;font-size:13px;padding:1px 10px;border-radius:999px;white-space:nowrap;
  background:var(--good);color:#fff;font-variant-numeric:tabular-nums}
.wan-badge.lv-warn{background:var(--warning);color:#1a1a19}
.wan-badge.lv-crit,.wan-badge.lv-emerg,.wan-badge.lv-exhausted{background:var(--critical)}
.wan-badge.lv-none{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.wan-track{position:relative;height:14px;background:var(--grid);border-radius:7px;overflow:visible;
  margin-top:4px}
.wan-fill{height:100%;border-radius:7px;background:var(--good);transition:width .4s;max-width:100%}
.wan-fill.lv-warn{background:var(--warning)}
.wan-fill.lv-crit,.wan-fill.lv-emerg,.wan-fill.lv-exhausted{background:var(--critical)}
.wan-fill.lv-none{background:var(--s1)}
.wan-mark{position:absolute;top:-3px;width:2px;height:20px;border-radius:1px}
.wan-mark.w{background:#3fb0e8}
.wan-mark.c{background:var(--warning)}
.wan-mark.e{background:var(--critical)}
.wan-proj{position:absolute;top:2px;height:10px;border-right:2px dashed var(--ink-2);opacity:.7}
/* etiquetas de umbral: starlinks.js (layoutAxis) las coloca en px con el ancho real de la barra, en
   dos renglones; .px quita el centrado inicial por % que solo se ve antes de esa primera pasada */
.wan-axis{position:relative;height:32px;font-size:12px;line-height:15px;color:var(--muted)}
.wan-axis span.r2{top:16px}
.wan-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.wan-axis span.first{transform:none}
.wan-axis span.last{transform:translateX(-100%)}
.wan-axis.px span{transform:none}
.wan-axis span.w{color:#3fb0e8}
.wan-axis span.c{color:var(--warning)}
.wan-axis span.e{color:var(--critical)}
.wan-chart{margin-top:6px}
.wan-chart svg{display:block;width:100%;height:auto;overflow:visible}
.wan-chart .bar{fill:var(--s1);opacity:.75}
.wan-chart .bar.tx{fill:#7fb3f0;opacity:.75}
.wan-chart .bar.today{opacity:1}
.wan-chart .cum{fill:none;stroke:var(--good);stroke-width:2}
.wan-chart .cum.lv-warn{stroke:var(--warning)}
.wan-chart .cum.lv-crit,.wan-chart .cum.lv-emerg,.wan-chart .cum.lv-exhausted{stroke:var(--critical)}
.wan-chart .quota{stroke:var(--critical);stroke-width:1;stroke-dasharray:4 3;opacity:.8}
.wan-chart .th{stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.wan-chart .th.w{stroke:#3fb0e8}
.wan-chart .th.c{stroke:var(--warning)}
.wan-chart .th.e{stroke:var(--critical)}
.wan-chart .axis{stroke:var(--axis)}
.wan-chart text{fill:var(--muted);font-size:9px}
.wan-chart .cap{font-size:9.5px;fill:var(--muted)}
.wan-side{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-content:start;
  font-size:12px;border-left:1px solid var(--grid);padding-left:14px}
@media(max-width:640px){.wan-side{border-left:0;padding-left:0;border-top:1px solid var(--grid);padding-top:8px}}
.wan-side .k{color:var(--muted);white-space:nowrap}
.wan-side .v{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;min-width:0;
  overflow-wrap:anywhere}
.wan-side .v.warn{color:var(--warning)}
.wan-side .v.crit{color:var(--critical)}
.wan-side .v.good{color:var(--good)}
.wan-side .wide{grid-column:1/-1}
.wan-pace{grid-column:1/-1;margin-top:4px;padding:6px 10px;border-radius:8px;font-size:12px;
  border:1px solid rgba(12,163,12,.45);background:rgba(12,163,12,.12);color:#9fe39f}
.wan-pace.risk{border-color:rgba(250,178,25,.55);background:rgba(250,178,25,.12);color:#ffd479}
.wan-pace.bad{border-color:rgba(208,59,59,.6);background:rgba(208,59,59,.12);color:#ff9a9a}
.wan-pace.na{border-color:var(--border);background:var(--surface-2);color:var(--muted)}
.wan-conn{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);font-size:12px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wan-conn.ok{border-color:rgba(12,163,12,.5);color:#9fe39f}
.wan-conn.warn{border-color:rgba(250,178,25,.55);color:#ffd479}
.wan-conn.crit{border-color:rgba(208,59,59,.6);color:#ff9a9a}
.wan-hist{border-top:1px solid var(--grid);padding-top:8px}
.wan-hist table{font-size:12px}
.wan-hist td,.wan-hist th{padding:5px 8px}
.wan-hist .bar{display:inline-block;height:8px;border-radius:4px;background:var(--s1);
  vertical-align:middle;margin-right:6px}
.wan-empty{color:var(--muted);padding:18px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;line-height:1.5}
.wan-empty b{color:var(--ink-2)}
/* sin líneas: tarjeta de bienvenida centrada, de ancho de lectura, con los pasos y el botón */
.wan-onboard{max-width:720px;width:100%;margin:40px auto 0;padding:24px 30px 26px;grid-column:1/-1;
  color:var(--ink-2);line-height:1.55;border-top:3px solid var(--s1)}
.wan-onboard .wan-ob-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.wan-onboard svg.wan-ob-ic{width:22px;height:22px;color:var(--s1)}
.wan-onboard h3{margin:0;font-size:17px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink)}
.wan-onboard p{margin:0 0 10px;color:var(--muted)}
.wan-onboard ol{margin:6px 0 18px;padding-left:22px;display:grid;gap:6px}
.wan-onboard ol b{color:var(--ink)}
.wan-onboard button.on{padding:7px 14px}
/* routers: conexiones simultáneas */
/* 520 px: dos gráficas lado a lado también a 1366 (en una sola columna la gráfica de 600×150 se
   estiraba a 1,100 px de ancho y 270 de alto, con letras enormes) */
.wan-routers{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr))}
@media(max-width:1000px){.wan-routers{grid-template-columns:1fr}}
.wan-router{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.wan-router .rh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wan-router .rh b{font-size:14px}
.wan-router .rh .m{color:var(--muted);font-size:12px}
.wan-router .rh .m{min-width:0;flex:1 1 160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wan-router .rh .wan-peak{font-size:12px;color:var(--ink-2);white-space:nowrap}
.wan-router .rh .wan-peak b{color:var(--ink);font-variant-numeric:tabular-nums}
.wan-router .rh .wan-conn{margin-left:auto}
/* la nota de la heurística, una sola vez para toda la sección */
.wan-rnote{margin:-4px 0 10px}
.wan-rlegend{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;margin-left:4px}
.wan-rlegend span{padding:1px 8px;border-radius:999px;font-weight:600}
.wan-rlegend .n{background:rgba(12,163,12,.2);color:#9fe39f}
.wan-rlegend .w{background:rgba(250,178,25,.22);color:#ffd479}
.wan-rlegend .c{background:rgba(208,59,59,.22);color:#ff9a9a}
.wan-cchart svg{display:block;width:100%;height:auto;overflow:visible}
.wan-cchart .line{fill:none;stroke:var(--good);stroke-width:1.8}
.wan-cchart .area{fill:rgba(12,163,12,.14)}
.wan-cchart .th{stroke-width:1;stroke-dasharray:5 4}
.wan-cchart .th.w{stroke:var(--warning)}
.wan-cchart .th.c{stroke:var(--critical)}
.wan-cchart .axis{stroke:var(--axis)}
.wan-cchart text{fill:var(--muted);font-size:9px}
.wan-cchart .lbl{font-size:9.5px;font-weight:600}
.wan-cchart .lbl.w{fill:#ffd479}
.wan-cchart .lbl.c{fill:#ff9a9a}
.wan-foot{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px}
#wan-calc details.howto{margin:0}
#wan-calc details.howto code{background:var(--plane);padding:0 4px;border-radius:4px}
/* diálogo */
dialog.wan-dlg{max-width:760px}
/* más específicas que «label.f input/select {width:100%}» de index.html, que si no le
   ganan al diálogo y el selector de unidad se come todo el ancho del campo */
.wan-qin{display:flex;gap:6px;align-items:center;width:100%}
label.f .wan-qin input[type=number]{flex:1 1 auto;width:auto;min-width:0}
label.f .wan-qin select{flex:none;width:92px}
label.f small{color:var(--muted);font-size:12px}
/* «Eliminar línea» junto al título y lejos de «Guardar configuración» (antes pegados: un clic de
   más eliminaba en vez de guardar, aunque pide confirmación) */
dialog.wan-dlg .dlg-head .wan-del{margin-left:6px;padding:3px 10px;font-size:12px}
.grid3{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.grid3{grid-template-columns:1fr 1fr}}
.wan-heur{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
  font-size:12px;color:var(--ink-2);display:grid;gap:4px}
.wan-heur .t{font-weight:600;color:var(--ink)}
.wan-heur .tag{display:inline-block;min-width:96px;padding:1px 8px;border-radius:999px;font-weight:600;
  font-size:12px;margin-right:6px;text-align:center}
.wan-heur .tag.n{background:rgba(12,163,12,.2);color:#9fe39f}
.wan-heur .tag.w{background:rgba(250,178,25,.22);color:#ffd479}
.wan-heur .tag.c{background:rgba(208,59,59,.22);color:#ff9a9a}
.wan-th{display:flex;align-items:center;gap:6px}
label.f .wan-th input[type=number]{flex:none;width:90px}
.wan-th .u{color:var(--muted)}
label.f.wan-th-w{color:#3fb0e8}
label.f.wan-th-c{color:var(--warning)}
label.f.wan-th-e{color:var(--critical)}