/* Aregue todo su codigo personalizado aquí */

.player-button {

    font-weight: 700;
    
}

.app-player .player-button-alt {
    padding: .2vw .80vw;
  
}

.app-player .player {
    padding: .3vw;
}

.color-text {
    color: rgb(255 255 255 / 62%);
    font-weight: 400;
}

#app-player .player-program-badge {

    font-weight: 800;
   background-color: #fa1100;
}

#app-player .player-button {

    font-weight: 600;
   
}

/* Fallback visual fixes: keep volume control visible over dark player backgrounds. */
#app-player .player-range-fill {
    background-color: #ffffff !important;
}
#app-player .player-range-thumb {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
#app-player .player-range-wrapper {
    background-color: rgba(255,255,255,.35) !important;
}


/* 1.0.8 - Eliminar el círculo/anillo de enfoque de los controles,
   sin modificar el botón principal Play/Pause. */
#app-player .player-button:not(.player-button-play):focus,
#app-player .player-button:not(.player-button-play):active,
#app-player .player-button:not(.player-button-play):focus-visible {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

#app-player .player-button:not(.player-button-play)::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
}


/* 1.0.9 - Play activo: mantener un círculo definido y fijo.
   Se desactiva únicamente la animación pulse del botón Play. */
#app-player .player-button-play.is-active {
    --pulse-state: none !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.85) !important;
}
#app-player .player-button-play.is-active::before,
#app-player .player-button-play.is-active::after {
    display: none !important;
    animation: none !important;
}

/* 1.0.17 - el contenedor real del scroll de letras es #lyrics. */
#app-player #modal-lyrics .modal-body#lyrics {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
#app-player #modal-lyrics .modal-body#lyrics,
#app-player #modal-lyrics .modal-body#lyrics p {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}


/* Volume dropdown: the player may overflow for menus; the visualizer remains clipped. */
#app-player .player { overflow: visible !important; }
#app-player .player-button-volume { position: relative !important; z-index: 20 !important; }
#app-player #player-volume { z-index: 200 !important; }
#app-player .visualizer { overflow: hidden !important; }


/* F96 Player Mini - fondo dinámico según carátula/logo cuando el cristal está desactivado. */
#app-player .player.mrp-glass-disabled {
    background-color: var(--theme-bg, var(--accent, var(--player-bg-app))) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#app-player .player.mrp-glass-disabled::before {
    opacity: 1 !important;
}

/* Ecualizador: usa un tono adaptado al color dominante, evitando blanco puro. */
#app-player .visualizer canvas,
#app-player #visualizerCanvas {
    opacity: .92;
}

/* Temas manuales: aplicar el tema completo, no solo el botón Play. */
#app-player .player.mrp-fixed-theme {
    background-color: var(--theme-bg, #090909) !important;
}
#app-player .app-player,
#app-player {
    background-color: var(--theme-bg, var(--player-bg-app)) !important;
}
#app-player .player.mrp-fixed-theme::before { opacity: 0 !important; }
#app-player .player.mrp-glass-disabled.mrp-fixed-theme::before { opacity: 0 !important; }



/* F96 Player Mini - ecualizador con contraste automático.
   Solo aumenta su presencia visual; no modifica la forma ni el tamaño del reproductor. */
#app-player .visualizer {
    opacity: .45 !important;
}
#app-player .visualizer canvas,
#app-player #visualizerCanvas {
    opacity: 1 !important;
    filter: drop-shadow(0 0 3px var(--equalizer-color, rgba(255,255,255,.9)));
}

/* F96 Player Mini - escritorio: metadatos ocupan todo el ancho disponible.
   Mantiene exactamente los tamaños de letra actuales y limita cada línea
   al espacio real entre la carátula y los controles de reproducción. */
/* F96 Player Mini - móvil: ocultar completamente el ecualizador.
   El ecualizador de escritorio permanece sin cambios. */
@media (max-width: 991px) {
    #app-player .visualizer {
        display: none !important;
    }
}

