/* ==========================================================================
   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) */
    --frp-logo-size:            185px;     /* ancho del logo en desktop, configurable en el panel admin */
    --frp-logo-size-mobile:     120px;     /* ancho del logo en móvil/tablet, configurable por separado */
    --frp-logo-offset-y:        0px;       /* desplazamiento vertical del logo, negativo sube / positivo baja */
}

/* ==========================================================================
   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 — Tamaño y posición vertical configurables desde el panel admin
   --frp-logo-size: ancho en desktop (>768px)
   --frp-logo-size-mobile: ancho en tablet/móvil (≤768px), independiente
   --frp-logo-offset-y: desplazamiento vertical adicional, se suma al
   margin-top base de cada breakpoint (negativo = sube, positivo = baja)
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__header_center_logo {
    width: var(--frp-logo-size, 185px);
    margin-left: 10px;
    margin-top: calc(10px + var(--frp-logo-offset-y, 0px));
    max-width: 400px;
    height: auto;
}

@media screen and (max-width: 768px) {
    #frp-player .msp_radio .np__global_player .np__header_center_logo {
        width: var(--frp-logo-size-mobile, 120px);
        margin-left: 8px;
        margin-top: calc(8px + var(--frp-logo-offset-y, 0px));
    }
}

@media screen and (max-width: 480px) {
    #frp-player .msp_radio .np__global_player .np__header_center_logo {
        width: var(--frp-logo-size-mobile, 120px);
        margin-left: 5px;
        margin-top: calc(25px + var(--frp-logo-offset-y, 0px));
    }
}


/* ==========================================================================
   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,
#frp-player .msp_radio .np__global_player .np__item_share__tiktok {
    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,
#frp-player .msp_radio .np__global_player .np__item_share__tiktok: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);
}

/* ── Fallback del ícono de TikTok ──────────────────────────────────────────
   Font Awesome 5.15.4 (CDN) tiene casos documentados donde el glifo de marca
   "fa-tiktok" no renderiza aunque la clase y el prefijo "fab" sean correctos.
   Se oculta el glifo de fuente y se dibuja el logo oficial vía SVG inline
   como background-image — así el ícono se ve aunque el CDN de iconos falle.
   ========================================================================== */
#frp-player .msp_radio .np__global_player .np__item_share__tiktok i.fa-tiktok {
    font-size: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M448%2C209.91a210.06%2C210.06%2C0%2C0%2C1-122.77-39.25V349.38A162.55%2C162.55%2C0%2C1%2C1%2C185%2C188.31V278.2a74.62%2C74.62%2C0%2C1%2C0%2C52.23%2C71.18V0l88%2C0a121.18%2C121.18%2C0%2C0%2C0%2C1.86%2C22.17h0A122.18%2C122.18%2C0%2C0%2C0%2C381%2C102.39a121.43%2C121.43%2C0%2C0%2C0%2C67%2C20.14Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   PLAYER CARD IMG — Pantallas grandes
   Reduce la portada solo en desktop ancho (>1024px). style.css define 350px
   como base sin media query; este override usa #frp-player para ganar
   especificidad sin tocar style.css. Los breakpoints móviles/tablet de
   style.css (≤1024px) no se modifican.
   ========================================================================== */
@media (min-width: 1025px) {
    #frp-player .msp_radio .np__global_player .np__player_card_img {
        width: 280px;
        height: 280px;
    }
}