/* ==========================================
   BADGES INTEGRADOS (ESTILO EDITORIAL COMPACTO)
   ========================================== */

.badge-inline {
    display: flex;
    align-items: center;
    justify-content: center; /* CLAVE: Fuerza el centrado en el contenedor flex */
    
    /* PROXIMIDAD: Reduje el gap de 12px a 6px para que se vean como un solo bloque */
    gap: 6px; 
    
    /* PROXIMIDAD VERTICAL: Lo acerqué más al título (antes 8px o 12px) */
    margin-top: 6px; 
    
    padding: 2px 0;
    flex-wrap: wrap;
    width: 100%; /* Asegura que tome el ancho para poder centrar */
}

/* NUEVO: Control total de la línea separadora */
.separator-line {
    display: inline-block;
    color: rgba(255, 255, 255, 0.2); /* Sutil, no distrae */
    font-size: 10px;
    margin: 0 2px; /* Mínima separación extra */
    transform: translateY(-1px); /* Ajuste óptico vertical */
}

/* Radar de vivo: EFECTO PULSO VANGUARDISTA */
.live-circle-radar {
    position: relative;
    width: 8px;  /* Reducido ligeramente para elegancia */
    height: 8px;
    background: var(--color-marca);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 69, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2px; /* Pequeño respiro con el texto */
}

/* La onda expansiva (El Pulso) */
.live-circle-radar::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-marca);
    border-radius: 50%;
    z-index: -1;
    animation: radarRipple 2s ease-out infinite;
    opacity: 0.6;
}

@keyframes radarRipple {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3.0); opacity: 0; }
}

/* Animación del núcleo (Latido) */
.live-circle-radar {
    animation: coreHeartbeat 2s ease-in-out infinite;
}

@keyframes coreHeartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* TEXTO "EN VIVO" */
.live-text {
    font-family: 'Montserrat SemiBold', sans-serif;
    font-size: 10px; /* Ajuste para móvil */
    letter-spacing: 1px;
    color: var(--color-marca);
    font-weight: 700;
    text-transform: uppercase;
}

/* BADGE OYENTES */
.oyentes-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px; /* Más compacto */
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.oyentes-badge i {
    font-size: 9px;
    color: var(--color-marca);
}

#oyentes {
    font-family: 'Montserrat SemiBold', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
}

/* ==========================================
   RESPONSIVE & ALINEACIÓN
   ========================================== */

/* MÓVIL Y TABLET: Centrado absoluto */
@media (max-width: 991.98px) {
    .badge-inline {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
}

/* PC: Alineado a la izquierda (Si mantienes el diseño horizontal) */
@media (min-width: 992px) {
    .badge-inline {
        justify-content: flex-start;
        margin-left: 0; 
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-circle-radar, .live-circle-radar::after {
        animation: none;
    }
}

/* ==========================================
   ESTADO OFFLINE (SIN CONEXIÓN)
   ========================================== */
.badge-inline.is-offline .live-circle-radar {
    background: #666;
    box-shadow: 0 0 8px rgba(100, 100, 100, 0.5);
    animation: none;
}
.badge-inline.is-offline .live-circle-radar::after {
    display: none;
}
.badge-inline.is-offline .live-text {
    color: #999;
}