body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #121212;
    color: white;
    
    /* Background */
    background-image: url('asset/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    /* Flexbox */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* O flex-end si lo necesitas */
    align-items: center;
    
    /* Dimensiones */
    min-height: 100vh;
    overflow: hidden;
    overflow-x: hidden;
    
    position: relative;
}


.radio-container {
    background-color: var(--accent-color);
    border-radius: 90px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 70px;
    width: 98%;
    max-width: 500px;
    position: fixed !important;
    z-index: 10 !important;
    overflow: hidden;
    margin: 0 !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
}

.radio-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
}

.album-art {
    width: 50px;
    height: 50px;
    border-radius: 90px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    z-index: 2;
}

.album-art1 {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    transition: transform 0.1s ease-out, background-image 0.5s ease-in-out;
    will-change: transform;
    overflow: hidden;
}

.radio-info {
    flex: 1;

    margin-left: 10px;
    z-index: 2;
}

.radio-info h2 {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    margin: 0;
    color: #fff;
}

.radio-info p {
    font-family: 'Black Ops One', sans-serif;
    margin: 5px 0 0 0;
    font-size: 14px;

}




.social-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    max-width: 500px;

    margin-top: 10px;
    padding: 110px 0;
    margin: 0 auto;
    /* Centra el contenido */
}

.social-container {
    position: relative;
    top: 0;
}

.social-icons {
    display: flex;
    gap: 15px;

}

.social-icons a {
    color: white;
    font-size: 24px;
    text-decoration: none;
}

.social-icons a:hover {
    color: #f4b400;
}

.live-tv-btn {
    display: flex;
    align-items: center;
    background-color: var(--accent-color-rgb);
    color: #f3f3f3;
    border: none;
    border-radius: 16px;
    padding: 6px 8px;
    font-size: 14px;
    
    text-decoration: none;
}

.live-tv-btn i {
    margin-right: 8px;
}

.live-tv-btn:hover {
    background-color: var(--accent-color);
}




* {
    box-sizing: border-box;
}


/* Estilos del contenedor del título */
.title-container {
    position: absolute;  /* ← AÑADE ESTO */
    top: 450px;          /* ← O AJUSTA LA CANTIDAD QUE QUIERAS */
    width: 100%;
    max-width: 450px;
    overflow: hidden;
}

/* Para pantallas móviles */
@media (max-width: 768px) {
    .title-container {
        width: 100%;
        padding-left: 10px;
        margin-top: 15px;     /* ← AJUSTA para móviles */
    }
}

/* Para pantallas grandes (escritorio) */
@media (min-width: 768px) {
    .title-container {
        width: auto;
        margin: 0 auto;
        margin-top: 30px;     /* ← AJUSTA para escritorio */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Estilos para h1 - REDUCIDO */
.title-container h1 {
    font-family : 'Anton', sans-serif;
    font-size: 25px;          /* ↓ De 25px a 18px */
    color: white;
    margin: 0px 0 8px 0;      /* ↓ De 15px a 8px */
}

/* Estilos para h3 - REDUCIDO */
.title-container h3 {
    font-family: 'Anton', sans-serif;
    font-size: 14px;          /* ↓ De 18px a 14px */
    color: white;
    margin: 0 0 5px 0;        /* ↓ De 10px a 5px */
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    animation: scroll-text 10s linear infinite;
}

@keyframes scroll-text {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}







/* Estilos del botón "Señal en Vivo" */
.live-signal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
    /* Color rojo */
    color: white;
    /* Color del texto */
    font-size: 12px;
    border: none;
    
    border-radius: 25px;
    padding: 5px 10px;
    cursor: pointer;
    margin-bottom: 10px;
    /* Espacio entre el botón y el título */
    animation: blink 1s infinite;
    /* Efecto parpadeante */
}

/* Ícono dentro del botón */
.live-signal-btn i {
    margin-right: 8px;

}

/* Efecto parpadeante */
@keyframes blink {

    0%,
    100% {
        background-color: red;
    }

    50% {
        background-color: darkred;
    }
}

/* Botón al pasar el mouse (solo versión escritorio) */
.live-signal-btn:hover {
    background-color: crimson;
}

.container {
    overflow: hidden;
    /* Evita que los hijos desborden el contenedor principal */
}



.main-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}








/* Círculo con el logo */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* Estilos del logo */
.logo-container {
    width: 100vw;
    /* Ocupa todo el ancho de la pantalla */
    height: 100vh;
    /* Ocupa todo el alto de la pantalla */
    border-radius: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    transition: transform 0.1s ease-out;
    z-index: -1;
    /* Lo envía al fondo */
}




.logo-container img {
    width: 100%;
    /* Escala la imagen para que ocupe todo el contenedor */
    height: 100%;
    object-fit: cover;
    /* Asegura que el logo mantenga su proporción y rellene el contenedor */
}

/* Animación de rotación */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animación de pulsación */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1) translateX(-50%);
    }

    50% {
        transform: scale(1.1) translateX(-50%);
    }
}







.volume-control {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
    /* Espacio entre elementos */
}

.volume-control span {
    font-size: 14px;
    color: white;
    /* Color del texto */
}

#volumeSlider {
    width: 100px;
    /* Ancho del slider */
    cursor: pointer;
    background-color: #f4b400;
    /* Color amarillo del slider */
    accent-color: #f4b400;
    /* Asegura el color en navegadores modernos */
    appearance: none;
    /* Personaliza el estilo del slider */
}

/* Estilo del slider personalizado */
#volumeSlider::-webkit-slider-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f4b400;
    /* Color amarillo del botón del slider */
    border: 2px solid #1e1e1e;
    /* Borde oscuro para contraste */
    cursor: pointer;
}

#volumeSlider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f4b400;
    border: 2px solid #1e1e1e;
    cursor: pointer;
}

#volumeSlider::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 5px;
    background: #f4b400;
    /* Color del track */
}

#volumeSlider::-moz-range-track {
    height: 5px;
    border-radius: 5px;
    background: #f4b400;
}










/* Botón de hamburguesa (solo visible en móviles) */
.menu-icon {
    display: none;
    /* Se mostrará solo en móviles */
    position: fixed;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    /* Transparente con leve opacidad */
    color: white;
    font-size: 26px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    z-index: 1000;
    transition: background 0.3s, transform 0.2s;
}

/* Efecto al pasar el mouse */
.menu-icon:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* Menú lateral con efecto glassmorphism */
.side-menu {
    position: fixed;
    top: 0;
    left: -80%;
    /* Oculto inicialmente */
    width: 80%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Fondo oscuro con transparencia */
    backdrop-filter: blur(10px);
    /* Efecto glassmorphism */
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1);
    padding: 20px;
    transition: left 0.4s ease-in-out;
    z-index: 999;
}

