/* ============================================================================
   panel/assets/modulos/salud.css — lo que solo usa el módulo Salud y uso
   (portal Discord Bot, migración 201, 22 oct 2026)
   ============================================================================
   Piezas copiadas de lo que ya hay: el medidor de los límites de Premium
   (muestrario «Formularios 6», .medidor), los filtros (.fl-chip,
   «Formularios 3»), la tabla y la métrica del panel, el vacío con la trama
   de .tabla-vacia y el aviso gris (.pill-aviso). Dicromático: el amarillo es
   el bot (y lo que está vivo), el crema es Sparked, y lo que avisa va en los
   grises. Sin caja dentro de caja. Toda letra bajo 32 px, en Poppins (los
   títulos van con --fuente-dato, que el armazón ya corta).
   ========================================================================== */
.sa-ico{display:inline-flex;flex:none;color:inherit;margin-right:var(--esp-2)}
.sa-ico svg{width:var(--esp-4);height:var(--esp-4)}

/* ── LA BARRA DE ARRIBA: periodo y refresco ─────────────────────────────── */
.sa-barra-arriba{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-3);
  margin-bottom:var(--esp-rejilla)}
.sa-refresco{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;min-width:0}
.sa-refresco-texto{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);min-width:0}
.sa-refresco-texto.es-fallo{color:var(--gris-3)}
.sa-actualizar{flex:none}
.sa-cuerpo{display:flex;flex-direction:column;gap:var(--esp-bloque);min-width:0}

/* ── LOS BLOQUES ────────────────────────────────────────────────────────── */
.sa-bloque{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.sa-bloque-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--esp-2) var(--esp-3)}
.sa-bloque-titulo{margin:0;font-family:var(--fuente-dato);font-weight:700;font-size:var(--tipo-dato);line-height:1;
  letter-spacing:calc(.01em + var(--tracking-dato));text-transform:uppercase;color:var(--texto-1)}
.sa-bloque-nota{font-size:var(--tipo-leyenda);color:var(--texto-3);font-variant-numeric:tabular-nums}
.sa-nota{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;max-width:62ch}
.sa-nota-vieja{margin:0;font-size:var(--tipo-descripcion);color:var(--gris-3)}
.sa-codigo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;font-weight:500;overflow-wrap:anywhere}

/* El vacío de un bloque: la trama de .tabla-vacia, a la izquierda y con aire. */
.sa-vacio{padding:var(--esp-4);color:var(--texto-3);
  background:repeating-linear-gradient(-45deg,var(--velo-1) 0 8px,transparent 8px 16px)}
.sa-vacio-texto{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5}
.sa-vacio-pie{margin:var(--esp-1) 0 0;font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.5}

/* ── 1 · EL SEMÁFORO ────────────────────────────────────────────────────── */
.sa-semaforo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-4) var(--esp-bloque);
  padding:var(--esp-4) var(--esp-tarjeta, 1.5rem)}
.sa-semaforo.es-vivo{--filo-color:var(--borde-vivo)}
.sa-semaforo.es-callado{--filo-color:var(--gris-2)}
.sa-sem-estado{display:flex;align-items:center;gap:var(--esp-3);min-width:0;flex:1 1 16rem}
.sa-luz{position:relative;flex:none;width:var(--esp-4);height:var(--esp-4);border-radius:50%;background:var(--gris-3)}
.es-vivo .sa-luz{background:var(--yellow)}
.es-vivo .sa-luz::after{content:'';position:absolute;inset:calc(var(--esp-1) * -1);border-radius:50%;border:2px solid var(--yellow);opacity:0;
  animation:sa-latido 2.4s var(--curva) infinite}
@keyframes sa-latido{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.35);opacity:0}}
.sa-sem-texto{min-width:0}
.sa-sem-titulo{margin:0;font-family:var(--fuente-dato);font-weight:800;font-size:var(--tipo-dato);line-height:1;
  letter-spacing:calc(.01em + var(--tracking-dato));text-transform:uppercase;color:var(--texto-1)}
