/* Radar SVG — CultoRD
   Pulsos concéntricos, halo del usuario, blips animados.
   Todo SVG/CSS, sin librerías externas. */

@keyframes radar-sweep-1 {
  0%   { r: 0;   opacity: 0.55; }
  100% { r: 190; opacity: 0; }
}
@keyframes radar-sweep-2 {
  0%   { r: 0;   opacity: 0.55; }
  100% { r: 190; opacity: 0; }
}
@keyframes radar-sweep-3 {
  0%   { r: 0;   opacity: 0.55; }
  100% { r: 190; opacity: 0; }
}

.radar-sweep {
  fill: none;
  stroke: #3B82F6;
  stroke-width: 2;
  r: 0;
  transform-origin: center;
}
.radar-sweep-1 { animation: radar-sweep-1 3s linear infinite; }
.radar-sweep-2 { animation: radar-sweep-2 3s linear infinite; animation-delay: 1s; }
.radar-sweep-3 { animation: radar-sweep-3 3s linear infinite; animation-delay: 2s; }

@keyframes radar-user-halo {
  0%   { r: 6;  opacity: 0.5; }
  100% { r: 16; opacity: 0; }
}
.radar-user-halo {
  fill: #2563EB;
  stroke: none;
  animation: radar-user-halo 2s ease-out infinite;
  transform-origin: center;
}

@keyframes radar-blip-live {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.radar-blip {
  transition: transform 0.2s;
  cursor: pointer;
  transform-origin: center;
}
.radar-blip:hover { transform: scale(1.1); }
.radar-blip:active { transform: scale(0.95); }

.radar-blip-live {
  animation: radar-blip-live 1.2s ease-in-out infinite;
  transform-origin: center;
}

.radar-bg-light {
  background: radial-gradient(circle at center, #DBEAFE 0%, #BFDBFE 100%);
}
.radar-bg-dark {
  background: radial-gradient(circle at center, #1E3A8A 0%, #0F172A 100%);
}

/* Radar redondo: clip del container + border circular */
.radar-round {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow:
    inset 0 0 30px rgba(59,130,246,0.25),
    0 10px 40px rgba(37,99,235,0.2);
  position: relative;
}
.app-frame.dark .radar-round {
  box-shadow:
    inset 0 0 40px rgba(59,130,246,0.4),
    0 10px 40px rgba(0,0,0,0.5);
}

/* Haz de barrido rotatorio tipo radar militar */
@keyframes radar-beam-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.radar-beam {
  transform-origin: 0 0;
  animation: radar-beam-rotate 3.5s linear infinite;
}

/* Glow sutil del punto central del usuario */
@keyframes radar-center-glow {
  0%, 100% { filter: drop-shadow(0 0 2px #2563EB); }
  50%      { filter: drop-shadow(0 0 8px #60A5FA); }
}
.radar-center {
  animation: radar-center-glow 2s ease-in-out infinite;
}