/* FORCE CUT PILLS TO 200PX - ONLY IN JUUVIX LIVE CONTEXT */
.juuvix_live_context .i_left_menu_box,
.juuvix_live_context .live_item_cont {
    width: 200px !important;
    max-width: 200px !important;
    min-width: 200px !important;
    height: 51px !important;
    min-height: 51px !important;
    margin: 5px auto !important;
    padding: 0 8px !important;
    transition: all 0.3s ease !important;
}

.juuvix_live_context .menu_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 50px !important;
    /* Espacio para el botón de flecha */
}

/* PRIMER BOTÓN: INICIO - Sin cambios */

/* SEGUNDO BOTÓN: EXPLORAR - MOVER 1px HACIA ATRÁS */
/* ESTILO PERMANENTE: Borde Verde Neón Sutil + Fondo Oscuro */
.juuvix_live_context .menu_wrapper a:nth-of-type(2) .i_left_menu_box {
    transform: translateX(-1px) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    /* Fondo más oscuro para resaltar borde */
    border: 1px solid rgba(0, 255, 163, 0.3) !important;
    /* Borde Verde Neón Sutil (Mint) */
    color: #fff !important;
    /* Texto blanco suave */
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 5px rgba(0, 255, 163, 0.1) !important;
    /* Brillo verde muy sutil */
}

/* EFECTO HOVER PARA EXPLORAR - INTENSIFICAR NEÓN */
.juuvix_live_context .menu_wrapper a:nth-of-type(2) .i_left_menu_box:hover {
    border-color: #00ffa3 !important;
    /* Verde Neón Intenso */
    box-shadow: 0 0 15px rgba(0, 255, 163, 0.4) !important;
    /* Brillo verde fuerte */
    background: rgba(0, 255, 163, 0.1) !important;
    /* Fondo verde sutil */
    transform: translateX(-1px) scale(1.02) !important;
}

/* TERCER BOTÓN: AGENDA LIVE - EFECTO DE VIDA (PULSO INTENSO) */
.juuvix_live_context .menu_wrapper a:nth-of-type(3) .i_left_menu_box {
    background: rgba(0, 219, 222, 0.1) !important;
    border: 1px solid #00dbde !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 219, 222, 0.4) !important;
    animation: cyanPulseLife 2s infinite ease-in-out !important;
}

@keyframes cyanPulseLife {
    0% {
        box-shadow: 0 0 10px rgba(0, 219, 222, 0.3);
        border-color: rgba(0, 219, 222, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(0, 219, 222, 0.8), 0 0 5px rgba(255, 255, 255, 0.5);
        border-color: #00dbde;
        background: rgba(0, 219, 222, 0.2);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 10px rgba(0, 219, 222, 0.3);
        border-color: rgba(0, 219, 222, 0.5);
        transform: scale(1);
    }
}

/* --- BOTONES DE TRANSMISIÓN ESPACIALES Y VIBRANTES --- */

/* 1. VIVO DE PAGO - GRADIENTE PÚRPURA GALÁCTICO A ORO */
.juuvix_live_context .live_item_cont.paidLive {
    background: linear-gradient(135deg, #4A00E0 0%, #8E2DE2 50%, #FFD700 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.5) !important;
}

/* 2. VIVO GRATIS - GRADIENTE ELECTRIC PINK A CYAN */
.juuvix_live_context .live_item_cont.freeLive {
    background: linear-gradient(135deg, #FF00CC 0%, #333399 100%) !important;
    border: 1px solid rgba(255, 0, 204, 0.4) !important;
    box-shadow: 0 4px 15px rgba(255, 0, 204, 0.5) !important;
}

/* 3. OBS TRANSMITIR - GRADIENTE ELECTRIC BLUE A CYAN */
.juuvix_live_context .live_item_cont.obsLive {
    background: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%) !important;
    border: 1px solid rgba(0, 198, 255, 0.4) !important;
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.5) !important;
    margin-bottom: 20px !important;
    /* Separación extra del final */
}

/* Texto blanco y fuerte para estos botones */
.juuvix_live_context .live_item_cont .cNLive div,
.juuvix_live_context .live_item_cont .obs-btn div {
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.5px !important;
}

.juuvix_live_context .i_left_menu_box .m_tit {
    font-size: 16px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.juuvix_live_context .live_item_cont .cNLive,
.juuvix_live_context .live_item_cont .obs-btn {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8px !important;
}


/* BOTÓN TENDENCIAS - ESTILO BARRA LATERAL ILUMINADA (FUEGO) */
.juuvix_live_context .i_left_menu_box.g_feed {
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.2) 0%, rgba(255, 69, 0, 0) 70%) !important;
    border: none !important;
    border-left: 4px solid #FF4500 !important;
    /* Naranja Fuego */
    border-radius: 4px 8px 8px 4px !important;
    box-shadow: -2px 0 10px rgba(255, 69, 0, 0.4) !important;
    /* Resplandor izquierdo */
    padding-left: 12px !important;
    /* Compensar borde */
    justify-content: flex-start !important;
    /* Alinear contenido a la izquierda */
}