.es-vivo .sa-sem-titulo{color:var(--yellow)}
.es-callado .sa-sem-titulo{color:var(--gris-3)}
.sa-sem-sub{margin:var(--esp-1) 0 0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.4}
.sa-sem-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:var(--esp-3) var(--esp-4);margin:0;flex:2 1 28rem;min-width:0}
.sa-dato{min-width:0}
.sa-dato dt{font-size:var(--tipo-rotulo);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--texto-3);margin-bottom:var(--esp-1)}
.sa-dato dd{margin:0;font-size:var(--tipo-descripcion);font-weight:600;color:var(--texto-1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sa-version{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sa-version:hover{color:var(--yellow-alto)}
.sa-version:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ── 2 · LAS ALERTAS ────────────────────────────────────────────────────── */
.sa-alertas-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--esp-3)}
.sa-alerta{display:flex;gap:var(--esp-3);align-items:flex-start;padding:var(--esp-4);--filo-color:var(--gris-2);--caja-fondo:var(--gris-1)}
.sa-alerta.es-grave{--filo-color:var(--yellow)}
.sa-alerta-ico{color:var(--gris-3);margin:0}
.sa-alerta-ico svg{width:calc(var(--esp-4) + var(--esp-2));height:calc(var(--esp-4) + var(--esp-2))}
.es-grave .sa-alerta-ico{color:var(--yellow)}
.sa-alerta-texto{min-width:0;display:flex;flex-direction:column;gap:var(--esp-1)}
.sa-alerta-titulo{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);
  font-size:var(--tipo-entradilla, 1rem);font-weight:600;color:var(--texto-1);line-height:1.3}
.sa-alerta-detalle{margin:0;font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5;overflow-wrap:anywhere}
.sa-alerta-meta{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3)}

/* ── 3 · EL MARGEN Y LA CAPACIDAD ───────────────────────────────────────── */
.sa-dos{display:grid;gap:var(--esp-bloque) var(--esp-rejilla);grid-template-columns:minmax(0,1fr)}
@media (min-width:1440px){ .sa-dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.sa-margenes{display:grid;gap:var(--esp-rejilla);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.sa-margen{display:flex;flex-direction:column;gap:var(--esp-2);padding:var(--esp-4) var(--esp-4) var(--esp-3);min-width:0}
.sa-margen.es-sobre{--filo-color:var(--gris-3)}
.sa-margen-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.sa-margen-nombre{margin:0;font-size:var(--tipo-rotulo);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--texto-3)}
.sa-margen-valor{margin:0;font-family:var(--fuente-numeral);font-weight:800;font-size:var(--tipo-numeral);line-height:1;
  letter-spacing:calc(.01em + var(--tracking-numeral));color:var(--texto-1);font-variant-numeric:tabular-nums;white-space:nowrap}
.sa-margen-valor.es-nada{color:var(--texto-3)}
.sa-margen-pie{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--esp-1) var(--esp-3);
  font-size:var(--tipo-leyenda);color:var(--texto-3);font-variant-numeric:tabular-nums}
.sa-margen-umbral{color:var(--texto-3)}
.sa-margen-aviso{margin:0;align-self:flex-start;display:inline-flex;align-items:center;min-height:calc(var(--esp-2) * 3);padding:0 var(--esp-2);
  font-size:var(--tipo-leyenda);font-weight:600;color:var(--gris-3);background:var(--gris-1);clip-path:var(--bevel-xs);
  box-shadow:inset 0 0 0 1px var(--gris-2)}
.sa-margen-nota{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3)}

/* El medidor: el de los límites de Premium, con la marca del umbral. Pasado
   el umbral, el relleno sigue amarillo y el aviso lo dice con palabras. */
