/*
 * Speedtest UI — contrato de layout (NO MODIFICAR sin revisar documentación):
 * El recuadro del medidor (.gauge-wrap) y, tras el test, la paleta de resultados NOC
 * deben seguir ocupando la altura útil de la ventana (~100svh menos el chrome del shell).
 * No reducir ni “compactar” alturas fijas del bloque principal para “mejorar” diseño:
 * rompe la coherencia con el medición en vivo y el panel final. Ver docs/MODULO-SPEEDTEST.md §10.
 */
:root {
  --bg: #080d1a;
  --bg2: #101a31;
  --line: #22314f;
  --card: rgba(17, 26, 48, 0.78);
  --text: #d9e7ff;
  --muted: #8ea5d1;
  --accent: #ff6b35;
  --accent2: #dc2626;
  --good: #3af4a3;
  --speedtest-header-bg: #090f22;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, #142446 0%, var(--bg) 60%);
  min-height: 100vh;
}

/* Embed en CRM (iframe ?embed=crm): menos chrome exterior; el gauge §10 no se compacta. */
body.embed-crm .topbar {
  padding: 8px 14px;
}
body.embed-crm .topbar .brand-subtitle {
  font-size: 0.78rem;
}
body.embed-crm .build {
  font-size: 0.7rem;
  opacity: 0.75;
}
body.embed-crm .pwa-install-btn--embed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}
body.embed-crm .pwa-install-btn--embed[hidden] {
  display: none !important;
}

.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.18;
  pointer-events: none;
}

.app-shell {
  --speedtest-shell-chrome: clamp(92px, 14vh, 142px);
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(4px, 1vw, 8px);
  padding-inline: clamp(14px, 3vw, 22px);
  padding-bottom: clamp(28px, 4vh, 48px);
}

/* Franja superior: contraste respecto al cuerpo (encabezado a ancho de viewport) */
.topbar-shell {
  width: 100%;
  position: relative;
  z-index: 2;
  margin-bottom: 4px;
  overflow: visible;
  background: var(--speedtest-header-bg);
  border-bottom: 1px solid rgba(90, 120, 180, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.45);
}

.topbar-shell__inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(12px, 2.5vw, 18px) clamp(14px, 3vw, 22px);
  margin-bottom: 0;
  overflow: visible;
}

@media (min-width: 761px) {
  .topbar {
    /* ~10px menos de altura efectiva vs clamp(12…18px) vertical en escritorio */
    padding: clamp(7px, 1.4vw, 11px) clamp(14px, 3vw, 22px);
  }
  .brand-subtitle {
    margin-top: 2px;
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
a.brand-home-link.brand {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 12px;
  outline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
a.brand-home-link.brand:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.75);
}
a.brand-home-link.brand:hover .brand-tech-a {
  color: rgba(210, 228, 252, 0.92);
}
.brand-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.brand-title-tech {
  margin: 0;
  font-family: Orbitron, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.12rem, 2.6vw, 1.48rem);
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.42em;
}
.brand-tech-a {
  font-weight: 600;
  color: rgba(186, 210, 245, 0.78);
  text-shadow:
    0 0 20px rgba(56, 189, 248, 0.25),
    0 0 2px rgba(125, 211, 252, 0.5);
  animation: brandSegmentIn 0.95s cubic-bezier(0.22, 0.82, 0.28, 1) backwards;
}
.brand-tech-b {
  position: relative;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: linear-gradient(
    95deg,
    #7dd3fc 0%,
    #e0f2fe 18%,
    #38bdf8 38%,
    #f0f9ff 52%,
    #0ea5e9 72%,
    #bae6fd 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.45));
  animation:
    brandSegmentIn 0.95s cubic-bezier(0.22, 0.82, 0.28, 1) 0.12s backwards,
    brandMetalDrift 10s linear infinite;
}
.brand-tech-b::after {
  content: "";
  position: absolute;
  inset: -0.15em -0.1em auto -0.1em;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.6), transparent);
  opacity: 0.65;
  pointer-events: none;
}
@keyframes brandSegmentIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes brandMetalDrift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 260% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-tech-b {
    animation: brandSegmentIn 0.65s ease-out 0.08s backwards;
  }
  .brand-tech-a {
    animation: brandSegmentIn 0.65s ease-out backwards;
  }
}
@media (min-width: 761px) {
  .brand-title-tech {
    font-size: clamp(1.06rem, 1.75vw, 1.42rem);
  }
  .brand-subtitle {
    font-size: 0.82rem;
  }
}
.brand-dot {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
  transform: translateZ(0);
}

/* Sin filter en keyframes: en muchos escritorios no se compone bien; el pulso = sombras + opacidad + scale */
.brand-dot--idle {
  background: radial-gradient(circle at 32% 28%, #fca5a5 0%, #ef4444 42%, #7f1d1d 100%);
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.45),
    0 0 8px rgba(239, 68, 68, 0.55);
  animation: brandLedPulseRed 2.75s ease-in-out infinite;
}

.brand-dot--done {
  background: radial-gradient(circle at 32% 28%, #86efac 0%, #22c55e 48%, #14532d 100%);
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.45),
    0 0 8px rgba(34, 197, 94, 0.55);
  animation: brandLedPulseGreen 2.5s ease-in-out infinite;
}

@keyframes brandLedPulseRed {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1) translateZ(0);
    box-shadow:
      0 0 0 1px rgba(248, 113, 113, 0.3),
      0 0 4px rgba(239, 68, 68, 0.35);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) translateZ(0);
    /* Aro fino teñido (no blanco); halo exterior rojo intenso */
    box-shadow:
      0 0 0 1px rgba(252, 165, 165, 0.75),
      0 0 14px 3px rgba(239, 68, 68, 0.98),
      0 0 32px 10px rgba(220, 38, 38, 0.72),
      0 0 52px 14px rgba(185, 28, 28, 0.38);
  }
}

@keyframes brandLedPulseGreen {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1) translateZ(0);
    box-shadow:
      0 0 0 1px rgba(74, 222, 128, 0.3),
      0 0 4px rgba(34, 197, 94, 0.35);
  }
  50% {
    opacity: 1;
    transform: scale(1.18) translateZ(0);
    box-shadow:
      0 0 0 1px rgba(167, 243, 208, 0.72),
      0 0 14px 3px rgba(34, 197, 94, 0.98),
      0 0 32px 10px rgba(22, 163, 74, 0.72),
      0 0 52px 14px rgba(20, 83, 45, 0.36);
  }
}

/*
 * Escritorio: Chrome/Edge a veces no pintan box-shadow animado en el mismo nodo que opacity.
 * Móvil sigue con brandLedPulse*; aquí el pulso = núcleo (opacidad/scale) + halo ::after (scale + sombra fija).
 */
@media (min-width: 761px) {
  @keyframes brandLedCoreRedDesk {
    0%,
    100% {
      opacity: 0.62;
      transform: scale(1) translateZ(0);
    }
    50% {
      opacity: 1;
      transform: scale(1.14) translateZ(0);
    }
  }
  @keyframes brandLedCoreGreenDesk {
    0%,
    100% {
      opacity: 0.64;
      transform: scale(1) translateZ(0);
    }
    50% {
      opacity: 1;
      transform: scale(1.12) translateZ(0);
    }
  }
  @keyframes brandLedHaloPulseRedDesk {
    0%,
    100% {
      opacity: 0;
      transform: scale(1) translateZ(0);
    }
    50% {
      opacity: 0.95;
      transform: scale(2.55) translateZ(0);
    }
  }
  @keyframes brandLedHaloPulseGreenDesk {
    0%,
    100% {
      opacity: 0;
      transform: scale(1) translateZ(0);
    }
    50% {
      opacity: 0.92;
      transform: scale(2.35) translateZ(0);
    }
  }

  .brand-dot--idle {
    animation: brandLedCoreRedDesk 2.75s ease-in-out infinite;
    box-shadow:
      0 0 0 1px rgba(248, 113, 113, 0.42),
      0 0 12px rgba(239, 68, 68, 0.55),
      0 0 28px 8px rgba(239, 68, 68, 0.42);
  }
  .brand-dot--idle::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      0 0 20px 12px rgba(239, 68, 68, 0.92),
      0 0 52px 18px rgba(220, 38, 38, 0.48);
    animation: brandLedHaloPulseRedDesk 2.75s ease-in-out infinite;
  }

  .brand-dot--done {
    animation: brandLedCoreGreenDesk 2.5s ease-in-out infinite;
    box-shadow:
      0 0 0 1px rgba(74, 222, 128, 0.42),
      0 0 12px rgba(34, 197, 94, 0.52),
      0 0 28px 8px rgba(22, 163, 74, 0.4);
  }
  .brand-dot--done::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      0 0 22px 12px rgba(34, 197, 94, 0.9),
      0 0 52px 18px rgba(21, 128, 61, 0.44);
    animation: brandLedHaloPulseGreenDesk 2.5s ease-in-out infinite;
  }
}

/* Debajo del bloque escritorio para que pref-reduced-motion gane ante las animaciones de desktop */
@media (prefers-reduced-motion: reduce) {
  .brand-dot--idle,
  .brand-dot--done {
    animation: none;
    opacity: 1;
    transform: translateZ(0);
  }
  .brand-dot--idle::after,
  .brand-dot--done::after {
    animation: none !important;
    opacity: 0 !important;
    content: none;
  }
}
.build { color: var(--muted); font-size: 0.78rem; }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  height: calc(100svh - var(--speedtest-shell-chrome));
  overflow: hidden;
  margin-bottom: 20px;
}
/* Paleta final NOC suele sobrepasar 1 vista: dejar crecer y scroll de página para no cortar IP/ubicación */
.hero:has(.gauge-wrap.gauge-wrap--noc-summary) {
  height: auto;
  min-height: calc(100svh - var(--speedtest-shell-chrome));
  overflow: visible;
}

/*
 * Franja de 4 usos bajo la tarjeta: si el strip ocupa sitio en el flex del hero, el gauge (flex:1) se encoge.
 * Misma altura de bloque del test que antes; lo que quede debajo se ve con scroll de página.
 */
.hero:has(.service-fit-strip) {
  min-height: calc(100svh - var(--speedtest-shell-chrome));
  height: auto;
  overflow: visible;
}

.hero:has(.service-fit-strip) > .gauge-wrap:not(.gauge-wrap--splash-finished) {
  flex: 0 0 calc(100svh - var(--speedtest-shell-chrome));
  height: calc(100svh - var(--speedtest-shell-chrome));
  min-height: calc(100svh - var(--speedtest-shell-chrome));
  max-height: calc(100svh - var(--speedtest-shell-chrome));
  box-sizing: border-box;
}