/* Botón de cerrar menú */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 26px;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

/* Efecto al pasar el mouse en botón de cerrar */
.close-btn:hover {
    transform: rotate(90deg);
}

/* Lista del menú */
.side-menu ul {
    list-style: none;
    padding: 0;
    margin-top: 50px;
}

/* Botones del menú */
.side-menu ul li {
    margin: 20px 0;
}

.side-menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    /* Espacio entre el ícono y el texto */
    padding: 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    /* Botón semi-transparente */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    transition: background 0.3s, transform 0.2s;
}

/* Efecto al pasar el mouse en los botones */
.side-menu ul li a:hover {
    background: rgba(255, 255, 255, 0.3);
    /* Más brillo */
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Íconos dentro de los botones */
.side-menu ul li a i {
    font-size: 22px;
}

/* Solo se muestra en pantallas pequeñas */
@media (max-width: 768px) {
    .menu-icon {
        display: block;
    }
}



/* Personalización del fondo del modal */
.modal-content {
    background: rgba(0, 0, 0, 0.8);
    /* Fondo negro con 80% de transparencia */
    backdrop-filter: blur(10px);
    /* Efecto de desenfoque */
    color: white;
    /* Texto en blanco */
    border-radius: 10px;
    /* Bordes redondeados */

    border: 2px solid rgba(255, 255, 255, 0.2);
    /* Borde sutil */
}

/* Cambiar color del encabezado */
.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    /* Línea sutil */
}

/* Cambiar color del botón de cierre */
.modal-header .btn-close {
    filter: invert(1);
    /* Hace el botón blanco */
}

/* Cambiar color del pie del modal */
.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Botón de cerrar en el pie del modal */
.modal-footer .btn-secondary {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    transition: background 0.3s ease;
}

.modal-footer .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.4);
}










/* Personalización del modal de LIVE TV */
#liveTvModal .modal-content {
    background: rgba(0, 0, 0, 0.8);
    /* Fondo negro con transparencia */
    backdrop-filter: blur(10px);
    /* Efecto de desenfoque */
    color: white;
    /* Texto en blanco */
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Botón de cerrar en blanco */
#liveTvModal .btn-close {
    filter: invert(1);
}

/* Estilo del footer del modal */
#liveTvModal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.mobile-menu {
    display: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 70px;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15);
    justify-content: space-around;
    align-items: center;
    z-index: 3;
    padding: 10px 0;
    gap: 5px;
}

.menu-item {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    outline: none;
    border: none; /* IMPORTANTE: remover todos los bordes */
    box-shadow: none;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.menu-item.active {
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: inset 0 -3px 0 #ffffff !important; /* Usar shadow en lugar de border */
    font-weight: bold;
}

.menu-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

.menu-item span {
    font-size: 12px;
    font-weight: 600;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* IMPORTANTE: Cuando tiene clase active */
.menu-item.active {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 3px solid #ffffff;
    font-weight: bold;
}

.menu-item:focus {
    outline: none !important;
}

.menu-item:focus-visible {
    outline: none !important;
}

@media (max-width: 768px) {
    /* Mostrar menú móvil */
    .mobile-menu {
        display: flex;
        z-index: 4;
    }

    footer {
        height: 150px;
        bottom: 70px;
    }

    canvas {
        z-index: 5;
    }
}

.center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 80vh;
}



/* Estilos para h3 font-family: 'Black Ops One', sans-serif;*/
.title-container1 h3 {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    color: white;
    margin: 0 0 10px 0;
    white-space: nowrap;

    overflow: hidden;
    position: relative;
    animation: scroll-text 10s linear infinite;
    /* Añadida animación para la canción */
}

/* Animación de desplazamiento del texto */
@keyframes scroll-text {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}



.marquee {
    width: 250px;
    /* Ajusta según tu diseño */
    overflow: hidden;
    font-size: 18px;
    white-space: nowrap;
    position: relative;
}

.marquee span {
    display: inline-block;
    min-width: 100%;
    /* Que siempre sea más ancho que el contenedor */
    animation: scroll-text 10s linear infinite;
}

@keyframes scroll-text {
    0% {
        transform: translateX(100%);
        /* Empieza fuera a la derecha */
    }

    100% {
        transform: translateX(-100%);
        /* Termina fuera a la izquierda */
    }
}

.marquee1 {
    width: 250px;
    /* Ajusta según tu diseño */
    overflow: hidden;
    font-size: 14px;
    white-space: nowrap;
    position: relative;
}

.marquee1 span {
    display: inline-block;
    min-width: 100%;
    /* Que siempre sea más ancho que el contenedor */
    animation: scroll-text 10s linear infinite;
}

@keyframes scroll-text {
    0% {
        transform: translateX(100%);
        /* Empieza fuera a la derecha */
    }

    100% {
        transform: translateX(-100%);
        /* Termina fuera a la izquierda */
    }
}


.player-toggle {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

.on::before {
    content: "\f04b";
    /* fa-play */
}

.playing::before {
    content: "\f04c";
    /* fa-pause */
}


#background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    /*filter: blur(20px);*/
    z-index: -1;
}

#logoOrArtwork,
#logoOrArtwork1 {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

#headerTitle {
    font-size: 2rem;
    font-weight: bold;
    color: white;
}

#currentSong {
    font-size: 1.2rem;
    color: white;
}





#visualizer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Detrás de la carátula */
}

.album-container {
    position: relative;
    width: 300px;
    /* Ajusta al tamaño de tu diseño */
    height: 300px;
    display: inline-block;
}

#visualizer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Detrás de la carátula */
}

#album {
    position: relative;

    width: 50px;
    /* Ajusta el tamaño según necesites */
    height: 50px;
    z-index: 2;
    /* Encima del visualizador */
    border-radius: 90px;
    /* Opcional */
}




/* Contenedor del logo */
#leftLogo {
    position: absolute;
    left: 20px;
    top: 28px;
    z-index: 100;
    cursor: pointer;
}

/* Imagen del logo */
#leftLogo img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto hover */
#leftLogo img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}



.modal-content {
    background-color: var(--background-color);
    /* gris oscuro */
    color: white;
}

.modal-header {
    background-color: var(--background-color);
    color: rgb(255, 255, 255);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.modal-footer {
    background: linear-gradient(to right, var(--background-color), var(--background-color));
    /* Azul marino a azul brillante */
    height: 6px;
    min-height: 6px;
}

.modal-body {
    background-color: rgb(29, 28, 28);
}





/* Estilo para el botón */
.control-btn {
    cursor: pointer;
    background-color: var(--accent-color-rgb);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #ffffff;
    z-index: 2;
    position: relative;
}


/* PPLAYER*/

.floating-player.show {
    bottom: 0;
}

/* Header */
.player-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 25px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
}

