/* webmon.css — vista «Monitor web» (#/web), v1.13. Prefijo .wm-.
   Usa los tokens de :root y los componentes globales del rediseño (.dense, .tbl-wrap, .trunc,
   .mono, .sub, .chip, .tiles.compact, .pill, .kebab, button.icon) sin redefinirlos: aquí solo van
   variantes propias. Letra mínima 12 px. */

.wm-sp{flex:1 1 auto}
.wm-muted,.wm .muted{color:var(--muted)}

/* ── Barra de filtros: chips · agregados · búsqueda (un renglón; se parte en pantallas angostas) ── */
.wm-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px}
.wm-agg{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap}
.wm-agg b{font-weight:600}
.wm-dot-sep{opacity:.6}
.wm-q{width:260px;height:28px;padding:0 10px;background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;font:inherit;font-size:13px}
.wm-q:focus{outline:none;border-color:var(--s1)}

/* aviso de «Comprobar ahora», guardar, borrar… (no tapa nada: va en el flujo) */
.wm-msg{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 6px 5px 12px;
  border:1px solid var(--border);border-left:3px solid var(--s1);border-radius:8px;
  background:var(--surface);color:var(--ink-2);font-size:13px;max-width:120ch}
.wm-msg > span{flex:1;min-width:0}
.wm-msg.ok{border-left-color:var(--good)} .wm-msg.ok > svg.i{color:var(--good)}
.wm-msg.err{border-left-color:var(--critical)} .wm-msg.err > svg.i{color:var(--critical)}
.wm-msg.info > svg.i{color:var(--s1)}
.wm-off{margin-bottom:12px}
.wm-off a{color:var(--s1)}

/* ── Tabla de monitores ───────────────────────────────────────────────────── */
.wm-tbl tbody tr.wm-row{cursor:pointer}
.wm-tbl tbody tr.wm-row:focus-visible{outline:2px solid var(--s1);outline-offset:-2px}
/* franja de estado a la izquierda (en .tbl-wrap los bordes de <tr> no se pintan: va en el td) */
.wm-tbl tr.st-down > td:first-child{box-shadow:inset 3px 0 0 var(--critical)}
.wm-tbl tr.st-failing > td:first-child{box-shadow:inset 3px 0 0 var(--warning)}
.wm-tbl tr.st-paused > td{color:var(--muted)}
.wm-tbl tr.st-paused .wm-spark{opacity:.45}
/* Anchos con table-layout:fixed (los decide el <thead>, no el texto): las columnas de dato corto
   miden lo justo en px; nombre (16.5 %) y destino (18.5 %) escalan con la pantalla y el último
   error se queda con el resto (los porcentajes bajan en ≤ 1680 y ≤ 1440 para que el error no se
   quede en 100 px). Todo corta con «…» (texto completo en el title): la tabla nunca es más ancha
   que la pantalla, de 1101 a 2400 px, y una URL larga no empuja a las demás columnas. */