.card {
  background: var(--card);
  border: 1px solid rgba(146, 175, 222, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.gauge-wrap {
  --phase-c1: #fb923c;
  --phase-c2: #dc2626;
  --phase-glow: rgba(251, 146, 60, 0.42);
  --live-density-txt: 1;
  --live-density-pad: 1;
  --live-density-gauge: 1;
  --gw-pad-block: clamp(10px, 2.4vw, 16px);
  --gw-pad-bottom-base: max(4px, calc(var(--gw-pad-block) - 6px));
  opacity: 1;
  container-name: gw;
  container-type: size;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(146, 175, 222, 0.16);
  border-radius: 16px;
  padding-inline: clamp(14px, 3vw, 22px);
  padding-top: var(--gw-pad-block);
  padding-bottom: var(--gw-pad-bottom-base);
  flex: 1 1 auto;
  align-self: center;
  margin-inline: auto;
  width: min(680px, 100%);
  min-height: 0;
  max-height: 100%;
  position: relative;
  perspective: none;
  overscroll-behavior: none;
  overflow-x: clip;
  overflow-y: hidden;
}

/* Con el splash activo, las ondas sobrepasan el botón; overflow-y:hidden del card las recortaba en escritorio. */
.gauge-wrap:not(.gauge-wrap--splash-finished) {
  overflow-y: visible;
}

/*
 * Tras cerrar el splash: el recuadro tiene siempre la misma altura que ocupaba en la medición
 * (≈ área útil del hero). Así no se encoge al pasar a resumen NOC ni al mostrar bloques debajo en .hero.
 */
.gauge-wrap.gauge-wrap--splash-finished {
  --gw-viewport-h: calc(100svh - var(--speedtest-shell-chrome));
  flex: 0 0 var(--gw-viewport-h);
  height: var(--gw-viewport-h);
  min-height: var(--gw-viewport-h);
  max-height: var(--gw-viewport-h);
  box-sizing: border-box;
}

.gauge-wrap--noc-summary {
  overflow-x: clip;
  overflow-y: hidden;
}

/* Tarjeta final NOC: llenar la vista útil (~100vh) junto al botón, sin hueco inferior vacío */
.hero:has(.gauge-wrap.gauge-wrap--noc-summary) {
  align-items: stretch;
}

.gauge-wrap.gauge-wrap--noc-summary.gauge-wrap--splash-finished {
  flex: 0 0 var(--gw-viewport-h, calc(100svh - var(--speedtest-shell-chrome)));
  /* Mismo ancho que al cargar (.gauge-wrap usa min(680px, 100%); no forzar 100% / otro max) */
  width: min(680px, 100%);
  align-self: center;
  box-sizing: border-box;
}

.gauge-wrap.gauge-wrap--noc-summary.gauge-wrap--splash-finished .gauge-main-panel.gauge-main-panel--shown {
  flex: 1 1 auto;
  min-height: 0;
}

/* Splash: recuadro ya visible (“vacío”); el disco Iniciar se revela sólo tras load + JS (--splash-intro). */
.gauge-wrap:not(.gauge-wrap--splash-finished):not(.gauge-wrap--splash-intro)
  .gauge-splash:not([hidden]):not(.is-done)
  .gauge-splash-svg,
.gauge-wrap:not(.gauge-wrap--splash-finished):not(.gauge-wrap--splash-intro)
  .gauge-splash:not([hidden]):not(.is-done)
  .gauge-splash-label {
  opacity: 0;
}

.gauge-wrap:not(.gauge-wrap--splash-finished):not(.gauge-wrap--splash-intro)
  .gauge-splash:not([hidden]):not(.is-done)
  .gauge-splash-btn {
  pointer-events: none;
}

.gauge-wrap:not(.gauge-wrap--splash-intro):not(.gauge-wrap--splash-finished)
  .gauge-splash-svg
  .gauge-splash-spin {
  animation-play-state: paused;
}

.gauge-wrap--splash-intro:not(.gauge-wrap--splash-finished)
  .gauge-splash:not([hidden]):not(.is-done)
  .gauge-splash-svg {
  animation: stSplashDiscFadeIn 2.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.gauge-wrap--splash-intro:not(.gauge-wrap--splash-finished)
  .gauge-splash:not([hidden]):not(.is-done)
  .gauge-splash-label {
  opacity: 0;
  animation: stSplashDiscFadeIn 2.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.18s forwards;
}

@keyframes stSplashDiscFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gauge-wrap.phase-ping { --phase-c1: #facc15; --phase-c2: #f97316; --phase-glow: rgba(250, 204, 21, 0.24); }
.gauge-wrap.phase-download { --phase-c1: #f97316; --phase-c2: #b91c1c; --phase-glow: rgba(249, 115, 22, 0.4); }
.gauge-wrap.phase-upload { --phase-c1: #f0abfc; --phase-c2: #c026d3; --phase-glow: rgba(253, 165, 255, 0.38); }
.gauge-wrap.phase-transition { --phase-c1: #fb923c; --phase-c2: #e879f9; --phase-glow: rgba(251, 146, 60, 0.36); }
.gauge-wrap.phase-completed { --phase-c1: #34d399; --phase-c2: #22c55e; --phase-glow: rgba(52, 211, 153, 0.25); }
.gauge-wrap.phase-error { --phase-c1: #fb7185; --phase-c2: #ef4444; --phase-glow: rgba(251, 113, 133, 0.24); }
.phase-chip {
  --phase-chip-progress: 0%;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 10px;
  border-radius: 999px;
  border: 1px solid rgba(146, 175, 222, 0.2);
  color: #d4e8ff;
  background: rgba(9, 20, 38, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
  overflow: hidden;
}
.phase-chip-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--phase-chip-progress);
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--phase-c1, #fb923c) 52%, transparent) 0%,
    color-mix(in srgb, var(--phase-c2, #dc2626) 38%, rgba(20, 30, 55, 0.35)) 100%
  );
  opacity: 0.92;
  transition: width 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 0;
}
.phase-chip-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0.28rem 0.75rem;
  box-sizing: border-box;
}
.phase-chip-label {
  flex: 1 1 auto;
  min-width: 0;
  text-shadow:
    0 0 8px rgba(6, 10, 22, 0.95),
    0 1px 14px rgba(0, 0, 0, 0.45);
}
.phase-chip-pct {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f8fafc;
  text-shadow:
    0 0 10px rgba(6, 10, 22, 1),
    0 1px 12px rgba(0, 0, 0, 0.5);
}
.phase-chip-pct[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .phase-chip-fill {
    transition: none;
  }
}
.gauge-wrap.phase-ping .phase-chip,
.gauge-wrap.phase-download .phase-chip,
.gauge-wrap.phase-upload .phase-chip,
.gauge-wrap.phase-transition .phase-chip,
.gauge-wrap.phase-completed .phase-chip,
.gauge-wrap.phase-error .phase-chip {
  border-color: color-mix(in srgb, var(--phase-c1) 55%, #9bb2d8 45%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--phase-c1) 28%, transparent);
}

.phase-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.phase-item {
  border: 1px solid rgba(146, 175, 222, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(8, 17, 34, 0.7);
}
.phase-item.active {
  border-color: color-mix(in srgb, var(--phase-c1) 66%, #8ca5d0 34%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--phase-c1) 40%, transparent), 0 0 16px var(--phase-glow);
}
.phase-item span { display: block; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.06em; }
.phase-item strong { display: inline-block; margin-top: 3px; font-size: 1.3rem; }
.phase-item em { color: var(--muted); font-style: normal; margin-left: 4px; font-size: 0.8rem; }

/* Bloqueos post-prueba: misma línea cromática que .gauge-wrap.phase-download / .phase-upload */
.phase-item.phase-item--result-lock-dl {
  --lock-phase-c1: #f97316;
  --lock-phase-glow: rgba(249, 115, 22, 0.42);
  background-color: rgba(44, 20, 10, 0.82) !important;
  border-color: color-mix(in srgb, var(--lock-phase-c1) 72%, #8ca5d0 28%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lock-phase-c1) 44%, transparent),
    0 0 18px var(--lock-phase-glow) !important;
}

.phase-item.phase-item--result-lock-ul {
  --lock-phase-c1: #f0abfc;
  --lock-phase-glow: rgba(253, 165, 255, 0.38);
  background-color: rgba(42, 16, 40, 0.82) !important;
  border-color: color-mix(in srgb, var(--lock-phase-c1) 70%, #8ca5d0 30%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lock-phase-c1) 42%, transparent),
    0 0 18px var(--lock-phase-glow) !important;
}

@keyframes stPhaseMetricFlashDl {
  0% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow:
      inset 0 0 0 1px transparent,
      inset 0 0 24px transparent,
      inset 0 0 72px transparent,
      0 0 0 transparent;
  }
  14% {
    background-color: rgba(72, 28, 10, 0.98);
    border-color: rgba(254, 180, 120, 0.98);
    box-shadow:
      inset 0 0 0 2px rgba(255, 237, 213, 0.55),
      inset 0 0 72px rgba(249, 115, 22, 0.72),
      inset 0 0 120px rgba(234, 88, 12, 0.38),
      inset 0 0 160px rgba(185, 28, 28, 0.22),
      0 0 28px rgba(249, 115, 22, 0.75),
      0 0 56px rgba(251, 146, 60, 0.55),
      0 0 96px rgba(249, 115, 22, 0.35);
  }
  35% {
    background-color: rgba(58, 24, 12, 0.95);
    border-color: rgba(251, 146, 60, 0.82);
    box-shadow:
      inset 0 0 0 1px rgba(253, 186, 116, 0.42),
      inset 0 0 56px rgba(234, 88, 12, 0.48),
      inset 0 0 96px rgba(220, 38, 38, 0.2),
      0 0 20px rgba(249, 115, 22, 0.5),
      0 0 44px rgba(251, 146, 60, 0.35);
  }
  55% {
    background-color: rgba(44, 20, 10, 0.9);
    border-color: rgba(249, 115, 22, 0.62);
    box-shadow:
      inset 0 0 0 1px rgba(253, 186, 116, 0.22),
      inset 0 0 40px rgba(249, 115, 22, 0.32),
      0 0 14px rgba(249, 115, 22, 0.28);
  }
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow:
      inset 0 0 0 1px transparent,
      inset 0 0 24px transparent,
      inset 0 0 72px transparent,
      0 0 0 transparent;
  }
}

@keyframes stPhaseMetricFlashUl {
  0% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow:
      inset 0 0 0 1px transparent,
      inset 0 0 24px transparent,
      inset 0 0 72px transparent,
      0 0 0 transparent;
  }
  14% {
    background-color: rgba(68, 18, 62, 0.98);
    border-color: rgba(250, 210, 255, 0.96);
    box-shadow:
      inset 0 0 0 2px rgba(253, 224, 255, 0.52),
      inset 0 0 76px rgba(192, 38, 211, 0.58),
      inset 0 0 128px rgba(168, 85, 247, 0.38),
      inset 0 0 168px rgba(244, 114, 182, 0.22),
      0 0 28px rgba(232, 121, 249, 0.72),
      0 0 58px rgba(217, 70, 239, 0.52),
      0 0 96px rgba(244, 114, 182, 0.34);
  }
  35% {
    background-color: rgba(54, 16, 50, 0.95);
    border-color: rgba(217, 70, 239, 0.78);
    box-shadow:
      inset 0 0 0 1px rgba(245, 208, 254, 0.38),
      inset 0 0 58px rgba(168, 85, 247, 0.42),
      inset 0 0 102px rgba(192, 38, 211, 0.22),
      0 0 20px rgba(232, 121, 249, 0.48),
      0 0 46px rgba(217, 70, 239, 0.32);
  }
  55% {
    background-color: rgba(42, 14, 40, 0.9);
    border-color: rgba(192, 38, 211, 0.58);
    box-shadow:
      inset 0 0 0 1px rgba(245, 208, 254, 0.2),
      inset 0 0 42px rgba(192, 38, 211, 0.28),
      0 0 14px rgba(217, 70, 239, 0.26);
  }
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow:
      inset 0 0 0 1px transparent,
      inset 0 0 24px transparent,
      inset 0 0 72px transparent,
      0 0 0 transparent;
  }
}

.phase-item.phase-item--value-flash-dl {
  animation: stPhaseMetricFlashDl 1.48s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}
.phase-item.phase-item--value-flash-dl.active {
  animation: stPhaseMetricFlashDl 1.48s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

.phase-item.phase-item--value-flash-ul {
  animation: stPhaseMetricFlashUl 1.48s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}
.phase-item.phase-item--value-flash-ul.active {
  animation: stPhaseMetricFlashUl 1.48s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .phase-item.phase-item--value-flash-dl,
  .phase-item.phase-item--value-flash-dl.active {
    animation: stPhaseMetricFlashReducedDl 1.08s ease-out forwards;
  }
  .phase-item.phase-item--value-flash-ul,
  .phase-item.phase-item--value-flash-ul.active {
    animation: stPhaseMetricFlashReducedUl 1.08s ease-out forwards;
  }
  .phase-item.phase-item--value-flash-ping-green,
  .phase-item.phase-item--value-flash-ping-green.active {
    animation: stPhaseMetricFlashReducedPingGreen 1.08s ease-out forwards;
  }
  .phase-item.phase-item--value-flash-ping-blue,
  .phase-item.phase-item--value-flash-ping-blue.active {
    animation: stPhaseMetricFlashReducedPingBlue 1.08s ease-out forwards;
  }
  .phase-item.phase-item--value-flash-ping-red,
  .phase-item.phase-item--value-flash-ping-red.active {
    animation: stPhaseMetricFlashReducedPingRed 1.08s ease-out forwards;
  }
}

@keyframes stPhaseMetricFlashReducedDl {
  0%,
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow: inset 0 0 0 1px transparent, inset 0 0 20px transparent, 0 0 0 transparent;
  }
  40% {
    background-color: rgba(64, 26, 12, 0.97);
    border-color: rgba(253, 186, 116, 0.82);
    box-shadow:
      inset 0 0 0 1px rgba(254, 215, 170, 0.45),
      inset 0 0 64px rgba(249, 115, 22, 0.42),
      0 0 22px rgba(249, 115, 22, 0.45);
  }
}

@keyframes stPhaseMetricFlashReducedUl {
  0%,
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow: inset 0 0 0 1px transparent, inset 0 0 20px transparent, 0 0 0 transparent;
  }
  40% {
    background-color: rgba(58, 18, 54, 0.97);
    border-color: rgba(245, 200, 255, 0.78);
    box-shadow:
      inset 0 0 0 1px rgba(250, 232, 255, 0.38),
      inset 0 0 64px rgba(168, 85, 247, 0.36),
      0 0 22px rgba(232, 121, 249, 0.42);
  }
}

@keyframes stPhaseMetricFlashReducedPingGreen {
  0%,
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow: inset 0 0 0 1px transparent, inset 0 0 20px transparent;
  }
  40% {
    background-color: rgba(14, 52, 32, 0.95);
    border-color: rgba(74, 222, 128, 0.62);
    box-shadow:
      inset 0 0 0 1px rgba(187, 247, 208, 0.28),
      inset 0 0 46px rgba(34, 197, 94, 0.22);
  }
}

@keyframes stPhaseMetricFlashReducedPingBlue {
  0%,
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow: inset 0 0 0 1px transparent, inset 0 0 20px transparent;
  }
  40% {
    background-color: rgba(12, 46, 66, 0.95);
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow:
      inset 0 0 0 1px rgba(224, 242, 254, 0.22),
      inset 0 0 46px rgba(14, 165, 233, 0.2);
  }
}

@keyframes stPhaseMetricFlashReducedPingRed {
  0%,
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow: inset 0 0 0 1px transparent, inset 0 0 20px transparent;
  }
  40% {
    background-color: rgba(52, 12, 16, 0.95);
    border-color: rgba(252, 165, 165, 0.62);
    box-shadow:
      inset 0 0 0 1px rgba(254, 226, 226, 0.24),
      inset 0 0 46px rgba(239, 68, 68, 0.2);
  }
}

/* Ping: verde ≤100 ms, azul 101–150 ms, rojo >150 ms */
.phase-item.phase-item--result-lock-ping-green {
  --lock-p: #22c55e;
  --lock-glow: rgba(34, 197, 94, 0.36);
  background-color: rgba(8, 38, 24, 0.82) !important;
  border-color: color-mix(in srgb, var(--lock-p) 70%, #8ca5d0 30%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lock-p) 42%, transparent),
    0 0 18px var(--lock-glow) !important;
}

.phase-item.phase-item--result-lock-ping-blue {
  --lock-p: #38bdf8;
  --lock-glow: rgba(56, 189, 248, 0.38);
  background-color: rgba(10, 32, 48, 0.82) !important;
  border-color: color-mix(in srgb, var(--lock-p) 70%, #8ca5d0 30%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lock-p) 40%, transparent),
    0 0 18px var(--lock-glow) !important;
}

.phase-item.phase-item--result-lock-ping-red {
  --lock-p: #f87171;
  --lock-glow: rgba(248, 113, 113, 0.38);
  background-color: rgba(48, 14, 18, 0.82) !important;
  border-color: color-mix(in srgb, var(--lock-p) 72%, #8ca5d0 28%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lock-p) 44%, transparent),
    0 0 18px var(--lock-glow) !important;
}

@keyframes stPhaseMetricFlashPingGreen {
  0%,
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow: inset 0 0 0 1px transparent, inset 0 0 24px transparent;
  }
  14% {
    background-color: rgba(14, 58, 34, 0.96);
    border-color: rgba(74, 222, 128, 0.88);
    box-shadow:
      inset 0 0 0 1px rgba(187, 247, 208, 0.3),
      inset 0 0 52px rgba(34, 197, 94, 0.28),
      inset 0 0 82px rgba(21, 128, 61, 0.12);
  }
  40% {
    background-color: rgba(12, 44, 28, 0.9);
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow:
      inset 0 0 0 1px rgba(167, 243, 208, 0.16),
      inset 0 0 38px rgba(22, 163, 74, 0.18);
  }
  56% {
    background-color: rgba(10, 36, 24, 0.86);
    border-color: rgba(34, 197, 94, 0.42);
    box-shadow: inset 0 0 28px rgba(34, 197, 94, 0.12);
  }
}

@keyframes stPhaseMetricFlashPingBlue {
  0%,
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow: inset 0 0 0 1px transparent, inset 0 0 24px transparent;
  }
  14% {
    background-color: rgba(12, 44, 64, 0.96);
    border-color: rgba(56, 189, 248, 0.88);
    box-shadow:
      inset 0 0 0 1px rgba(224, 242, 254, 0.28),
      inset 0 0 52px rgba(14, 165, 233, 0.26),
      inset 0 0 82px rgba(56, 189, 248, 0.12);
  }
  40% {
    background-color: rgba(10, 38, 54, 0.92);
    border-color: rgba(56, 189, 248, 0.52);
    box-shadow:
      inset 0 0 0 1px rgba(186, 230, 253, 0.14),
      inset 0 0 38px rgba(2, 132, 199, 0.16);
  }
  56% {
    background-color: rgba(10, 32, 48, 0.88);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: inset 0 0 28px rgba(56, 189, 248, 0.12);
  }
}

@keyframes stPhaseMetricFlashPingRed {
  0%,
  100% {
    background-color: rgba(8, 17, 34, 0.7);
    border-color: rgba(146, 175, 222, 0.15);
    box-shadow: inset 0 0 0 1px transparent, inset 0 0 24px transparent;
  }
  14% {
    background-color: rgba(58, 12, 16, 0.96);
    border-color: rgba(252, 165, 165, 0.88);
    box-shadow:
      inset 0 0 0 1px rgba(254, 226, 226, 0.28),
      inset 0 0 54px rgba(239, 68, 68, 0.24),
      inset 0 0 84px rgba(185, 28, 28, 0.12);
  }
  40% {
    background-color: rgba(48, 14, 18, 0.92);
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow:
      inset 0 0 0 1px rgba(254, 202, 202, 0.14),
      inset 0 0 40px rgba(220, 38, 38, 0.16);
  }
  56% {
    background-color: rgba(40, 12, 16, 0.88);
    border-color: rgba(239, 68, 68, 0.44);
    box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.12);
  }
}

.phase-item.phase-item--value-flash-ping-green,
.phase-item.phase-item--value-flash-ping-green.active {
  animation: stPhaseMetricFlashPingGreen 1.48s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

.phase-item.phase-item--value-flash-ping-blue,
.phase-item.phase-item--value-flash-ping-blue.active {
  animation: stPhaseMetricFlashPingBlue 1.48s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

.phase-item.phase-item--value-flash-ping-red,
.phase-item.phase-item--value-flash-ping-red.active {
  animation: stPhaseMetricFlashPingRed 1.48s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

/* Splash: overlay del card (bloque ya visible “vacío”); el disco se revela con --splash-intro. */
.gauge-splash:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: clamp(14px, 3vw, 22px);
  pointer-events: auto;
  visibility: visible;
}

.gauge-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--card);
}

.gauge-splash[hidden] {
  display: none !important;
}

/*
 * Splash · redes sociales (UX fijada, alineada a WhatsApp relleno):
 * Tamaños, trazo IG/FB, hueco entre iconos y compensación de la “f” viven SOLO en variables aquí.
 * No retocar suelto width/stroke en index.html ni duplicar números en otras reglas.
 */
.gauge-splash-social {
  --splash-social-gap: 10px;
  --splash-social-inset-x: clamp(10px, 2.5vw, 18px);
  --splash-social-inset-bottom: clamp(10px, 2.5vw, 18px);
  --splash-social-wa-size: 28px;
  --splash-social-stroke-ig-fb-size: 32px;
  /* stroke-width heredado por paths del viewBox 24 (IG/FB); no poner stroke-width en el HTML */
  --splash-social-stroke-user: 1.96;
  --splash-social-fb-margin-left: -6px;

  position: absolute;
  right: var(--splash-social-inset-x);
  bottom: var(--splash-social-inset-bottom);
  z-index: 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--splash-social-gap);
  pointer-events: auto;
}

@media (max-width: 760px) {
  /* Más separación respecto al borde inferior del splash en móvil (mitad del extra anterior vs escritorio). */
  .gauge-splash-social {
    --splash-social-inset-bottom: clamp(18px, 8.2vw, 35px);
  }
}
.gauge-splash-social[hidden] {
  display: none !important;
}
/* Misma fila de iconos que el splash, pero en flujo bajo la paleta NOC (no position absolute). */
.gauge-splash-social.gauge-splash-social--noc-result {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: 100%;
  justify-content: center;
  margin: 0 0 clamp(10px, 2.2cqmin, 18px);
  padding: 0;
  box-sizing: border-box;
}

/* Escritorio: redes del resumen NOC fuera del recuadro — esquina inferior derecha del viewport. */
@media (min-width: 761px) {
  .gauge-splash-social.gauge-splash-social--noc-result {
    position: fixed;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    left: auto;
    top: auto;
    z-index: 40;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    line-height: 0;
    pointer-events: auto;
    --splash-social-gap: 7.5px;
    --splash-social-wa-size: 21px;
    --splash-social-stroke-ig-fb-size: 24px;
    --splash-social-fb-margin-left: -4.5px;
  }
  .gauge-splash-social.gauge-splash-social--noc-result .gauge-splash-social__link {
    min-width: 27px;
    min-height: 27px;
    padding: 3px;
    line-height: 0;
  }
  .gauge-splash-social.gauge-splash-social--noc-result .gauge-splash-social__svg {
    display: block;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.65)) drop-shadow(0 0 9px rgba(34, 211, 238, 0.38));
  }
  .gauge-splash-social.gauge-splash-social--noc-result .gauge-splash-social__link:hover .gauge-splash-social__svg,
  .gauge-splash-social.gauge-splash-social--noc-result .gauge-splash-social__link:focus-visible .gauge-splash-social__svg {
    filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.85)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.48));
  }
}
.gauge-splash-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-width: 36px;
  min-height: 36px;
  color: #7dd3fc;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  outline: none;
  transition: color 0.15s ease;
}
.gauge-splash-social__link:hover,
.gauge-splash-social__link:focus-visible {
  color: #e0f7ff;
}
.gauge-splash-social__link:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.85);
  outline-offset: 4px;
  border-radius: 2px;
}
/* Brillo LED en la silueta (sin recuadro alrededor). */
.gauge-splash-social__svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.75)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.45));
  transition: filter 0.15s ease;
}
.gauge-splash-social__link:hover .gauge-splash-social__svg,
.gauge-splash-social__link:focus-visible .gauge-splash-social__svg {
  filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.95)) drop-shadow(0 0 16px rgba(34, 211, 238, 0.55));
}
.gauge-splash-social__svg--wa {
  width: var(--splash-social-wa-size);
  height: var(--splash-social-wa-size);
}
/* Instagram / Facebook: mayor caja + stroke (--splash-social-stroke-user) alineado al WA relleno */
.gauge-splash-social__svg--stroke {
  width: var(--splash-social-stroke-ig-fb-size);
  height: var(--splash-social-stroke-ig-fb-size);
  stroke-width: var(--splash-social-stroke-user);
}
.gauge-splash-social__link--fb {
  margin-left: var(--splash-social-fb-margin-left);
}
.gauge-splash-social__link[hidden] {
  display: none !important;
}