/* Hover effect */
.juuvix_live_context .i_left_menu_box.g_feed:hover {
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.4) 0%, rgba(255, 69, 0, 0.05) 100%) !important;
    border-left: 4px solid #FF8C00 !important;
    /* Naranja más brillante */
    box-shadow: -2px 0 15px rgba(255, 140, 0, 0.6) !important;
    transform: translateX(2px) !important;
}

.juuvix_live_context .i_left_menu_box svg,
.juuvix_live_context .i_left_menu_box i,
.juuvix_live_context .live_item_cont svg,
.juuvix_live_context .live_item_cont i {
    width: 26px !important;
    height: 26px !important;
    margin-right: 15px !important;
    /* Espacio añadido para separar del texto */
}

.juuvix_live_context .i_left_menu_profile_avatar {
    width: 26px !important;
    height: 26px !important;
    transition: all 0.3s ease;
}

.juuvix_live_context .i_left_menu_profile_avatar img {
    width: 100% !important;
    height: 100% !important;
}

/* Asegurar que el botón de colapso esté visible y funcional */
.juuvix_live_context .sidebar-toggle-btn {
    z-index: 1000 !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    cursor: pointer !important;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 2px;
}

/* --- ESTILOS PARA ESTADO COLAPSADO --- */
.juuvix_live_context.sidebar-collapsed .i_left_menu_box,
.juuvix_live_context.sidebar-collapsed .live_item_cont {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
    justify-content: center !important;
    padding: 0 !important;
    transform: none !important;
    /* Reset cualquier transform al colapsar */
}

.juuvix_live_context.sidebar-collapsed .i_left_menu_box .m_tit {
    display: none !important;
    opacity: 0;
}

.juuvix_live_context.sidebar-collapsed .live_item_cont .cNLive div:not(:first-child),
.juuvix_live_context.sidebar-collapsed .live_item_cont .obs-btn span {
    display: none !important;
}

/* Centrar iconos en modo colapsado */
.juuvix_live_context.sidebar-collapsed .i_left_menu_box svg,
.juuvix_live_context.sidebar-collapsed .i_left_menu_box i,
.juuvix_live_context.sidebar-collapsed .live_item_cont svg,
.juuvix_live_context.sidebar-collapsed .live_item_cont i {
    margin: 0 !important;
}

/* Rotar flecha cuando está colapsado */
.juuvix_live_context.sidebar-collapsed .sidebar-toggle-btn svg {
    transform: rotate(180deg);
}

/* --- BOTÓN TENDENCIAS - ESTILO BARRA FLOTANTE (IGUAL QUE CANALES) --- */
.juuvix_live_context .i_left_menu_box.g_feed {
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.15) 0%, rgba(255, 69, 0, 0) 60%) !important;
    border: none !important;
    /* Quitar borde izquierdo antiguo */
    border-radius: 4px 50px 50px 4px !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    /* Espacio para barra flotante */
    justify-content: flex-start !important;
    position: relative !important;
}

