/* ==========================================================================
   Amygdala Radio Player — custom.css (versión WordPress con variables CSS)
   
   CAMBIOS RESPECTO AL ORIGINAL:
    - Todos los colores hardcodeados (#7c3aed, #000, #fff) reemplazados
      por variables CSS: --frp-primary-color, --frp-bg-color, --frp-text-color.
    - Las variables se inyectan en #frp-player desde PHP con wp_add_inline_style().
    - TODO el CSS está encapsulado bajo #frp-player para aislamiento total.
    - NO se modifican las clases originales (np__, msp_radio).
   ========================================================================== */

/* ── Valores por defecto de las variables (fallback) ─────────────────────── */
#frp-player {
    --frp-primary-color:        #7c3aed;
    --frp-primary-color-2:      #7c3aed;   /* color secundario degradado (igual al primario por defecto) */
    --frp-primary-gradient:     var(--frp-primary-color); /* se sobreescribe en PHP si hay degradado */
    --frp-primary-hover-color:  #935def;
    --frp-bg-color:             #000000;
    --frp-text-color:           #ffffff;
    --frp-btn-icon-color:       #ffffff;   /* color de iconos/SVG en botones (independiente del texto) */
    --frp-btn-icon-hover-color: #ffffff;   /* color de iconos/SVG en hover (independiente del texto) */
}

/* ==========================================================================
   Contenedor Principal del Slider de Volumen
   ========================================================================== */
#frp-player input[type=range].amplitude-volume-slider {
    -webkit-appearance: none;
    transform: rotate(270deg);
    background: var(--frp-bg-color);
}

#frp-player input[type=range].amplitude-volume-slider:focus {
    outline: 0;
    background: var(--frp-bg-color);
}

/* ==========================================================================
   Estilos para WebKit (Chrome, Safari, Opera, Edge moderno)
   ========================================================================== */
#frp-player input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: var(--frp-primary-color);
    border-radius: 10px;
}

#frp-player input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
    background: var(--frp-primary-color);
    border-radius: 10px;
}

#frp-player input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 10px;
    background: var(--frp-text-color);
    border: 2px solid var(--frp-primary-color);
    cursor: pointer;
    margin-top: -4px;
    -webkit-appearance: none;
}

/* ==========================================================================
   Estilos para Mozilla Firefox
   ========================================================================== */
#frp-player input[type=range].amplitude-volume-slider::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: var(--frp-primary-color);
    border-radius: 10px;
}

#frp-player input[type=range].amplitude-volume-slider::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border-radius: 10px;
    background: var(--frp-text-color);
    border: 2px solid var(--frp-primary-color);
    cursor: pointer;
    margin-top: -4px;
}

/* ==========================================================================
   Estilos para Internet Explorer / Edge antiguo
   ========================================================================== */
#frp-player input[type=range].amplitude-volume-slider::-ms-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 15px 0;
    color: transparent;
}

#frp-player input[type=range].amplitude-volume-slider::-ms-fill-lower {
    background: var(--frp-bg-color);
    border-radius: 10px;
}

#frp-player input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
    background: var(--frp-bg-color);
}

#frp-player input[type=range].amplitude-volume-slider::-ms-fill-upper {
    background: var(--frp-bg-color);
    border-radius: 10px;
}

#frp-player input[type=range].amplitude-volume-slider:focus::-ms-fill-upper {
    background: var(--frp-bg-color);
}

#frp-player input[type=range].amplitude-volume-slider::-ms-thumb {
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: var(--frp-text-color);
    cursor: pointer;
    margin-top: 2px;
}

#frp-player input[type=range].amplitude-volume-slider::-ms-tooltip {
    display: none;
}

/* ==========================================================================
   LOGO — Pantallas grandes / Desktop
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__header_center_logo {
    width: 185px;
    margin-left: 10px;
    margin-top: 10px;
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    #frp-player .msp_radio .np__global_player .np__header_center_logo {
        width: 150px;
        margin-left: 8px;
        margin-top: 8px;
    }
}

@media screen and (max-width: 480px) {
    #frp-player .msp_radio .np__global_player .np__header_center_logo {
        width: 120px;
        margin-left: 5px;
        margin-top: 25px;
    }
}


/* ==========================================================================
   Información del Soundbadge (Título y detalles)
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__soundbadge_info {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: normal;
    line-height: 1.2;
    /* Usamos la variable de texto para mantener la consistencia */
    color: var(--frp-text-color) !important; 
}

#frp-player .msp_radio .np__global_player .np__soundbadge_info_top {
    margin-bottom: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: normal;
    line-height: 1.2;
    /* Usamos la variable de texto también aquí */
    color: var(--frp-text-color) !important;
}



/* ==========================================================================
   Texto canción actual
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__player_song {
    font-size: 1.25rem;
    margin: 0;
    max-width: 60%;
    text-align: center;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--frp-text-color) !important;
}

/* ==========================================================================
   Texto artista actual
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__player_artist {
    font-size: 1rem;
    max-width: 60%;
    text-align: center;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--frp-text-color) !important;
}

/* ==========================================================================
   Historial canciones
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__item_song {
    font-size: .9rem;
    color: var(--frp-text-color) !important;
}

/* ==========================================================================
   Historial artistas
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__item_artist {
    font-size: .75rem;
    color: var(--frp-text-color) !important;
}



/* ==========================================================================
   Tabs de navegación (Historial)
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__section_nav_tabs .np__tab__active > a {
    color: var(--frp-text-color);
    opacity: 1;
    border-bottom: 2px solid var(--frp-primary-color);
}

#frp-player .msp_radio .np__global_player .np__section_nav_tabs li a:hover {
    color: var(--frp-text-color);
    border-bottom: 2px solid var(--frp-primary-color);
    opacity: 1;
}

#frp-player .msp_radio .np__global_player .np__tab_pane_container::-webkit-scrollbar-thumb {
    background: var(--frp-primary-color);
    border-radius: 10px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

#frp-player .msp_radio .np__global_player .np__sound_badge_item:hover {
    background-color: var(--frp-primary-color);
    color: #FCF7F7;
    fill: #FCF7F7;
}

/* ==========================================================================
   Info de tiempo (onair / offair)
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__info_time__offair,
#frp-player .msp_radio .np__global_player .np__info_time__onair {
    color: var(--frp-primary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 500;
}

#frp-player .msp_radio .np__global_player .np__info_time__offair svg {
    fill: var(--frp-primary-color);
    width: 13px;
}

#frp-player .msp_radio .np__global_player .np__info_time__onair .np__equalizer div {
    background-color: var(--frp-primary-color);
}

/* ==========================================================================
   Badge "al aire"
   ========================================================================== */