@media (min-width: 992px) {
    #app-player .player-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #app-player .player-cover-title {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #app-player .player-song-name,
    #app-player .player-song-name .song-title,
    #app-player .player-cover-title .song-artist {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* En escritorio, si existiera la clase de desplazamiento del nombre,
       prevalece el comportamiento solicitado: una sola línea con ellipsis. */
    #app-player .player-cover-title .station-name.is-scrolling {
        animation: none !important;
        text-indent: 0 !important;
    }
}

/* F96 Player Mini - móvil: aprovechar todo el ancho real disponible para
   título y artista, sin cambiar el tamaño de fuente ni invadir los controles.
   Cada metadato permanece en una sola línea y usa ellipsis solo al llegar
   al límite real del bloque. */
@media (max-width: 991px) {
    #app-player .player-left {
        /* En móvil, el bloque de datos debe tener un límite físico real.
           No permitimos que flex-grow vuelva a expandirlo sobre los controles. */
        flex: 0 1 calc(100% - 182px) !important;
        width: calc(100% - 182px) !important;
        min-width: 0 !important;
        max-width: calc(100% - 182px) !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #app-player .player-cover-title {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        /* Impide que Firefox Android infle el texto de este bloque. */
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
    }

    #app-player .player-song-name {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
    }

    #app-player .player-song-name,
    #app-player .player-song-name .song-title,
    #app-player .player-cover-title .song-artist {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}


/* F96 Player Mini - v2: restaurar posición izquierda y tamaño circular de carátula en móvil.
   Mantiene el ellipsis de metadatos, pero evita que la sección quede centrada/restringida. */
@media (max-width: 991px) {
    #app-player .player-cover {
        justify-content: flex-start !important;
    }

    #app-player .player-left {
        flex: 0 1 calc(100% - 132px) !important;
        width: calc(100% - 132px) !important;
        max-width: calc(100% - 132px) !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        gap: 1rem !important;
    }

    #app-player .player-artwork {
        flex: 0 0 60px !important;
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #app-player .player-artwork img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 999px !important;
    }

    #app-player .player-cover-title {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        /* Impide que Firefox Android infle el texto de este bloque. */
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
    }

    #app-player .player-song-name {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
    }

    #app-player .player-song-name,
    #app-player .player-song-name .song-title,
    #app-player .player-cover-title .song-artist {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

/* F96 Player Mini - v3 mobile: carátula independiente + metadatos con
   límite físico estable y tamaño de texto consistente entre navegadores. */
@media (max-width: 991px) {
    #app-player .player-cover {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* El bloque completo ocupa el ancho del reproductor y reserva únicamente
       el espacio necesario para los tres controles, sin recortar la carátula. */
    #app-player .player-left {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        padding-right: 132px !important;
        gap: 1rem !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* La carátula no participa en el encogimiento del bloque de texto. */
    #app-player .player-artwork,
    #app-player .player-artwork-style {
        flex: 0 0 60px !important;
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #app-player .player-artwork img,
    #app-player .player-artwork-style img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 999px !important;
    }

    /* Solo este contenedor puede encogerse. La carátula queda intacta. */
    #app-player .player-cover-title {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        /* Impide que Firefox Android infle el texto de este bloque. */
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
    }

    #app-player .player-song-name {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
    }

    /* Un único tamaño de fuente para todos los navegadores. */
    #app-player .player-song-name,
    #app-player .player-song-name .song-title,
    #app-player .player-cover-title .station-name {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
    }

    #app-player .player-cover-title .song-artist,
    #app-player .player-cover-title .station-description {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
    }
}

/* F96 Player Mini - v6: compensación exclusiva para Firefox Android.
   Firefox Android no aplica text-size-adjust: none como Chromium.
   Su opción de tamaño automático puede inflar estos textos.
   Reducimos únicamente el tamaño base de estos cuatro metadatos para que
   el tamaño visual final coincida con el 16px/12px de los demás navegadores. */