.activate-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

.activate-logo-container {
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.activate-logo-container img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Contenido - PRINCIPAL */
.player-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    text-align: center;
    overflow-y: auto;
    overflow-x: visible;  /* CAMBIO: de hidden a visible */
}

/* Album Art */
.floating-album-art {
    width: clamp(200px, 70vw, 260px);
    height: clamp(200px, 70vw, 260px);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.floating-album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.play-circle {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-circle:hover {
    transform: scale(1.1);
}

/* Live Status */
.live-status {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 300px;
    flex-shrink: 0;
}

.live-status::before,
.live-status::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.live-status span {
    background: #FFFFFF;
    color: var(--primary);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* Song Info */
.floating-song-info {
    flex-shrink: 0;
    margin: 10px 0;
    width: 100%;
    overflow: hidden;
}

.floating-song-info h1,
#floatingCurrentSong {
    color: #FFFFFF;
    margin: 8px 0 5px 0;
    font-size: clamp(16px, 5vw, 24px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    padding: 0 120px;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}

.floating-song-info h2,
#floatingCurrentArtist {
    color: #E0E7FF;
    margin: 5px 0 0 0;
    font-size: clamp(12px, 3vw, 16px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 120px;
    white-space: nowrap;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(150%);
    }
    100% {
        transform: translateX(-150%);
    }
}
/* Controles */
.floating-player-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px 0;
    flex-shrink: 0;
}

.floating-control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 26px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.floating-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.floating-control-btn.main-play {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    width: 75px;
    height: 75px;
    font-size: 32px;
}

/* Sociales */
.social-icons-floating {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0;
    flex-shrink: 0;
}

.social-icon-floating {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
    border: 3px solid white;
    background: transparent;
    flex-shrink: 0;
}

.social-icon-floating:hover {
    transform: translateY(-5px);
}

.social-icon-floating.facebook {
    background: #1877F2;
}

.social-icon-floating.tiktok {
    background: #000000;
}

.social-icon-floating.whatsapp {
    background: #25D366;
}

.social-icon-floating.instagram {
    background: #E4405F;
}

.social-icon-floating.youtube {
    background: #FF0000;
}

/* Website Button */
.website-button {
    background: #FFFFFF;
    color: var(--primary);
    padding: 5px 32px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    margin-bottom: 10px;
}

.website-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* Responsive - Móviles pequeños */
@media (max-height: 600px) {
    .player-content {
        gap: 8px;
        padding: 12px;
    }

    .floating-album-art {
        width: clamp(150px, 60vw, 200px);
        height: clamp(150px, 60vw, 200px);
    }

    .floating-song-info h1 {
        font-size: clamp(14px, 4vw, 18px);
        margin: 5px 0 3px 0;
    }

    .floating-song-info h2 {
        font-size: clamp(10px, 2.5vw, 12px);
        margin: 3px 0 0 0;
    }
}


/* ============================================
   INICIO DE TV player
   ============================================ */

.player-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.player-container {
    position: relative;
    width: 90vw;
    max-width: none;
    background-color: #000;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid #374151;
}

@media (min-width: 1024px) {
    .player-container {
        max-width: 600px;
    }
}

.video-frame {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: #222;
}

.video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Botón Cast - CENTRADO FORZADO */
.cast-button-container {
    position: absolute;
    top: 3rem;
    left: 50%;
      transform: translateX(calc(-50% - 2rem)); /* Cambiar de -3.5rem a -2rem */
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: none; /* Oculto por defecto */
    cursor: pointer;
    transition: all 0.3s ease;
}

.cast-button-container:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateX(calc(-50% - 2rem)) scale(1.05); /* Cambiar también aquí */
}

.cast-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
    height: 1.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}

.cast-button svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
}

/* Cuando está transmitiendo */
.cast-button-container.casting {
    background-color: rgba(33, 150, 243, 0.3);
    animation: pulse-cast 2s infinite;
}

.cast-button-container.casting .cast-button {
    background-color: rgba(33, 150, 243, 0.9);
}

.cast-button-container.casting .cast-button svg path {
    fill: white !important;
}

@keyframes pulse-cast {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
    }
    50% { 
        box-shadow: 0 0 0 10px rgba(33, 150, 243, 0);
    }
}

/* Botón Cerrar */
.close-button-container {
    position: absolute;
    top: 3rem;
    left: 50%;
      transform: translateX(calc(-50% + 2rem)); /* Cambiar de -50% a -50% + 2rem */
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.close-button {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}

.close-button::before,
.close-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 2px;
    background-color: #333;
    transform: translate(-50%, -50%) rotate(45deg);
}

.close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.player-modal.active {
    display: flex;
    animation: fadeIn 0.3s ease-in-out;
}

.toggle-button {
    background-color: #3b82f6;
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-button:hover {
    background-color: #2563eb;
    transform: scale(1.05);
}

/* Estilos generales */
.equalizer {
    position: absolute;
    margin: 0px;
    right: 25px;
    top: 119px;
}

/* Media Query para pantallas grandes */
@media (min-width: 1024px) {
    .equalizer {
        display: none; /* Oculta el equalizer en pantallas de 1024px o más */
    }
}

/* RESPONSIVE MÓVIL - TV PLAYER */

@media (max-width: 768px) {
  .player-modal.active {
    display: flex !important;
  }

  .player-container {
    width: 95vw !important;
    max-width: 95vw !important;
  }

  .cast-button-container,
  .close-button-container {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
}
/* ============================================
   Fin DE TV player
   ============================================ */

#chatModal {
    position: fixed;
    left: 0;
    bottom: -100%; /* Comienza fuera de la pantalla */
    width: 100%;
    height: 70%;
    background: #fff;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
    transition: bottom 0.4s ease-in-out; /* Transición para mostrar y ocultar el modal */
    z-index: 1000;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
}

/* Barra superior donde se encuentra el botón de cerrar */
#chatModal .chat-header {
    position: absolute;
    top: 0;
    left: 0;
	z-index: 1000;
    width: 100%;
    height: 50px; /* Altura de la barra */
    background: var(--bg-gradient);; /* Color de fondo de la barra */
    display: flex;
    justify-content: flex-end; /* Coloca el botón de cerrar en la esquina derecha */
    align-items: center; /* Centra el botón verticalmente */
    padding: 0 10px; /* Espacio alrededor del botón */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); /* Sombra para la barra */
}

