/*
 * ══════════════════════════════════════════════
 *  BADGE.CSS — Badge com Pulso Animado
 * ══════════════════════════════════════════════
 *
 *  Propósito : Componente reutilizável de badge com indicador
 *              pulsante (live dot).
 *  Dependências : tokens.css (--color-primary, --radius-full).
 *  NÃO COLOCAR AQUI : Layout do container (usa classes Tailwind).
 */

.badge-pulse {
    position: relative;
    display: flex;
    height: 8px;
    width: 8px;
}

.badge-pulse-ping {
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    opacity: 0.75;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.badge-pulse-dot {
    position: relative;
    display: inline-flex;
    border-radius: var(--radius-full);
    height: 8px;
    width: 8px;
    background-color: var(--color-primary);
}