.sa-medidor{position:relative;height:var(--esp-2);background:var(--velo-2);overflow:visible}
.sa-medidor i{display:block;height:100%;width:var(--w);background:var(--yellow);transition:width .6s var(--curva)}
.sa-medidor.es-vacio{background:repeating-linear-gradient(-45deg,var(--velo-2) 0 4px,transparent 4px 8px)}
.sa-umbral{position:absolute;top:calc(var(--esp-1) * -1);bottom:calc(var(--esp-1) * -1);left:var(--u);width:2px;margin-left:-1px;background:var(--texto-1)}
@media (prefers-reduced-motion: reduce){ .sa-medidor i{transition:none} .es-vivo .sa-luz::after{animation:none} }

.sa-capacidad{display:grid;gap:var(--esp-rejilla);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.sa-cap-col{display:flex;flex-direction:column;gap:var(--esp-4);min-width:0}
.sa-cap-titulo{margin:0 0 var(--esp-1);font-size:var(--tipo-rotulo);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--texto-3)}
.sa-cap-fila{display:flex;flex-direction:column;gap:var(--esp-2);min-width:0}
.sa-cap-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-3)}
.sa-cap-nombre{font-size:var(--tipo-descripcion);font-weight:600;color:var(--texto-1)}
.sa-cap-cifra{font-family:var(--fuente-titular);font-weight:var(--peso-titular, 600);font-size:var(--tipo-descripcion);
  color:var(--texto-1);font-variant-numeric:tabular-nums}
.sa-cap-pie{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.4}