/* BARRA FLOTANTE TENDENCIAS */
.juuvix_live_context .i_left_menu_box.g_feed::before {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 5px !important;
    height: 70% !important;
    /* Un poco más pequeña que el contenedor */
    background: #FF4500 !important;
    border-radius: 10px !important;
    /* Barra redondeada */
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.6) !important;
    z-index: 5 !important;
}

/* Hover Tendencias */
.juuvix_live_context .i_left_menu_box.g_feed:hover {
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.5) 0%, rgba(255, 69, 0, 0.1) 100%) !important;
    border-left: none !important;
    /* Asegurar que no vuelva el borde */
    transform: translateX(2px) !important;
}

.juuvix_live_context .i_left_menu_box.g_feed:hover::before {
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.9) !important;
    background: #FF8C00 !important;
}


/* --- TÍTULO CANALES RECOMENDADOS - CLON EXACTO DE TENDENCIAS (.g_feed) --- */
.juuvix_live_context .recommended_header {
    /* Mismas propiedades que .g_feed */
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.15) 0%, rgba(255, 69, 0, 0) 60%) !important;
    border: none !important;
    border-radius: 4px 50px 50px 4px !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    justify-content: flex-start !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 200px !important;
    max-width: 200px !important;
    height: 51px !important;
    /* Altura estándar de píldora */
    margin: 5px auto !important;
    /* Margen estándar */
}

/* BARRA FLOTANTE CANALES (Copia exacta de .g_feed::before) */
.juuvix_live_context .recommended_header::before {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 5px !important;
    height: 70% !important;
    background: #FF4500 !important;
    border-radius: 10px !important;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.6) !important;
    z-index: 5 !important;
    display: block !important;
}

/* Hover Canales (Igual que Tendencias) */
.juuvix_live_context .recommended_header:hover {
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.5) 0%, rgba(255, 69, 0, 0.1) 100%) !important;
    border-left: none !important;
    transform: translateX(2px) !important;
}

.juuvix_live_context .recommended_header:hover::before {
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.9) !important;
    background: #FF8C00 !important;
}

/* Ajuste del texto interno */
.juuvix_live_context .recommended_header .beast-title-text {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    padding-left: 10px !important;
    /* Espacio desde la barra */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.juuvix_live_context .recommended_header .beast-title-text .line1 {
    font-size: 13px !important;
    font-weight: 900 !important;
    /* Bold */
    color: #fff !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.juuvix_live_context .recommended_header .beast-title-text .line2 {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #FF8C00 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 0.9 !important;
}

/* Colapso */
.juuvix_live_context.sidebar-collapsed .recommended_header {
    width: 60px !important;
    padding: 0 !important;
    justify-content: center !important;
    background: none !important;
    box-shadow: none !important;
}

.juuvix_live_context.sidebar-collapsed .recommended_header::before {
    display: none !important;
}

.juuvix_live_context.sidebar-collapsed .recommended_header .beast-title-text {
    display: none !important;
}

/* LA BARRA VERTICAL NARANJA (FLOTANTE, INTERNA) */
html body .juuvix_live_context .recommended_header::before {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    /* Separación clara del borde */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 28px !important;
    background: #FF8C00 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.8) !important;
    display: block !important;
    z-index: 10 !important;
}

/* TEXTO */
html body .juuvix_live_context .recommended_header .beast-title-text {
    margin-left: 35px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.15 !important;
    padding: 0 !important;
    text-align: left !important;
    border: none !important;
}

html body .juuvix_live_context .recommended_header .beast-title-text .line1 {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

html body .juuvix_live_context .recommended_header .beast-title-text .line2 {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #FF8C00 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 1 !important;
}

/* Colapso */
html body .juuvix_live_context.sidebar-collapsed .recommended_header {
    width: 60px !important;
    padding: 0 !important;
    justify-content: center !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

html body .juuvix_live_context.sidebar-collapsed .recommended_header::before {
    display: none !important;
}

html body .juuvix_live_context.sidebar-collapsed .recommended_header .beast-title-text {
    display: none !important;
}