/* === Ondas de aviso desde Gernika en el mapa (Mejora 4) === */

.ondas-gernika-panel {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.ondas-gernika-btn {
  width: auto;
  min-width: 280px;
}
.ondas-gernika-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.ondas-gernika-caption {
  margin: 0;
  max-width: 62ch;
  font-size: 0.86rem;
  color: var(--muted, #5f6b63);
  line-height: 1.5;
}
.ondas-gernika-caption.is-readout {
  color: var(--green, #133f35);
  font-weight: 700;
}

/* Anillo expansivo de "sonar" anclado en Gernika */
.ondas-ping-wrap {
  position: relative;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ondas-ping-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid #c47a2c;
  opacity: 0;
  pointer-events: none;
}
.ondas-ping-ring.is-animating {
  animation: ondas-ping-expand 1.4s ease-out forwards;
}
@keyframes ondas-ping-expand {
  0%   { transform: scale(0.3); opacity: 0.85; }
  100% { transform: scale(9);   opacity: 0; }
}

/* Pulso de llegada en cada monte */
.ondas-arrival-wrap {
  position: relative;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.ondas-arrival-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ring-color, #1d806d);
  opacity: 0;
  pointer-events: none;
}
.ondas-arrival-ring.is-animating {
  animation: ondas-arrival-pulse 0.9s ease-out forwards;
}
@keyframes ondas-arrival-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  60%  { transform: scale(2.1); opacity: 0.55; }
  100% { transform: scale(3);   opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ondas-ping-ring.is-animating,
  .ondas-arrival-ring.is-animating {
    animation: none !important;
    opacity: 0 !important;
  }
}