@media (max-width: 991px) {
    #app-player.f96-firefox-android .player-cover-title .song-title,
    #app-player.f96-firefox-android .player-cover-title .station-name {
        font-size: 12.8px !important;
    }

    #app-player.f96-firefox-android .player-cover-title .song-artist,
    #app-player.f96-firefox-android .player-cover-title .station-description {
        font-size: 9.6px !important;
    }
}

/* F96 Player Mini - historial: fondo sólido usando el mismo color dinámico del reproductor.
   Solo afecta las tarjetas de Últimas canciones; no modifica el resto del player. */
#app-player .history-item {
    background-color: var(--theme-bg, var(--accent, #000)) !important;
}

#app-player .history-item::before {
    opacity: 1 !important;
    background: var(--theme-bg, var(--accent, #000)) !important;
}

/* 1.0.25 - Boton Play: opcion 1 + foco tactil limpio.
   Estado inactivo: aro blanco fino para mantener contraste con el color automatico.
   Estado activo: conserva el aro blanco definido existente.
   En escritorio, un pequeno movimiento al pasar el cursor indica que el boton es interactivo. */
#app-player .player-button-play {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.90) !important;
    transition: background-color var(--duration), box-shadow .18s ease, transform .18s ease !important;
}

#app-player .player-button-play:focus,
#app-player .player-button-play:focus-visible,
#app-player .player-button-play:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

#app-player .player-button-play:not(.is-active):focus,
#app-player .player-button-play:not(.is-active):focus-visible,
#app-player .player-button-play:not(.is-active):active {
    box-shadow: 0 0 0 2px rgba(255,255,255,.90) !important;
}

/* Movimiento ligero solamente con mouse/escritorio. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    #app-player .player-button-play:not(.is-active):hover {
        transform: scale(1.045);
        box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 12px rgba(255,255,255,.18) !important;
    }
}

/* En celular no dejamos que el foco/tap del navegador agregue un cuadro azul. */
@media (max-width: 991px) {
    #app-player .player-button-play,
    #app-player .player-button-play:focus,
    #app-player .player-button-play:focus-visible,
    #app-player .player-button-play:active {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }
}


/* F96 Player Mini - v1.0.26: controles de cambio de radio automáticos.
   Una sola radio: oculta Atrás/Adelante.
   Dos o más radios: mantiene ambos controles y el orden visual original. */
#app-player.f96-single-station .player-button-backward-step,
#app-player.f96-single-station .player-button-forward-step {
    display: none !important;
}

/* En celular, al desaparecer Atrás/Adelante, el bloque de metadatos gana
   espacio real. Solo se reserva el ancho necesario para el botón Play. */
@media (max-width: 991px) {
    #app-player.f96-single-station .player-left {
        padding-right: 72px !important;
    }

    #app-player.f96-multi-station .player-left {
        padding-right: 132px !important;
    }
}


/* F96 Player Mini V32 - selector de temas junto a Historial.
   El botón conserva el mismo tamaño/estilo de los demás controles. */
#app-player .player-button-theme-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#app-player .player-button-theme-toggle {
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
}

#app-player .player-theme-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 220px;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    padding: 8px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    background: rgba(10, 10, 14, .97);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0,0,0,.45);
    z-index: 500;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#app-player .player-button-theme-menu.is-open .player-theme-menu {
    display: grid;
}

#app-player .player-theme-menu-item {
    min-width: 0;
    min-height: 42px;
    padding: 6px 7px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.90);
    font-size: 9px;
    font-weight: 600;
    text-align: left;
}

#app-player .player-theme-menu-item:hover,
#app-player .player-theme-menu-item:focus {
    background: rgba(255,255,255,.14);
    outline: none;
}

#app-player .player-theme-menu-item.is-selected {
    background: rgba(255,255,255,.18);
    border-color: var(--theme-menu-accent, rgba(255,255,255,.55));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 8px color-mix(in srgb, var(--theme-menu-accent, #ffffff) 30%, transparent);
}

#app-player .player-theme-menu-item.is-selected .player-theme-menu-name::after {
    content: " ✓";
    font-weight: 700;
}

