/* Medidor animado de "Test de velocidad": arco con escala 0–1000 Mbps,
   lectura central, estadísticas y luces rojas, como el panel del servidor
   de pruebas (assets/images/isp-speedtest.jpg). */

.speed-gauge.sg {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 0;
  padding: 22px 22px 24px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 40%, rgba(230, 0, 18, .16), transparent 70%),
    linear-gradient(180deg, #121823 0%, #0a0e15 100%);
  box-shadow: 0 24px 50px -28px rgba(10, 14, 21, .7), inset 0 0 0 1px rgba(255, 255, 255, .06);
  color: #fff;
}
.speed-gauge.sg::before,
.speed-gauge.sg::after { content: none; }
/* Neutraliza las reglas genéricas del medidor anterior (zone-pages.css). */
.speed-gauge.sg span,
.speed-gauge.sg b { margin: 0; letter-spacing: normal; text-transform: none; }

/* Luces rojas de velocidad en la parte baja */
.sg-streaks { position: absolute; inset: auto 0 0; z-index: -1; height: 46%; overflow: hidden; pointer-events: none; }
.sg-streaks::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(230, 0, 18, .28), transparent 70%);
}
.sg-streaks i {
  position: absolute; left: -40%; width: 60%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 60, 75, .9), transparent);
  filter: drop-shadow(0 0 6px rgba(255, 30, 50, .8));
  animation: sg-streak 2.6s linear infinite;
}
.sg-streaks i:nth-child(1) { bottom: 18%; animation-delay: 0s; }
.sg-streaks i:nth-child(2) { bottom: 34%; width: 40%; opacity: .6; animation-duration: 3.4s; animation-delay: -1.2s; }
.sg-streaks i:nth-child(3) { bottom: 10%; width: 70%; opacity: .8; animation-duration: 2.1s; animation-delay: -.6s; }
.sg-streaks i:nth-child(4) { bottom: 26%; width: 30%; opacity: .5; animation-duration: 3s; animation-delay: -2s; }
.speed-gauge.sg.is-running .sg-streaks i { animation-duration: 1.1s; }
@keyframes sg-streak { to { transform: translateX(260%); } }

/* Estado de la fase */
.speed-gauge.sg .sg-phase {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font: 700 .74rem/1 'Manrope', sans-serif; letter-spacing: .04em; color: #dfe5ee;
}
.sg-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 4px rgba(31, 157, 85, .18); }
.speed-gauge.sg.is-running .sg-dot { background: #ff2435; box-shadow: 0 0 0 4px rgba(255, 36, 53, .2); animation: sg-blink 1s ease-in-out infinite; }
@keyframes sg-blink { 50% { opacity: .35; } }

/* Dial */
.sg-dial { position: relative; width: min(100%, 330px); }
.sg-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.sg-track, .sg-bar, .sg-glow { fill: none; stroke-linecap: round; stroke-dasharray: 1000; }
.sg-track { stroke: rgba(255, 255, 255, .09); stroke-width: 14; stroke-dashoffset: 0; }
.sg-bar { stroke: url(#sgArc); stroke-width: 14; stroke-dashoffset: 1000; }
.sg-glow { stroke: #ff1f33; stroke-width: 16; opacity: .55; stroke-dashoffset: 1000; }
.sg-ticks line { stroke: rgba(255, 255, 255, .22); stroke-width: 1.4; stroke-linecap: round; }
.sg-ticks line.maj { stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.sg-labels text {
  fill: rgba(255, 255, 255, .42); text-anchor: middle;
  font: 700 11px 'Manrope', sans-serif; transition: fill .25s ease;
}
.sg-labels text.on { fill: #fff; }
.sg-tip { fill: #fff; filter: drop-shadow(0 0 6px #ff2435) drop-shadow(0 0 12px rgba(255, 36, 53, .8)); }

.sg-readout {
  position: absolute; left: 0; right: 0; top: 50%;
  display: grid; justify-items: center; gap: 6px;
  transform: translateY(-4%);
}
.sg-readout output {
  font: 800 clamp(2rem, 3.4vw, 2.6rem)/1 'Manrope', sans-serif;
  letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(255, 255, 255, .15);
}
.speed-gauge.sg .sg-readout span { font: 700 .9rem/1 'DM Sans', sans-serif; color: #c7cfdb; }

/* Estadísticas */
.sg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: -6px; }
.sg-stats div {
  display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  backdrop-filter: blur(6px);
}
.sg-stats small {
  display: flex; align-items: center; gap: 6px;
  font: 800 .62rem/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #9aa6b8;
}
.sg-stats small i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.sg-stats i.ping { color: #5aa9ff; }
.sg-stats i.jit { color: #ff4d5c; }
.sg-stats i.down { color: #ffffff; }
.sg-stats i.up { color: #ff8a93; }
.speed-gauge.sg .sg-stats b { font: 800 1rem/1 'Manrope', sans-serif; letter-spacing: -.02em; color: rgba(255, 255, 255, .45); white-space: nowrap; }
.speed-gauge.sg .sg-stats b.on { color: #fff; animation: sg-pop .35s ease; }
@keyframes sg-pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }


@media (max-width: 560px) {
  .sg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-streaks i, .speed-gauge.sg.is-running .sg-dot { animation: none; }
  .sg-stats b.on { animation: none; }
}

.speed-gauge.sg .sg-phase span:not(.sg-dot) { font: inherit; color: inherit; letter-spacing: inherit; }