/* ── 4 · LAS GRÁFICAS ───────────────────────────────────────────────────── */
.sa-graficas{display:grid;gap:var(--esp-rejilla);grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){ .sa-graficas{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sa-grafica{display:flex;flex-direction:column;gap:var(--esp-2);padding:var(--esp-4);min-width:0}
.sa-grafica-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--esp-2) var(--esp-3)}
.sa-grafica-titulo{margin:0;font-size:var(--tipo-rotulo);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--texto-2)}
.sa-leyenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--esp-1) var(--esp-3)}
.sa-ley{display:inline-flex;align-items:center;gap:var(--esp-2);font-size:var(--tipo-leyenda);color:var(--texto-3);white-space:nowrap}
.sa-ley-marca{display:inline-block;width:var(--esp-4);height:2px;background:currentColor}
.sa-ley.es-bot .sa-ley-marca{background:var(--yellow);height:3px}
.sa-ley.es-sparked .sa-ley-marca{background:var(--cream);height:3px}
.sa-ley.es-umbral .sa-ley-marca{background:repeating-linear-gradient(90deg,var(--gris-3) 0 3px,transparent 3px 5px)}
.sa-ley.es-limite .sa-ley-marca{background:var(--texto-3)}
.sa-lienzo{position:relative;min-width:0;width:100%;min-height:calc(var(--esp-rejilla) * 8)}
.sa-svg{display:block;overflow:visible;outline:none}
.sa-svg:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.sa-rejilla{stroke:var(--line);stroke-width:1}
.sa-eje{fill:var(--texto-3);font-size:var(--tipo-rotulo);font-family:var(--fuente-texto, inherit);font-variant-numeric:tabular-nums}
.sa-traza{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sa-traza.es-bot{stroke:var(--yellow)}
.sa-traza.es-sparked{stroke:var(--cream);stroke-width:1.5;opacity:.85}
.sa-area{stroke:none}
.sa-area.es-bot{fill:var(--yellow);fill-opacity:.08}
.sa-area.es-sparked{fill:var(--cream);fill-opacity:.05}
.sa-linea{stroke-width:1.25}
.sa-linea.es-umbral{stroke:var(--gris-3);stroke-dasharray:4 3}
.sa-linea.es-limite{stroke:var(--texto-3)}
.sa-guia{stroke:var(--texto-2);stroke-width:1}
.sa-punto{stroke:var(--ink);stroke-width:2}
.sa-punto.es-bot{fill:var(--yellow)}
.sa-punto.es-sparked{fill:var(--cream)}
.sa-lectura{margin:0;min-height:1.4em;font-size:var(--tipo-leyenda);color:var(--texto-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sa-grafica-nota{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.4}

/* ── 5 · COLAS Y PG_CRON ────────────────────────────────────────────────── */
.sa-tabla-envol{min-width:0}
.sa-tabla{margin-bottom:0}
.sa-tabla td.sa-error{max-width:22rem;font-size:var(--tipo-leyenda);color:var(--texto-3)}
/* La fila que avisa: una raya gris a la izquierda; en el móvil, donde la
   fila es una ficha (panel.css), el filo de la ficha en gris claro. */
@media (min-width:960px){ .sa-fila-aviso td:first-child{box-shadow:inset 3px 0 0 var(--gris-3)} }
@media (max-width:959.98px){ .sa-tabla tbody tr.sa-fila-aviso::before{background:var(--gris-3)} }
.sa-num-aviso strong{color:var(--gris-4)}
.sa-apagado strong{color:var(--texto-3);font-weight:500}

.sa-plegados{display:flex;flex-direction:column;gap:var(--esp-3)}
.sa-detalles{min-width:0;border-top:1px solid var(--linea-suave);border-bottom:1px solid var(--linea-suave)}
.sa-detalles + .sa-detalles{border-top:0}
.sa-detalles-cab{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--esp-2) var(--esp-3);
  padding:var(--esp-3) 0;cursor:pointer}
.sa-detalles-cab::-webkit-details-marker{display:none}
.sa-detalles-titulo{display:inline-flex;align-items:center;gap:var(--esp-2);font-size:var(--tipo-descripcion);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--texto-1)}
.sa-detalles-titulo::before{content:'';width:var(--esp-2);height:var(--esp-2);border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform var(--t-rapido) var(--curva)}
.sa-detalles[open] .sa-detalles-titulo::before{transform:rotate(45deg)}
.sa-detalles.es-aviso .sa-bloque-nota{color:var(--gris-4)}
.sa-detalles-cab:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.sa-detalles-cuerpo{display:flex;flex-direction:column;gap:var(--esp-3);padding-bottom:var(--esp-4)}
.sa-cerradas{list-style:none;margin:0;padding:0}
.sa-cerrada{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--esp-1) var(--esp-3);padding:var(--esp-2) 0;
  border-bottom:1px solid var(--linea-suave);font-size:var(--tipo-descripcion)}
.sa-cerrada:last-child{border-bottom:0}
.sa-cerrada-titulo{color:var(--texto-1);min-width:0;overflow-wrap:anywhere}
.sa-cerrada-meta{color:var(--texto-3);font-size:var(--tipo-leyenda)}
@media (prefers-reduced-motion: reduce){ .sa-detalles-titulo::before{transition:none} }