.wm-tbl{table-layout:fixed}
.wm-tbl th,.wm-tbl td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-tbl th.wm-c-st{width:124px}
.wm-tbl th.wm-c-name{width:16.5%}
.wm-tbl th.wm-c-tg{width:18.5%}
.wm-tbl th.wm-c-rs{width:94px}
.wm-tbl th.wm-c-sp{width:142px}
.wm-tbl th.wm-c-u24,.wm-tbl th.wm-c-u7{width:68px}
.wm-tbl th.wm-c-ssl{width:96px}
.wm-tbl th.wm-c-acts{width:108px}
.wm-tbl.op th.wm-c-acts{width:80px}
.wm-tbl td.wm-c-name,.wm-tbl td.wm-c-tg{--trunc:100%}
.wm-tbl td.wm-c-acts{overflow:visible}
.wm-nm{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.wm-nm .trunc{font-weight:500;color:var(--ink)}
.wm-tbl tr.st-paused .wm-nm .trunc{color:var(--muted)}
svg.wm-fl{width:14px;height:14px;color:var(--muted);flex:none}
svg.wm-fl.crit{color:var(--critical)} svg.wm-fl.warn{color:var(--warning)}
.wm-tg{display:flex;align-items:center;gap:0;min-width:0;max-width:100%}
.wm-tg .trunc{color:var(--ink-2)}
svg.wm-lock{width:13px;height:13px;color:var(--muted);margin-left:5px;flex:none}
.wm-kind{display:inline-block;flex:none;font-size:12px;font-weight:600;letter-spacing:.03em;line-height:17px;
  padding:0 5px;margin-right:7px;border:1px solid var(--border);border-radius:4px;color:var(--muted);
  background:var(--surface-2);vertical-align:1px}
.wm-bad-t{color:var(--critical)}
.wm-err-t{color:color-mix(in srgb,var(--critical) 55%,var(--ink-2))}
.wm-warn-t{color:var(--warning)}
.wm-up{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.wm-up.warn{color:var(--warning)} .wm-up.crit{color:var(--critical)}
.wm-ssl{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.wm-ssl.warn{color:var(--warning);font-weight:600} .wm-ssl.crit{color:var(--critical);font-weight:600}
.wm-lbl{display:none}
/* el último error ocupa lo que sobra y se corta con «…» (texto completo en su title) */
.wm-out td.wm-c-err,.wm-chk td.wm-c-err{max-width:0;width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* mini serie de 24 h */
svg.wm-spark{display:block;width:120px;height:20px}
.wm-spark rect.g{fill:var(--good)} .wm-spark rect.w{fill:var(--warning)}
.wm-spark rect.c{fill:var(--critical)} .wm-spark rect.n{fill:var(--axis)}
.wm-tbl td.wm-c-sp{padding-top:3px;padding-bottom:3px}

/* Pantallas medianas (≤ 1680): la columna «7 d» se oculta (queda en el title del 24 h) y nombre y
   destino ceden ancho al último error, que es lo que explica una falla: medido, con 16.5 % y
   18.5 % el error se quedaba en 98–102 px entre 1366 y 1501 («Sin respuest…»). */
@media(max-width:1680px){
  svg.wm-spark{width:96px}
  .wm-tbl th.wm-c-sp{width:118px}
  .wm-tbl .wm-c-u7{display:none}
  .wm-tbl th.wm-c-name{width:14.5%}
  .wm-tbl th.wm-c-tg{width:16%}
}
@media(max-width:1500px){
  .wm-q{width:200px}
}
/* 1366–1440: en vez de quitarle más a nombre y destino (que se leen en TODAS las filas), las
   columnas de dato corto se aprietan: relleno lateral de 7 px y mini serie de 84 px. Medido a
   1366: nombre ≈ 158, destino ≈ 175 y error ≈ 200 px */
@media(max-width:1440px){
  table.wm-tbl th,table.wm-tbl td{padding-left:7px;padding-right:7px}
  .wm-tbl th.wm-c-st{width:120px}
  .wm-tbl th.wm-c-rs{width:88px}
  .wm-tbl th.wm-c-sp{width:100px}
  svg.wm-spark{width:84px}
  .wm-tbl th.wm-c-u24{width:62px}
  .wm-tbl th.wm-c-ssl{width:90px}
  .wm-tbl th.wm-c-acts{width:100px}
  .wm-tbl.op th.wm-c-acts{width:74px}
}
/* 1101–1365 px: el último error ya no cabe con un ancho útil (a 1281 medía 47 px): se oculta y
   queda en el title de la píldora de estado y en el de Respuesta (y en el detalle); nombre y
   destino recuperan el ancho */
@media(max-width:1365px){
  .wm-tbl .wm-c-err{display:none}
  .wm-tbl th.wm-c-name{width:auto}
  .wm-tbl th.wm-c-tg{width:21%}
}
/* 1101–1200 px: tampoco cabe la mini serie (con ella el nombre medía 45 px a 1100); la
   disponibilidad de 24 h sigue en su columna y la serie completa en el detalle */
@media(max-width:1200px){
  .wm-tbl .wm-c-sp{display:none}
}

/* ── Celular, tablet y laptop chica (≤ 1100 px): cada monitor es una tarjeta ──
   (entre 1001 y 1100, con la barra lateral desplegada, la tabla dejaba al nombre en 0–80 px)
   1) nombre … acciones   2) estado · respuesta · 24 h · certificado   3) tipo + destino
   4) barra de 24 h a todo el ancho   5) último error. El orden lo da `order` y los saltos, el
   flex-basis (el nombre reserva el renglón; destino, barra y error ocupan el 100 %). */
@media(max-width:1100px){
  .wm-bar .wm-agg{order:3;flex-basis:100%}
  .wm-q{flex:1 1 160px;width:auto}
  .wm .tbl-wrap{overflow:visible}
  .wm-tbl,.wm-tbl > tbody{display:block;border:0;background:none;table-layout:auto}
  .wm-tbl > thead{display:none}
  .wm-tbl > tbody > tr.wm-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:8px;
    padding:7px 8px 8px 11px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
  .wm-tbl > tbody > tr.wm-row > td{display:block;width:auto;max-width:none;padding:0;border:0;font-size:13px;
    border-radius:0!important}
  .wm-tbl tr.st-down > td:first-child,.wm-tbl tr.st-failing > td:first-child{box-shadow:none}
  .wm-tbl > tbody > tr.st-down{border-left:3px solid var(--critical)}
  .wm-tbl > tbody > tr.st-failing{border-left:3px solid var(--warning)}
  .wm-tbl > tbody > tr > td.wm-c-name{order:1;flex:1 1 calc(100% - 130px);min-width:0}
  .wm-tbl > tbody > tr > td.wm-c-acts{order:2;flex:0 0 auto;margin-left:auto}
  .wm-tbl > tbody > tr > td.wm-c-st{order:3}
  .wm-tbl > tbody > tr > td.wm-c-rs{order:4}
  .wm-tbl > tbody > tr > td.wm-c-u24{order:5}
  .wm-tbl > tbody > tr > td.wm-c-u7{order:6;display:none}
  .wm-tbl > tbody > tr > td.wm-c-ssl{order:7}
  .wm-tbl > tbody > tr > td.wm-c-tg{order:8;flex:1 1 100%;min-width:0}
  .wm-tbl > tbody > tr > td.wm-c-sp{order:9;flex:1 1 100%}
  .wm-tbl > tbody > tr > td.wm-c-err{order:10;display:block;flex:1 1 100%;min-width:0}
  .wm-tbl > tbody > tr > td.wm-c-err:not(:has(*)),.wm-tbl > tbody > tr > td.wm-c-err:has(> .wm-noerr),
  .wm-tbl > tbody > tr > td.wm-c-ssl:has(> .wm-nossl){display:none}
  .wm-tbl td.num{text-align:left}
  .wm-lbl{display:inline;color:var(--muted);font-size:12px;margin-right:4px}
  .wm-tbl svg.wm-spark{width:100%;height:16px}
}
/* tablet: dos tarjetas por renglón */
@media(min-width:700px) and (max-width:1100px){
  .wm-tbl > tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
  .wm-tbl > tbody > tr.wm-row{margin-bottom:0}
}

/* ── Bienvenida (sin monitores) ───────────────────────────────────────────── */
.wm-welcome{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.wm-wl-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.wm-wl-txt{flex:1 1 420px;min-width:0}
.wm-wl-h{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
.wm-wl-txt p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.5}
.wm-wl-sub{margin:14px 0 8px;color:var(--muted);font-size:12px}
.wm-ex-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.wm-ex{display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:9px;color:var(--ink-2);font:inherit}
button.wm-ex{cursor:pointer}
button.wm-ex:hover{border-color:var(--s1);background:color-mix(in srgb,var(--s1) 8%,var(--surface-2))}
.wm-ex-top{display:flex;align-items:center;min-width:0}
.wm-ex-top b{color:var(--ink);font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-ex-tg{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-ex-tg.ph{color:var(--muted);font-style:italic}
.wm-ex-d{color:var(--muted);font-size:12px;line-height:1.4}
.wm-wl-list{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.6;max-width:120ch}
.wm-wl-list b{color:var(--ink-2);font-weight:600}

/* ── Detalle (#/web/<id>) ─────────────────────────────────────────────────── */
.wm-dhead{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-bottom:12px;min-height:32px}
.wm-dname{font-size:16px;font-weight:600;color:var(--ink);--trunc:min(420px,60vw)}
.wm-dtg{display:inline-flex;align-items:center;min-width:0;flex:0 1 auto;--trunc:min(520px,50vw)}
.wm-dtg .trunc{color:var(--ink-2)}
.wm-dacts{display:inline-flex;align-items:center;gap:8px;flex:none}
.wm-dacts > button{height:30px}
.wm-kpis{margin-bottom:12px}
.wm-kpis.tiles.compact{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.wm-dgrid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(340px,30%);align-items:start;margin-bottom:12px}
.wm-dgrid2{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.wm-dside{display:grid;gap:12px;min-width:0}
/* la lista de chequeos se desplaza dentro de su caja (encabezado fijo de .tbl-wrap.scroll) */
.wm-chk-box{--tbl-max:380px;border-radius:8px}
.wm-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0}
.wm-ph{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-bottom:8px;min-height:26px}
.wm-ph h3{margin:0;font-size:12px}
.wm-seg button{padding:3px 10px;font-size:12px}
.wm-lg{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;white-space:nowrap}
.wm-sw{display:inline-block;width:14px;height:3px;border-radius:2px;flex:none}
.wm-sw.ln{background:var(--s1)}
.wm-sw.mx{background:none;border-top:2px dashed color-mix(in srgb,var(--s1) 60%,transparent);height:0}
.wm-sw.tk{width:3px;height:10px;background:var(--critical)}
.wm-sw.bd{width:12px;height:10px;background:color-mix(in srgb,var(--critical) 30%,transparent);
  border:1px solid color-mix(in srgb,var(--critical) 55%,transparent)}
.wm-sq{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--axis)}
.wm-sq.g{background:var(--good)} .wm-sq.w{background:var(--warning)} .wm-sq.c{background:var(--critical)}

/* gráfica: SVG al ancho real del contenedor (lo dibuja webmon.js) */
.wm-chart{position:relative;min-height:170px}
.wm-chart svg{display:block;overflow:visible;touch-action:pan-y}
.wm-chart .wm-gl{stroke:var(--grid);stroke-width:1}
.wm-chart .wm-gl.v{stroke-dasharray:2 4;opacity:.7}
.wm-chart .wm-axl{stroke:var(--axis);stroke-width:1}
.wm-chart .wm-ax{fill:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.wm-chart .wm-line{fill:none;stroke:var(--s1);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.wm-chart .wm-area{fill:color-mix(in srgb,var(--s1) 14%,transparent);stroke:none}
.wm-chart .wm-max{fill:none;stroke:color-mix(in srgb,var(--s1) 55%,transparent);stroke-width:1;stroke-dasharray:3 3}
.wm-chart .wm-pt{fill:var(--s1)}
.wm-chart .wm-band{fill:color-mix(in srgb,var(--critical) 18%,transparent)}
.wm-chart .wm-band.on{fill:color-mix(in srgb,var(--critical) 26%,transparent)}
.wm-chart .wm-tick{fill:var(--critical)} .wm-chart .wm-tick.w{fill:var(--warning)}
.wm-chart .wm-cl{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.wm-chart .wm-cd{fill:var(--s1);stroke:var(--surface);stroke-width:2}
.wm-chart .wm-hit{cursor:crosshair}
.wm-chart .tip{max-width:340px;white-space:normal}
.wm-tip-err{color:var(--ink-2);max-width:320px;overflow-wrap:anywhere}

/* disponibilidad por hora (o por día con 30 d) */
.wm-strip-h{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-top:10px;color:var(--ink-2);font-size:12px}
.wm-strip-h > span:first-child{margin-right:auto}
.wm-strip{display:flex;gap:1px;height:16px;margin-top:6px}
.wm-strip i{flex:1 1 0;min-width:1px;border-radius:2px;background:var(--axis)}
.wm-strip i.g{background:var(--good)} .wm-strip i.w{background:var(--warning)} .wm-strip i.c{background:var(--critical)}
.wm-strip i:hover{outline:1px solid var(--ink);outline-offset:0}
.wm-strip-x{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:3px}

.wm-none{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:6px 2px}
.wm-none svg.i{color:var(--good)}
.wm-more{display:flex;align-items:center;gap:10px;margin-top:8px}
.wm-more button.mini{margin-left:0}
.wm-out,.wm-chk{border-radius:8px}
.wm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:0}
.wm-dot.good{background:var(--good)} .wm-dot.crit{background:var(--critical)}

/* pares dato / valor de Configuración y Certificado */
.wm-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 14px;margin:0;font-size:13px}
.wm-kv dt{color:var(--muted)}
.wm-kv dd{margin:0;color:var(--ink-2);min-width:0}
.wm-dd-tg{display:flex;align-items:center;min-width:0;--trunc:100%}
.wm-out th,.wm-chk th{white-space:nowrap}
.wm-hscroll{overflow-x:auto;border-radius:8px}
@media(max-width:900px){.wm-out{min-width:560px}}
.wm-notes{white-space:pre-wrap;overflow-wrap:anywhere}
.wm-kv svg.i{width:13px;height:13px;vertical-align:-2px}

@media(max-width:1180px){
  .wm-dgrid,.wm-dgrid2{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
  .wm-dname{--trunc:calc(100vw - 150px)}
  .wm-dtg{flex-basis:100%;--trunc:100%}
  .wm-dacts{flex-basis:100%}
  .wm-dacts > button{flex:1 1 auto;justify-content:center}
  .wm-kpis.tiles.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wm-panel{padding:8px 9px}
  /* 7 d = 168 barras: con 1 px de barra y 1 px de hueco piden 336 px y en un celular la tira
     ensanchaba la página (medido: 415 px a 390). Sin hueco caben en cualquier ancho */
  .wm-strip.many{gap:0}
  .wm-strip.many i{min-width:0;border-radius:0}
  /* Caídas como tarjetas: a 390 px la tabla se desplazaba a lo ancho y «Fallas» y «Alarma»
     quedaban fuera sin pista. Renglón 1: inicio → fin · duró · fallas · alarma; renglón 2: el
     error completo. Las etiquetas las pone el CSS (las celdas llevan solo el dato) */
  .wm-hscroll{overflow:visible}
  .wm-out{display:block;min-width:0;border:0;background:none}
  .wm-out > thead{display:none}
  .wm-out > tbody{display:block}
  .wm-out > tbody > tr{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;padding:7px 2px;
    border-bottom:1px solid var(--border)}
  .wm-out > tbody > tr:last-child{border-bottom:0}
  .wm-out > tbody > tr > td{display:block;padding:0;border:0;text-align:left;background:none}
  .wm-out td.wm-o-fin::before{content:"→ ";color:var(--muted)}
  .wm-out td.wm-o-dur::before{content:"duró ";color:var(--muted);font-size:12px}
  .wm-out td.wm-o-n::before{content:"fallas ";color:var(--muted);font-size:12px}
  /* en una pantalla táctil el title no se puede leer: el error se parte en renglones y se ve
     completo (en «Caídas» y en «Últimos chequeos») */
  .wm-out td.wm-o-err{flex:1 1 100%;width:auto;max-width:none;white-space:normal;overflow:visible;
    overflow-wrap:anywhere;color:var(--ink-2)}
  .wm-chk td.wm-c-err{white-space:normal;overflow-wrap:anywhere}
}

/* ── Diálogo de alta / edición ────────────────────────────────────────────── */
dialog.wm-dlg{max-width:860px}
.wm-g2{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:12px}
.wm-g3{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.wm-g4{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.wm-dlg label.f small{color:var(--muted);font-size:12px}
.wm-kindsel{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.wm-radios{display:flex;gap:6px;flex-wrap:wrap}
.wm-radio{display:inline-flex;align-items:center;gap:7px;height:33px;padding:0 12px;border:1px solid var(--border);
  border-radius:6px;background:var(--plane);color:var(--ink-2);font-size:13px;cursor:pointer}
.wm-radio input{accent-color:var(--s1);margin:0}
.wm-radio:has(input:checked){border-color:var(--s1);color:var(--ink);
  background:color-mix(in srgb,var(--s1) 14%,var(--plane))}
.wm-tgt input{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
.wm-checks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.wm-checks .check .sub{margin-left:.3em}
.wm-dlg .wm-bad,.wm-dlg label.f input.wm-bad,.wm-dlg label.f select.wm-bad,.wm-dlg label.f textarea.wm-bad{
  border-color:var(--critical)}
.wm-dlg label.f input:disabled{opacity:.5}
.wm-dlg .dlg-head .res{max-width:52ch}
@media(max-width:760px){
  .wm-g3,.wm-g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:520px){
  .wm-g2,.wm-g3{grid-template-columns:minmax(0,1fr)}
}

/* ── v1.13.1: servicios populares (logotipos, tablero de tarjetas y alta en bloque) ─────────── */
/* ícono = insignia de app: fondo del color de la marca, dibujo en blanco (negro si el color es
   claro); el borde tenue deja ver las marcas negras (X, TikTok, Apple…) sobre el fondo oscuro */
.wm-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);overflow:hidden}
.wm-ico svg{width:62%;height:62%;display:block}
.wm-ico b{font-size:11px;font-weight:700;line-height:1;letter-spacing:-.02em;font-family:system-ui,sans-serif}
.wm-ico.l3 b{font-size:8.5px} .wm-ico.l4 b{font-size:7px}
.wm-ico-gen{background:var(--surface-2);color:var(--muted)}
.wm-ico-gen svg.i{width:14px;height:14px}
.wm-nm .wm-ico{margin-right:3px}
.wm-viewsw{margin-left:6px}
.wm-viewsw button{display:inline-flex;align-items:center;gap:5px}
@media(max-width:700px){.wm-viewsw button span{display:none}}

/* tablero: grupos por categoría con tarjetas */
.wm-grp{margin:0 0 14px}
.wm-grp-h{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.wm-grp-h h3{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wm-gs{font-size:12px}
.wm-gs.good{color:var(--good)} .wm-gs.warn{color:var(--warning)} .wm-gs.crit{color:var(--critical);font-weight:600}
.wm-cards{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.wm-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;
  align-items:center;padding:9px 11px;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--muted);border-radius:9px;cursor:pointer;min-width:0}
.wm-card:hover{background:var(--surface-2)}
.wm-card:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
.wm-card .wm-ico{width:34px;height:34px;border-radius:8px;grid-row:1 / span 2}
.wm-card .wm-ico b{font-size:14px} .wm-card .wm-ico.l3 b{font-size:11px} .wm-card .wm-ico.l4 b{font-size:9px}
.wm-card.st-up{border-left-color:var(--good)}
.wm-card.st-failing{border-left-color:var(--warning)}
.wm-card.st-down{border-left-color:var(--critical);background:color-mix(in srgb,var(--critical) 10%,var(--surface))}
.wm-card.st-paused{opacity:.55}
.wm-cd-main{min-width:0}
.wm-cd-nm{display:flex;align-items:center;gap:5px;min-width:0;font-weight:600;color:var(--ink)}
.wm-cd-nm .trunc{max-width:100%}
.wm-cd-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);margin-top:2px;white-space:nowrap}
.wm-cd-meta .dot{width:7px;height:7px}
.wm-cd-ms{font-variant-numeric:tabular-nums}
.wm-cd-meta .wm-up{margin-left:auto}
.wm-cd-sp{grid-column:2}
.wm-cd-sp svg.wm-spark{width:100%;height:14px}

/* atajo de la bienvenida */
.wm-pop-cta{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px;margin:4px 0 14px;
  border:1px solid var(--s1);border-radius:10px;background:color-mix(in srgb,var(--s1) 8%,var(--surface))}
button.wm-pop-cta:hover{background:color-mix(in srgb,var(--s1) 15%,var(--surface))}
.wm-pop-cta.ro{border-color:var(--border)}
.wm-pop-icons{display:flex;gap:4px;flex-wrap:wrap;max-width:300px}
.wm-pop-icons .wm-ico{width:26px;height:26px}
.wm-pop-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wm-pop-txt b{color:var(--ink);font-size:14px}
.wm-pop-txt span{color:var(--ink-2);font-size:12px}

/* diálogo «Servicios populares» */
dialog.wm-pop-dlg{width:min(1100px,96vw);max-width:1100px}
.wm-pop-intro{margin:0 0 10px;color:var(--ink-2);font-size:13px}
.wm-pop-opts{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px}
.wm-pop-opts label.f{min-width:150px}
.wm-pop-opts label.check{flex:1 1 320px}
.wm-pop-opts select{background:var(--plane);color:var(--ink);border:1px solid var(--border);border-radius:6px;padding:6px 8px;font:inherit;font-size:13px}
.wm-pop-grp{margin:0 0 12px}
.wm-pop-gh{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.wm-pop-grid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.wm-pop-it{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);cursor:pointer;min-width:0}
.wm-pop-it:hover{border-color:var(--muted)}
.wm-pop-it:has(input:checked){border-color:var(--s1);background:color-mix(in srgb,var(--s1) 9%,var(--surface))}
.wm-pop-it.added{opacity:.55;cursor:default}
.wm-pop-it input{accent-color:var(--s1);margin:0;flex:none}
.wm-pop-it .wm-ico{width:28px;height:28px;border-radius:7px}
.wm-pop-it .wm-ico b{font-size:12px}
.wm-pop-nm{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.wm-pop-nm b{color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-pop-nm .mono{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-pop-sel{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;font-size:12px;color:var(--muted)}

/* v1.13.1: «Red» (≈ ping) aparte de la «Respuesta» */
.wm-cd-v{font-variant-numeric:tabular-nums;white-space:nowrap}
.wm-cd-v b{font-weight:600;color:var(--ink)}
.wm-cd-v.wm-bad-t b{color:var(--critical)}
.wm-cd-k{color:var(--muted)}
.wm-c-net{text-align:right}
.wm-net{font-variant-numeric:tabular-nums;color:var(--ink)}
.wm-netline{fill:none;stroke:var(--good);stroke-width:1.4;stroke-linejoin:round;opacity:.9}
.wm-sw.nt{background:var(--good);height:2px}