#app-player .player-theme-menu-swatch {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--theme-menu-bg, var(--theme-menu-accent));
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 0 7px color-mix(in srgb, var(--theme-menu-accent) 65%, transparent);
}

#app-player .player-theme-menu-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    #app-player .player-theme-menu {
        width: 205px;
        max-height: 60vh;
        right: -4px;
        bottom: calc(100% + 8px);
    }
    #app-player .player-theme-menu-item {
        min-height: 38px;
        font-size: 8px;
    }
}


/* F96 Player Mini V42 - menú radial móvil.
   Solo móvil/tablet. El botón cerrado queda desplazado ligeramente a la derecha
   y más abajo, cerca del reproductor, y permanece fijo al hacer scroll.
   Al abrirse, el centro del abanico pasa al centro de la pantalla y los controles
   mantienen su posición original. */
.f96-mobile-radial-menu,
.f96-mobile-radial-items {
    display: none;
}

@media (max-width: 991px) {
    #app-player .f96-mobile-radial-menu {
        display: block;
        position: fixed;
        left: var(--f96-radial-closed-left, 50%);
        top: var(--f96-radial-closed-top, auto);
        bottom: auto;
        width: 46px;
        height: 46px;
        transform: translateX(-50%);
        z-index: 700;
        pointer-events: none;
        transition: left .24s cubic-bezier(.2,.8,.2,1), top .24s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1);
    }

    #app-player .f96-mobile-radial-toggle {
        position: absolute;
        inset: 0;
        width: 46px;
        height: 46px;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 999px;
        background: rgba(10,10,10,.88) !important;
        color: rgba(255,255,255,.9);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: none !important;
        pointer-events: auto;
        z-index: 20;
        transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
    }

    #app-player .f96-mobile-radial-toggle .i {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    #app-player .f96-mobile-radial-menu.is-open {
        left: 50%;
        top: var(--f96-radial-open-top, 50%);
        transform: translate(-50%, -50%);
    }

    #app-player .f96-mobile-radial-menu.is-open .f96-mobile-radial-toggle {
        transform: rotate(90deg);
        border-color: rgba(255,255,255,.75);
        background: var(--accent, rgba(10,10,10,.95)) !important;
    }

    #app-player .f96-mobile-radial-items {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    #app-player .f96-mobile-radial-menu.is-open .f96-mobile-radial-items {
        pointer-events: auto;
    }

    #app-player .f96-mobile-radial-items > .player-button,
    #app-player .f96-mobile-radial-items > .player-button-alt {
        position: absolute !important;
        left: 50%;
        top: 50%;
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 6px !important;
        margin: 0 !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        border-radius: 999px !important;
        background: var(--accent, rgba(10,10,10,.92)) !important;
        color: var(--radial-icon-color, rgba(255,255,255,.9)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 5px 18px rgba(0,0,0,.35), 0 0 8px color-mix(in srgb, var(--accent, #6c6fc6) 20%, transparent);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -50%) scale(.55);
        transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease, visibility .18s ease, border-color .2s ease;
        z-index: 10;
    }

    #app-player .f96-mobile-radial-items > .player-button .i,
    #app-player .f96-mobile-radial-items > .player-button-alt .i {
        width: 25px !important;
        height: 25px !important;
        flex: 0 0 auto;
        display: block !important;
    }

    /* También ocultamos el texto visible del botón Tema, Volumen e Histórico,
       manteniendo aria-label/title para accesibilidad y las funciones originales. */
    #app-player .f96-mobile-radial-items > .player-button-volume .player-button-volume-toggle,
    #app-player .f96-mobile-radial-items > .player-button-history,
    #app-player .f96-mobile-radial-items > .player-button-stations,
    #app-player .f96-mobile-radial-items > .player-button-lyrics {
        font-size: 0 !important;
        gap: 0 !important;
    }

    #app-player .f96-mobile-radial-items > .player-button-theme-menu .player-button-theme-toggle,
    #app-player .f96-mobile-radial-items > .player-button-volume .player-button-volume-toggle {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
    }

    #app-player .f96-mobile-radial-items > .player-button-theme-menu {
        z-index: 12;
    }

    /* Abanico centrado y separado del reproductor. */
    #app-player .f96-mobile-radial-items > :nth-child(1) { --rx: 0px; --ry: -78px; }
    #app-player .f96-mobile-radial-items > :nth-child(2) { --rx: -68px; --ry: -42px; }
    #app-player .f96-mobile-radial-items > :nth-child(3) { --rx: 68px; --ry: -42px; }
    #app-player .f96-mobile-radial-items > :nth-child(4) { --rx: -68px; --ry: 30px; }
    #app-player .f96-mobile-radial-items > :nth-child(5) { --rx: 68px; --ry: 30px; }

    #app-player .f96-mobile-radial-menu.is-open .f96-mobile-radial-items > .player-button,
    #app-player .f96-mobile-radial-menu.is-open .f96-mobile-radial-items > .player-button-alt {
        opacity: 1;
        visibility: visible;
        transform: translate(calc(-50% + var(--rx)), calc(-50% + var(--ry))) scale(1);
    }

    #app-player .f96-mobile-radial-items > .player-button:hover,
    #app-player .f96-mobile-radial-items > .player-button:focus,
    #app-player .f96-mobile-radial-items > .player-button-alt:hover,
    #app-player .f96-mobile-radial-items > .player-button-alt:focus {
        border-color: color-mix(in srgb, var(--radial-icon-color, #fff) 65%, transparent) !important;
        outline: none !important;
        color: var(--radial-icon-color, #fff) !important;
    }


    /* Contraste uniforme para todos los controles del radial, incluidos
       los botones internos de Tema y Volumen. Evita que las reglas
       .player-button:hover/.is-active del reproductor los vuelvan blancos. */
    #app-player .f96-mobile-radial-items > .player-button,
    #app-player .f96-mobile-radial-items > .player-button-alt,
    #app-player .f96-mobile-radial-items > .player-button.is-active,
    #app-player .f96-mobile-radial-items > .player-button:hover,
    #app-player .f96-mobile-radial-items > .player-button:focus,
    #app-player .f96-mobile-radial-items > .player-button-volume .player-button-volume-toggle,
    #app-player .f96-mobile-radial-items > .player-button-theme-menu .player-button-theme-toggle,
    #app-player .f96-mobile-radial-items > .player-button-volume .player-button-volume-toggle:hover,
    #app-player .f96-mobile-radial-items > .player-button-volume .player-button-volume-toggle:focus,
    #app-player .f96-mobile-radial-items > .player-button-volume .player-button-volume-toggle:active,
    #app-player .f96-mobile-radial-items > .player-button-theme-menu .player-button-theme-toggle:hover,
    #app-player .f96-mobile-radial-items > .player-button-theme-menu .player-button-theme-toggle:focus,
    #app-player .f96-mobile-radial-items > .player-button-theme-menu .player-button-theme-toggle:active {
        color: var(--radial-icon-color, #fff) !important;
    }

    #app-player .f96-mobile-radial-items > .player-button-volume .player-button-volume-toggle,
    #app-player .f96-mobile-radial-items > .player-button-theme-menu .player-button-theme-toggle {
        background: transparent !important;
    }

    #app-player .f96-mobile-radial-items > .player-button-volume .player-button-volume-toggle .i,
    #app-player .f96-mobile-radial-items > .player-button-theme-menu .player-button-theme-toggle .i {
        color: var(--radial-icon-color, #fff) !important;
        stroke: currentColor !important;
    }

    #app-player .f96-mobile-radial-items > .player-button-volume { overflow: visible !important; }

    #app-player .f96-mobile-radial-items > .player-button-volume .dropdown {
        position: absolute !important;
        left: 50% !important;
        bottom: calc(100% + 8px) !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: 42px !important;
        height: 130px !important;
        padding: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        z-index: 30 !important;
    }

    #app-player .f96-mobile-radial-items > .player-button-volume .player-range-wrapper {
        height: 108px !important;
        width: 2px !important;
        margin: 0 auto !important;
        flex: 0 0 2px !important;
    }

    #app-player .f96-mobile-radial-items > .player-button-theme-menu .player-theme-menu {
        right: auto !important;
        left: 50% !important;
        bottom: calc(100% + 8px) !important;
        transform: translateX(-50%) !important;
        width: 205px !important;
        max-height: 58vh !important;
        z-index: 50 !important;
    }

    @media (max-width: 380px) {
        #app-player .f96-mobile-radial-items > .player-button,
        #app-player .f96-mobile-radial-items > .player-button-alt {
            width: 54px !important;
            min-width: 54px !important;
            height: 54px !important;
            min-height: 54px !important;
        }
        #app-player .f96-mobile-radial-items > :nth-child(1) { --ry: -70px; }
        #app-player .f96-mobile-radial-items > :nth-child(2) { --rx: -54px; --ry: -36px; }
        #app-player .f96-mobile-radial-items > :nth-child(3) { --rx: 54px; --ry: -36px; }
        #app-player .f96-mobile-radial-items > :nth-child(4) { --rx: -54px; --ry: 26px; }
        #app-player .f96-mobile-radial-items > :nth-child(5) { --rx: 54px; --ry: 26px; }
    }
}