/* ── 6 y 7 · LA BASE Y EL USO ───────────────────────────────────────────── */
.sa-barras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--esp-3)}
.sa-barra{display:flex;flex-direction:column;gap:var(--esp-1);min-width:0}
.sa-barra-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-3);font-size:var(--tipo-descripcion)}
.sa-barra-nombre{min-width:0;color:var(--texto-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-barra-cifra{flex:none;font-weight:600;color:var(--texto-1);font-variant-numeric:tabular-nums}
.sa-barra-pista{height:var(--esp-2);background:var(--velo-2)}
.sa-barra-pista i{display:block;height:100%;width:var(--w);background:var(--yellow)}
.sa-barra-pie{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.sa-barras-dos{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--esp-3) var(--esp-rejilla)}
.sa-barras-dos .sa-barra-nombre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}

.sa-uso{display:grid;gap:var(--esp-rejilla);grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){
  .sa-uso{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa-uso-ancho{grid-column:1 / -1}
}
.sa-uso-caja{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-4);min-width:0}

.sa-columnas-envol{display:flex;flex-direction:column;gap:var(--esp-2);min-width:0}
.sa-columnas{display:flex;align-items:flex-end;gap:calc(var(--esp-1) / 2);height:calc(var(--esp-bloque) * 3);padding-top:var(--esp-2);
  border-bottom:1px solid var(--line)}
.sa-columna{flex:1 1 0;min-width:0;height:var(--h);background:var(--yellow);opacity:.85;transition:opacity var(--t-rapido) var(--curva)}
.sa-columna:hover{opacity:1;background:var(--yellow-alto)}
.sa-columna.es-cero{height:1px;background:var(--line)}
.sa-columnas-eje{display:flex;justify-content:space-between;font-size:var(--tipo-leyenda);color:var(--texto-3)}
@media (prefers-reduced-motion: reduce){ .sa-columna{transition:none} }

/* La línea de referencia que no cabe en el eje (umbral, plan) sigue en la
   leyenda, atenuada y diciéndolo. */
.sa-ley.es-fuera .sa-ley-marca{opacity:var(--opacidad-apagado)}

/* ── 8 · SERVIDORES Y ALCANCE, Y EL RANKING DE MÓDULOS (migración 203) ───── */
.sa-flujo-nodo{min-width:0}
.sa-periodo{flex:none}
.sa-flujo{display:flex;flex-direction:column;gap:var(--esp-rejilla);min-width:0;transition:opacity var(--t-rapido) var(--curva)}
.sa-flujo.es-leyendo{opacity:var(--opacidad-apagado)}
.sa-flujo-carga{padding:var(--esp-4) 0}
.sa-reintentar{margin-top:var(--esp-3)}
.sa-apiladas{display:flex;flex-direction:column;gap:var(--esp-rejilla);min-width:0}
.sa-uso-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2) var(--esp-3)}
.sa-uso-cab .sa-cap-titulo{margin:0}

/* ▲ 12 · 3,4 %: la flecha es el sentido (amarillo sube, gris baja); la cifra, en el texto. */
.sa-tend{display:inline-flex;align-items:baseline;gap:var(--esp-1);color:var(--texto-1);font-variant-numeric:tabular-nums;white-space:nowrap}
.sa-tend-flecha{font-size:.8em}
.sa-tend.es-sube .sa-tend-flecha{color:var(--yellow)}
.sa-tend.es-baja .sa-tend-flecha{color:var(--gris-3)}
.sa-tend.es-igual,.sa-tend.es-nuevo{color:var(--texto-3)}

/* La tabla de servidores y de módulos: una fila es una rejilla; en el móvil,
   tres líneas como mucho (no la ficha de .tabla, que con 20 filas era una
   pantalla entera). Lo atenuado (.es-sin-uso) usa la opacidad de lo apagado. */