/* Estilo para el botón de cerrar */
#closeChat {
    background: transparent;
    border: none;
    font-size: 30px; /* Tamaño del ícono del botón */
    cursor: pointer;
    color: #ffffff;
}

/* Línea de separación en la parte inferior de la barra */
#chatModal .chat-header:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ccc;
}

/* Contenedor de chat */
#chatModal .chat-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


 /* Contador de oyentes */
         * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #1a1a1a;
            min-height: 100vh;
        }

        /* Contador de oyentes en la parte superior - DESKTOP/PC */
        .listeners-container {
            position: fixed;
            z-index: 100;
            right: 0;
            top: 100px !important; 
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--primary);
            border-radius: 35px 0 0 35px;
            padding: 10px 18px 10px 20px;
            box-shadow: -5px 5px 25px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .listeners-container:hover {
            padding-left: 24px;
            padding-right: 22px;
            box-shadow: -8px 8px 35px rgba(0, 0, 0, 0.4);
            background: rgb(168, 168, 168);
        }

        .listeners-container svg {
            width: 28px;
            height: 28px;
            color: #fffefe;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .listeners-container:hover svg {
            transform: scale(1.15) rotate(5deg);
        }

        .listeners-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        #listenersDisplay {
            font-size: 22px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1;
            transition: all 0.3s ease;
        }

        .listeners-text {
            font-size: 11px;
            color: #fcfcfc;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 1;
        }

        /* Animación de actualización */
        .updating {
            animation: countUpdate 0.4s ease;
        }

        @keyframes countUpdate {
            0% { 
                transform: scale(1.3); 
                color: #4338ca; 
            }
            50% {
                transform: scale(0.9);
            }
            100% { 
                transform: scale(1); 
                color: #667eea; 
            }
        }

        /* Pulso sutil continuo */
        @keyframes subtlePulse {
            0%, 100% { 
                box-shadow: -5px 5px 25px rgba(0, 0, 0, 0.3);
            }
            50% { 
                box-shadow: -5px 5px 25px rgba(102, 126, 234, 0.3);
            }
        }

        .listeners-container {
            animation: subtlePulse 3s ease-in-out infinite;
        }

        /* Responsive para tablets */
        @media (max-width: 768px) {
            .listeners-container {
                top: 80px;
                padding: 5px 10px 5px 12px;
                gap: 6px;
            }

            .listeners-container svg {
                width: 18px;
                height: 18px;
            }

            #listenersDisplay {
                font-size: 14px;
            }

            .listeners-text {
                font-size: 8px;
            }
        }

        /* Responsive para móviles */
        @media (max-width: 480px) {
            .listeners-container {
                top: 80px;
                padding: 4px 8px 4px 10px;
                gap: 5px;
            }

            .listeners-container svg {
                width: 16px;
                height: 16px;
            }

            #listenersDisplay {
                font-size: 13px;
            }

            .listeners-text {
                font-size: 7px;
            }
        }

        /* Móviles muy pequeños - ocultar texto */
        @media (max-width: 360px) {
            .listeners-text {
                display: none;
            }
            
            .listeners-info {
                gap: 0;
            }
        }
        
        
/* ============================================
   MODAL VIDEOS YOUTUBE - ESTILO APP MÓVIL 
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.modal-videos {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    overflow: hidden;
}

.modal-videos.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CONTENEDOR PRINCIPAL - CRUCIAL */
.modal-videos-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #000;
    overflow: hidden;
}