/* F96 Player Mini 1.0.68 - tarjetas del selector de radios. */
.station {
  position: relative;
  isolation: isolate;
  flex: 0 0 118px;
  width: 118px;
  min-width: 118px;
  height: 150px;
  padding: 10px 8px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(12,16,28,.82);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.station:first-child {
  margin-left: 0;
}
.station:last-child {
  margin-right: 0;
}
.station::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--station-image);
  background-size: cover;
  background-position: center;
  filter: blur(16px) saturate(1.15);
  opacity: .24;
  transform: scale(1.18);
}
.station::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,10,18,.28), rgba(8,10,18,.9) 72%, rgba(8,10,18,.98));
  pointer-events: none;
}
.station-card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 46%);
  pointer-events: none;
}
.station-name {
  white-space: nowrap;
  overflow: hidden;
  font-size: 16px !important;
}
.station-name.is-scrolling {
  animation: textIndent var(--text-scroll-duration, 5s) linear infinite alternate;
}
.station-description {
  font-size: 12px !important;
}
.station-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 88px;
  height: 88px;
  aspect-ratio: 1/1;
  object-fit: cover;
  box-shadow: 0 5px 16px rgba(0,0,0,.4);
  border-radius: 11px;
  margin: 0 auto 7px;
}
.station-card-name {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  color: #fff;
}
.station-card-bars {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 32px;
  height: 10px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .2s ease;
}
.station-card-bars i {
  display: block;
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: var(--accent, #fff);
}
.station-card-bars i:nth-child(2) { height: 8px; }
.station-card-bars i:nth-child(3) { height: 10px; }
.station-card-bars i:nth-child(4) { height: 7px; }
.station-card-bars i:nth-child(5) { height: 4px; }
.station:not(.is-active) {
  opacity: 1;
}
.station:hover,
.station:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
  outline: none;
}
.station.is-active {
  border-color: var(--accent, rgba(255,255,255,.85));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #fff) 55%, transparent), 0 12px 30px rgba(0,0,0,.35);
}
.station.is-active .station-card-bars {
  opacity: 1;
}