.sa-rank-envol{min-width:0}
.sa-rank{display:block;width:100%;font-size:var(--tipo-descripcion)}
.sa-rank thead,.sa-rank tbody{display:block}
.sa-rank tr{display:grid;grid-template-columns:var(--cols);align-items:center;gap:0 var(--esp-3)}
.sa-rank-srv{--cols:minmax(0,2.4fr) minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.6fr)}
.sa-rank-mod{--cols:minmax(0,1.5fr) minmax(0,1.7fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr)}
.sa-rank th{margin:0;padding:0 0 var(--esp-2);text-align:left;font-size:var(--tipo-rotulo);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--texto-3);line-height:1.3}
.sa-rank tbody tr{border-top:1px solid var(--linea-suave)}
.sa-rank td{min-width:0;padding:var(--esp-3) 0;color:var(--texto-2);line-height:1.35}
.sa-rank th.sa-c-num,.sa-rank td.sa-c-num{text-align:right}
.sa-rank th.sa-c-tend,.sa-rank td.sa-c-tend,.sa-rank th.sa-c-cambio,.sa-rank td.sa-c-cambio{padding-left:var(--esp-3)}
.sa-rank-fila.es-sin-uso{opacity:var(--opacidad-apagado)}
.sa-rank-valor{color:var(--texto-1);font-variant-numeric:tabular-nums}
.sa-rank td strong{font-weight:600;color:var(--texto-1);overflow-wrap:anywhere}
.sa-sub{display:block;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.sa-adop{display:flex;flex-direction:column;gap:var(--esp-1);min-width:0}
.sa-adop-txt .sa-sub{display:inline;margin-left:var(--esp-2)}
.sa-adop .sa-barra-pista{height:var(--esp-1)}
.sa-c-cambio .sa-rank-valor{display:flex;flex-direction:column;align-items:flex-start}
.sa-srv{display:flex;align-items:center;gap:var(--esp-3);min-width:0}
.sa-srv-nombre{min-width:0}
.sa-icono{position:relative;flex:none;display:grid;place-items:center;width:calc(var(--esp-4) * 2);height:calc(var(--esp-4) * 2);
  border-radius:50%;overflow:hidden;background:var(--velo-2);color:var(--texto-2)}
.sa-icono img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sa-inicial{font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-descripcion);line-height:1}
.sa-ver-todos{align-self:flex-start;margin-top:var(--esp-3)}
.sa-servidores{display:flex;flex-direction:column;min-width:0}

/* ── EL VIGÍA Y LAS CONSULTAS QUE MÁS DISCO GASTAN ──────────────────────── */
.sa-nota-vieja.es-falta{color:var(--texto-2)}
.sa-cons-lista{display:flex;flex-direction:column;gap:var(--esp-2);min-width:0}
.sa-rank-con{--cols:minmax(0,4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.sa-rank-dis{--cols:minmax(0,1.2fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr)}
.sa-sql{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--tipo-leyenda);line-height:1.45;
  color:var(--texto-1);overflow-wrap:anywhere;white-space:pre-wrap}

@media (max-width:759.98px){
  .sa-rank thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sa-rank tr{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:var(--esp-1) var(--esp-3);padding:var(--esp-3) 0}
  .sa-rank td{padding:0;text-align:left}
  .sa-rank td.sa-c-num{text-align:left}
  .sa-rank td[data-etiqueta]::before{content:attr(data-etiqueta);display:block;font-size:var(--tipo-rotulo);font-weight:600;
    text-transform:uppercase;letter-spacing:.12em;color:var(--texto-3);line-height:1.3}
  .sa-rank td.sa-c-nombre{grid-column:1 / 3}
  .sa-rank td.sa-c-cambio,.sa-rank td.sa-c-tend{grid-column:3;grid-row:1;text-align:right}
  .sa-rank td.sa-c-cambio::before,.sa-rank td.sa-c-tend::before{display:none}
  .sa-c-cambio .sa-rank-valor{align-items:flex-end}
  .sa-rank td.sa-c-adop{grid-column:1 / -1}
  .sa-rank td.sa-c-adop::before{display:none}
  .sa-rank.sa-rank-con tr,.sa-rank.sa-rank-dis tr{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sa-rank.sa-rank-con td.sa-c-nombre,.sa-rank.sa-rank-dis td.sa-c-nombre{grid-column:1 / -1}
}

/* ── EL MÓVIL ───────────────────────────────────────────────────────────── */
@media (max-width:620px){
  .sa-barra-arriba{align-items:stretch}
  .sa-refresco{justify-content:space-between;flex:1 1 100%}
  .sa-semaforo{padding:var(--esp-4)}
  .sa-sem-datos{grid-template-columns:repeat(2,minmax(0,1fr));flex-basis:100%}
  .sa-grafica,.sa-uso-caja{padding:var(--esp-3)}
  .sa-tabla td.sa-error{max-width:none}
}