/* Umbrella Energía (S37) · Calidad de energía: half-arc gauges and THD bars. */
/* Gauges (half arcs, static). */
.en-gauges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.en-gauge {
  display: grid;
  justify-items: center;
  margin: 0;
  font-size: 12px;
}
.en-gauge svg {
  width: 100%;
  max-width: 140px;
}
.en-gauge path {
  fill: none;
  stroke-linecap: round;
}
.en-g-track {
  stroke: var(--surface-sunk);
  stroke-width: 10;
}
.en-g-ok {
  stroke: color-mix(in srgb, var(--chart-2) 35%, #fff);
  stroke-width: 10;
}
.en-g-fill {
  stroke: var(--chart-1);
  stroke-width: 4;
}
.en-gauge b {
  margin-top: -18px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.en-gauge b small {
  font-size: 11px;
  color: var(--hud-muted);
}
.en-gauge figcaption {
  color: var(--hud-muted);
}
.en-gauge.is-out .en-g-fill {
  stroke: var(--bad);
}

/* THD bars against the reference limit. */
.en-thd {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.en-thd li {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.en-thd-bar {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: var(--surface-sunk);
}
.en-thd-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 4px;
  background: var(--chart-2);
}
.en-thd-bar em {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--l);
  border-left: 2px dashed var(--hud-text);
  font-size: 0;
}
.en-thd li.is-out .en-thd-bar i {
  background: var(--bad);
}