/* F96 Player Mini 1.0.68 - selector de radios horizontal y responsive. */
#app-player #offcanvas-stations {
    width: min(100% - 1rem, 540px);
    max-width: min(100% - 1rem, 540px);
    right: .5rem;
    left: auto;
    box-sizing: border-box;
}
#app-player #offcanvas-stations .offcanvas-content {
    padding: 10px;
}
#app-player #stations {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    padding: 2px 2px 8px;
    box-sizing: border-box;
}
#app-player #stations::-webkit-scrollbar {
    height: 4px;
}
#app-player #stations::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
    border-radius: 10px;
}
#app-player #stations::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.38);
    border-radius: 10px;
}

/* El radial se mueve al contenedor #app-player en móvil para que position:fixed
   no quede contenido por el backdrop-filter del reproductor en Firefox Android. */
@media (max-width: 991px) {
    #app-player.f96-mobile-radial-active .f96-mobile-radial-menu {
        position: fixed !important;
        z-index: 700 !important;
    }
}

@media (max-width: 600px) {
    #app-player #offcanvas-stations {
        width: calc(100% - 10px);
        max-width: none;
        right: 5px;
    }
    #app-player #offcanvas-stations .offcanvas-content {
        padding: 8px 6px;
    }
    #app-player #stations {
        gap: 8px !important;
        padding-bottom: 7px;
    }
    #app-player #stations .station {
        flex-basis: 98px;
        width: 98px;
        min-width: 98px;
        height: 132px;
        padding: 8px 6px 7px;
        border-radius: 12px;
    }
    #app-player #stations .station-img {
        width: 74px;
        height: 74px;
        margin-bottom: 6px;
        border-radius: 10px;
    }
    #app-player #stations .station-card-name {
        font-size: 10px;
    }
}


