/* ---------- 9. Salud de infraestructura ----------
   Overline + % global en pequeño y 4 indicadores Health en columnas: símbolo de 48 px teñido
   con el color de su categoría (mask), título Body/Large, contador pequeño, riel de 24 px
   con progreso degradado y glow. El ancho de cada barra lo pone el JS (js/). */
#saludFooter{grid-column:1/4;grid-row:3;display:flex;flex-direction:column;gap:0.875rem;padding:1.125rem 2rem 1.4375rem;overflow:hidden;}
#saludGlobalWrap{display:flex;align-items:baseline;gap:0.625rem;flex-shrink:0;white-space:nowrap;}
#saludGlobalLabel{color:var(--pn-color-muted);font:400 0.75rem/1.125rem var(--font-sans);letter-spacing:2px;text-transform:uppercase;}
#saludBars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:2.0625rem;flex:1;min-height:0;}
.salud-row{--salud-accent:var(--pn-color-cyan);--salud-icon:var(--pn-mask-categoria-cloud);
  position:relative;display:flex;align-items:center;gap:1.125rem;min-width:0;}
.salud-row + .salud-row::before{content:"";position:absolute;left:-1.0625rem;top:0.25rem;bottom:0.25rem;width:1px;background:var(--pn-color-border);opacity:.6;}
.salud-icon{flex:none;width:3rem;height:3rem;background:var(--salud-accent);
  -webkit-mask:var(--salud-icon) center / contain no-repeat;mask:var(--salud-icon) center / contain no-repeat;}
.salud-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;}
/* Fila superior: nombre a la izquierda y % a la derecha, sobre el borde derecho de la barra. */
.salud-head{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;min-width:0;}
.salud-pct{flex:none;color:var(--salud-accent);font:500 1rem/1.75rem var(--font-sans);font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.salud-label{color:var(--pn-color-white);font:400 1.1875rem/1.75rem var(--font-sans);letter-spacing:-.15px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.salud-bar-track{display:block;height:1.5rem;padding:2px;border:1px solid var(--pn-color-border);border-radius:0.75rem;
  background:var(--pn-color-deep);overflow:hidden;}
.salud-bar-fill{display:block;height:100%;border-radius:0.625rem;transition:width .25s ease;
  background:var(--salud-fill);box-shadow:0 0 12px var(--salud-glow);}
.salud-row--conectividad{--salud-accent:var(--pn-color-mint);--salud-icon:var(--pn-mask-categoria-conectividad);
  --salud-fill:linear-gradient(180deg,#6bffdb 0%,var(--pn-color-mint) 25%,var(--pn-color-mint) 58%,#007a5d 88%,var(--pn-color-mint) 100%);
  --salud-glow:rgba(0,255,193,.25);}
.salud-row--cloud{--salud-accent:var(--pn-color-cyan);--salud-icon:var(--pn-mask-categoria-cloud);
  --salud-fill:linear-gradient(180deg,#6be8ff 0%,var(--pn-color-cyan) 25%,var(--pn-color-cyan) 58%,#00677a 88%,var(--pn-color-cyan) 100%);
  --salud-glow:rgba(0,215,255,.25);}
.salud-row--ciberseguridad{--salud-accent:var(--pn-color-coral);--salud-icon:var(--pn-mask-categoria-seguridad);
  --salud-fill:linear-gradient(180deg,#ffa7a0 0%,var(--pn-color-coral) 25%,var(--pn-color-coral) 58%,#7a312c 88%,var(--pn-color-coral) 100%);
  --salud-glow:rgba(255,103,91,.25);}
.salud-row--colaboracion{--salud-accent:var(--pn-color-lime);--salud-icon:var(--pn-mask-cliente-personas);
  --salud-fill:linear-gradient(180deg,#f0fc89 0%,var(--pn-color-lime) 25%,var(--pn-color-lime) 58%,#6e7818 88%,var(--pn-color-lime) 100%);
  --salud-glow:rgba(229,249,51,.25);}