.gauge-splash-btn {
  position: relative;
  z-index: 1;
  width: min(232px, 76vw);
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  /* Las ondas escalan >100%; sin visible algunos motores recortan junto al border-radius del botón (sobre todo en PC). */
  overflow: visible;
}

/* Ondas lentas desde el borde del círculo (solo decorativo). */
.gauge-splash-ripples {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 50%;
}
.gauge-splash-ripple {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, 0.55);
  box-shadow:
    0 0 6px rgba(34, 211, 238, 0.45),
    0 0 14px rgba(56, 189, 248, 0.25);
  opacity: 0;
  transform: scale(1);
  animation: stGaugeSplashWaterRipple 22s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.gauge-splash-ripple:nth-child(2) {
  animation-delay: -7.33s;
  border-color: rgba(34, 211, 238, 0.48);
}
.gauge-splash-ripple:nth-child(3) {
  animation-delay: -14.66s;
  border-color: rgba(125, 211, 252, 0.42);
}
@keyframes stGaugeSplashWaterRipple {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  6% {
    opacity: 0.42;
  }
  55% {
    opacity: 0.18;
  }
  100% {
    transform: scale(1.42);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gauge-splash-ripple {
    animation: none !important;
    opacity: 0 !important;
  }
}
.gauge-wrap--reveal .gauge-splash-ripple {
  animation-play-state: paused;
}

.gauge-splash-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.gauge-splash-svg,
.gauge-splash-label,
.gauge-splash-ripples {
  grid-area: 1 / 1;
}
.gauge-splash-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Filtro solo en el arco animado: si aplica al <svg> entero, en Chrome escritorio la capa filtrada suele tapar
   hermanos detrás (.gauge-splash-ripples); en móvil el compositor a veces se comporta distinto. */
.gauge-splash-svg .gauge-splash-spin {
  transform-origin: 100px 100px;
  will-change: transform;
  backface-visibility: hidden;
  animation: stSplashRingSpin 1.12s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 50, 30, 0.55)) drop-shadow(0 0 22px rgba(255, 160, 0, 0.35));
}
/* En viewport estrecho el drop-shadow sobre la capa que rota suele entrecortar la animación. */
@media (max-width: 760px) {
  .gauge-splash-svg .gauge-splash-spin {
    filter: none;
  }
  .gauge-splash-svg .gauge-splash-spin circle {
    stroke-width: 6;
  }
}
@keyframes stSplashRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.gauge-splash-label {
  position: relative;
  z-index: 2;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 20px rgba(255, 80, 60, 0.85),
    0 0 38px rgba(255, 140, 0, 0.45),
    0 2px 14px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.gauge-wrap--reveal .gauge-splash {
  animation: stSplashFadeOut 920ms ease-out forwards;
  pointer-events: none;
}
.gauge-wrap--reveal .gauge-splash-svg .gauge-splash-spin {
  animation-play-state: paused;
}
@keyframes stSplashFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* Panel vivo oculto hasta splash-finished. Si se hace visible durante --reveal mientras fadea el splash,
   se dibuja el layout compacto (medidor ~320px + fila “Iniciar test / Retest”) — parpadeo del diseño viejo.
   Solo el overlay splash anima hasta terminar y entonces aparece ya el estado de medición (~running). */
.gauge-wrap:not(.gauge-wrap--splash-finished) .gauge-main-panel:not(.gauge-main-panel--shown) {
  visibility: hidden;
  pointer-events: none;
}

.gauge-wrap:not(.gauge-wrap--splash-finished) .gauge-main-panel:not(.gauge-main-panel--shown) .gauge-live-ui {
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none;
}

/* Las ondas del splash escalan fuera del botón; .gauge-main-panel tenía overflow:hidden y las recortaba en PC. */
.gauge-wrap:not(.gauge-wrap--splash-finished) .gauge-main-panel {
  overflow: visible;
}

.gauge-live-ui {
  width: 100%;
  max-height: 3200px;
  isolation: isolate;
  transition:
    max-height 0.55s ease,
    visibility 0s linear 0.5s;
}
@keyframes stGaugeLiveSoftIn {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.03;
  }
  15% {
    opacity: 0.12;
  }
  32% {
    opacity: 0.35;
  }
  52% {
    opacity: 0.58;
  }
  72% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.94;
  }
  100% {
    opacity: 1;
  }
}

