.pulso-radial-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none; /* ✅ No interferir con otros elementos */
}

.onda-radial {
    position: absolute;
    border-radius: 50%;
    background-color: var(--color, #3498db);
    opacity: var(--opacidad-inicial, 0.7); /* ✅ Opacidad configurable */
    transform: scale(0);
    width: var(--tamano-inicial, 40px);
    height: var(--tamano-inicial, 40px);
    margin-left: calc(var(--tamano-inicial, 40px) / -2);
    margin-top: calc(var(--tamano-inicial, 40px) / -2);
    top: 50%;
    left: 50%;
    will-change: transform, opacity; /* ✅ Optimización GPU */
    backface-visibility: hidden; /* ✅ Mejor performance */
}

/* ✅ FALLBACK CSS animation mejorado */
@keyframes pulso-radial-fallback {
    0% {
        transform: scale(0);
        opacity: var(--opacidad-inicial, 0.7);
    }
    20% {
        opacity: var(--opacidad-inicial, 0.7);
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.onda-radial.fallback {
    animation: pulso-radial-fallback var(--duracion, 2.5s) ease-out infinite;
}

/* ✅ VARIACIONES de tamaño responsivo */
@media (max-width: 768px) {
    .onda-radial {
        --tamano-inicial: max(25px, calc(var(--tamano-inicial, 40px) * 0.8));
    }
}

@media (max-width: 480px) {
    .onda-radial {
        --tamano-inicial: max(20px, calc(var(--tamano-inicial, 40px) * 0.6));
    }
}

/* ✅ EFECTOS adicionales opcionales */
.pulso-radial-wrapper.con-glow .onda-radial {
    box-shadow: 0 0 20px var(--color, #3498db);
}

.pulso-radial-wrapper.con-borde .onda-radial {
    background: transparent;
    border: 2px solid var(--color, #3498db);
}

/* ✅ TEMA oscuro */
@media (prefers-color-scheme: dark) {
    .onda-radial {
        filter: brightness(1.2);
    }
}