/* Header del modal - FIJO */
.modal-videos-header {
    background: var(--bg-gradient);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.btn-close-videos {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: white;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.btn-close-videos svg {
    width: 22px;
    height: 22px;
    stroke: white;
    stroke-width: 3;
}

.modal-videos-header h3 {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    flex: 1;
}

/* REPRODUCTOR - FIJO */
.video-player-container {
    width: 100%;
    background: #000;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.video-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.video-player-container:hover .video-player-controls {
    opacity: 1;
}

.video-time {
    color: white;
    font-size: 11px;
    font-weight: 500;
}

.btn-play-pause,
.btn-fullscreen {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
}

.btn-play-pause svg,
.btn-fullscreen svg {
    width: 18px;
    height: 18px;
    fill: white;
}

/* Info del video - FIJO */
.current-video-info {
    background: #1a1a1a;
    padding: 10px 12px;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.current-video-title {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1.3;
}

.current-video-channel {
    color: #aaa;
    font-size: 12px;
}

/* Buscador - FIJO */
.videos-search {
    background: #1a1a1a;
    padding: 10px 12px;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

.videos-search input {
    width: 100%;
    padding: 8px 12px;
    background: #2a2a2a;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.videos-search input::placeholder {
    color: #888;
}

.videos-search input:focus {
    background: #333;
    box-shadow: 0 0 0 2px var(--primary);
}

/* LISTA DE VIDEOS - CON SCROLL */
.videos-lista {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #0a0a0a;
    width: 100%;
    min-height: 0;
}

/* Video Item */
.video-item {
    display: flex;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #1a1a1a;
    flex-shrink: 0;
    overflow: hidden;
}

.video-item:active {
    background: #1a1a1a;
}

.video-item.playing {
    background: var(--primary);
}

.video-item-thumbnail {
    position: relative;
    width: 120px;
    min-width: 120px;
    height: 67px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 10px;
}

.video-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-item-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-item.playing .video-item-play {
    background: var(--primary);
}

.video-item:active .video-item-play {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-item-play svg {
    width: 18px;
    height: 18px;
    fill: white;
    margin-left: 2px;
}

.video-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.video-item-title {
    color: white;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-item.playing .video-item-title {
    color: #ffffff;
}

.video-item-desc {
    color: #888;
    font-size: 11px;
    line-height: 1.2;
    padding-left: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-left: 3px solid var(--primary);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 4px 4px 0;
    margin-top: 2px;
    display: inline-block;
    white-space: nowrap;
    animation: marquee 10s linear infinite;
    will-change: transform;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Estados especiales */
.loading-videos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 15px;
    color: white;
}

.spinner {
    width: 45px;
    height: 45px;
    border: 4px solid #333;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-videos p {
    color: #888;
    font-size: 15px;
}

.no-videos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 15px;
    text-align: center;
    color: white;
}

.no-videos svg {
    width: 70px;
    height: 70px;
    stroke: #333;
    margin-bottom: 15px;
}

.no-videos h3 {
    color: white;
    font-size: 16px;
    margin-bottom: 8px;
}

.no-videos p {
    color: #888;
    font-size: 13px;
}

/* Scrollbar personalizado */
.videos-lista::-webkit-scrollbar {
    width: 6px;
}

.videos-lista::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.videos-lista::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.videos-lista::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ===== RESPONSIVE ===== */

@media (min-width: 600px) {
    .modal-videos-header {
        padding: 10px 15px;
    }

    .modal-videos-header h3 {
        font-size: 1.05rem;
    }

    .video-item-thumbnail {
        width: 140px;
        min-width: 140px;
        height: 79px;
    }

    .video-item-title {
        font-size: 14px;
    }

    .video-item-desc {
        font-size: 12px;
    }
}

@media (min-width: 768px) {
    .modal-videos {
        padding: 0;
    }

    .modal-videos-content {
        max-width: 700px;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    }

    .video-player-container {
        padding-bottom: 42%;
    }

    .current-video-info {
        padding: 12px 15px;
    }

    .current-video-title {
        font-size: 15px;
    }

    .videos-search {
        padding: 12px 15px;
    }

    .video-item {
        padding: 12px 15px;
    }

    .video-item-thumbnail {
        width: 160px;
        min-width: 160px;
        height: 90px;
    }
}

@media (min-width: 1024px) {
    .modal-videos-content {
        max-width: 900px;
    }

    .video-player-container {
        padding-bottom: 40%;
    }

    .video-item-thumbnail {
        width: 180px;
        min-width: 180px;
        height: 101px;
    }

    .video-item-title {
        font-size: 15px;
    }
}

@media (min-width: 1440px) {
    .modal-videos-content {
        max-width: 1100px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .video-player-container {
        padding-bottom: 65%;
    }

    .current-video-info {
        padding: 8px 12px;
    }

    .video-item {
        padding: 6px 12px;
    }

    .video-item-thumbnail {
        width: 90px;
        min-width: 90px;
        height: 50px;
    }
}
 
 
 


/* ============================================
   MODAL PROGRAMACIÓN - CSS FINAL LIMPIO
   ============================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-programacion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-programacion.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-programacion-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100000;
}

.modal-programacion.active .modal-programacion-content {
    transform: translateY(0);
}

/* ======== ENCABEZADO ======== */
.modal-programacion-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    background: var(--primary);
    color: #fff;
    padding: 14px 0;
    border-bottom: 3px solid var(--primary);
    z-index: 1010;
}

.btn-close-programacion {
    position: absolute;
    left: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-programacion:hover {
    color: #7a2fff;
}

.btn-close-programacion svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    margin-right: -20px;  /* Reduce espacio */
}

.modal-programacion-header::after {
    content: 'PROGRAMACI\00D3N';
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-left: -140px;
}

.logo-header {
    display: none;
}

/* ======== DÍAS ======== */
.dias-semana {
    display: flex;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 8px 10px;
    overflow-x: auto;
    border-bottom: 1px solid #ddd;
    scroll-behavior: smooth;
    white-space: nowrap;
    gap: 2px;
}

.dias-semana::-webkit-scrollbar {
    height: 4px;
}

.dias-semana::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.dias-semana::-webkit-scrollbar-track {
    background: transparent;
}

.dia-item {
    flex: 1 0 auto;
    text-align: center;
    color: #333;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: transparent;
    border-radius: 8px;
    display: inline-block;
    border: none;
    line-height: 1;
}

.dia-item:hover {
    background: rgba(122, 47, 255, 0.1);
}

.dia-item.active {
    background: #e0e0e0;
    color: var(--primary);
}

.dia-numero {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.dia-nombre {
    display: block;
    font-size: 11px;
    color: #777;
    margin-top: 2px;
}

/* ======== LISTA DE PROGRAMAS ======== */
.programacion-lista {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    background: #f5f5f5;
}

.programacion-lista::-webkit-scrollbar {
    width: 6px;
}

.programacion-lista::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.programacion-lista::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* ======== CARD PROGRAMA ======== */
.programa-card {
    display: flex;
    gap: 12px;
    padding: 14px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    overflow: visible;
    background: #ffffff;
    border-radius: 16px;
    margin: 10px 12px;
    align-items: center;
    position: relative;
}

.programa-card:nth-child(even) {
    background: #fafafa;
}

.programa-card:hover {
    box-shadow: 0 4px 12px rgba(218, 11, 11, 0.12);
    transform: translateY(-2px);
}

/* ======== HORA ======== */
.programa-hora-container {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    min-width: 50px;
}

.programa-hora-icon {
    display: none;
}

.programa-hora-icon svg {
    display: none;
}

.programa-hora {
    color: #333;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    margin: 0;
}

/* ======== IMAGEN ======== */
.programa-imagen-container {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    background: #eaeaea;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border: none;
    margin: 0 -5px;
}

.programa-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;
}

/* ======== BADGE EN DIRECTO ======== */
.badge-directo {
    position: absolute;
    top: 8px;
    left: 170px;
    background: #ff0000;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    border-radius: 12px;
    padding: 4px 10px;
    animation: parpadeo 1.3s infinite;
    box-shadow: 0 2px 6px rgba(255, 0, 0, 0.5);
    white-space: nowrap;
    border: none;
    z-index: 10;
    text-transform: uppercase;
}


@keyframes parpadeo {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* ======== INFO ======== */
.programa-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-right: 8px;
}

.programa-titulo-container {
    overflow: hidden;
    width: 100%;
}

.programa-titulo {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.programa-descripcion {
    color: #999;
    font-size: 13px;
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    position: relative;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.programa-descripcion .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: scrollText 12s linear infinite;
    white-space: nowrap;
}

@keyframes scrollText {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

/* ======== MARQUEE PARA TÍTULOS ======== */
.titulo-wrapper {
    display: inline-block;
    white-space: nowrap;
    animation: none;
}

.titulo-wrapper.marquee {
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 25px));
    }
}

/* ======== LOADING ======== */
.loading-programacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #666;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(122, 47, 255, 0.2);
    border-top-color: #7a2fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-programacion p {
    font-size: 14px;
    color: #666;
}

/* ======== NO PROGRAMACIÓN ======== */
.no-programacion {
    text-align: center;
    padding: 80px 20px;
    color: #999;
}

.no-programacion svg {
    width: 60px;
    height: 60px;
    opacity: 0.3;
    margin-bottom: 15px;
    stroke: #999;
}

.no-programacion p {
    font-size: 14px;
    margin: 8px 0;
}

.no-programacion button {
    margin-top: 20px;
    background: #ff0000;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.no-programacion button:hover {
    background: #cc0000;
}

.menu-item.active {
    background: rgba(255, 255, 255, 0.25);
}
/* Estilos del menú móvil */
.menu-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    gap: 4px;
    padding: 10px 12px;
    transition: all 0.3s ease;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 11px;
    outline: none !important; /* AGREGADO */
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* Remover estados de enlace */
.menu-item:active {
    background: transparent !important;
    outline: none !important;
}

.menu-item:focus {
    background: transparent !important;
    outline: none !important;
}

.menu-item:focus-visible {
    background: transparent !important;
    outline: none !important;
}

/* Solo active cuando abrimos modal */
.menu-item.active {
    background: rgba(255, 255, 255, 0.25) !important;
}
  /* ============================================
   FIN MODAL PROGRAMACIÓN 
   ============================================ */
 
 
 
 /* ============================================
   === NOTICIAS - 2 COLUMNAS MÁXIMA FUERZA ===
   ============================================ */

/* DESTRUIR CUALQUIER HERENCIA */
#noticiasGrid,
#noticiasGrid * {
    all: revert;
}

#noticiasGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: minmax(auto, max-content) !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#noticiasGrid > div {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
}

#noticiasGrid .noticia-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
}

