/* ═══════════════════════════════════════════════════════════════════════
   ARGOS v3 · sistema visual «aurum»

   Un panel interno que se abre a las 8:40 con el café en la mano. No es un
   cuadro de mandos para enseñar en una reunión: es una herramienta que tiene
   que contestar «¿hay algo roto?» en cinco segundos y dejarte cerrar la
   pestaña.

   TRES REGLAS QUE ORGANIZAN TODO LO DE ABAJO

   1. El color NUNCA lleva la información solo. Cada estado tiene su glifo y
      su palabra. Un 8 % de los hombres no distingue el rojo del verde, y en
      una pantalla mala de sala de máquinas no los distingue nadie.
   2. Todo veredicto va con SU FECHA. «Correcto» sin «comprobado hace 6 min»
      es una afirmación sin respaldo, y es exactamente la confusión que este
      panel existe para deshacer: verde puede significar «no hay problemas» o
      «no me estoy enterando».
   3. Ninguna zona vacía se deja en blanco. Un hueco se lee como «aquí no hay
      nada raro», y muchas veces significa «aquí no he mirado».
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#04171c; --bg-2:#031216; --card:#082a31;
  --card-hi:#0c353d; --line:#11444d; --line-2:#1b5a64;
  --txt:#e8f6f8; --dim:#93b8bf; --faint:#5f858d;
  --lima:#e4f222; --lima-d:#b6c018;
  --ok:#3ad684; --warn:#ffc247; --err:#ff5f5f; --info:#5bb8ff; --purple:#bd90ff;
  --r:12px; --r-s:8px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
}
:root{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);font:14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
::selection{background:var(--lima);color:#04171c}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#16505a;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ── ESQUELETO ──────────────────────────────────────────────────────── */
#app{display:grid;grid-template-columns:240px 1fr;height:100vh}

.side{
  background:var(--bg-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
.marca{padding:20px 20px 16px;border-bottom:1px solid var(--line)}
.marca .n{font-size:21px;font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
.marca .n b{color:var(--lima)}
.marca .n i{width:7px;height:7px;border-radius:50%;background:var(--ok);font-style:normal;
  box-shadow:0 0 0 3px rgba(58,214,132,.16)}
.marca .s{font-size:10.5px;letter-spacing:.1em;color:var(--faint);margin-top:5px;font-weight:600}

.nav{flex:1;overflow-y:auto;padding:12px 10px}
.nav .g{font-size:10px;letter-spacing:.13em;color:var(--faint);font-weight:700;
  padding:16px 10px 7px}
.nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);
  color:var(--dim);font-size:13.5px;font-weight:500;position:relative;cursor:pointer;
}
.nav a:hover{background:var(--card);color:var(--txt)}
.nav a.on{background:var(--card-hi);color:var(--txt);font-weight:600}
.nav a.on:before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;
  background:var(--lima);border-radius:0 3px 3px 0}
.nav a .ic{width:16px;text-align:center;opacity:.85;font-size:14px}
.nav a .c{margin-left:auto;font:600 11px/1 var(--mono);padding:3px 6px;border-radius:20px;
  background:rgba(255,255,255,.07);color:var(--dim)}