/* Especificidad sobre .gauge-main-panel--shown .gauge-live-ui { opacity: 1 } + fundido lento al salir del splash */
.gauge-wrap--splash-finished:not(.gauge-wrap--noc-summary)
  .gauge-main-panel.gauge-main-panel--shown
  > .gauge-live-ui.gauge-live-ui--soft-intro {
  opacity: 0;
  animation: stGaugeLiveSoftIn 3.65s cubic-bezier(0.14, 0.55, 0.32, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .gauge-wrap--splash-finished:not(.gauge-wrap--noc-summary)
    .gauge-main-panel.gauge-main-panel--shown
    > .gauge-live-ui.gauge-live-ui--soft-intro {
    animation-duration: 1.45s;
    animation-timing-function: ease-out;
  }
}
.gauge-main-panel {
  transform-style: flat;
  min-width: 0;
  overflow-x: clip;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}
.gauge-main-panel--shown {
  padding: 0;
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  will-change: auto;
  visibility: visible;
}
.gauge-main-panel--shown .gauge-live-ui {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  max-height: none;
}

.gauge-wrap--splash-finished .gauge-main-panel.gauge-main-panel--shown {
  overflow: hidden;
}
.gauge-wrap--noc-summary.gauge-wrap--splash-finished .gauge-main-panel.gauge-main-panel--shown {
  overflow-x: clip;
  overflow-y: visible;
}

.gauge-wrap--splash-finished:not(.gauge-wrap--noc-summary) .gauge-live-ui {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.gauge-wrap--splash-finished:not(.gauge-wrap--noc-summary) .phase-chip {
  flex-shrink: 0;
}

.gauge-wrap--splash-finished:not(.gauge-wrap--noc-summary) .phase-results {
  flex-shrink: 0;
}

/* Medidor usa el espacio sobrante */
.gauge-wrap--splash-finished:not(.gauge-wrap--noc-summary) .gauge.st-panel-gauge {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gauge-wrap--splash-finished:not(.gauge-wrap--noc-summary)
  .st-gauge-visual.wan-speed-gauge-container {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
}

/* Durante la medición: medidor grande; panel IP pegado abajo en .actions */
.gauge-wrap:has(.gauge.st-panel-gauge.running):not(.gauge-wrap--noc-summary) .gauge.st-panel-gauge {
  justify-content: center;
}

.gauge-wrap:has(.gauge.st-panel-gauge.running) .st-speed-gauge-svg.wan-speed-gauge-svg {
  width: min(400px, 96%);
  max-height: min(300px, min(48cqh, 48svh));
}

.gauge-wrap:has(.gauge.st-panel-gauge.running) .st-gauge-visual.wan-speed-gauge-container {
  min-height: 0;
}

.gauge-wrap:has(.gauge.st-panel-gauge.running) .actions {
  margin-top: auto;
  padding-top: 5px; /* móvil: espacio antes del panel IP/ISP (escritorio: +5px vía media) */
}

@media (max-width: 760px) {
  /*
   * Sólo móvil + medición en curso: más aire inferior (en PC no sobra altura; se mantiene --gw-pad-bottom-base).
   * No splash inicial (--splash-finished) ni paleta NOC (--noc-summary).
   */
  .gauge-wrap.gauge-wrap--splash-finished:has(.gauge.st-panel-gauge.running):not(.gauge-wrap--noc-summary) {
    padding-bottom: calc(var(--gw-pad-bottom-base) + clamp(18px, 5vw, 32px));
  }
}

@media (min-width: 761px) {
  /* Bloques encima del medidor: ~10 % menos alto (solo escritorio) */
  .phase-chip-inner {
    padding: 0.25rem 0.62rem;
  }
  .phase-chip {
    font-size: 0.704rem;
    margin-bottom: 9px;
  }
  .phase-results {
    gap: 9px;
    margin-bottom: 13px;
  }
  .phase-item {
    padding: 7px 9px;
  }
  .phase-item span {
    font-size: 0.63rem;
  }
  .phase-item strong {
    margin-top: 2px;
    font-size: 1.17rem;
  }
  .phase-item em {
    font-size: 0.72rem;
  }

  .gauge-wrap--splash-finished:not(.gauge-wrap--noc-summary) .gauge.st-panel-gauge {
    margin-top: 6px; /* aire entre tarjetas DESCARGA/SUBIDA/PING y el arco del medidor */
  }
  .gauge-wrap:has(.gauge.st-panel-gauge.running) .actions {
    /* El valor del dial usa margin-top negativo; hace falta más aire bajo “Descargando/Subiendo” */
    padding-top: 22px;
  }
  .gauge-wrap:has(.gauge.st-panel-gauge.running) .st-gauge-state {
    margin-bottom: 10px;
  }
}

/* Densidad de emergencia (JS: solapes en vivo). Nivel 1: texto/bloques −10 %. Nivel 2: −20 % + medidor −10 %. */
.gauge-wrap.live-density--1:not(.gauge-wrap--noc-summary) {
  --live-density-txt: 0.9;
  --live-density-pad: 0.9;
  --live-density-gauge: 1;
}
.gauge-wrap.live-density--2:not(.gauge-wrap--noc-summary) {
  --live-density-txt: 0.8;
  --live-density-pad: 0.8;
  --live-density-gauge: 0.9;
}

.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-chip-inner {
  padding: calc(0.28rem * var(--live-density-pad)) calc(0.7rem * var(--live-density-pad));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-chip {
  font-size: calc(0.78rem * var(--live-density-txt));
  margin-bottom: calc(10px * var(--live-density-pad));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-results {
  gap: calc(10px * var(--live-density-pad));
  margin-bottom: calc(14px * var(--live-density-pad));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-item {
  padding: calc(8px * var(--live-density-pad)) calc(10px * var(--live-density-pad));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-item span {
  font-size: calc(0.7rem * var(--live-density-txt));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-item strong {
  margin-top: calc(3px * var(--live-density-pad));
  font-size: calc(1.3rem * var(--live-density-txt));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-item em {
  font-size: calc(0.8rem * var(--live-density-txt));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .gauge-run-context {
  gap: calc(10px * var(--live-density-pad)) calc(20px * var(--live-density-pad));
  padding: calc(12px * var(--live-density-pad)) calc(14px * var(--live-density-pad));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .gauge-run-context-val {
  font-size: calc(0.92rem * var(--live-density-txt));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary)
  .gauge-live-ui .gauge-run-context-val--mono {
  font-size: calc(0.86rem * var(--live-density-txt));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .gauge-run-context-sub {
  margin-top: calc(5px * var(--live-density-pad));
  font-size: calc(0.78rem * var(--live-density-txt));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .st-gauge-unit-label {
  font-size: calc(0.78rem * var(--live-density-txt));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .st-gauge-main-val {
  font-size: calc(clamp(1.65rem, 5vw, 2.15rem) * var(--live-density-txt));
}
.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .st-gauge-state {
  margin-top: calc(6px * var(--live-density-pad));
  font-size: calc(0.88rem * var(--live-density-txt));
}
@media (max-width: 520px) {
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .gauge-run-context {
    padding: calc(10px * var(--live-density-pad)) calc(12px * var(--live-density-pad));
  }
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary)
    .gauge-live-ui .gauge-run-context-edge {
    margin-top: calc(10px * var(--live-density-pad));
    padding-top: calc(10px * var(--live-density-pad));
  }
}

@media (min-width: 761px) {
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-chip-inner {
    padding: calc(0.25rem * var(--live-density-pad)) calc(0.62rem * var(--live-density-pad));
  }
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-chip {
    font-size: calc(0.704rem * var(--live-density-txt));
    margin-bottom: calc(9px * var(--live-density-pad));
  }
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-results {
    gap: calc(9px * var(--live-density-pad));
    margin-bottom: calc(13px * var(--live-density-pad));
  }
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-item {
    padding: calc(7px * var(--live-density-pad)) calc(9px * var(--live-density-pad));
  }
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-item span {
    font-size: calc(0.63rem * var(--live-density-txt));
  }
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-item strong {
    margin-top: calc(2px * var(--live-density-pad));
    font-size: calc(1.17rem * var(--live-density-txt));
  }
  .gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary) .gauge-live-ui .phase-item em {
    font-size: calc(0.72rem * var(--live-density-txt));
  }
}

.gauge-wrap:is(.live-density--1, .live-density--2):not(.gauge-wrap--noc-summary):has(.gauge.st-panel-gauge.running)
  .st-speed-gauge-svg.wan-speed-gauge-svg {
  width: min(calc(400px * var(--live-density-gauge)), 96%);
  max-height: min(calc(300px * var(--live-density-gauge)), min(48cqh, 48svh));
}

.gauge-wrap--noc-summary .noc-result-layout {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  margin: 0 auto;
  padding: clamp(6px, 1.35vw, 14px);
  gap: clamp(8px, 1.55vw, 14px);
  display: flex;
  flex-direction: column;
  max-width: min(520px, 100%);
  width: 100%;
  /* Base: bloque servidor/ISP (+); métricas de enlace proporcionalmente más pequeñas abajo */
  font-size: clamp(0.86rem, 0.82rem + 0.38vw, 0.94rem);
}

@supports (font-size: 1cqw) {
  .gauge-wrap--noc-summary .noc-result-layout {
    font-size: clamp(0.86rem, 0.79rem + 1.35cqw, 0.96rem);
  }
}

.gauge-wrap--noc-summary .noc-speed-row {
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-bottom: 0;
  gap: clamp(6px, 2cqmin, 18px);
}

.gauge-wrap--noc-summary .noc-metric-strip {
  flex: 0 0 auto;
  padding: clamp(6px, 0.85em, 10px);
  margin-bottom: 0;
}

.gauge-wrap--noc-summary .noc-speed-head {
  gap: clamp(4px, 1cqmin, 10px);
}

.gauge-wrap--noc-summary .noc-speed-badge {
  width: 2em;
  height: 2em;
}

.gauge-wrap--noc-summary .noc-speed-label {
  font-size: 0.78em;
  letter-spacing: 0.1em;
}

.gauge-wrap--noc-summary .noc-speed-value {
  /* Mayor peso visual del bloque; proporción inferior a versiones muy grandes previas */
  font-size: clamp(1.48rem, 1.08rem + 3.35vw, 2.08rem);
  margin-top: 0.08em;
  line-height: 0.96;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  width: 100%;
  min-height: 1em;
  box-sizing: border-box;
}

.gauge-wrap--noc-summary .noc-speed-value.noc-speed-value--pending {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.gauge-wrap--noc-summary .noc-metric-strip-items {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.8cqmin, 18px);
  width: 100%;
}

.gauge-wrap--noc-summary .noc-metric-chip {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  gap: clamp(3px, 0.7cqmin, 8px);
  min-height: 0;
}

.gauge-wrap--noc-summary .noc-metric-dot {
  width: 1.1em;
  height: 1.1em;
}

.gauge-wrap--noc-summary .noc-metric-chip svg {
  width: 10px !important;
  height: 10px !important;
}

.gauge-wrap--noc-summary .noc-metric-num {
  font-size: clamp(0.675rem, 0.61em + 0.32vw, 0.76rem);
  font-weight: 600;
}

.gauge-wrap--noc-summary .noc-metric-label,
.gauge-wrap--noc-summary .noc-metric-suffix {
  font-size: clamp(0.52rem, 0.535em, 0.595rem);
  color: rgba(142, 165, 209, 0.88);
}

@media (max-width: 760px) {
  .gauge-wrap--noc-summary .noc-metric-strip-items {
    gap: clamp(4px, 1.2vw, 10px);
  }

  .gauge-wrap--noc-summary .noc-metric-label--loss {
    letter-spacing: 0.06em;
    font-size: clamp(0.48rem, 0.5em, 0.56rem);
  }
}

/* Iconos mini por servicio (color = nivel; resplandor lento al mostrarse) */
.gauge-wrap--noc-summary .noc-service-fit-mini {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 0 clamp(6px, 1.2cqmin, 10px);
  padding: clamp(8px, 1.25cqmin, 12px) clamp(6px, 1.8cqmin, 14px);
  border-radius: 10px;
  background: rgba(6, 10, 22, 0.52);
  border: 1px solid rgba(146, 190, 240, 0.18);
  box-sizing: border-box;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__legend {
  display: block;
  width: 100%;
  margin: 0 0 clamp(6px, 1cqmin, 10px);
  padding: clamp(4px, 0.9cqmin, 8px) clamp(4px, 1.2cqmin, 10px);
  font-size: clamp(0.852rem, 3.36cqmin, 0.984rem);
  line-height: 1.35;
  text-align: center;
  color: rgba(226, 232, 240, 0.92);
  letter-spacing: 0.02em;
  min-height: 1.35em;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-sizing: border-box;
}

/* `display:block` de arriba rompía el colapso de [hidden] → hueco vacío encima de los iconos. */
.gauge-wrap--noc-summary .noc-service-fit-mini__legend[hidden] {
  display: none !important;
}

/* PC: sin franja interna; la leyenda solo existe en flujo como tooltip flotante (.legend--pc-float). */
@media (hover: hover) and (pointer: fine) {
  .gauge-wrap--noc-summary .noc-service-fit-mini__legend:not(.noc-service-fit-mini__legend--pc-float) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .gauge-wrap--noc-summary .noc-service-fit-mini__legend.noc-service-fit-mini__legend--pc-float {
    display: block !important;
    width: max-content;
    max-width: min(280px, calc(100vw - 20px));
    margin: 0;
    padding: 6px 11px;
    min-height: 0;
    line-height: 1.3;
    text-align: center;
    color: rgba(241, 245, 249, 0.97);
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow:
      0 6px 22px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    pointer-events: none;
    backdrop-filter: blur(10px);
  }
}

.gauge-wrap--noc-summary .noc-service-fit-mini--legend-ready .noc-service-fit-mini__ic[data-service]:not(.noc-service-fit-mini__ic--stagger-wait) {
  cursor: pointer;
  touch-action: manipulation;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__ic[data-service]:not(.noc-service-fit-mini__ic--stagger-wait):focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.7);
  outline-offset: 2px;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 1.8vw, 12px);
}

.gauge-wrap--noc-summary .noc-service-fit-mini__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex: 1 1 0;
  min-width: 0;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__ic svg {
  /* Bastante más grandes para reconocer el dibujo; los 4 siguen en una fila (flex + min-width:0) */
  width: clamp(1.05rem, 7.25vw, 1.52rem);
  height: clamp(1.05rem, 7.25vw, 1.52rem);
  flex-shrink: 0;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-idle {
  color: rgba(148, 163, 184, 0.32);
  filter: none;
  animation: none;
}

/* Ocupa hueco en la fila; sin cambiar tamaño del recuadro (§10.0 MODULO-SPEEDTEST). Revelado desde app.js tras DL/UL. */
.gauge-wrap--noc-summary .noc-service-fit-mini__ic.noc-service-fit-mini__ic--stagger-wait {
  opacity: 0 !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__ic:not(.noc-service-fit-mini__ic--stagger-wait) {
  transition: opacity 0.42s ease;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-ok {
  color: #4ade80;
  animation: nocSfMiniGlowOk 3.2s ease-in-out infinite alternate;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-warn {
  color: #fbbf24;
  animation: nocSfMiniGlowWarn 3.2s ease-in-out infinite alternate;
}

.gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-bad {
  color: #f87171;
  animation: nocSfMiniGlowBad 3.2s ease-in-out infinite alternate;
}

/* Doble fundido sincronizado en los 4 SVG tras legend-ready (+ NOC_SF_MINI_INTRO_FLASH_AFTER_MS en app.js). */
.gauge-wrap--noc-summary .noc-service-fit-mini--intro-flash .noc-service-fit-mini__ic.tier-ok,
.gauge-wrap--noc-summary .noc-service-fit-mini--intro-flash .noc-service-fit-mini__ic.tier-warn,
.gauge-wrap--noc-summary .noc-service-fit-mini--intro-flash .noc-service-fit-mini__ic.tier-bad {
  animation: none;
}

.gauge-wrap--noc-summary .noc-service-fit-mini--intro-flash .noc-service-fit-mini__ic:not(.noc-service-fit-mini__ic--stagger-wait) svg {
  transform-origin: 50% 50%;
  transition: none !important;
  /* Duración = NOC_SF_MINI_INTRO_FLASH_ANIM_MS en app.js */
  /* Nadir ~0.7 opacidad (~30% de “desaparición” respecto a 1); curva continua. */
  animation: nocSfMiniIntroFlashSync 4.8s cubic-bezier(0.42, 0.04, 0.18, 1) forwards;
}

/*
 * 2 ciclos: mínimo ~0.7 opacidad; blur/escala suaves; puntos extra para curva fluida.
 * Duración 4.8s = NOC_SF_MINI_INTRO_FLASH_ANIM_MS en app.js.
 */
@keyframes nocSfMiniIntroFlashSync {
  0% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
  /* Ciclo 1 */
  6% {
    opacity: 0.92;
    filter: blur(0.15px) brightness(0.94);
    transform: scale(0.99);
  }
  12% {
    opacity: 0.82;
    filter: blur(0.35px) brightness(0.86);
    transform: scale(0.95);
  }
  19% {
    opacity: 0.66;
    filter: blur(0.5px) brightness(0.8);
    transform: scale(0.92);
  }
  25% {
    opacity: 0.7;
    filter: blur(0.55px) brightness(0.76);
    transform: scale(0.91);
  }
  31% {
    opacity: 0.66;
    filter: blur(0.42px) brightness(0.8);
    transform: scale(0.93);
  }
  38% {
    opacity: 0.86;
    filter: blur(0.18px) brightness(0.92);
    transform: scale(0.97);
  }
  44% {
    opacity: 0.94;
    filter: blur(0.05px) brightness(0.98);
    transform: scale(0.995);
  }
  50% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
  /* Ciclo 2 */
  56% {
    opacity: 0.92;
    filter: blur(0.15px) brightness(0.94);
    transform: scale(0.99);
  }
  62% {
    opacity: 0.82;
    filter: blur(0.35px) brightness(0.86);
    transform: scale(0.95);
  }
  69% {
    opacity: 0.66;
    filter: blur(0.5px) brightness(0.8);
    transform: scale(0.92);
  }
  75% {
    opacity: 0.7;
    filter: blur(0.55px) brightness(0.76);
    transform: scale(0.91);
  }
  81% {
    opacity: 0.66;
    filter: blur(0.42px) brightness(0.8);
    transform: scale(0.93);
  }
  88% {
    opacity: 0.86;
    filter: blur(0.18px) brightness(0.92);
    transform: scale(0.97);
  }
  94% {
    opacity: 0.94;
    filter: blur(0.05px) brightness(0.98);
    transform: scale(0.995);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gauge-wrap--noc-summary .noc-service-fit-mini--intro-flash .noc-service-fit-mini__ic:not(.noc-service-fit-mini__ic--stagger-wait) svg {
    animation: nocSfMiniIntroFlashSyncReduced 4.8s cubic-bezier(0.42, 0.04, 0.18, 1) forwards;
  }
}

@keyframes nocSfMiniIntroFlashSyncReduced {
  0%,
  50%,
  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
  12%,
  62% {
    opacity: 0.86;
    filter: brightness(0.9);
  }
  25%,
  75% {
    opacity: 0.7;
    filter: brightness(0.82);
  }
  38%,
  88% {
    opacity: 0.93;
    filter: brightness(1.02);
  }
}

@keyframes nocSfMiniGlowOk {
  from {
    filter: drop-shadow(0 0 1px rgba(74, 222, 128, 0.45)) drop-shadow(0 0 4px rgba(74, 222, 128, 0.35));
    opacity: 0.82;
  }
  to {
    filter:
      drop-shadow(0 0 3px rgba(74, 222, 128, 0.95))
      drop-shadow(0 0 10px rgba(34, 197, 94, 0.65))
      drop-shadow(0 0 18px rgba(74, 222, 128, 0.35));
    opacity: 1;
  }
}

@keyframes nocSfMiniGlowWarn {
  from {
    filter: drop-shadow(0 0 1px rgba(251, 191, 36, 0.45)) drop-shadow(0 0 4px rgba(245, 158, 11, 0.3));
    opacity: 0.82;
  }
  to {
    filter:
      drop-shadow(0 0 3px rgba(251, 191, 36, 0.95))
      drop-shadow(0 0 10px rgba(245, 158, 11, 0.6))
      drop-shadow(0 0 16px rgba(251, 191, 36, 0.32));
    opacity: 1;
  }
}

@keyframes nocSfMiniGlowBad {
  from {
    filter: drop-shadow(0 0 1px rgba(248, 113, 113, 0.5)) drop-shadow(0 0 4px rgba(239, 68, 68, 0.35));
    opacity: 0.82;
  }
  to {
    filter:
      drop-shadow(0 0 3px rgba(248, 113, 113, 0.95))
      drop-shadow(0 0 10px rgba(239, 68, 68, 0.58))
      drop-shadow(0 0 16px rgba(248, 113, 113, 0.35));
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-ok,
  .gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-warn,
  .gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-bad {
    animation: none;
  }

  .gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-ok {
    filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.75));
  }

  .gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-warn {
    filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.75));
  }

  .gauge-wrap--noc-summary .noc-service-fit-mini__ic.tier-bad {
    filter: drop-shadow(0 0 5px rgba(248, 113, 113, 0.8));
  }
}

/* PC: menos hueco encima del bloque de iconos por servicio (más aire útil debajo en la tarjeta) */
@media (min-width: 761px) {
  .gauge-wrap--noc-summary .noc-service-fit-mini {
    margin: clamp(-12px, -0.9vw, -6px) 0 clamp(6px, 1.2cqmin, 10px);
  }
}

.gauge-wrap--noc-summary .noc-connection-card {
  padding: 0.04em;
  flex: 0 0 auto;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.gauge-wrap--noc-summary .noc-conn-row {
  padding: 0.38em 0.42em;
  gap: 0.58em;
}

.gauge-wrap--noc-summary .noc-conn-icon {
  width: 2.2em;
  height: 2.2em;
}

.gauge-wrap--noc-summary .noc-conn-kicker {
  font-size: 0.6em;
  letter-spacing: 0.1em;
}

/* ISP y servidor (sin fila IP monoespaciada) */
.gauge-wrap--noc-summary .noc-conn-main:not(.noc-conn-mono) {
  font-size: 0.88em;
  font-weight: 600;
}

.gauge-wrap--noc-summary .noc-conn-main.noc-conn-edge-title {
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.28;
}

.gauge-wrap--noc-summary .noc-conn-sub {
  font-size: 0.76em;
  margin-top: 2px;
}

/* País bajo servidor y origen/ciudad bajo ISP: mismo azul cielo (PC y móvil) */
.gauge-wrap--noc-summary #nocEdgeSub {
  color: #7dd3fc;
}

.gauge-wrap--noc-summary .noc-conn-sub--visit-city {
  margin-top: 3px;
  font-size: 0.74em;
  font-weight: 500;
  color: #7dd3fc;
}

.gauge-wrap--noc-summary .noc-conn-mono {
  font-size: 1em;
  font-weight: 600;
}

.gauge-wrap--noc-summary .btn-retest-noc {
  font-size: 0.82em;
  padding: 0.44em 0.92em;
  min-width: 0;
  width: 100%;
  max-width: 340px;
}

@media (min-width: 761px) {
  .gauge-wrap.gauge-wrap--noc-summary {
    width: min(680px, 100%);
    /* Paleta NOC: menos aire vertical arriba/abajo */
    padding-top: clamp(4px, 0.65vw, 8px);
    padding-right: clamp(14px, 3vw, 22px);
    padding-bottom: clamp(6px, 1.1vw, 11px);
    padding-left: clamp(14px, 3vw, 22px);
  }

  .gauge-wrap--noc-summary .noc-result-layout {
    font-size: clamp(0.9rem, 0.82rem + 0.42vw, 1.02rem);
    max-width: min(520px, 100%);
    padding-top: clamp(2px, 0.22vw, 5px);
    padding-right: clamp(8px, 1.35vw, 16px);
    padding-bottom: clamp(5px, 0.85vw, 11px);
    padding-left: clamp(8px, 1.35vw, 16px);
  }

  .gauge-wrap--noc-summary .noc-speed-value {
    font-size: clamp(1.62rem, 1.2rem + 2.05vw, 2.42rem);
  }

  .gauge-wrap--noc-summary .noc-connection-card {
    padding: 0.3rem 0.22rem;
  }

  .gauge-wrap--noc-summary .noc-metric-chip svg {
    width: 10px !important;
    height: 10px !important;
  }

  .gauge-wrap--noc-summary .noc-conn-main:not(.noc-conn-mono) {
    font-size: 0.9rem;
  }

  .gauge-wrap--noc-summary .noc-conn-main.noc-conn-edge-title {
    font-size: clamp(0.8rem, 0.74rem + 0.32vw, 0.9rem);
  }

  .gauge-wrap--noc-summary .noc-conn-sub {
    font-size: 0.78rem;
  }

  .gauge-wrap--noc-summary .noc-conn-sub--visit-city {
    font-size: 0.76rem;
  }

  .gauge-wrap--noc-summary .noc-conn-mono {
    font-size: 1.03rem;
  }

  .gauge-wrap--noc-summary .noc-metric-num {
    font-size: clamp(0.7rem, 0.595rem + 0.42vw, 0.8rem);
  }

  .gauge-wrap--noc-summary .noc-metric-label,
  .gauge-wrap--noc-summary .noc-metric-suffix {
    font-size: clamp(0.545rem, 0.465rem + 0.52vw, 0.685rem);
  }

  .gauge-wrap--noc-summary .noc-metric-dot {
    width: 19px;
    height: 19px;
    min-width: 19px;
    min-height: 19px;
  }

  .gauge-wrap--noc-summary .noc-conn-kicker {
    font-size: 0.62rem;
  }

  .gauge-wrap--noc-summary .noc-conn-mono--compact {
    font-size: 1.03rem;
  }

  .gauge-wrap--noc-summary .btn-retest-noc {
    font-size: clamp(0.84rem, 0.79rem + 0.28vw, 0.96rem);
    padding: 0.52rem 1.05rem;
    box-sizing: border-box;
  }
}

.gauge-wrap--noc-summary .gauge-live-ui {
  opacity: 0;
  transform: none;
  filter: none;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
/* Panel resumen NOC — jerarquía tipo Speedtest: velocidades grandes/ligeras, métricas compactas, bloque conexión */
.noc-result-panel {
  width: 100%;
  box-sizing: border-box;
}
.noc-result-panel[hidden] {
  display: none !important;
}
.gauge-wrap--noc-summary .noc-result-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
  animation: nocShellIn 1040ms cubic-bezier(0.16, 0.82, 0.22, 1) forwards;
  gap: clamp(6px, 1.35cqmin, 14px);
}

/* Una sola columna: contenido + botón al pie, mismo ancho */
.gauge-wrap--noc-summary .noc-result-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(6px, 1.4cqmin, 12px);
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.gauge-wrap--noc-summary .noc-result-actions {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: 0;
  padding-top: clamp(4px, 1cqmin, 10px);
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Primera zona visible cuando la PWA está encendida suele ser el bloque PWA:
   menos margen superior (los iconos sociales están ocultos). */
.gauge-wrap--noc-summary .noc-result-actions--pwa-visible .pwa-install-block:not([hidden]) {
  margin-top: clamp(2px, 0.85cqmin, 10px);
}

.gauge-wrap--noc-summary .noc-retest-glow {
  width: min(340px, 100%);
}

/* Escritorio: pie del recuadro solo con “Nuevo test” centrado (redes van en .gauge-splash-social--noc-result fixed). */
@media (min-width: 761px) {
  .gauge-wrap--noc-summary .noc-result-panel:not([hidden]) {
    gap: clamp(4px, 1cqmin, 10px);
  }
  .gauge-wrap--noc-summary .noc-result-layout {
    flex: 0 1 auto;
  }
  .gauge-wrap--noc-summary .noc-result-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
    padding-top: clamp(4px, 1cqmin, 10px);
    gap: 0;
  }
  .gauge-wrap--noc-summary .noc-retest-glow {
    width: min(340px, 100%);
    max-width: none;
    box-sizing: border-box;
  }
}

/* Móvil (≤760px): solo agrandar “Nuevo test” — anchura útil completa + tipografía táctil */
@media (max-width: 760px) {
  /* Más aire entre redes (centradas) y el botón; el botón queda un poco más abajo. */
  .gauge-splash-social.gauge-splash-social--noc-result {
    margin-bottom: clamp(16px, 4.5vmin, 28px);
  }
  .gauge-wrap--noc-summary .noc-retest-glow {
    width: 100%;
    max-width: none;
    margin-top: clamp(12px, 3.2vmin, 22px);
  }

  .gauge-wrap--noc-summary .btn-retest-noc {
    font-size: clamp(1.04rem, 4.25vw, 1.18rem);
    padding: 0.72rem 1.45rem;
    max-width: none;
    min-height: 2.85rem;
  }
}

/*
 * Subir el bloque del botón respecto al hueco inferior solo si hay viewport “suficiente”.
 * En ≤375 px (p. ej. iPhone 6 / SE) o altura <540px (landscape muy bajo, teclado, etc.) se mantiene
 * el layout flexible clásico para no rozar u ocultar IP / filas de conexión.
 */
@media (max-width: 760px) and (min-width: 376px) and (min-height: 540px) {
  .gauge-wrap--noc-summary .noc-result-body {
    flex: 0 1 auto;
  }

  .gauge-wrap--noc-summary .noc-result-layout {
    flex: 0 1 auto;
  }

  .gauge-wrap--noc-summary .noc-result-actions {
    align-self: stretch;
    padding-top: clamp(6px, 1.65cqmin, 14px);
    padding-bottom: max(clamp(16px, 4.25vmin, 28px), env(safe-area-inset-bottom, 0px));
  }
}

/* Móvil estrecho: reforzar expansión vertical del bloque central (misma lógica previa a la subida del botón). */
@media (max-width: 375px) {
  .gauge-wrap--noc-summary .noc-result-layout {
    flex: 1 1 auto;
  }

  .gauge-wrap--noc-summary .noc-result-actions {
    align-self: stretch;
    padding-top: clamp(6px, 1.65cqmin, 14px);
    padding-bottom: clamp(2px, 0.65cqmin, 8px);
  }
}

/*
 * Bloque único de 4 usos (fuera de .gauge-wrap). Iconos neón; sin texto visible; check vía app.js.
 */
.service-fit-strip {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: clamp(12px, 2.5vw, 22px) clamp(14px, 3vw, 22px) clamp(16px, 3.5vw, 28px);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero:has(.service-fit-strip) {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.service-fit-strip[hidden] {
  display: none !important;
}

.service-fit-strip-panel {
  margin-inline: auto;
  max-width: 100%;
  padding: clamp(10px, 2vw, 14px) clamp(8px, 2.5vw, 18px);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(8, 12, 28, 0.92) 0%, rgba(4, 8, 20, 0.96) 100%);
  border: 1px solid rgba(0, 245, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(217, 70, 239, 0.12),
    0 0 28px rgba(0, 245, 255, 0.14),
    0 0 48px rgba(217, 70, 239, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* En carga: panel e iconos más suaves hasta tener calificación */
.service-fit-strip--idle .service-fit-strip-panel {
  background: linear-gradient(145deg, rgba(10, 14, 26, 0.72) 0%, rgba(6, 10, 22, 0.82) 100%);
  border-color: rgba(0, 245, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(217, 70, 239, 0.06),
    0 0 16px rgba(0, 245, 255, 0.07),
    0 0 28px rgba(217, 70, 239, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.service-fit-strip-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: max-content;
  max-width: 100%;
}

.service-fit-card {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 0 clamp(10px, 2.8vw, 18px);
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.service-fit-card:not(:last-child) {
  border-right: 1px solid rgba(148, 163, 184, 0.14);
}

.service-fit-card__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 3.25rem;
}

.service-fit-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  position: relative;
  overflow: visible;
}

.service-fit-card__icon svg {
  position: relative;
  z-index: 1;
  width: clamp(1.35rem, 3.4vw, 1.72rem);
  height: clamp(1.35rem, 3.4vw, 1.72rem);
  flex-shrink: 0;
}

/* Sin calificación: iconos neutros (sin color de servicio) */
.service-fit-strip--idle .service-fit-card__icon {
  color: rgba(148, 163, 184, 0.38);
  filter: none;
}

/* Tras el test: color de icono según nivel (óptimo = neón por tipo de servicio) */
.service-fit-strip--scored .service-fit-card--tier-ok.service-fit-card--nav .service-fit-card__icon {
  color: #22d3ee;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.85)) drop-shadow(0 0 4px rgba(0, 245, 255, 0.5));
}

.service-fit-strip--scored .service-fit-card--tier-ok.service-fit-card--stream .service-fit-card__icon {
  color: #e879f9;
  filter: drop-shadow(0 0 10px rgba(232, 121, 249, 0.8)) drop-shadow(0 0 4px rgba(217, 70, 239, 0.45));
}

.service-fit-strip--scored .service-fit-card--tier-ok.service-fit-card--game .service-fit-card__icon {
  color: #bef264;
  filter: drop-shadow(0 0 10px rgba(190, 242, 100, 0.85)) drop-shadow(0 0 4px rgba(132, 204, 22, 0.45));
}

.service-fit-strip--scored .service-fit-card--tier-ok.service-fit-card--call .service-fit-card__icon {
  color: #fde047;
  filter: drop-shadow(0 0 10px rgba(253, 224, 71, 0.85)) drop-shadow(0 0 4px rgba(250, 204, 21, 0.45));
}

.service-fit-strip--scored .service-fit-card--tier-warn .service-fit-card__icon {
  color: #fdba74;
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.55)) drop-shadow(0 0 3px rgba(234, 88, 12, 0.35));
}

.service-fit-strip--scored .service-fit-card--tier-bad .service-fit-card__icon {
  color: #f87171;
  filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.45));
}

.service-fit-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1rem;
}

.service-fit-mark__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.service-fit-strip--scored .service-fit-mark__glyph--ok {
  color: #39ff14;
  filter:
    drop-shadow(0 0 6px rgba(57, 255, 20, 1))
    drop-shadow(0 0 14px rgba(57, 255, 20, 0.95))
    drop-shadow(0 0 26px rgba(34, 255, 80, 0.85))
    drop-shadow(0 0 42px rgba(57, 255, 20, 0.55));
  animation: serviceFitCheckBlaze 1.35s ease-in-out infinite alternate;
}

.service-fit-strip--scored .service-fit-mark__glyph--warn {
  color: #ff9100;
  filter:
    drop-shadow(0 0 5px rgba(255, 145, 0, 0.95))
    drop-shadow(0 0 14px rgba(251, 146, 60, 0.75))
    drop-shadow(0 0 24px rgba(234, 88, 12, 0.45));
  animation: serviceFitWarnPulse 1.25s ease-in-out infinite alternate;
}

.service-fit-strip--scored .service-fit-mark__glyph--bad {
  color: #ff3b3b;
  filter:
    drop-shadow(0 0 4px rgba(255, 59, 59, 0.95))
    drop-shadow(0 0 12px rgba(239, 68, 68, 0.65));
}

.service-fit-mark__glyph svg {
  width: clamp(0.78rem, 2.2vw, 0.95rem) !important;
  height: clamp(0.78rem, 2.2vw, 0.95rem) !important;
  flex-shrink: 0;
}

.service-fit-strip--idle {
  /* 0.65s: alinear con comentario de entrada en app.js si se retoca el timing */
  animation: serviceFitStripIn 0.65s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

@keyframes serviceFitCheckBlaze {
  from {
    filter:
      drop-shadow(0 0 4px rgba(57, 255, 20, 0.95))
      drop-shadow(0 0 12px rgba(57, 255, 20, 0.88))
      drop-shadow(0 0 22px rgba(34, 255, 80, 0.65))
      drop-shadow(0 0 36px rgba(57, 255, 20, 0.45));
    opacity: 0.92;
  }
  to {
    filter:
      drop-shadow(0 0 8px rgba(57, 255, 20, 1))
      drop-shadow(0 0 20px rgba(57, 255, 20, 1))
      drop-shadow(0 0 36px rgba(120, 255, 140, 0.95))
      drop-shadow(0 0 56px rgba(57, 255, 20, 0.7));
    opacity: 1;
  }
}

@keyframes serviceFitWarnPulse {
  from {
    filter:
      drop-shadow(0 0 4px rgba(255, 145, 0, 0.85))
      drop-shadow(0 0 10px rgba(251, 146, 60, 0.6));
    opacity: 0.88;
  }
  to {
    filter:
      drop-shadow(0 0 7px rgba(255, 145, 0, 1))
      drop-shadow(0 0 18px rgba(251, 146, 60, 0.85));
    opacity: 1;
  }
}

@keyframes serviceFitStripIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Móvil: los 4 iconos en una sola fila; reparten el ancho y el SVG se reduce si hace falta */
@media (max-width: 760px) {
  .service-fit-strip {
    padding: clamp(8px, 2vw, 14px) clamp(6px, 2.5vw, 12px) clamp(10px, 2.5vw, 16px);
  }

  .service-fit-strip-panel {
    width: 100%;
    max-width: 100%;
    padding: clamp(6px, 1.5vw, 10px) clamp(4px, 1.2vw, 8px);
    box-sizing: border-box;
  }

  .service-fit-strip-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }

  .service-fit-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 4px clamp(2px, 1.5vw, 6px);
  }

  .service-fit-card:not(:last-child) {
    border-right: 1px solid rgba(148, 163, 184, 0.14);
  }

  .service-fit-card__cell {
    min-height: 0;
    gap: clamp(2px, 1vw, 4px);
  }

  .service-fit-card__icon svg {
    width: clamp(0.88rem, 6.2vw, 1.28rem);
    height: clamp(0.88rem, 6.2vw, 1.28rem);
  }

  .service-fit-mark__glyph svg {
    width: clamp(0.58rem, 3.8vw, 0.78rem) !important;
    height: clamp(0.58rem, 3.8vw, 0.78rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-fit-strip--idle {
    animation: none;
  }

  .service-fit-strip--scored .service-fit-mark__glyph--ok,
  .service-fit-strip--scored .service-fit-mark__glyph--warn {
    animation: none;
  }

  .service-fit-strip--scored .service-fit-mark__glyph--ok {
    filter:
      drop-shadow(0 0 8px rgba(57, 255, 20, 1))
      drop-shadow(0 0 18px rgba(57, 255, 20, 0.92))
      drop-shadow(0 0 32px rgba(34, 255, 80, 0.75));
  }

  .service-fit-strip--scored .service-fit-mark__glyph--warn {
    filter:
      drop-shadow(0 0 6px rgba(255, 145, 0, 0.9))
      drop-shadow(0 0 16px rgba(251, 146, 60, 0.65));
  }
}

.gauge-wrap--noc-summary .noc-conn-row[hidden] {
  display: none !important;
}

.gauge-wrap--noc-summary .noc-conn-main--wrap,
.gauge-wrap--noc-summary .noc-conn-mono--wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}


@keyframes nocShellIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Fundido del bloque vivo antes de mostrar resultados NOC */
.gauge-wrap--live-fadeout.gauge-wrap--splash-finished .gauge-main-panel--shown .gauge-live-ui {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 680ms cubic-bezier(0.33, 1, 0.68, 1) !important;
}
.noc-result-layout {
  max-width: 560px;
  margin: 0 auto;
}
.gauge-wrap--noc-summary .noc-result-panel:not([hidden]) .noc-reveal {
  opacity: 0;
  animation: nocTileIn 0.72s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}
.noc-reveal-d1 { animation-delay: 0.08s; }
.noc-reveal-d2 { animation-delay: 0.14s; }
.noc-reveal-d3 { animation-delay: 0.24s; }
.noc-reveal-d3b { animation-delay: 0.28s; }
.noc-reveal-d4 { animation-delay: 0.32s; }
.noc-reveal-d5 { animation-delay: 0.4s; }
.noc-reveal-d6 { animation-delay: 0.48s; }
.noc-reveal-d7 { animation-delay: 0.54s; }
@keyframes nocTileIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.noc-speed-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 2.5vw, 32px);
  margin-bottom: 22px;
  padding-bottom: 6px;
}
.noc-speed-block {
  position: relative;
  text-align: center;
}

/* Paleta final NOC: sin “caja” pintada alrededor de descarga/subida — el brillo va al número */
.gauge-wrap--noc-summary .noc-speed-block {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(2.85rem, 8cqmin, 4rem);
}

.noc-speed-value.noc-speed-value--pending {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

@keyframes nocDlValueFlash {
  0%,
  100% {
    color: #f8fafc;
    text-shadow: none;
    filter: brightness(1);
  }
  10% {
    color: #ffffff;
    text-shadow:
      0 0 10px rgba(255, 255, 255, 1),
      0 0 22px rgba(255, 255, 255, 0.95),
      0 0 52px rgba(56, 189, 248, 1),
      0 0 96px rgba(125, 211, 252, 1),
      0 0 150px rgba(14, 165, 233, 0.92),
      0 0 220px rgba(14, 165, 233, 0.68),
      0 0 300px rgba(56, 189, 248, 0.38);
    filter: brightness(2.05) saturate(1.15);
  }
  28% {
    color: #f0f9ff;
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.95),
      0 0 42px rgba(56, 189, 248, 1),
      0 0 88px rgba(125, 211, 252, 0.9),
      0 0 150px rgba(14, 165, 233, 0.72),
      0 0 210px rgba(14, 165, 233, 0.48);
    filter: brightness(1.55) saturate(1.08);
  }
  55% {
    color: #f8fafc;
    text-shadow:
      0 0 6px rgba(56, 189, 248, 0.95),
      0 0 38px rgba(56, 189, 248, 0.88),
      0 0 88px rgba(125, 211, 252, 0.72),
      0 0 140px rgba(14, 165, 233, 0.45);
    filter: brightness(1.28);
  }
}

@keyframes nocUlValueFlash {
  0%,
  100% {
    color: #f8fafc;
    text-shadow: none;
    filter: brightness(1);
  }
  10% {
    color: #ffffff;
    text-shadow:
      0 0 12px rgba(255, 255, 255, 1),
      0 0 26px rgba(255, 255, 255, 0.92),
      0 0 58px rgba(232, 121, 249, 1),
      0 0 102px rgba(167, 139, 250, 1),
      0 0 168px rgba(244, 114, 182, 0.88),
      0 0 230px rgba(192, 132, 252, 0.72),
      0 0 300px rgba(217, 70, 239, 0.42);
    filter: brightness(2) saturate(1.12);
  }
  28% {
    color: #faf5ff;
    text-shadow:
      0 0 9px rgba(255, 255, 255, 0.9),
      0 0 46px rgba(192, 132, 252, 1),
      0 0 96px rgba(167, 139, 250, 0.92),
      0 0 158px rgba(244, 114, 182, 0.62),
      0 0 210px rgba(192, 132, 252, 0.48);
    filter: brightness(1.52) saturate(1.08);
  }
  55% {
    color: #f8fafc;
    text-shadow:
      0 0 7px rgba(167, 139, 250, 0.88),
      0 0 40px rgba(192, 132, 252, 0.78),
      0 0 92px rgba(196, 181, 253, 0.62),
      0 0 150px rgba(232, 121, 249, 0.38);
    filter: brightness(1.26);
  }
}

.gauge-wrap--noc-summary .noc-speed-value.noc-speed-value--flash-dl {
  animation: nocDlValueFlash 1.42s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

.gauge-wrap--noc-summary .noc-speed-value.noc-speed-value--flash-ul {
  animation: nocUlValueFlash 1.42s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

@keyframes nocDlValueFlashReduced {
  0%,
  100% {
    color: #f8fafc;
    text-shadow: none;
    filter: brightness(1);
  }
  45% {
    color: #e0f2fe;
    text-shadow:
      0 0 12px rgba(56, 189, 248, 0.95),
      0 0 48px rgba(14, 165, 233, 0.72);
    filter: brightness(1.22);
  }
}

@keyframes nocUlValueFlashReduced {
  0%,
  100% {
    color: #f8fafc;
    text-shadow: none;
    filter: brightness(1);
  }
  45% {
    color: #faf5ff;
    text-shadow:
      0 0 14px rgba(192, 132, 252, 0.92),
      0 0 50px rgba(167, 139, 250, 0.68);
    filter: brightness(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gauge-wrap--noc-summary .noc-speed-value.noc-speed-value--flash-dl {
    animation: nocDlValueFlashReduced 1.06s ease-out forwards;
  }

  .gauge-wrap--noc-summary .noc-speed-value.noc-speed-value--flash-ul {
    animation: nocUlValueFlashReduced 1.06s ease-out forwards;
  }
}

.noc-speed-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.noc-speed-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.noc-speed-badge--dl {
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.28), rgba(14, 165, 233, 0.1));
  color: #bae6fd;
  border: 1px solid rgba(125, 211, 252, 0.35);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.12);
}
.noc-speed-badge--ul {
  background: linear-gradient(145deg, rgba(167, 139, 250, 0.28), rgba(139, 92, 246, 0.1));
  color: #ddd6fe;
  border: 1px solid rgba(196, 181, 253, 0.35);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.1);
}
.noc-speed-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.9);
}
.noc-speed-label-unit {
  margin-left: 5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.noc-speed-value {
  margin-top: 8px;
  font-size: clamp(2.65rem, 11vw, 4rem);
  font-weight: 200;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: #f8fafc;
}

.noc-metric-strip {
  padding: 14px 14px 16px;
  border-radius: 12px;
  background: rgba(6, 10, 22, 0.62);
  border: 1px solid rgba(146, 190, 240, 0.26);
  margin-bottom: 18px;
}
.noc-metric-strip[hidden] {
  display: none !important;
}
.noc-metric-strip-items {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  width: 100%;
}
.noc-metric-chip {
  display: inline-flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
}
.noc-metric-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.noc-metric-chip--ping .noc-metric-dot {
  background: rgba(250, 204, 21, 0.18);
  color: #fde047;
  border: 1px solid rgba(250, 204, 21, 0.3);
}
.noc-metric-chip--jit .noc-metric-dot {
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.28);
}
.noc-metric-chip--loss .noc-metric-dot {
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.28);
}
.noc-metric-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.noc-metric-num {
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #e8f0ff;
}
.noc-metric-suffix {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}

.noc-connection-card {
  border-radius: 14px;
  padding: 6px 4px 4px;
  background: rgba(6, 10, 22, 0.72);
  border: 1px solid rgba(146, 190, 240, 0.22);
}
.noc-conn-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 12px;
}
.noc-conn-row + .noc-conn-row {
  border-top: 1px solid rgba(146, 190, 240, 0.34);
}
.noc-conn-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.noc-conn-icon--edge {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.22);
  background: rgba(56, 189, 248, 0.08);
}
.noc-conn-icon--isp {
  color: #c4b5fd;
  border-color: rgba(196, 181, 253, 0.22);
  background: rgba(139, 92, 246, 0.08);
}
.noc-conn-icon--ip {
  color: #94a3b8;
}
.noc-conn-icon--origin {
  color: #6ee7b7;
  border-color: rgba(110, 231, 183, 0.25);
  background: rgba(16, 185, 129, 0.1);
}

.noc-conn-main--wrap {
  white-space: normal;
}
.noc-conn-lines {
  min-width: 0;
  flex: 1;
}
.noc-conn-kicker {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.noc-conn-main {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #f1f5f9;
  line-height: 1.35;
}
.noc-conn-edge-title {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: #f8fafc;
}
.noc-conn-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
}
.noc-conn-sub:empty {
  display: none;
}
.noc-conn-sub--muted {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 8px;
  color: rgba(148, 163, 184, 0.85);
}
.noc-conn-mono--compact {
  margin-top: 2px !important;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 0.88rem;
  font-weight: 500;
  color: #e2e8f0;
}
.noc-conn-mono {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-weight: 400;
  font-size: 0.9rem;
  word-break: break-all;
}

.noc-result-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.noc-retest-glow {
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(
    105deg,
    rgba(255, 180, 90, 0.35),
    rgba(255, 245, 210, 1),
    rgba(255, 140, 60, 1),
    rgba(255, 220, 150, 0.95),
    rgba(255, 200, 100, 0.4)
  );
  background-size: 280% 280%;
  animation: nocRetestBorderGlint 2.6s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(255, 160, 80, 0.25),
    0 0 22px rgba(255, 120, 40, 0.2);
}
@keyframes nocRetestBorderGlint {
  0%,
  100% {
    background-position: 12% 50%;
  }
  50% {
    background-position: 88% 50%;
  }
}
.btn-retest-noc {
  margin: 0;
  min-width: 200px;
  border: none;
  border-radius: 10px;
  padding: 0.68rem 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #160a02;
  cursor: pointer;
  background: linear-gradient(180deg, #ff9a4a 0%, #ff6b35 42%, #e85d0c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  -webkit-tap-highlight-color: transparent;
}
.btn-retest-noc:hover {
  filter: brightness(1.06);
}
.btn-retest-noc:focus-visible {
  outline: 2px solid #fdba74;
  outline-offset: 3px;
}
.btn-retest-noc:active {
  transform: scale(0.98);
}
.gauge-wrap--splash-finished .gauge-splash {
  display: none !important;
}
.gauge.st-panel-gauge {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  position: relative;
}
.gauge-wrap:has(.gauge.st-panel-gauge.running) {
  animation: stGaugeGlow 1.6s ease-in-out infinite;
}
.st-gauge-visual.wan-speed-gauge-container {
  width: 100%;
  min-height: min(220px, 26svh);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.st-speed-gauge-svg.wan-speed-gauge-svg {
  width: min(320px, 94%);
  height: auto;
  max-height: min(220px, 26svh);
  overflow: visible;
  display: block;
  position: relative;
  z-index: 1;
}
/* Cara del medidor (debajo del arco); evita “hueco” transparente sobre el fondo de la tarjeta */
.st-gauge-dial-face {
  fill: rgba(10, 18, 36, 0.94);
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  pointer-events: none;
}
.st-gauge-bg.gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 16;
  stroke-linecap: round;
}
.st-gauge-fill.gauge-fill {
  fill: none;
  /* Color sólido primero: si url(#…) falla en el UA, no queda fill negro por defecto */
  stroke: #f97316;
  stroke: url(#gradStPrepare);
  stroke-width: 18;
  stroke-linecap: butt;
  transition: stroke-dasharray 95ms linear, stroke 220ms ease;
}
.st-speed-gauge-svg .gauge-ticks line {
  fill: none;
  stroke: rgba(230, 238, 255, 0.4);
  stroke-width: 1.5;
}
.st-speed-gauge-svg .gauge-ticks line.gauge-tick-major {
  stroke: rgba(230, 238, 255, 0.62);
  stroke-width: 2.5;
}
.gauge-scale-label {
  fill: rgba(226, 236, 255, 0.92);
  font-size: 10px;
  font-weight: 700;
  font-family: Inter, system-ui, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.st-gauge-needle-group .st-gauge-needle.gauge-needle {
  fill: #fff;
  stroke: rgba(180, 210, 255, 0.35);
  stroke-width: 0.75;
}
.st-gauge-pivot.gauge-pivot {
  fill: #fff;
  stroke: var(--phase-c1);
  stroke-width: 3;
  transition: stroke 220ms ease;
}
.st-gauge-value-group.gauge-value-group {
  text-align: center;
  margin-top: -30px;
  z-index: 2;
  position: relative;
  pointer-events: none;
}
.st-gauge-main-val {
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  letter-spacing: -0.03em;
}
.st-gauge-unit-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0.2rem;
  opacity: 0.85;
}
.st-gauge-state {
  color: color-mix(in srgb, var(--phase-c1) 72%, var(--text) 28%);
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 200ms ease;
}
/* Gradiente del arco por fase (aguja/pivot usan --phase-c*) vía .gauge-wrap) */
.gauge.phase-download .st-gauge-fill {
  stroke: #ea580c;
  stroke: url(#gradStDownload);
}
.gauge.phase-upload .st-gauge-fill {
  stroke: #e879f9;
  stroke: url(#gradStUpload);
}
.gauge.phase-ping .st-gauge-fill {
  stroke: #facc15;
  stroke: url(#gradStPing);
}
.gauge.phase-transition .st-gauge-fill {
  stroke: #f97316;
  stroke: url(#gradStTransition);
}
.gauge.phase-completed .st-gauge-fill {
  stroke: #34d399;
  stroke: url(#gradStCompleted);
}
.gauge.phase-error .st-gauge-fill {
  stroke: #fb7185;
  stroke: url(#gradStError);
}
.gauge.st-panel-gauge.running {
  animation: none;
}
@keyframes stGaugeGlow {
  0%, 100% { box-shadow: 0 0 28px var(--phase-glow, rgba(251, 146, 60, 0.32)); }
  50% { box-shadow: 0 0 42px color-mix(in srgb, var(--phase-c2) 32%, transparent); }
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 20px;
}
.actions-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gauge-run-context {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(6, 10, 22, 0.68);
  border: 1px solid rgba(120, 160, 220, 0.14);
  text-align: left;
}
.gauge-wrap:has(.gauge.st-panel-gauge.running) .actions-buttons {
  display: none !important;
}
.gauge-wrap:has(.gauge.st-panel-gauge.running) .gauge-run-context {
  display: grid;
}
.gauge-run-context-kicker {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.gauge-run-context-val {
  font-size: 0.92rem;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.35;
}
.gauge-run-context-val--mono {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-weight: 500;
  font-size: 0.86rem;
  word-break: break-all;
}
.gauge-run-context-sub {
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.3;
}
.gauge-run-context-sub:empty {
  display: none;
}
@media (max-width: 520px) {
  .gauge-run-context {
    grid-template-columns: 1fr;
    padding: 10px 12px;
    gap: 0;
  }
  /* Misma lectura que filas en .noc-connection-card (línea entre bloques) */
  .gauge-run-context-edge {
    border-top: 1px solid rgba(146, 190, 240, 0.32);
    margin-top: 10px;
    padding-top: 10px;
  }
}
.btn {
  border: none;
  border-radius: 10px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  color: #061124;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.btn-secondary {
  color: var(--text);
  background: rgba(47, 63, 98, 0.8);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.stat { padding: 14px; }
.stat h3 { margin: 0; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.stat .value { margin: 6px 0 0; font-size: 1.7rem; font-weight: 700; }
.stat small { color: var(--muted); font-size: 0.82rem; }

.chart { padding: 16px; margin-bottom: 18px; }
.chart h2 { margin: 0 0 10px; font-size: 1rem; }
canvas {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(146, 175, 222, 0.14);
  background: rgba(4, 10, 20, 0.7);
}

.status { padding: 16px; }
.status h2 { margin: 0 0 10px; font-size: 1rem; }
#statusLog {
  margin: 0;
  padding-left: 18px;
  max-height: 180px;
  overflow: auto;
  color: var(--muted);
}
#statusLog li + li { margin-top: 6px; }

@media (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 6px 14px;
    padding-bottom: clamp(24px, 5vh, 40px);
    --speedtest-shell-chrome: max(
      90px,
      calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 72px)
    );
  }
  .hero {
    height: calc(100svh - var(--speedtest-shell-chrome));
    margin-bottom: 16px;
  }
  .hero:has(.service-fit-strip) {
    height: auto;
    min-height: calc(100svh - var(--speedtest-shell-chrome));
    overflow: visible;
  }
  .hero:has(.gauge-wrap.gauge-wrap--noc-summary) {
    height: auto;
    min-height: calc(100svh - var(--speedtest-shell-chrome));
    overflow: visible;
  }
  .topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .build { font-size: 0.72rem; }
  .phase-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
  }
  .phase-item {
    padding: 5px 6px;
  }
  .phase-item strong {
    font-size: 1.05rem;
  }
  .phase-chip {
    margin-bottom: 6px;
  }
  .st-speed-gauge-svg.wan-speed-gauge-svg {
    width: min(260px, 88vw);
    max-height: min(168px, 22svh);
  }
  .st-gauge-visual.wan-speed-gauge-container {
    min-height: min(168px, 22svh);
  }
  .st-gauge-value-group.gauge-value-group {
    margin-top: -22px;
  }
  .st-gauge-main-val {
    font-size: clamp(1.35rem, 5vw, 1.85rem);
  }
  .actions {
    margin-top: 10px;
  }
  .btn {
    min-width: 120px;
    padding: 9px 12px;
  }
  .stats-grid { grid-template-columns: 1fr; }
  .stat .value { font-size: 1.5rem; }
  canvas { height: 220px; }
  .gauge-scale-label {
    font-size: 8.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No destapar el disco antes del intro: el bloque anterior (sin splash-intro) debe seguir ocultándolo */
  .gauge-wrap--splash-intro:not(.gauge-wrap--splash-finished)
    .gauge-splash:not([hidden]):not(.is-done)
    .gauge-splash-svg,
  .gauge-wrap--splash-intro:not(.gauge-wrap--splash-finished)
    .gauge-splash:not([hidden]):not(.is-done)
    .gauge-splash-label {
    animation: none !important;
    opacity: 1 !important;
    transition: opacity 0.72s ease-out !important;
  }
}

/* ===========================================================================
 * PWA — bloque "Instalar App" en la paleta de resultados (entre redes y Nuevo test).
 * Vive dentro de .noc-result-actions y NO modifica reglas existentes de
 * §10.0. syncPwaInstallWithNocResultSocial() oculta #nocResultSocial mientras
 * #pwaInstallBlock está visible.
 * =========================================================================== */
.pwa-install-block {
  margin-top: clamp(10px, 2.4vmin, 18px);
  width: min(340px, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 12px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(20, 32, 58, 0.85),
    rgba(12, 18, 34, 0.92)
  );
  border: 1px solid rgba(255, 180, 90, 0.22);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  text-align: center;
  box-sizing: border-box;
}
.pwa-install-block[hidden] {
  display: none !important;
}
.pwa-install-title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff5d6;
  line-height: 1.2;
}
.pwa-install-sub {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(220, 230, 245, 0.78);
  line-height: 1.3;
}
.pwa-install-btn {
  margin-top: 6px;
  border: none;
  border-radius: 10px;
  padding: 0.58rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #1a0f00;
  background: linear-gradient(
    105deg,
    #ffd28a 0%,
    #ffb84d 45%,
    #ff8a3d 100%
  );
  box-shadow:
    0 6px 14px rgba(255, 140, 60, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: filter 0.18s ease, transform 0.12s ease;
}
.pwa-install-btn[hidden] {
  display: none !important;
}
.pwa-install-btn:hover {
  filter: brightness(1.06);
}
.pwa-install-btn:focus-visible {
  outline: 2px solid #fdba74;
  outline-offset: 3px;
}
.pwa-install-btn:active {
  transform: scale(0.98);
}
.pwa-install-ios-hint {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: rgba(232, 240, 255, 0.86);
  line-height: 1.35;
}
.pwa-install-ios-hint strong {
  color: #ffd28a;
  font-weight: 700;
}
.pwa-install-ios-hint[hidden] {
  display: none !important;
}
.pwa-install-android-hint {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: rgba(232, 240, 255, 0.86);
  line-height: 1.4;
}
.pwa-install-android-hint strong {
  color: #ffd28a;
  font-weight: 700;
}
.pwa-install-android-hint[hidden] {
  display: none !important;
}
.pwa-install-link {
  color: #93c5fd;
  text-decoration: underline;
  font-weight: 600;
}
.pwa-install-link:hover,
.pwa-install-link:focus-visible {
  color: #bfdbfe;
}
.pwa-install-dismiss {
  margin-top: 4px;
  background: transparent;
  border: 0;
  color: rgba(196, 208, 226, 0.7);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 8px;
}
.pwa-install-dismiss:hover {
  color: #fff5d6;
}
.pwa-install-dismiss:focus-visible {
  outline: 2px solid #fdba74;
  outline-offset: 2px;
  border-radius: 6px;
}

@media (max-width: 760px) {
  .pwa-install-block {
    width: min(420px, 100%);
    padding: 12px 14px 10px;
  }
  .pwa-install-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-btn {
    transition: none;
  }
}