/* F96 Player Mini 1.0.69 - selector de radios en escritorio: mostrar
   las tarjetas completas y animar el ecualizador de la radio activa.
   Solo afecta a escritorio; el diseño táctil móvil de 1.0.68 se conserva. */
@media (min-width: 992px) {
    #app-player #offcanvas-stations {
        bottom: calc(1.5vw + 4.5rem);
    }

    #app-player #offcanvas-stations .offcanvas-content {
        min-height: 170px;
        box-sizing: border-box;
    }

    #app-player #stations {
        min-height: 150px;
        align-items: stretch;
        box-sizing: border-box;
    }
}

@keyframes f96StationEqualizerBounce {
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
}

#app-player #stations .station.is-active .station-card-bars i {
    transform-origin: center bottom;
    animation: f96StationEqualizerBounce .72s ease-in-out infinite;
}

#app-player #stations .station.is-active .station-card-bars i:nth-child(1) { animation-delay: -.18s; }
#app-player #stations .station.is-active .station-card-bars i:nth-child(2) { animation-delay: -.42s; }
#app-player #stations .station.is-active .station-card-bars i:nth-child(3) { animation-delay: -.06s; }
#app-player #stations .station.is-active .station-card-bars i:nth-child(4) { animation-delay: -.34s; }
#app-player #stations .station.is-active .station-card-bars i:nth-child(5) { animation-delay: -.52s; }

@media (prefers-reduced-motion: reduce) {
    #app-player #stations .station.is-active .station-card-bars i {
        animation: none !important;
        transform: scaleY(1);
    }
}


/* F96 Player Mini 1.0.70 - selector de radios: ecualizador blanco fijo y nombres en mayúsculas. */
#app-player #stations .station-card-bars i {
    background: #ffffff !important;
}

#app-player #stations .station-card-name {
    text-transform: uppercase;
}


/* F96 Player Mini 1.0.73 - selector de radios en escritorio: anclado sobre el botón Radio.
   La primera tarjeta queda a la derecha y las siguientes se agregan hacia la izquierda.
   En móvil no se modifica el comportamiento actual. */
@media (min-width: 992px) {
    #app-player #offcanvas-stations {
        right: calc(60px + 2vw);
        left: auto;
    }

    #app-player #stations {
        flex-direction: row-reverse;
        justify-content: flex-start !important;
    }
}