.nav a .c.rojo{background:rgba(255,95,95,.18);color:#ffb3b3}
.nav a .c.ambar{background:rgba(255,194,71,.16);color:#ffdb95}

.side-pie{padding:12px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.side-pie b{color:var(--dim);font-weight:600}

.main{display:flex;flex-direction:column;overflow:hidden}
.top{
  height:62px;flex:0 0 62px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 28px;background:rgba(4,23,28,.7);
  backdrop-filter:blur(8px);
}
.top h1{font-size:17px;font-weight:650;letter-spacing:-.2px}
.top .sub{color:var(--faint);font-size:12.5px}
.crece{flex:1}
.buscar{
  position:relative;width:270px;
}
.buscar input{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;
  padding:7px 12px 7px 32px;font-size:13px;outline:0;
}
.buscar input:focus{border-color:var(--line-2);box-shadow:0 0 0 3px rgba(228,242,34,.08)}
.buscar .l{position:absolute;left:11px;top:6px;color:var(--faint);font-size:13px}
.buscar kbd{position:absolute;right:9px;top:7px;font:600 10px var(--mono);color:var(--faint);
  border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.yo{width:31px;height:31px;border-radius:50%;background:var(--card-hi);border:1px solid var(--line-2);
  display:grid;place-items:center;font:700 11.5px var(--sans);color:var(--lima)}

.lienzo{flex:1;overflow-y:auto;padding:24px 28px 60px}
.ancho{max-width:1380px}

/* ── TIPOGRAFÍA ─────────────────────────────────────────────────────── */
h2{font-size:15px;font-weight:650;letter-spacing:-.1px}
h3{font-size:13px;font-weight:650}
.rot{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--faint);text-transform:uppercase}
.mono{font-family:var(--mono);font-size:12.5px}
.dim{color:var(--dim)}
.faint{color:var(--faint)}
.mini{font-size:12px}
.micro{font-size:11px}
.nowrap{white-space:nowrap}

/* ── TARJETAS ───────────────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:18px;overflow:hidden;
}
.card>.h{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);
}
.card>.b{padding:18px}
.card>.b.p0{padding:0}

.rej{display:grid;gap:18px}
.rej.c2{grid-template-columns:1fr 1fr}
.rej.c3{grid-template-columns:repeat(3,1fr)}
.rej.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.rej.c2,.rej.c3,.rej.c4{grid-template-columns:1fr}}

/* ── ESTADOS · glifo + color + palabra, nunca solo color ───────────── */
.e{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;
  padding:3px 9px 3px 7px;border-radius:20px;white-space:nowrap;letter-spacing:.01em;
}
.e i{font-style:normal;font-size:10px;width:13px;height:13px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;flex:0 0 13px}
.e-ok  {background:rgba(58,214,132,.13);color:#8ff0bd;border:1px solid rgba(58,214,132,.24)}
.e-ok i{background:var(--ok);color:#042313}
.e-warn{background:rgba(255,194,71,.13);color:#ffdc9c;border:1px solid rgba(255,194,71,.26)}
.e-warn i{background:var(--warn);color:#33240a}
.e-err {background:rgba(255,95,95,.13);color:#ffb0b0;border:1px solid rgba(255,95,95,.26)}
.e-err i{background:var(--err);color:#2d0808}
.e-off {background:rgba(147,184,191,.1);color:var(--dim);border:1px solid rgba(147,184,191,.2)}
.e-off i{background:#6d939b;color:#04171c}
.e-none{background:rgba(91,184,255,.1);color:#a9d9ff;border:1px solid rgba(91,184,255,.22)}
.e-none i{background:var(--info);color:#04202e}
.e-crit{background:rgba(255,95,95,.22);color:#ffc9c9;border:1px solid rgba(255,95,95,.45)}
.e-crit i{background:#ff3b3b;color:#fff}

.pt{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px}
.pt-ok{background:var(--ok)}.pt-warn{background:var(--warn)}.pt-err{background:var(--err)}
.pt-off{background:#5d818a}.pt-none{background:var(--info)}

/* ── ETIQUETAS Y CHIPS ──────────────────────────────────────────────── */
.tag{display:inline-block;font:600 10.5px/1.5 var(--sans);letter-spacing:.04em;
  padding:2px 7px;border-radius:5px;background:var(--card-hi);color:var(--dim);
  border:1px solid var(--line)}
.tag.web {background:rgba(91,184,255,.13);color:#a9d9ff;border-color:rgba(91,184,255,.25)}
.tag.conf{background:rgba(189,144,255,.13);color:#d9c0ff;border-color:rgba(189,144,255,.25)}
.tag.logs{background:rgba(255,194,71,.11);color:#ffdc9c;border-color:rgba(255,194,71,.22)}
.tag.bbdd{background:rgba(58,214,132,.12);color:#8ff0bd;border-color:rgba(58,214,132,.24)}
.tag.lima{background:rgba(228,242,34,.14);color:#eef67a;border-color:rgba(228,242,34,.3)}

.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;
  padding:5px 10px;border-radius:20px;background:var(--card-hi);border:1px solid var(--line);
  color:var(--dim);cursor:pointer;
}
.chip:hover{border-color:var(--line-2);color:var(--txt)}
.chip.on{background:rgba(228,242,34,.14);border-color:rgba(228,242,34,.4);color:#eef67a}
.chip .n{font:700 11px var(--mono)}
.chip .x{opacity:.6;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ── BOTONES ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-s);
  background:var(--card-hi);border:1px solid var(--line-2);color:var(--txt);
  font-size:12.5px;font-weight:600;cursor:pointer;
}
.btn:hover{background:#11424c;border-color:#256e79}
.btn.pri{background:var(--lima);border-color:var(--lima);color:#04171c}
.btn.pri:hover{background:#eef653}
.btn.gho{background:transparent;border-color:transparent;color:var(--dim)}
.btn.gho:hover{background:var(--card-hi);color:var(--txt)}
.btn.mal{border-color:rgba(255,95,95,.4);color:#ffb0b0}
.btn.mal:hover{background:rgba(255,95,95,.12)}
.btn.sm{padding:4px 9px;font-size:11.5px}

/* ── TABLAS ─────────────────────────────────────────────────────────── */
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{
  text-align:left;font:700 10px/1 var(--sans);letter-spacing:.11em;color:var(--faint);
  text-transform:uppercase;padding:11px 14px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#0a2f36;z-index:2;white-space:nowrap;
}
.tabla th.n,.tabla td.n{text-align:right}
.tabla td{padding:11px 14px;border-bottom:1px solid rgba(17,68,77,.55);vertical-align:middle}
.tabla tbody tr:hover{background:rgba(255,255,255,.028)}
.tabla tbody tr.pulsa{cursor:pointer}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tr.grave{box-shadow:inset 3px 0 0 var(--err)}
.tabla tr.aviso{box-shadow:inset 3px 0 0 var(--warn)}
.tabla tr.apag td{opacity:.55}
.scroll{overflow:auto;max-height:none}

/* ── MEDIDAS: KPI, barras, tiras ────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
  background:var(--line)}
.kpi{background:var(--card);padding:15px 16px}
.kpi .v{font:700 26px/1 var(--sans);letter-spacing:-1px;display:flex;align-items:baseline;gap:6px}
.kpi .v small{font-size:12px;font-weight:600;color:var(--faint);letter-spacing:0}
.kpi .l{font-size:11.5px;color:var(--dim);margin-top:6px;display:flex;align-items:center;gap:6px}
.kpi.ok .v{color:#8ff0bd}.kpi.warn .v{color:#ffdc9c}.kpi.err .v{color:#ffb0b0}
.kpi.off .v{color:var(--faint)}.kpi.none .v{color:#a9d9ff}

.medidor{height:7px;border-radius:20px;background:rgba(255,255,255,.07);overflow:hidden;display:flex}
.medidor span{display:block;height:100%}
.medidor .u{background:linear-gradient(90deg,#2f9fc9,#5bb8ff)}
.medidor.alto .u{background:linear-gradient(90deg,#e08a2a,#ffc247)}
.medidor.critico .u{background:linear-gradient(90deg,#d33,#ff5f5f)}

.tira{display:flex;gap:2px;align-items:flex-end;height:26px}
.tira b{width:6px;border-radius:2px;background:#1d5560;display:block;position:relative}
.tira b.ok{background:var(--ok)}.tira b.warn{background:var(--warn)}
.tira b.err{background:var(--err)}.tira b.off{background:#40646d}
.tira b.none{background:#2b5e77}
.tira.fina b{width:4px}

.spark{display:flex;gap:1px;align-items:flex-end;height:24px}
.spark b{width:5px;background:rgba(91,184,255,.5);border-radius:1px}
.spark b.mal{background:var(--err)}

/* ── LISTA DE TRIAJE ────────────────────────────────────────────────── */
.tri{border-bottom:1px solid rgba(17,68,77,.6)}
.tri:last-child{border-bottom:0}
.tri>.f{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;cursor:pointer}
.tri>.f:hover{background:rgba(255,255,255,.025)}
.tri .sev{flex:0 0 4px;align-self:stretch;border-radius:4px;background:var(--warn)}
.tri.crit .sev,.tri.err .sev{background:var(--err)}
.tri.info .sev{background:var(--info)}
.tri .cu{flex:1;min-width:0}
.tri .t1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;font-weight:600}
.tri .t2{color:var(--dim);font-size:12.5px;margin-top:5px}
.tri .t3{color:var(--faint);font-size:11.5px;margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.tri .ac{display:flex;gap:7px;align-items:center;flex:0 0 auto}
.tri .porque{
  display:none;margin:0 18px 16px 36px;padding:14px 16px;background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--lima-d);border-radius:var(--r-s);
  font-size:12.5px;color:var(--dim);
}
.tri.abierto .porque{display:block}
/* Se abre con CSS :target y no con JavaScript: el panel se abre cuando algo va
   mal, y ese es el peor momento para depender de que un script cargue. */
.tri .porque:target{display:block}
.inline{display:inline-flex;align-items:center;gap:6px}
.tri .porque b{color:var(--txt)}
.tri .porque .kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin-top:10px}
.tri .porque .kv i{font-style:normal;color:var(--faint);font-size:11.5px}

/* ── VACÍOS: nunca en blanco ─────────────────────────────────────────── */
.vacio{
  border:1px dashed var(--line-2);border-radius:var(--r);padding:26px 24px;text-align:center;
  color:var(--dim);background:rgba(255,255,255,.012);
}
.vacio .g{font-size:26px;margin-bottom:10px;opacity:.5}
.vacio b{display:block;color:var(--txt);font-size:14px;margin-bottom:7px}
.vacio p{font-size:12.5px;max-width:520px;margin:0 auto;line-height:1.6}
.vacio.bien{border-color:rgba(58,214,132,.35);background:rgba(58,214,132,.05)}

/* ── AVISO DE CANAL ─────────────────────────────────────────────────── */
.canal{
  display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:var(--r);
  margin-bottom:18px;font-size:13px;line-height:1.6;
  background:rgba(255,95,95,.09);border:1px solid rgba(255,95,95,.3);
}
.canal.bien{background:rgba(58,214,132,.06);border-color:rgba(58,214,132,.22)}
.canal.aviso{background:rgba(255,194,71,.09);border-color:rgba(255,194,71,.3)}
/* El rojo es el estado base de .canal, pero la clase se escribe igual: sin
   ella, «grave» sería la única de las tres que no aparece en la hoja, y la
   siguiente persona que buscara dónde se pinta no encontraría nada. */
.canal.grave{background:rgba(255,95,95,.1);border-color:rgba(255,95,95,.34)}
.canal .g{font-size:17px;line-height:1.2}
.canal.bien .g{color:#8ff0bd}
.canal.aviso .g{color:#ffdc9c}
.canal.grave .g{color:#ffb0b0}
.canal b{color:var(--txt)}

/* ── MATRIZ DE SITIOS ───────────────────────────────────────────────── */
/* Nueve columnas: la última es la de acciones de la fila. Si el número de
   columnas y el de celdas por fila no coincide, la matriz se desalinea a
   partir de la primera fila y no hay nada que lo diga. */
/* LA PRIMERA COLUMNA NO PUEDE SER `1fr`: con las demás fijas, en una pantalla
   ancha se llevaba TODO el espacio libre —unos 1.100 px— y quedaba un hueco
   enorme entre el nombre del sitio y las cuatro columnas de estado, que son
   las que hay que leer juntas. Se le pone un tope y el sobrante se lo queda la
   última columna, la de acciones: un hueco al borde derecho no separa nada.

   El tope de 460 px no bastaba: el dominio más largo del parque mide 215, así
   que la columna seguía midiendo el doble que su contenido y el hueco seguía
   ahí, solo que más pequeño. `max-content` la ajusta al nombre más largo que
   HAYA, con 200 de suelo para que una página de dominios cortos no encoja la
   cabecera. El techo no va en la pista —`min()` no admite `max-content`
   dentro— sino en el enlace: con `max-width` en el hijo, su max-content ya no
   puede pasar de ahí y el `text-overflow` del dominio recorta. Es el mismo
   tope, puesto donde el navegador sabe aplicarlo.

   Y las acciones se alinean a la derecha: así el sobrante cae ENTRE los datos
   y los botones, que son las dos cosas que no hay que leer juntas, en lugar de
   caer detrás de los botones dejándolos flotando en mitad de la fila. */
.mtz{display:grid;
  grid-template-columns:minmax(200px,max-content) repeat(4,58px) 108px 92px 112px 1fr;
  font-size:12.5px;align-items:center}
.mtz .acc{justify-content:flex-end}
/* La línea marca dónde acaban los datos. Sin ella, el hueco de la derecha se
   lee como una columna vacía —«¿me falta un dato aquí?»— en vez de como un
   margen. */
.mtz .acc,.mtz .cab-acc{border-left:1px solid rgba(17,68,77,.5)}
.mtz>div{padding:9px 10px;border-bottom:1px solid rgba(17,68,77,.5)}
.mtz .cab{font:700 10px/1 var(--sans);letter-spacing:.11em;color:var(--faint);
  text-transform:uppercase;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#0a2f36;z-index:2;padding:11px 10px;text-align:center}
.mtz .cab.izq{text-align:left}
.mtz .cel{text-align:center}
.mtz .cel span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;
  font:800 11px var(--sans);cursor:pointer}
.mtz .cel .s-ok  {background:rgba(58,214,132,.16);color:#8ff0bd;border:1px solid rgba(58,214,132,.3)}
.mtz .cel .s-warn{background:rgba(255,194,71,.16);color:#ffdc9c;border:1px solid rgba(255,194,71,.32)}
.mtz .cel .s-err {background:rgba(255,95,95,.18);color:#ffb0b0;border:1px solid rgba(255,95,95,.38)}
.mtz .cel .s-off {background:rgba(147,184,191,.09);color:var(--faint);border:1px solid rgba(147,184,191,.18)}
.mtz .cel .s-none{background:rgba(91,184,255,.13);color:#a9d9ff;border:1px solid rgba(91,184,255,.25)}
.mtz .cel .s-nada{background:transparent;color:#2f5b64;border:1px dashed #204d57}
/* La fila NO es una caja: es un envoltorio transparente para que sus ocho
   celdas caigan directamente en la rejilla de .mtz. Esto estaba en un
   `style="display:contents"` en línea, la CSP lo descartaba, y entonces cada
   fila entera contaba como UNA celda: las ocho columnas de los 26 sitios se
   amontonaban en la primera y la matriz se solapaba consigo misma. Va aquí, y
   con el selector descendiente, para que gane siempre a cualquier `.fila`
   suelta que se defina después. */
.mtz .fila{display:contents}
.mtz .fila:hover>div{background:rgba(255,255,255,.03)}
.mtz .sitio{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0}
/* El enlace apila dominio y cliente. Faltaba la regla: `.sitio` es flex, así
   que sin ella el dominio y el cliente salían uno al lado del otro y el
   `text-overflow:ellipsis` del dominio no tenía a qué anchura recortar. */
/* El `max-width` es el techo de la primera columna: la pista es
   `minmax(200px,max-content)` y el max-content de la fila lo pone este
   enlace, así que limitarlo aquí limita la columna. */
.mtz .sitio a{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:340px;
  color:inherit;text-decoration:none}
.mtz .sitio .d{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtz .sitio .c{color:var(--faint);font-size:11px}

/* ── DETALLE DE TAREA (cajón) ───────────────────────────────────────── */
.velo{position:fixed;inset:0;background:rgba(2,10,12,.68);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .16s;z-index:40}
.velo.on{opacity:1;pointer-events:auto}
.cajon{
  position:fixed;top:0;right:0;bottom:0;width:560px;max-width:94vw;background:var(--bg);
  border-left:1px solid var(--line-2);z-index:41;transform:translateX(100%);
  transition:transform .2s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
}
.cajon.on{transform:none}
.cajon .ch{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.cajon .cb{flex:1;overflow-y:auto;padding:20px}
.cerrar{width:30px;height:30px;border-radius:8px;background:var(--card-hi);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;color:var(--dim);font-size:15px}
.cerrar:hover{color:var(--txt);border-color:var(--line-2)}

.kv2{display:grid;grid-template-columns:130px 1fr;gap:9px 14px;font-size:12.5px}
.kv2 dt{color:var(--faint);font-size:11.5px;padding-top:1px}
.kv2 dd{color:var(--txt);word-break:break-all}

/* ── TUBERÍA: qué hace el script ────────────────────────────────────── */
.tub{display:flex;flex-direction:column;gap:0;margin-top:6px}
.tub .p{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:16px}
.tub .p:last-child{padding-bottom:0}
.tub .p:not(:last-child):before{content:"";position:absolute;left:12px;top:26px;bottom:0;
  width:1px;background:var(--line-2)}
.tub .p .n{flex:0 0 25px;height:25px;border-radius:50%;background:var(--card-hi);
  border:1px solid var(--line-2);display:grid;place-items:center;font:700 11px var(--mono);
  color:var(--dim);z-index:1}
.tub .p.hecho .n{background:rgba(58,214,132,.16);border-color:rgba(58,214,132,.4);color:#8ff0bd}
.tub .p.salta .n{background:rgba(147,184,191,.08);color:var(--faint)}
.tub .p .d{flex:1;min-width:0}
.tub .p .d b{font-size:12.5px;font-weight:650;display:block}
.tub .p .d span{font-size:11.5px;color:var(--faint);font-family:var(--mono);word-break:break-all}

/* ── PESTAÑAS ───────────────────────────────────────────────────────── */
.pests{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
.pests a{padding:9px 15px;font-size:13px;font-weight:600;color:var(--faint);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.pests a:hover{color:var(--dim)}
.pests a.on{color:var(--txt);border-bottom-color:var(--lima)}

/* ── CORREO ─────────────────────────────────────────────────────────── */
.sobre{background:#fbfcf7;color:#1a2224;border-radius:var(--r);overflow:hidden;
  font:13px/1.6 var(--sans);border:1px solid #d5ddd0}
.sobre .cab{padding:14px 20px;border-bottom:1px solid #e3e8de;background:#f2f5eb;font-size:12px;color:#556}
.sobre .cab b{color:#1a2224}
.sobre .cu{padding:22px 24px}
.sobre h4{font-size:16px;margin-bottom:4px;color:#0c1a1d}
.sobre .lin{height:1px;background:#e3e8de;margin:16px 0}
.sobre .fila{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid #eef1ea;font-size:12.5px}
.sobre .fila:last-child{border:0}
.sobre .fila i{font-style:normal;font-weight:700;flex:0 0 78px;font-size:11px;letter-spacing:.05em}
.sobre .r{color:#b3261e}.sobre .a{color:#8a5a00}.sobre .v{color:#136b3c}
.sobre code{font:12px var(--mono);background:#eef1ea;padding:1px 5px;border-radius:4px}
.sobre .pie{padding:14px 24px;background:#f2f5eb;border-top:1px solid #e3e8de;
  font-size:11.5px;color:#667}

/* ── VARIOS ─────────────────────────────────────────────────────────── */
.nota{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--lima-d);
  border-radius:var(--r-s);padding:13px 16px;font-size:12.5px;color:var(--dim);line-height:1.62}
.nota b{color:var(--txt)}
.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px}
.sw i{width:36px;height:20px;border-radius:20px;background:#1c4d57;position:relative;
  transition:background .15s;flex:0 0 36px}
.sw i:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#7fa3ab;transition:.15s}
.sw.on i{background:rgba(228,242,34,.35)}
.sw.on i:after{left:18px;background:var(--lima)}
.sep{height:1px;background:var(--line);margin:18px 0}
.pilaB{display:flex;flex-direction:column;gap:10px}
.lineaB{display:flex;align-items:center;gap:12px;font-size:12.5px}
.lineaB .et{flex:0 0 172px;color:var(--dim);display:flex;align-items:center;gap:8px;min-width:0}
.lineaB .et span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lineaB .bar{flex:1}
.lineaB .vv{flex:0 0 130px;text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.aire{height:8px}

/* ── FORMULARIOS ────────────────────────────────────────────────────── */
.forma{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.forma.c1{grid-template-columns:1fr}
.forma .ancho2{grid-column:1/-1}
.campo label{display:block;font-size:11px;letter-spacing:.05em;font-weight:700;
  color:var(--faint);text-transform:uppercase;margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:8px 11px;font-size:13px;outline:0;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--line-2);box-shadow:0 0 0 3px rgba(228,242,34,.08)}
.campo textarea{resize:vertical;min-height:88px;line-height:1.55}
.campo .ay{font-size:11.5px;color:var(--faint);margin-top:6px;line-height:1.55}
.campo input:disabled,.campo select:disabled,.campo textarea:disabled{
  opacity:.5;cursor:not-allowed}

/* ── MODAL CENTRADO ─────────────────────────────────────────────────── */
.mcaja{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:24px}
.mcaja.on{display:grid}
.mcaja .in{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  width:620px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.mcaja .in>.h{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.mcaja .in>.b{padding:20px;overflow-y:auto}
.mcaja .in>.p{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;
  align-items:center}

/* ── MATRIZ DE PERMISOS ─────────────────────────────────────────────── */
.si{color:var(--ok);font-weight:800}
.no{color:#4c6f77;font-weight:800}
.pill-rol{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:20px}
.pill-rol.admin{background:rgba(228,242,34,.15);color:#eef67a;border:1px solid rgba(228,242,34,.32)}
.pill-rol.super{background:rgba(91,184,255,.13);color:#a9d9ff;border:1px solid rgba(91,184,255,.28)}

/* ── CONMUTADOR DE ROL (solo demo) ──────────────────────────────────── */
.comoRol{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint);
  border:1px dashed var(--line-2);border-radius:20px;padding:4px 6px 4px 11px}
.comoRol select{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;
  padding:3px 8px;font-size:11.5px;font-weight:650;outline:0}

/* ── MANTENIMIENTO ──────────────────────────────────────────────────── */
.mant{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-s);
  background:rgba(255,194,71,.09);border:1px solid rgba(255,194,71,.3);font-size:12.5px;
  line-height:1.6;margin-bottom:14px}
.mant b{color:var(--txt)}
.mant.venc{background:rgba(255,95,95,.1);border-color:rgba(255,95,95,.32)}

/* ── ANILLO DE CAUSAS ───────────────────────────────────────────────── */
.causas{display:flex;flex-direction:column;gap:9px}
.causaF{display:flex;align-items:center;gap:11px;font-size:12.5px}
.causaF .et{flex:0 0 200px;color:var(--dim)}
.causaF .bb{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden}
.causaF .bb span{display:block;height:100%;background:linear-gradient(90deg,#b6c018,#e4f222)}
.causaF .nn{flex:0 0 42px;text-align:right;font:700 12px var(--mono);color:var(--dim)}

/* ═══════════════════════════════════════════════════════════════════════
   AÑADIDO AL PASAR DE LA DEMO AL PANEL DE VERDAD
   La demo no tenía mensajes de resultado ni formularios que fallan, porque
   no guardaba nada. El panel sí, y un guardado que no dice si ha funcionado
   obliga a recargar para averiguarlo.
   ═══════════════════════════════════════════════════════════════════════ */
.flash{display:flex;gap:12px;align-items:flex-start;padding:13px 17px;border-radius:var(--r);
  margin-bottom:18px;font-size:13px;line-height:1.6}
.flash .g{font-size:15px;line-height:1.3}
.flash b{color:var(--txt)}
.flash-ok{background:rgba(58,214,132,.09);border:1px solid rgba(58,214,132,.28);color:#b8f2d5}
.flash-info{background:rgba(91,184,255,.09);border:1px solid rgba(91,184,255,.26);color:#c6e6ff}
.flash-warn{background:rgba(255,194,71,.1);border:1px solid rgba(255,194,71,.3);color:#ffe6b8}
.flash-error{background:rgba(255,95,95,.1);border:1px solid rgba(255,95,95,.3);color:#ffcaca}

.err-campo{border-color:rgba(255,95,95,.55)!important}
.err-txt{color:#ffb0b0;font-size:11.5px;margin-top:6px}

/* Entrada al panel. Pantalla aparte: no lleva menú ni barra. */
.entrada{display:grid;place-items:center;min-height:100vh;padding:24px}
.entrada .caja{width:388px;max-width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:30px}
.entrada .marca2{text-align:center;margin-bottom:24px}
.entrada .marca2 .n{font-size:26px;font-weight:700;letter-spacing:-.6px}
.entrada .marca2 .n b{color:var(--lima)}
.entrada .marca2 .s{font-size:10.5px;letter-spacing:.1em;color:var(--faint);
  margin-top:6px;font-weight:600}
.entrada .pie2{text-align:center;margin-top:20px;font-size:11.5px;color:var(--faint);line-height:1.6}

.aviso-esquema{background:rgba(255,194,71,.13);border-top:1px solid rgba(255,194,71,.3);
  padding:9px 14px;font-size:11.5px;color:#ffe6b8;display:block}
.pendiente{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);
  color:#3f6b74;font-size:13.5px;cursor:not-allowed}

/* Anchuras y alturas discretas. La CSP es style-src 'self', así que una
   anchura variable NO puede ir en un atributo style: no se aplicaría. Van
   aquí, de cinco en cinco, y el PHP elige la clase. */
.w5{width:5%}
.w10{width:10%}
.w15{width:15%}
.w20{width:20%}
.w25{width:25%}
.w30{width:30%}
.w35{width:35%}
.w40{width:40%}
.w45{width:45%}
.w50{width:50%}
.w55{width:55%}
.w60{width:60%}
.w65{width:65%}
.w70{width:70%}
.w75{width:75%}
.w80{width:80%}
.w85{width:85%}
.w90{width:90%}
.w95{width:95%}
.w100{width:100%}

/* ═══════════════════════════════════════════════════════════════════════
   MODALES CON CSS :target, SIN JAVASCRIPT
   El panel se abre cuando algo va mal, y ese es el peor momento para
   depender de que un script cargue. `.modal-oculto` está oculto por defecto
   y `:target` lo enseña, así que el enlace que lo abre es un ancla normal:
   funciona sin JS, se puede pegar en un mensaje y el botón «atrás» lo cierra.
   ═══════════════════════════════════════════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px}
.modal-oculto{display:none}
.modal-oculto:target{display:grid}
.modal-fondo{position:absolute;inset:0;background:rgba(2,10,12,.7);backdrop-filter:blur(3px)}
.modal-caja{position:relative;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);width:600px;max-width:100%;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.modal-head h3{flex:1;font-size:14.5px}
.modal-x{width:30px;height:30px;border-radius:8px;background:var(--card-hi);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--dim);font-size:15px}
.modal-x:hover{color:var(--txt);border-color:var(--line-2)}
.modal-body{padding:20px;overflow-y:auto}
.modal-pie{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;
  align-items:center}

/* ═══════════════════════════════════════════════════════════════════════
   UTILIDADES QUE LA DEMO NO NECESITABA
   La demo no tenía formularios de filtro ni rutas largas que romper, así que
   estas clases aparecieron al pasar al panel de verdad. Las encontró el
   comprobador de vistas comparando cada `class=` contra esta hoja: sin él, el
   fallo se ve como una pantalla mal maquetada y nadie sabe por qué.
   ═══════════════════════════════════════════════════════════════════════ */
.hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.break{overflow-wrap:anywhere;word-break:break-word}
.warn-text{color:#ffdc9c}
.hero{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:14px 16px;font-size:13.5px;line-height:1.6}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11.5px;
  color:var(--faint)}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.chip-exc{display:inline-block;background:var(--card-hi);border:1px solid var(--line);
  border-radius:5px;padding:2px 7px;font-size:11px;margin:0 4px 4px 0}
.icon-btn{background:var(--card-hi);border:1px solid var(--line);border-radius:6px;
  width:26px;height:26px;display:grid;place-items:center;color:var(--dim);cursor:pointer;
  font-size:12px}
.icon-btn:hover{color:#ffb0b0;border-color:rgba(255,95,95,.4)}

/* Barra de filtros: formularios GET, sin JavaScript. */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.f-busca{flex:1;min-width:200px}
.f-sel{min-width:150px}
.search{width:100%;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:7px 11px;font-size:13px;outline:0}
.search:focus{border-color:var(--line-2);box-shadow:0 0 0 3px rgba(228,242,34,.08)}
.filters select{width:100%;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:7px 10px;font-size:13px;outline:0}

/* ═══════════════════════════════════════════════════════════════════════
   CLASES DISCRETAS EN LUGAR DE `style=`

   La CSP del panel es `default-src 'self'` con `style-src 'self'` y SIN
   `unsafe-inline`, así que el navegador DESCARTA todos los atributos
   `style`. No avisa por ninguna parte: la maqueta sale mal y no hay forma de
   relacionarlo con la causa.

   Y salía mal de verdad. Había 204 atributos `style` repartidos por las 20
   vistas: la matriz de Sitios sin anchuras se solapaba consigo misma, las
   tarjetas de dos columnas perdían su `margin:0` y descuadraban la rejilla, y
   las barras de la tira de histórico se quedaban sin altura —dentro de un
   contenedor con `align-items:flex-end`, o sea invisibles—, de modo que el
   elemento más característico del panel no se veía en ninguna pantalla.

   Son clases feas a propósito: una escala corta y predecible que el
   comprobador de vistas puede cotejar una por una. La regla del proyecto ya
   lo decía para las anchuras (.w5….w100); esto es lo mismo para lo demás.
   ═══════════════════════════════════════════════════════════════════════ */
/* Separaciones */
.mt3{margin-top:3px}.mt4{margin-top:4px}.mt5{margin-top:5px}.mt6{margin-top:6px}.mt7{margin-top:7px}.mt8{margin-top:8px}.mt9{margin-top:9px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt18{margin-top:18px}.mt20{margin-top:20px}
.mb7{margin-bottom:7px}.mb12{margin-bottom:12px}.mb14{margin-bottom:14px}.mb16{margin-bottom:16px}.mb18{margin-bottom:18px}.mb22{margin-bottom:22px}.mb24{margin-bottom:24px}
.m0{margin:0}.ml8{margin-left:8px}.m-t16{margin:16px 0 0}.m-v16{margin:16px 0}
.pad22{padding:22px}.pb0{padding-bottom:0}

/* Anchuras fijas de columna y de campo. Las de porcentaje son .w5….w100 */
.an34{width:34px}.an40{width:40px}.an66{width:66px}.an70{width:70px}.an78{width:78px}.an80{width:80px}.an82{width:82px}.an92{width:92px}.an110{width:110px}.an120{width:120px}.an130{width:130px}.an132{width:132px}.an140{width:140px}.an150{width:150px}.an170{width:170px}.an180{width:180px}.an190{width:190px}.an220{width:220px}.an230{width:230px}.an250{width:250px}.an560{width:560px}.an620{width:620px}
.mw0{min-width:0}.nw{white-space:nowrap}

/* Alturas de la tira de histórico: la barra dice el tamaño del día */
.h6{height:6px}.h8{height:8px}.h10{height:10px}.h12{height:12px}.h14{height:14px}.h16{height:16px}.h18{height:18px}.h20{height:20px}.h22{height:22px}.h24{height:24px}.h26{height:26px}

/* Filas flexibles */
.fx{display:flex}.fx-c{align-items:center}.wrap{flex-wrap:wrap}.jc{justify-content:center}.contents{display:contents}
.g7{gap:7px}.g9{gap:9px}.g10{gap:10px}.g11{gap:11px}.g12{gap:12px}.g14{gap:14px}

/* Texto */
.lh162{line-height:1.62}.lh165{line-height:1.65}.lh17{line-height:1.7}
.fs125{font-size:12.5px}.fs15{font-size:15px}.fs16{font-size:16px}
.b6{font-weight:600}.grande{font-size:17px;font-weight:650}
.titulazo{font-size:20px;font-weight:700;letter-spacing:-.4px}
.lima{color:var(--lima)}.rojo-txt{color:#ffb0b0}
.c-err{color:var(--err)}.c-warn{color:var(--warn)}.c-faint{color:var(--faint)}
.lista-ay{margin:8px 0 0 18px}

/* Piezas con nombre: se usan una o dos veces, pero un `style` no se aplica */
.pill-bg2{background:var(--bg-2);padding:7px 14px}
.barra-pie{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:9px;
  align-items:center}
.pagina-suelta{max-width:900px;margin:0 auto;padding:32px 24px 60px}
.clave-temp{font-size:19px;letter-spacing:.06em;margin:12px 0;background:var(--bg-2);
  padding:12px 16px;border-radius:8px;display:inline-block}
/* La previsualización del correo va sobre fondo claro: es el correo de verdad,
   no una pantalla del panel, y verlo con los colores del panel engañaría sobre
   cómo va a llegar. Con scroll porque el texto plano trae líneas largas. */
.pre-correo{white-space:pre-wrap;font-size:12px;line-height:1.6;color:#1a2224;
  overflow-x:auto}
.codigo-error{font-size:44px}
.titulo-error{margin-top:10px;font-size:15px;letter-spacing:0;text-transform:none;
  color:var(--txt);font-weight:650}

/* ═══════════════════════════════════════════════════════════════════════
   ARREGLOS DE MAQUETA QUE SE VIERON EN PRODUCCIÓN
   ═══════════════════════════════════════════════════════════════════════ */

/* EL INTERRUPTOR DENTRO DE UN CAMPO DE FORMULARIO
   `.campo label` es (0,1,1) y `.sw` es (0,1,0), así que le ganaba y le ponía
   `display:block` — y un `<i>` en línea IGNORA width y height. El resultado:
   la bolita del interruptor caía encima del texto y el rótulo salía en
   mayúsculas de etiqueta: «LEE●EL CRONTAB» donde debía decir «Leer el
   crontab». Pasaba en todos los interruptores que viven dentro de un
   `.campo`. Se arregla con la misma especificidad, no bajando la del otro. */
.campo label.sw{display:inline-flex;align-items:center;gap:9px;font-size:13px;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--txt);margin-bottom:0}
/* Y el <i> se blinda: con display propio no depende de que su padre sea flex. */
.sw i{display:inline-block}

/* TABLA DE ANCHURAS FIJAS
   Con la disposición automática, las anchuras declaradas son una sugerencia:
   el navegador comprimía las columnas «Regla» y «Umbral» —de 250 y 230 px a
   poco más de cien— para dar sitio al texto largo de la última, y dentro del
   umbral se partían el número, la unidad y el botón. Con `fixed` las
   anchuras se respetan y el remanente va a la última columna. */
.tabla.fija{table-layout:fixed}
.tabla.fija td,.tabla.fija th{overflow-wrap:break-word}

/* La celda del umbral es una pila, no una línea: input y unidad juntos,
   el resto debajo. */
.umbral{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}

/* Casilla de selección de las acciones en bloque. Se estiliza porque el
   navegador la pinta a su manera y en un tema oscuro queda casi invisible:
   una casilla que no se ve es una acción en bloque que nadie usa.

   SE LLAMA `.chk` Y NO `.marca` PORQUE `.marca` YA EXISTÍA: es el bloque del
   logotipo del menú lateral (línea 53). Al añadir esta regla más abajo, gana
   por orden y le puso `width:16px;height:16px` a la cabecera del menú: el
   logotipo se quedó en una caja de dieciséis píxeles y «HADOQ IT SL · BACKUPS»
   se derramó por encima de «HOY». Rompió el menú de TODAS las pantallas, y no
   había forma de relacionarlo con una casilla de selección. */
.chk{width:16px;height:16px;accent-color:var(--lima);cursor:pointer}

/* ── INCIDENCIAS AGRUPADAS POR REGLA ─────────────────────────────────
   68 incidencias en una lista plana, 21 de ellas con el mismo texto, no se
   leen: se cierra la pestaña. Agrupadas, esas 21 son una línea que dice 21. */
.grupo-regla{border-bottom:1px solid var(--line)}
.grupo-regla:last-child{border-bottom:0}
.cab-regla{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;background:var(--card-hi)}
.resumen-regla{padding:10px 18px 14px;font-size:12.5px;color:var(--dim);line-height:1.6}
/* La fila con su casilla al lado. La casilla NO va dentro de la fila que
   pinta el helper: ese HTML lo comparten cuatro pantallas y solo aquí hay
   selección múltiple. */
.fila-inc{display:flex;align-items:flex-start;gap:4px}
.marca-inc{padding:16px 0 0 16px;flex:0 0 auto}

/* ── GRÁFICOS ────────────────────────────────────────────────────────
   SVG compuesto en PHP: no hay Node en produccion y la CSP prohibe los
   scripts de terceros, asi que ninguna libreria de graficos entra. El color
   va en atributos `fill` y `stroke` dentro del SVG, nunca en un `style`. */
.graf{width:100%;height:120px;display:block}
.graf-pie{display:flex;justify-content:space-between;font-size:10.5px;
  color:var(--faint);margin-top:4px;font-family:var(--mono)}

/* Cifra grande de una tarjeta del cuadro de mando. Es lo primero que se lee y
   por eso va sola: un numero con seis etiquetas alrededor no se lee de un
   vistazo, y esta pantalla existe para eso. */
.cifra{font-size:34px;font-weight:650;letter-spacing:-1px;line-height:1.1;margin:6px 0 2px}

/* Fila desplegada de la matriz de sitios. Ocupa las ocho columnas de golpe:
   `grid-column: 1 / -1` es lo que la hace una banda y no una celda mas. */
.mtz .desp{grid-column:1/-1;background:var(--bg-2);border-bottom:1px solid var(--line);
  padding:0}
.mtz .desp .vacio{padding:22px}

/* ── UN SERVIDOR, UN DESPLEGABLE ─────────────────────────────────────
   `<details>` y no `:target` ni JavaScript: es HTML de serie, funciona con el
   JS caido y el navegador recuerda el estado al volver atras. Se quita el
   triangulo del navegador y se pone uno propio, porque el de serie se pinta
   distinto en cada uno y aqui hay una fila de botones al lado. */
.srv>summary{cursor:pointer;list-style:none}
.srv>summary::-webkit-details-marker{display:none}
.srv>summary::after{content:"▾";color:var(--faint);font-size:12px;margin-left:4px;
  flex:0 0 auto}
.srv[open]>summary::after{content:"▴"}
/* Cerrado, la cabecera no lleva raya inferior: la raya separa de un cuerpo
   que no esta ahi y se lee como una tarjeta cortada. */
.srv:not([open])>summary{border-bottom:0}