.dot-wrapper {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
}

.dot-core {
    position: relative;
    width: 10px;
    height: 10px;
    background: #dc2626; /* rosso */
    border-radius: 50%;
    display: block;
}

.dot-core-off {
    position: relative;
    width: 10px;
    height: 10px;
    background: #666; /* rosso */
    border-radius: 50%;
    display: block;
}

.dot-ping {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f87171;
    border-radius: 50%;
    opacity: 0.7;
    animation: dotPing 1.5s infinite;
}

@keyframes dotPing {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    75% {
        transform: scale(2);
        opacity: 0;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}