/* #frp-player .msp_radio .np__global_player .np__soundbadge_onair {
    background-color: var(--frp-primary-color);
    border: 2px solid var(--frp-primary-color);
    color: #fefefe;
    padding: 2px 8px;
    display: inline-block;
    border-radius: 50px;
    margin-right: 5px;
}

#frp-player .msp_radio .np__global_player .np__soundbadge_onair .np__soundbadge_ecualizer .np__equalizer div {
    background-color: #fefefe;
} */

/* ==========================================================================
   Botón Play (widget y player principal)
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__player_widget .np__btn_controls_play {
    background: var(--frp-primary-gradient) !important;
    color: var(--frp-btn-icon-color) !important;
}

#frp-player .msp_radio .np__global_player .np__btn_controls_play {
    background: var(--frp-primary-gradient) !important;
    color: var(--frp-btn-icon-color) !important;
    border-radius: 100%;
    width: 50px;
    height: 50px;
}

/* SVG dentro del botón play */
#frp-player .msp_radio .np__global_player .np__btn_controls_play svg,
#frp-player .msp_radio .np__global_player .np__player_widget .np__btn_controls_play svg {
    fill: var(--frp-btn-icon-color) !important;
}

/* ==========================================================================
   Botones de Control (Play, Next, Prev, Volume, etc.)
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__btn_controls {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    outline: none;
    color: var(--frp-btn-icon-color) !important;
    fill: var(--frp-btn-icon-color) !important;
}

#frp-player .msp_radio .np__global_player .np__btn_controls svg {
    fill: var(--frp-btn-icon-color) !important;
}

#frp-player .msp_radio .np__global_player .np__btn_controls:hover {
    background: var(--frp-primary-hover-color) !important;
    color: var(--frp-btn-icon-hover-color) !important;
    fill: var(--frp-btn-icon-hover-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(101, 58, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

#frp-player .msp_radio .np__global_player .np__btn_controls:hover svg {
    fill: var(--frp-btn-icon-hover-color) !important;
}

#frp-player .msp_radio .np__global_player .np__btn_controls.disabled:hover {
    background: transparent !important;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;
}


/* Hover textos */
#frp-player .msp_radio .np__global_player .np__sound_badge_item:hover .np__info_time__onair,
#frp-player .msp_radio .np__global_player .np__sound_badge_item:hover .np__info_time__offair {
    color: var(--frp-text-color);
    fill: var(--frp-text-color);
}

/* Hover equalizer */
#frp-player .msp_radio .np__global_player .np__sound_badge_item:hover .np__info_time__onair .np__equalizer div {
    background-color: var(--frp-text-color);
}



/* ==========================================================================
   Botón Cerrar modal
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__dialog_close {
    cursor: pointer;
    position: absolute;
    top: 10px !important;
    right: 10px !important;
    font-size: 1.5rem;
    color: #000000 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
    box-sizing: border-box !important;
    padding: 0 !important;
}

#frp-player .msp_radio .np__global_player .np__dialog_close:hover {
    background: var(--frp-primary-hover-color) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #fff !important;
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 5px 15px rgba(101, 58, 255, 0.4);
}

#frp-player .msp_radio .np__global_player .np__dialog_close:active {
    transform: translateY(0) scale(0.95);
}

/* ==========================================================================
   Redes Sociales — Botones compartir
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__item_share__facebook,
#frp-player .msp_radio .np__global_player .np__item_share__messenger,
#frp-player .msp_radio .np__global_player .np__item_share__twitter,
#frp-player .msp_radio .np__global_player .np__item_share__youtube,
#frp-player .msp_radio .np__global_player .np__item_share__instagram,
#frp-player .msp_radio .np__global_player .np__item_share__whatsapp {
    border-color: rgba(255, 255, 255, .6);
    background-color: var(--frp-primary-color) !important;
    transform: translateY(-2px) scale(1.04);
}

/* Transición base para todos los botones de redes */
#frp-player .msp_radio .np__global_player [class*="np__item_share__"] {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover para redes sociales */
#frp-player .msp_radio .np__global_player .np__item_share__facebook:hover,
#frp-player .msp_radio .np__global_player .np__item_share__messenger:hover,
#frp-player .msp_radio .np__global_player .np__item_share__twitter:hover,
#frp-player .msp_radio .np__global_player .np__item_share__youtube:hover,
#frp-player .msp_radio .np__global_player .np__item_share__instagram:hover,
#frp-player .msp_radio .np__global_player .np__item_share__whatsapp:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: var(--frp-primary-hover-color) !important;
    box-shadow: 0 10px 22px rgba(101, 58, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px) scale(1.05);
    color: var(--frp-text-color);
}

@media screen and (min-width: 1024px) {
    .np__player_card_img,
    .msp_radio .np__global_player .np__player_card_img {
        width: 260px;
        height: 260px
    }
}