.noticias-scroll-container {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 15px !important;
    width: 100% !important;
}

/* ========== BOTÓN SCROLL TO TOP ========== */
.btn-scroll-top {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

.btn-scroll-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-scroll-top:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

.btn-scroll-top svg {
    width: 24px !important;
    height: 24px !important;
    stroke: white !important;
    fill: none !important;
    stroke-width: 2 !important;
}

/* ========== MODAL NOTICIAS ========== */
.modal-noticias {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10002 !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
}

.modal-noticias.closing {
    animation: slideDownClose 1.5s ease-out forwards !important;
}

@keyframes slideDownClose {
    0% {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
    100% {
        transform: translateY(100%) !important;
        opacity: 0 !important;
    }
}

.modal-noticias.active {
    display: flex !important;
    flex-direction: column;
    animation: slideUpOpen 2.25s ease-out !important;
}

@keyframes slideUpOpen {
    from {
        transform: translateY(100%) !important;
        opacity: 0 !important;
    }
    to {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
}

.modal-noticias-content {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.modal-noticias-header {
    background: var(--primary);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.btn-close-noticias {
    position: absolute;
    left: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.btn-close-noticias:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.btn-close-noticias svg {
    width: 24px;
    height: 24px;
    stroke: white;
    fill: none;
}

.modal-noticias-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
    font-weight: 700;
}

.filtros-container {
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
}

.filtros {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 !important;
    overflow-x: auto;
    padding-bottom: 8px;
}

.filtro-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid transparent;
    color: #fff;
    padding: 4px 10px;
    border-radius: 18px;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    transition: all 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}

.filtro-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.filtro-btn.active {
    background: var(--primary);
    border-color: #fff;
}

/* ========== TARJETAS NOTICIAS ========== */
.noticia-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.noticia-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) !important;
}

.noticia-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    background: var(--primary) !important;
    color: #fff !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    z-index: 2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.noticia-imagen {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
    background: linear-gradient(135deg, var(--primary) 0%, rgba(0, 0, 0, 0.1) 100%) !important;
}

.noticia-contenido {
    padding: 12px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.noticia-fuente {
    font-size: 10px !important;
    color: #9ca3af !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

.noticia-titulo {
    font-size: 0.95rem !important;
    color: #1f2937 !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.noticia-descripcion {
    color: #6b7280 !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex-grow: 1 !important;
}

.noticia-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 8px !important;
    border-top: 1px solid #e5e7eb !important;
    margin-top: auto !important;
}

.noticia-fecha {
    font-size: 10px !important;
    color: #d1d5db !important;
    font-weight: 500 !important;
}

.noticia-leer {
    color: var(--primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 11px !important;
    transition: all 0.3s !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.noticia-leer:hover {
    opacity: 0.8 !important;
    transform: translateX(2px) !important;
}

/* ========== MODAL DETALLE ========== */
.modal-noticia-detalle {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    z-index: 10003 !important;
    overflow-y: auto;
    touch-action: pan-y !important;
    transform: translateY(100%) !important;
    opacity: 0 !important;
    transition: none !important;
}

.modal-noticia-detalle.active {
    display: block !important;
    animation: slideUpOpen 2.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.modal-noticia-detalle.closing {
    animation: slideDownClose 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.modal-noticia-detalle-content {
    position: relative;
    background: #1a1a1a;
    max-width: 900px;
    margin: 0 auto;
    min-height: 100vh;
    color: #ffffff;
}

.detalle-header-bg {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.detalle-header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detalle-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.7) 70%,
            rgba(26, 26, 26, 1) 100%);
}

.detalle-controls {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 10;
}

.btn-control {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-control:hover {
    background: #ffffff;
    transform: scale(1.05);
}

.btn-control svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.detalle-header-info {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    padding: 0 25px;
    z-index: 5;
}

.detalle-titulo-overlay {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.detalle-scroll-content {
    background: #1a1a1a;
    padding: 25px;
    color: #ffffff;
}

.detalle-meta-info {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detalle-fecha-info {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.detalle-fuente-info {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fuente-nombre {
    color: var(--primary);
    font-weight: 700;
}

.categoria-nombre {
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
}

.separador {
    color: rgba(255, 255, 255, 0.3);
}

.detalle-video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    margin-bottom: 25px;
    border-radius: 12px;
    overflow: hidden;
}

.detalle-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.detalle-texto-contenido {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
}

.detalle-texto-contenido p {
    margin-bottom: 18px;
}

.detalle-texto-contenido img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 25px 0;
    display: block;
}

.detalle-texto-contenido h1,
.detalle-texto-contenido h2,
.detalle-texto-contenido h3 {
    color: #ffffff;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

.detalle-texto-contenido strong,
.detalle-texto-contenido b {
    color: #ffffff;
    font-weight: 700;
}

.detalle-texto-contenido a {
    color: var(--primary);
    text-decoration: underline;
}

.detalle-url-container {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-leer-completo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary);
    color: white;
    padding: 14px 28px;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-leer-completo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    #noticiasGrid {
        grid-template-columns: 1fr !important;
    }

    .modal-noticias-content {
        max-width: 100%;
    }

    .detalle-header-bg {
        height: 350px;
    }

    .detalle-titulo-overlay {
        font-size: 1.5rem;
    }

    .detalle-scroll-content {
        padding: 20px;
    }

    .detalle-texto-contenido {
        font-size: 1rem;
    }

    .btn-scroll-top {
        bottom: 20px !important;
        right: 20px !important;
        width: 45px !important;
        height: 45px !important;
    }

    .btn-scroll-top svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ========== MODAL DETALLE - MÁXIMA ESPECIFICIDAD ========== */

html body .modal-noticia-detalle {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    z-index: 10003 !important;
    overflow: hidden !important;
}

html body .modal-noticia-detalle.active {
    display: block !important;
    overflow: hidden !important;
}

html body .modal-noticia-detalle-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

html body .detalle-header-bg {
    position: relative !important;
    width: 100% !important;
    height: 450px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

html body .detalle-header-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body .detalle-header-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.7) 70%,
            rgba(26, 26, 26, 1) 100%) !important;
}

html body .detalle-controls {
    position: absolute !important;
    top: 20px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    z-index: 10 !important;
}

html body .btn-control {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    color: #1a1a1a !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

html body .btn-control:hover {
    background: #ffffff !important;
    transform: scale(1.05) !important;
}

html body .btn-control svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
}

html body .detalle-header-info {
    position: absolute !important;
    bottom: 30px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 25px !important;
    z-index: 5 !important;
}

html body .detalle-titulo-overlay {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

/* SCROLLEABLE CONTENT - LA CLAVE */
html body .detalle-scroll-content {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #1a1a1a !important;
    padding: 25px !important;
    color: #ffffff !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

html body .detalle-meta-info {
    margin-bottom: 25px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html body .detalle-fecha-info {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 10px !important;
}

html body .detalle-fuente-info {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

html body .fuente-nombre {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

html body .categoria-nombre {
    color: var(--primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

html body .separador {
    color: rgba(255, 255, 255, 0.3) !important;
}

html body .detalle-video-embed {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;
    background: #000 !important;
    margin-bottom: 25px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

html body .detalle-video-embed iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

html body .detalle-texto-contenido {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 30px !important;
}

html body .detalle-texto-contenido p {
    margin-bottom: 18px !important;
}

html body .detalle-texto-contenido img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    margin: 25px 0 !important;
    display: block !important;
}

html body .detalle-texto-contenido h1,
html body .detalle-texto-contenido h2,
html body .detalle-texto-contenido h3 {
    color: #ffffff !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
}

html body .detalle-texto-contenido strong,
html body .detalle-texto-contenido b {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html body .detalle-texto-contenido a {
    color: var(--primary) !important;
    text-decoration: underline !important;
}

html body .detalle-url-container {
    margin-top: 35px !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html body .btn-leer-completo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--primary) !important;
    color: white !important;
    padding: 14px 28px !important;
    border: none !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: all 0.3s !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

html body .btn-leer-completo:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    html body .detalle-header-bg {
        height: 350px !important;
    }

    html body .detalle-titulo-overlay {
        font-size: 1.5rem !important;
    }

    html body .detalle-scroll-content {
        padding: 20px !important;
    }

    html body .detalle-texto-contenido {
        font-size: 1rem !important;
    }

    html body .detalle-header-info {
        bottom: 20px !important;
        padding: 0 15px !important;
    }
}

/* ========== FUERZA MÁXIMA - SCROLL CONTENIDO NOTICIAS ========== */
.detalle-scroll-content {
    flex: 1 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
    background: #1a1a1a !important;
    padding: 25px !important;
    color: #ffffff !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .detalle-scroll-content {
        flex: 1 !important;
        overflow-y: auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 20px !important;
    }
}

/* ============================================
   FIN MODAL NOTICIAS
   ============================================ */
 

/* ============================================
   SLIDER / PUBLICIDAD - MENÚ Y MODAL
   ============================================ */

/* MODAL SLIDER */
#modalSlider {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 2px;
    touch-action: none;
}

#modalSlider.open {
    display: flex !important;
    animation: slideInFromBottom 0.6s ease-out forwards;
}

#modalSlider.close {
    animation: slideOutToBottom 0.6s ease-out forwards;
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutToBottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.modal-slider-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    background: #1a1a2e;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    cursor: grab;
    user-select: none;
    touch-action: pan-x;
    transition: transform 0.1s ease-out;
}

.modal-slider-content.dragging {
    cursor: grabbing;
    transition: none;
}

.modal-slider-header {
    background: var(--primary);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-slider-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.modal-slider-header h3 {
    color: white;
    font-size: 1.2rem;
    margin: 0;
}

.btn-close-slider {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-slider svg {
    width: 24px;
    height: 24px;
}

.slider-container-modal {
    position: relative;
    width: 100%;
    flex: 1;
    background: #000;
}

.slider-wrapper-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slider-slide-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-slide-modal.active {
    opacity: 1;
}

.slider-slide-modal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.slider-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 20px;
    font-size: 1.1rem;
    text-align: center;
}

.slider-btn-modal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

.slider-btn-prev {
    left: 20px;
}

.slider-btn-next {
    right: 20px;
}

.slider-btn-modal svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.slider-indicators-modal {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.slider-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.slider-indicator.active {
    background: white;
    width: 12px;
    border-radius: 50%;
}

.slider-slide-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-slide-modal.active {
    opacity: 1;
    z-index: 1;
}

.slider-slide-modal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.slider-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 40px;
    font-size: 1.1rem;
    text-align: center;
}

.slider-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.slider-indicator.active {
    background: white;
    width: 6px;
    border-radius: 6px;
}

.btn-salida-flotante {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.3s ease;
    color: white;
}

.btn-salida-flotante:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.btn-salida-flotante:active {
    transform: scale(0.95);
}

.btn-salida-flotante svg {
    width: 24px;
    height: 24px;
}

/* Animación de entrada */
@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.btn-salida-flotante {
    animation: slideInRight 0.5s ease-out;
}

/* ============================================
   FIN MODAL SLIDER
   ============================================ */

/* ============================================
   INICIO MODAL PODCAST
   ============================================ */

/* ===== ANIMACIONES DE ENTRADA/SALIDA ===== */
@keyframes slideUpFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownToBottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* ===== PODCASTS CSS ===== */
.modal-podcasts {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    z-index: 2000;
    overflow-y: auto;
    padding: 10px;
    touch-action: none;
    transition: transform 0.1s ease-out;
}

.modal-podcasts.active {
    display: flex;
    flex-direction: column;
    animation: slideUpFromBottom 0.6s ease-out forwards;
}

.modal-podcasts.closing {
    animation: slideDownToBottom 0.6s ease-out forwards;
}

.modal-podcasts.dragging {
    transition: none;
}

.modal-podcasts-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    position: sticky;
    top: 0;
    background: var(--primary);
    padding: 12px 15px;
    border-radius: 0;
    z-index: 10;
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}

.modal-podcasts-header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.modal-podcasts-header h3 {
    color: white;
    font-size: 1.3rem;
    margin: 0;
    flex: 1;
    font-weight: 600;
}

.btn-close-podcasts {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-podcasts:hover {
    background: rgba(255, 255, 255, 0.2);
}

.podcasts-lista {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    flex: 1;
    overflow-y: auto;
}

.podcast-card-item {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
    transition: all 0.3s ease;
    display: grid;
    grid-template-columns: 90px 1fr 60px !important;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.podcast-card-item:last-child {
    border-bottom: none;
}

.podcast-card-item:hover {
    transform: translateX(3px);
}

.podcast-card-image {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--bg-gradient), #0f172a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid var(--primary);
    flex-shrink: 0;
}

.podcast-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.podcast-card-info {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.podcast-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    order: 1;
}

.podcast-card-autor {
    display: inline-block;
    background: #dc2626;
    color: white;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.podcast-card-categoria {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.podcast-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    order: 2;
}

.podcast-card-descripcion {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.2;
    display: block;
    width: 100%;
    overflow: hidden;
    order: 3;
}

.podcast-card-descripcion-marquee {
    display: inline-block;
    animation: marquee-podcast 8s linear infinite;
    white-space: nowrap;
    padding-left: 100%;
}

@keyframes marquee-podcast {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.podcast-card-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    flex-shrink: 0;
}

.btn-podcast-play {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: var(--bg-gradient) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px var(--primary) !important;
    font-size: 1.8rem !important;
}

.btn-podcast-play svg {
    width: 28px !important;
    height: 28px !important;
    fill: white !important;
}

.btn-podcast-play:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.btn-podcast-play.playing svg {
    fill: white !important;
}

.loading-podcasts {
    text-align: center;
    padding: 30px 15px;
    color: #94a3b8;
}

.podcast-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--bg-gradient);
    border-radius: 50%;
    animation: spin-podcast 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin-podcast {
    to {
        transform: rotate(360deg);
    }
}

/* ===== REPRODUCTOR FLOTANTE PODCASTS (REDUCIDO) ===== */
#podcast-player-flotante {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 20px;
    z-index: 3000;
    display: none;
    width: 85%;
    max-width: 340px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    overflow: visible;
}

#podcast-player-flotante.active {
    display: block;
}

.podcast-flotante-close-btn {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    color: black;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.podcast-flotante-close-btn:hover {
    background: #f0f0f0;
}

.podcast-flotante-content {
    padding: 0;
}

.podcast-flotante-portada-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.podcast-flotante-portada {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.podcast-flotante-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(220, 38, 38, 0.9);
    color: white;
    padding: 6px 11px;
    border-radius: 18px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.podcast-flotante-info-container {
    padding: 14px 16px;
    background: white;
}

.podcast-flotante-nombre {
    color: #1f2937;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 2px;
    line-height: 1.2;
}

.podcast-flotante-autor {
    color: #9ca3af;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* ===== BARRA DE PROGRESO PODCASTS ===== */
.podcast-flotante-progreso {
    padding: 10px 16px;
    background: #f9fafb;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
}

#podcast-barra-contenedor {
    position: relative !important;
    width: 100% !important;
    height: 6px !important;
    background: #e2e8f0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.podcast-flotante-slider {
    width: 100% !important;
    height: 4px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

.podcast-flotante-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(102, 126, 234, 0.4) !important;
}

.podcast-flotante-slider::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    background: #667eea !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(102, 126, 234, 0.4) !important;
}

.podcast-flotante-slider::-moz-range-track {
    background: transparent !important;
    border: none !important;
}

.podcast-flotante-tiempo {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    width: 100% !important;
    gap: 8px !important;
}

.podcast-flotante-tiempo span {
    display: inline-block !important;
    visibility: visible !important;
    color: var(--primary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

#podcast-flotante-tiempo-actual {
    text-align: left !important;
}

#podcast-flotante-tiempo-total {
    text-align: right !important;
}

/* ===== BOTÓN PLAY/PAUSA FLOTANTE ===== */
.podcast-flotante-play-container {
    padding: 12px 16px;
    background: white;
    display: flex;
    justify-content: center;
    border-radius: 0 0 20px 20px;
}

.podcast-flotante-play-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: var(--bg-gradient) !important;
    border: none !important;
    color: var(--primary) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.podcast-flotante-play-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.4) !important;
}

.podcast-flotante-play-btn:active {
    transform: scale(0.94) !important;
}

.podcast-flotante-play-btn svg {
    width: 22px !important;
    height: 22px !important;
    fill: var(--primary) !important;
}

/* ===== REDES SOCIALES CON BORDE BLANCO ===== */
.podcast-flotante-redes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: white;
}

.podcast-red {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    border: 3px solid white;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.podcast-red:hover {
    transform: scale(1.08);
}

.podcast-red.facebook {
    background: #1877f2;
}

.podcast-red.whatsapp {
    background: #25d366;
}

.podcast-red.instagram {
    background: #e1306c;
}

.podcast-red.web {
    background: #0ea5e9;
}

.podcast-red.youtube {
    background: #ff0000;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .podcast-card-item {
        grid-template-columns: 80px 1fr 50px;
        gap: 10px;
        padding: 10px 0;
    }

    .podcast-card-image {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }

    .podcast-card-title {
        font-size: 0.9rem;
    }

    .podcast-card-autor {
        font-size: 0.65rem;
    }

    .podcast-card-categoria {
        font-size: 0.65rem;
    }

    .btn-podcast-play {
        width: 50px !important;
        height: 50px !important;
    }

    .btn-podcast-play svg {
        width: 24px !important;
        height: 24px !important;
    }

    #podcast-player-flotante {
        max-width: 310px;
    }
}

/* ===== MENU ACTIVO ===== */
.menu-item {
    border: none !important;
    box-shadow: none !important;
}

.menu-item.active {
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: inset 0 -3px 0 #ffffff !important;
    font-weight: bold !important;
}

.menu-item:not(.active) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ============================================
   FIN MODAL PODCAST
   ============================================ */



   /* ============================================
   BOTÓN PLAY/PAUSE - REDONDO FINAL
   ============================================ */

/* RESET TOTAL DEL BOTÓN */
#playBtn {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  color: white !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: -20px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}

#playBtn:hover {
  transform: scale(1.05) !important;
  background: var(--primary) !important;
}

#playBtn:active {
  transform: scale(0.95) !important;
}

/* SVG ICON */
#playIcon {
  width: 28px !important;
  height: 28px !important;
  fill: white !important;
  transition: all 0.3s ease !important;
  display: block !important;
  flex-shrink: 0 !important;
}