/* FC Premium Player v4.4.0 — by Fabian Creative
   All selectors scoped to #fcpp-player — zero conflicts with WP/Elementor/Woo */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Onest:wght@400;500;600;700&display=swap');
/* ══════════════════════════════════════════════════
   FC PLAYER — BASE STYLES FOR ALL WIDGETS
   Isolated from theme styles
   ══════════════════════════════════════════════════ */
.fcpp-widget-wrap,
.fcpp-widget-wrap *,
.fcpp-np-wrap,
.fcpp-np-wrap *,
.fcpp-req-wrap,
.fcpp-req-wrap *,
.fcpp-ticker-wrap,
.fcpp-ticker-wrap * {
    box-sizing: border-box !important;
    font-family: 'Onest', 'Montserrat', sans-serif !important;
    line-height: normal !important;
}
.fcpp-widget-wrap input,
.fcpp-req-wrap input {
    -webkit-appearance: none !important;
    appearance: none !important;
}



/* ── CSS variables ── */
#fcpp-player {
    --fcpp-ac:   #1db954;
    --fcpp-ac-r: 29;
    --fcpp-ac-g: 185;
    --fcpp-ac-b: 84;

    /* font sizes (overridden by inline style from PHP config) */
    --fcpp-fs-song:   15px;
    --fcpp-fs-artist: 15px;

    /* dark theme defaults */
    --fcpp-bg-base:   #0e0e0e;
    --fcpp-bg-dim:    rgba(0,0,0,.52);
    --fcpp-txt-main:  #ffffff;
    --fcpp-txt-sub:   rgba(255,255,255,.55);
    --fcpp-vol-track: rgba(255,255,255,.14);
    --fcpp-share-bg:  rgba(255,255,255,.10);
    --fcpp-share-bd:  rgba(255,255,255,.15);
    --fcpp-share-txt: rgba(255,255,255,.60);
    --fcpp-ch-bg:     rgba(255,255,255,.10);
    --fcpp-ch-active: rgba(255,255,255,.22);
    --fcpp-ch-txt:    rgba(255,255,255,.75);
}

/* ── Light theme ── */
#fcpp-player[data-theme="light"] {
    --fcpp-bg-base:   #f2f2f2;
    --fcpp-bg-dim:    rgba(240,240,240,.78);
    --fcpp-txt-main:  #111111;
    --fcpp-txt-sub:   rgba(0,0,0,.52);
    --fcpp-vol-track: rgba(0,0,0,.14);
    --fcpp-share-bg:  rgba(0,0,0,.08);
    --fcpp-share-bd:  rgba(0,0,0,.14);
    --fcpp-share-txt: rgba(0,0,0,.55);
    --fcpp-ch-bg:     rgba(0,0,0,.08);
    --fcpp-ch-active: rgba(0,0,0,.18);
    --fcpp-ch-txt:    rgba(0,0,0,.70);
}

/* ── Auto (system) theme ── */
@media (prefers-color-scheme: light) {
    #fcpp-player[data-theme="auto"] {
        --fcpp-bg-base:   #f2f2f2;
        --fcpp-bg-dim:    rgba(240,240,240,.78);
        --fcpp-txt-main:  #111111;
        --fcpp-txt-sub:   rgba(0,0,0,.52);
        --fcpp-vol-track: rgba(0,0,0,.14);
        --fcpp-share-bg:  rgba(0,0,0,.08);
        --fcpp-share-bd:  rgba(0,0,0,.14);
        --fcpp-share-txt: rgba(0,0,0,.55);
        --fcpp-ch-bg:     rgba(0,0,0,.08);
        --fcpp-ch-active: rgba(0,0,0,.18);
        --fcpp-ch-txt:    rgba(0,0,0,.70);
    }
}

/* ── Base ── */
#fcpp-player {
    position:fixed!important;bottom:0!important;left:0!important;right:0!important;
    width:100%!important;
    height:92px!important;
    z-index:2147483647!important;overflow:hidden!important;
    transform:translateY(100%)!important;
    transition:transform .5s cubic-bezier(.22,1,.36,1)!important;
    display:block!important;box-sizing:border-box!important;
    margin:0!important;padding:0!important;
}
#fcpp-player.fcpp-visible { transform:translateY(0)!important; }

/* ── Backgrounds ── */
#fcpp-player .fcpp-bg-base {
    position:absolute;inset:0;background:var(--fcpp-bg-base);z-index:0;
}
#fcpp-player .fcpp-bg-art {
    position:absolute;top:0;left:-32px;right:-32px;bottom:-32px;background-size:cover;background-position:center;
    filter:blur(38px) saturate(2.8) brightness(.42);
    z-index:1;opacity:0;transition:opacity .8s ease,background-image .9s ease;
}
#fcpp-player[data-theme="light"] .fcpp-bg-art { filter:blur(38px) saturate(2.2) brightness(.82); }
@media (prefers-color-scheme: light) {
    #fcpp-player[data-theme="auto"] .fcpp-bg-art { filter:blur(38px) saturate(2.2) brightness(.82); }
}
#fcpp-player .fcpp-bg-art.fcpp-art-loaded { opacity:1; }
#fcpp-player .fcpp-bg-dim {
    position:absolute;inset:0;background:var(--fcpp-bg-dim);z-index:2;
}
#fcpp-player .fcpp-top-bar {
    position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--fcpp-ac);z-index:4;transition:background .7s;
}

/* ── Shell grid ── */
#fcpp-player .fcpp-shell {
    position:absolute;inset:0;z-index:5;
    overflow:hidden;
    display:grid!important;
    grid-template-columns:1fr auto 1fr!important;
    align-items:center!important;
    padding:0 28px!important;height:92px!important;
    box-sizing:border-box!important;
}

/* ── LEFT ── */
#fcpp-player .fcpp-left { display:flex;align-items:center;gap:16px;min-width:0;overflow:hidden; }

/* Artwork */
#fcpp-player .fcpp-art-wrap {
    width:68px;height:68px;border-radius:9px;overflow:hidden;
    flex-shrink:0;box-shadow:0 4px 20px rgba(0,0,0,.75);background:#222;
}
#fcpp-player .fcpp-art-img {
    width:68px;height:68px;object-fit:cover;display:block;
    border-radius:9px;transition:opacity .3s;
}
#fcpp-player .fcpp-art-fade { opacity:0; }

/* Info */
#fcpp-player .fcpp-info { display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;overflow:hidden; }

/* Title row: [pill] [song] */
#fcpp-player .fcpp-title-row {
    display:flex!important;flex-wrap:nowrap!important;
    align-items:center!important;gap:6px!important;min-width:0!important;
    overflow:hidden!important;
}
/* Clip wrapper: sits between pill and song span — marquee stays inside this */
#fcpp-player .fcpp-title-clip {
    flex:1 1 0!important;
    min-width:0!important;
    overflow:hidden!important;   /* THIS clips the translateX animation */
    display:block!important;
}

/* EN VIVO pill */
#fcpp-player .fcpp-live-pill {
    display:inline-flex!important;align-items:center!important;gap:5px;
    flex-shrink:0!important;order:-1!important;white-space:nowrap!important;
    background:rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.18);
    border:1px solid rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.38);
    border-radius:20px;padding:4px 9px 4px 7px;
    transition:background .7s,border-color .7s;
}
#fcpp-player .fcpp-live-dot {
    width:6px;height:6px;border-radius:50%;background:var(--fcpp-ac);
    flex-shrink:0;animation:fcpp-dot 1.4s ease-in-out infinite;transition:background .7s;
}
@keyframes fcpp-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }
#fcpp-player .fcpp-live-label {
    font-family:'Montserrat',sans-serif!important;
    font-size:8px!important;font-weight:800!important;
    letter-spacing:.12em!important;text-transform:uppercase!important;
    color:var(--fcpp-ac)!important;line-height:1!important;
    white-space:nowrap!important;transition:color .7s;
}

/* Song title */
#fcpp-player .fcpp-song-title {
    font-family:'Montserrat',sans-serif!important;
    font-size:var(--fcpp-fs-song)!important;font-weight:700!important;
    color:var(--fcpp-txt-main)!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    line-height:1.2!important;letter-spacing:-.01em!important;
    margin:0!important;padding:0!important;
    display:block!important;width:100%!important;
}
#fcpp-player .fcpp-song-title.fcpp-marquee {
    overflow:visible!important;text-overflow:clip!important;
    display:inline-block!important;
    /* width set to max-content by JS so -50% lands at exact repeat */
    animation:fcpp-mq linear infinite;animation-play-state:paused;
}
#fcpp-player[data-state="playing"] .fcpp-song-title.fcpp-marquee { animation-play-state:running; }
@keyframes fcpp-mq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Artist row */
#fcpp-player .fcpp-artist-row { overflow:hidden; }
#fcpp-player .fcpp-artist-name {
    font-family:'Onest',sans-serif!important;
    font-size:var(--fcpp-fs-artist)!important;font-weight:400!important;
    color:var(--fcpp-txt-sub)!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    line-height:1.2!important;margin:0!important;padding:0!important;display:block!important;
}
#fcpp-player .fcpp-artist-name.fcpp-marquee {
    overflow:clip!important;text-overflow:clip!important;
    display:inline-block!important;
    animation:fcpp-mq linear infinite;animation-play-state:paused;
}
#fcpp-player[data-state="playing"] .fcpp-artist-name.fcpp-marquee { animation-play-state:running; }

/* ── CENTER ── */
#fcpp-player .fcpp-center { display:flex;align-items:center;justify-content:center;padding:0 32px; }
#fcpp-player .fcpp-play-btn {
    width:52px!important;height:52px!important;min-width:52px!important;
    border-radius:50%!important;background:var(--fcpp-ac)!important;
    border:none!important;outline:none!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    position:relative!important;
    transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .7s!important;
    box-shadow:0 0 24px rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.55)!important;
    padding:0!important;margin:0!important;-webkit-appearance:none!important;appearance:none!important;
}
#fcpp-player .fcpp-play-btn:hover {
    transform:scale(1.11)!important;
    box-shadow:0 0 38px rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.65),
               0 0 0 9px rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.14)!important;
}
#fcpp-player .fcpp-play-btn:active { transform:scale(.91)!important; }
#fcpp-player .fcpp-icon,
#fcpp-player .fcpp-spinner {
    position:absolute!important;top:50%!important;left:50%!important;
    transform:translate(-50%,-50%)!important;display:block!important;
    transition:opacity .15s!important;pointer-events:none!important;
    color:#ffffff!important;font-size:18px!important;line-height:0!important;
}
#fcpp-player .fcpp-icon-stop,
#fcpp-player .fcpp-spinner { opacity:0!important; }
#fcpp-player .fcpp-icon-play { opacity:1!important; }
#fcpp-player[data-state="loading"] .fcpp-icon-play,
#fcpp-player[data-state="loading"] .fcpp-icon-stop { opacity:0!important; }
#fcpp-player[data-state="loading"] .fcpp-spinner { opacity:1!important; }
#fcpp-player[data-state="playing"] .fcpp-icon-play { opacity:0!important; }
#fcpp-player[data-state="playing"] .fcpp-icon-stop { opacity:1!important; }
#fcpp-player[data-state="stopped"] .fcpp-icon-play { opacity:1!important; }
#fcpp-player[data-state="stopped"] .fcpp-icon-stop { opacity:0!important; }
#fcpp-player .fcpp-icon-play i { margin-left:3px; }
#fcpp-player .fcpp-spinner {
    width:24px!important;height:24px!important;
    border:2.5px solid rgba(255,255,255,.2)!important;border-top-color:#fff!important;
    border-radius:50%!important;animation:fcpp-rot .7s linear infinite!important;
    box-sizing:border-box!important;background:none!important;font-size:0!important;
}
@keyframes fcpp-rot { to{ transform:translate(-50%,-50%) rotate(360deg) } }

/* ── RIGHT ── */
#fcpp-player .fcpp-right { display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;height:92px!important;box-sizing:border-box!important; }

/* Share button */
#fcpp-player .fcpp-share-btn {
    width:36px!important;height:36px!important;border-radius:50%!important;
    background:var(--fcpp-share-bg)!important;border:1px solid var(--fcpp-share-bd)!important;
    outline:none!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    transition:background .2s,transform .15s!important;
    padding:0!important;margin:0!important;flex-shrink:0!important;
    color:var(--fcpp-share-txt)!important;font-size:13px!important;
    line-height:1!important;vertical-align:middle!important;
    -webkit-appearance:none!important;appearance:none!important;
    align-self:center!important;
}
#fcpp-player .fcpp-share-btn:hover { background:var(--fcpp-ch-active)!important;color:var(--fcpp-txt-main)!important;transform:scale(1.08)!important; }
#fcpp-player .fcpp-share-btn:active { transform:scale(.92)!important; }

/* Channel switcher pills */
#fcpp-player .fcpp-channels {
    display:flex;align-items:center;gap:6px;flex-shrink:0;
    max-width:220px;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
}
#fcpp-player .fcpp-channels::-webkit-scrollbar { display:none; }
#fcpp-player .fcpp-ch-btn {
    display:inline-flex!important;align-items:center!important;
    padding:5px 11px!important;border-radius:20px!important;
    background:var(--fcpp-ch-bg)!important;
    border:1px solid transparent!important;
    color:var(--fcpp-ch-txt)!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:11px!important;font-weight:700!important;
    white-space:nowrap!important;cursor:pointer!important;
    transition:background .2s,border-color .2s,color .2s,transform .15s!important;
    outline:none!important;-webkit-appearance:none!important;appearance:none!important;
    flex-shrink:0!important;
}
#fcpp-player .fcpp-ch-btn:hover { background:var(--fcpp-ch-active)!important;color:var(--fcpp-txt-main)!important; }
#fcpp-player .fcpp-ch-btn.fcpp-ch-active {
    background:rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.22)!important;
    border-color:rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.5)!important;
    color:var(--fcpp-ac)!important;
}
#fcpp-player .fcpp-ch-btn:active { transform:scale(.94)!important; }

/* Snackbar */
#fcpp-player .fcpp-snackbar {
    position:absolute;bottom:100px;right:28px;
    background:rgba(20,20,20,.95);backdrop-filter:blur(12px);
    color:#fff;font-size:12px;font-family:'Montserrat',sans-serif;font-weight:600;
    padding:7px 14px;border-radius:8px;
    opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
    pointer-events:none;white-space:nowrap;z-index:10;
}
#fcpp-player .fcpp-snackbar.fcpp-snackbar-show { opacity:1;transform:translateY(0); }

/* Volume */
#fcpp-player .fcpp-vol-icon {
    color:var(--fcpp-share-txt)!important;cursor:pointer;
    font-size:15px!important;flex-shrink:0;transition:color .15s;
    padding:4px;
}
#fcpp-player .fcpp-vol-icon:hover,
#fcpp-player .fcpp-vol-icon.fcpp-vol-active { color:var(--fcpp-txt-main)!important; }

/* popup — body-level, positioned by JS */
.fcpp-vol-popup {
    position:fixed;
    width:28px;
    border-radius:14px;
    padding:12px 0;
    display:flex;flex-direction:column;align-items:center;
    opacity:0;pointer-events:none;
    transform:translateY(6px);
    transition:opacity .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
    z-index:2147483648;
}
.fcpp-vol-popup.fcpp-vol-open {
    opacity:1;pointer-events:auto;transform:translateY(0);
}
/* DARK */
.fcpp-vol-popup[data-theme="dark"] {
    background:rgba(16,16,16,.88);
    backdrop-filter:blur(28px) saturate(2);
    -webkit-backdrop-filter:blur(28px) saturate(2);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 8px 32px rgba(0,0,0,.6);
}
/* LIGHT */
.fcpp-vol-popup[data-theme="light"] {
    background:rgba(245,245,245,.92);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1px solid rgba(0,0,0,.12);
    box-shadow:0 8px 32px rgba(0,0,0,.15);
}
/* AUTO */
@media(prefers-color-scheme:dark){
    .fcpp-vol-popup[data-theme="auto"] {
        background:rgba(16,16,16,.88);
        backdrop-filter:blur(28px) saturate(2);
        -webkit-backdrop-filter:blur(28px) saturate(2);
        border:1px solid rgba(255,255,255,.11);
        box-shadow:0 8px 32px rgba(0,0,0,.6);
    }
}
@media(prefers-color-scheme:light){
    .fcpp-vol-popup[data-theme="auto"] {
        background:rgba(245,245,245,.92);
        backdrop-filter:blur(28px) saturate(1.6);
        -webkit-backdrop-filter:blur(28px) saturate(1.6);
        border:1px solid rgba(0,0,0,.12);
        box-shadow:0 8px 32px rgba(0,0,0,.15);
    }
}

/* vertical track */
.fcpp-vol-track {
    position:relative;
    width:4px;height:90px;
    background:rgba(255,255,255,.16);
    border-radius:0;cursor:pointer;
}
.fcpp-vol-popup[data-theme="light"] .fcpp-vol-track,
.fcpp-vol-popup[data-theme="auto"] .fcpp-vol-track { background:rgba(0,0,0,.14); }
@media(prefers-color-scheme:light){
    .fcpp-vol-popup[data-theme="auto"] .fcpp-vol-track { background:rgba(0,0,0,.14); }
}
.fcpp-vol-fill {
    position:absolute;left:0;bottom:0;width:100%;
    background:var(--fcpp-ac,#1db954);border-radius:0;pointer-events:none;
    transition:background .7s;
}
.fcpp-vol-thumb {
    position:absolute;left:50%;
    width:12px;height:12px;
    background:var(--fcpp-ac,#1db954);border-radius:50%;
    transform:translate(-50%,50%);
    pointer-events:none;transition:background .7s;
    box-shadow:0 0 8px rgba(var(--fcpp-ac-r,29),var(--fcpp-ac-g,185),var(--fcpp-ac-b,84),.7);
}

/* ── Responsive ── */
@media (max-width:680px) {
    #fcpp-player .fcpp-shell { padding:0 14px!important; }
    #fcpp-player .fcpp-center { padding:0 16px; }
    #fcpp-player .fcpp-song-title { font-size:14px!important; }
    #fcpp-player .fcpp-artist-name { font-size:13px!important; }
    #fcpp-player .fcpp-vol-track { width:56px; }
    #fcpp-player .fcpp-channels { max-width:140px; }
}
@media (max-width:500px) {
    /* ── MOBILE: artwork | info stack | play button ── */
    #fcpp-player .fcpp-right  { display:none!important; }
    #fcpp-player .fcpp-center { padding:0 12px!important; }
    .fcpp-ch-panel { display:block!important; }

    /* Switch to simple flex row: no grid */
    #fcpp-player .fcpp-shell {
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        padding:0 14px 0 12px!important;
        gap:10px!important;
    }

    /* Left: takes all available space between artwork and play button */
    #fcpp-player .fcpp-left {
        flex:1 1 0!important;
        min-width:0!important;
        overflow:hidden!important;
        gap:10px!important;
    }

    /* Info block: fills remaining space inside left, clips text */
    #fcpp-player .fcpp-info {
        flex:1 1 0!important;
        min-width:0!important;
        overflow:hidden!important;
    }

    /* Title row: pill is tiny text, title truncates */
    #fcpp-player .fcpp-title-row {
        gap:5px!important;
    }

    /* Pill text smaller on mobile */
    #fcpp-player .fcpp-live-label {
        font-size:7px!important;
        letter-spacing:.08em!important;
    }
    #fcpp-player .fcpp-live-pill {
        padding:3px 6px 3px 5px!important;
    }

    /* Song title: never wider than its container */
    #fcpp-player .fcpp-song-title {
        font-size:13px!important;
        flex:1 1 0!important;
        min-width:0!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
    }
    #fcpp-player .fcpp-artist-name {
        font-size:12px!important;
    }

    /* Center: play button — fixed, never shrinks */
    #fcpp-player .fcpp-center {
        flex-shrink:0!important;
        flex-grow:0!important;
        width:auto!important;
    }
}
/* FABs: fixed on body — NOT inside player (overflow:hidden would clip them) */
.fcpp-mobile-fabs {
    position:fixed!important;
    display:none!important; /* shown only on mobile via media query below */
    align-items:center!important;
    gap:8px!important;
    z-index:2147483646!important;
}
@media (max-width:500px) {
    .fcpp-mobile-fabs {
        display:flex!important;
    }
}
.fcpp-fab {
    width:40px!important;height:40px!important;
    border-radius:50%!important;
    background:rgba(18,18,18,.88)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    color:rgba(255,255,255,.88)!important;
    font-size:14px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    cursor:pointer!important;outline:none!important;
    -webkit-appearance:none!important;appearance:none!important;
    padding:0!important;margin:0!important;
    box-shadow:0 4px 18px rgba(0,0,0,.55)!important;
    transition:transform .15s,background .2s!important;
}
.fcpp-fab:active { transform:scale(.86)!important; }
.fcpp-fab.fcpp-fab-active {
    background:rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.82)!important;
    color:#fff!important;
    border-color:rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.55)!important;
}
@media (max-width:380px) {
    #fcpp-player .fcpp-art-wrap,
    #fcpp-player .fcpp-art-img { width:52px!important;height:52px!important; }
    #fcpp-player .fcpp-song-title  { font-size:12px!important; }
    #fcpp-player .fcpp-artist-name { font-size:11px!important; }
    #fcpp-player .fcpp-shell { padding:0 10px 0 10px!important;gap:8px!important; }
}

/* ══════════════════════════════════════════
   CHANNEL PANEL — popup hacia arriba
   ══════════════════════════════════════════ */

/* Botón "Canales" en la barra */
#fcpp-player .fcpp-ch-toggle {
    display:inline-flex!important;align-items:center!important;gap:7px!important;
    padding:6px 13px!important;border-radius:20px!important;
    background:var(--fcpp-ch-bg)!important;
    border:1px solid rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.28)!important;
    color:var(--fcpp-txt-main)!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:11px!important;font-weight:700!important;
    white-space:nowrap!important;cursor:pointer!important;
    transition:background .2s,transform .15s,border-color .3s!important;
    outline:none!important;-webkit-appearance:none!important;appearance:none!important;
    flex-shrink:0!important;letter-spacing:.04em!important;
    margin:0!important;line-height:1!important;vertical-align:middle!important;
    align-self:center!important;
}
#fcpp-player .fcpp-ch-toggle:hover {
    background:var(--fcpp-ch-active)!important;
    transform:scale(1.04)!important;
}
#fcpp-player .fcpp-ch-toggle.fcpp-panel-open {
    background:rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.22)!important;
    border-color:rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.55)!important;
    color:var(--fcpp-ac)!important;
}
#fcpp-player .fcpp-ch-toggle i { font-size:12px!important; transition:transform .25s; }
#fcpp-player .fcpp-ch-toggle.fcpp-panel-open i { transform:rotate(180deg); }

/* Panel contenedor — fixed en body para no ser cortado por overflow:hidden */
.fcpp-ch-panel {
    position:fixed!important;
    width:300px!important;
    max-height:0!important;
    overflow:hidden!important;
    border-radius:16px!important;
    transition:max-height .4s cubic-bezier(.22,1,.36,1), opacity .3s ease!important;
    opacity:0!important;
    z-index:2147483648!important;
    pointer-events:none!important;

    background:rgba(16,16,16,.97)!important;
    backdrop-filter:blur(28px) saturate(2)!important;
    -webkit-backdrop-filter:blur(28px) saturate(2)!important;
    border:1px solid rgba(255,255,255,.11)!important;
    box-shadow:0 8px 40px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4)!important;
}
#fcpp-player[data-theme="light"] ~ .fcpp-ch-panel,
.fcpp-ch-panel[data-theme="light"] {
    background:rgba(245,245,245,.97)!important;
    border-color:rgba(0,0,0,.12)!important;
    box-shadow:0 -8px 40px rgba(0,0,0,.18)!important;
}
.fcpp-ch-panel.fcpp-panel-open {
    max-height:420px!important;
    opacity:1!important;
    pointer-events:all!important;
    overflow-y:auto!important;
}
.fcpp-ch-panel::-webkit-scrollbar { width:4px; }
.fcpp-ch-panel::-webkit-scrollbar-track { background:transparent; }
.fcpp-ch-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2);border-radius:0; }

/* Panel header */
.fcpp-ch-panel .fcpp-ch-panel-hdr {
    padding:12px 16px 10px!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:9px!important;font-weight:800!important;
    letter-spacing:.14em!important;text-transform:uppercase!important;
    color:var(--fcpp-txt-sub)!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
}
.fcpp-ch-panel[data-theme="light"] .fcpp-ch-panel-hdr {
    border-bottom-color:rgba(0,0,0,.08)!important;
}
.fcpp-ch-panel-close {
    width:22px!important;height:22px!important;border-radius:50%!important;
    background:rgba(255,255,255,.10)!important;
    border:none!important;outline:none!important;cursor:pointer!important;
    color:var(--fcpp-txt-sub)!important;font-size:11px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:0!important;-webkit-appearance:none!important;appearance:none!important;
    transition:background .15s!important;
}
.fcpp-ch-panel-close:hover { background:rgba(255,255,255,.2)!important; }
.fcpp-ch-panel[data-theme="light"] .fcpp-ch-panel-close {
    background:rgba(0,0,0,.08)!important;
}

/* Canal row */
.fcpp-ch-panel .fcpp-ch-row {
    display:flex!important;align-items:center!important;gap:12px!important;
    padding:10px 16px!important;cursor:pointer!important;
    transition:background .18s!important;
    border-bottom:1px solid rgba(255,255,255,.05)!important;
    position:relative!important;
    -webkit-tap-highlight-color:transparent!important;
}
.fcpp-ch-panel[data-theme="light"] .fcpp-ch-row {
    border-bottom-color:rgba(0,0,0,.06)!important;
}
.fcpp-ch-panel .fcpp-ch-row:last-child { border-bottom:none!important; }
.fcpp-ch-panel .fcpp-ch-row:hover { background:rgba(255,255,255,.06)!important; }
.fcpp-ch-panel[data-theme="light"] .fcpp-ch-row:hover { background:rgba(0,0,0,.05)!important; }

/* Canal activo */
.fcpp-ch-panel .fcpp-ch-row.fcpp-ch-row-active {
    background:rgba(var(--fcpp-ac-r),var(--fcpp-ac-g),var(--fcpp-ac-b),.12)!important;
}
.fcpp-ch-panel .fcpp-ch-row.fcpp-ch-row-active::before {
    content:'';
    position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--fcpp-ac);border-radius:0 3px 3px 0;
}

/* Logo del canal */
.fcpp-ch-panel .fcpp-ch-logo {
    width:52px!important;height:52px!important;border-radius:10px!important;
    object-fit:cover!important;flex-shrink:0!important;
    background:#222!important;
    box-shadow:0 3px 12px rgba(0,0,0,.5)!important;
}
.fcpp-ch-panel .fcpp-ch-logo-placeholder {
    width:52px!important;height:52px!important;border-radius:10px!important;
    flex-shrink:0!important;background:#1e1e1e!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:22px!important;box-shadow:0 3px 12px rgba(0,0,0,.5)!important;
}

/* Canal info */
.fcpp-ch-panel .fcpp-ch-info { flex:1;min-width:0; }
.fcpp-ch-panel .fcpp-ch-name {
    font-family:'Montserrat',sans-serif!important;
    font-size:13px!important;font-weight:700!important;
    color:var(--fcpp-txt-main)!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    margin-bottom:3px!important;
}
.fcpp-ch-panel .fcpp-ch-sub {
    font-family:'Onest',sans-serif!important;
    font-size:11px!important;color:var(--fcpp-txt-sub)!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}

/* Play indicator */
.fcpp-ch-panel .fcpp-ch-play-ic {
    width:30px!important;height:30px!important;border-radius:50%!important;
    background:rgba(255,255,255,.1)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    flex-shrink:0!important;opacity:0!important;
    transition:opacity .2s, background .2s!important;
    font-size:10px!important;color:var(--fcpp-txt-main)!important;
}
.fcpp-ch-panel .fcpp-ch-row:hover .fcpp-ch-play-ic { opacity:1!important; }
.fcpp-ch-panel .fcpp-ch-row.fcpp-ch-row-active .fcpp-ch-play-ic {
    opacity:1!important;
    background:transparent!important;
    border-radius:0!important;
    width:auto!important;
    height:18px!important;
}

/* Equalizer bars for playing channel */
.fcpp-ch-panel .fcpp-ch-eq {
    display:flex!important;align-items:flex-end!important;gap:3px!important;
    height:16px!important;overflow:hidden!important;
}
.fcpp-ch-panel .fcpp-ch-eq span {
    display:block!important;
    width:3px!important;border-radius:0!important;
    background:var(--fcpp-ac)!important;
    transform-origin:bottom!important;
    animation:fcpp-ch-eq-anim 0.7s ease-in-out infinite alternate!important;
}
.fcpp-ch-panel .fcpp-ch-eq span:nth-child(1){ height:5px;animation-delay:0s; }
.fcpp-ch-panel .fcpp-ch-eq span:nth-child(2){ height:13px;animation-delay:.13s; }
.fcpp-ch-panel .fcpp-ch-eq span:nth-child(3){ height:8px;animation-delay:.26s; }
@keyframes fcpp-ch-eq-anim {
    0%  { transform:scaleY(1); }
    100%{ transform:scaleY(.25); }
}
#fcpp-player[data-state="stopped"] ~ * .fcpp-ch-eq span,
#fcpp-player[data-state="loading"] ~ * .fcpp-ch-eq span,
body:has(#fcpp-player[data-state="stopped"]) .fcpp-ch-eq span,
body:has(#fcpp-player[data-state="loading"]) .fcpp-ch-eq span {
    animation-play-state:paused!important;
}

/* Panel needs its own CSS var defaults (it lives outside #fcpp-player) */
.fcpp-ch-panel {
    --fcpp-ac:      #1db954;
    --fcpp-ac-r:    29;
    --fcpp-ac-g:    185;
    --fcpp-ac-b:    84;
    --fcpp-txt-main: #ffffff;
    --fcpp-txt-sub:  rgba(255,255,255,.55);
}
.fcpp-ch-panel[data-theme="light"] {
    --fcpp-txt-main: #111111;
    --fcpp-txt-sub:  rgba(0,0,0,.52);
}

/* ── Collapse toggle tab ── */
#fcpp-collapse-tab {
    position:fixed!important;
    bottom:92px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:2147483646!important;
    width:48px;height:20px;
    border:none;
    border-radius:10px 10px 0 0;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:bottom .5s cubic-bezier(.22,1,.36,1), background .2s, opacity .3s!important;
    opacity:0;
    outline:none;
    box-shadow:none;
}
#fcpp-collapse-tab.fcpp-tab-visible { opacity:1; }
#fcpp-collapse-tab svg {
    width:14px;height:14px;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), stroke .2s;
    flex-shrink:0;
}

/* DARK */
#fcpp-collapse-tab[data-theme="dark"] {
    background:rgba(16,16,16,.92);
    backdrop-filter:blur(20px) saturate(2);
    -webkit-backdrop-filter:blur(20px) saturate(2);
}
#fcpp-collapse-tab[data-theme="dark"]:hover {
    background:rgba(36,36,52,.95);
}
#fcpp-collapse-tab[data-theme="dark"] svg { stroke:rgba(255,255,255,.78); }

/* LIGHT */
#fcpp-collapse-tab[data-theme="light"] {
    background:rgba(245,245,252,.92);
    backdrop-filter:blur(20px) saturate(1.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
}
#fcpp-collapse-tab[data-theme="light"]:hover {
    background:rgba(228,228,240,.95);
}
#fcpp-collapse-tab[data-theme="light"] svg { stroke:rgba(30,30,40,.75); }

/* AUTO — dark OS */
@media(prefers-color-scheme:dark){
    #fcpp-collapse-tab[data-theme="auto"] {
        background:rgba(16,16,16,.88);
        backdrop-filter:blur(20px) saturate(2);
        -webkit-backdrop-filter:blur(20px) saturate(2);
        border:1px solid rgba(255,255,255,.13);
        box-shadow:0 -4px 20px rgba(0,0,0,.5);
    }
    #fcpp-collapse-tab[data-theme="auto"]:hover { background:rgba(36,36,52,.95); }
    #fcpp-collapse-tab[data-theme="auto"] svg   { stroke:rgba(255,255,255,.78); }
}
/* AUTO — light OS */
@media(prefers-color-scheme:light){
    #fcpp-collapse-tab[data-theme="auto"] {
        background:rgba(245,245,252,.97);
        border:1px solid rgba(0,0,0,.13);
        box-shadow:0 -2px 12px rgba(0,0,0,.10);
    }
    #fcpp-collapse-tab[data-theme="auto"]:hover { background:rgba(228,228,240,.99); }
    #fcpp-collapse-tab[data-theme="auto"] svg   { stroke:rgba(30,30,40,.75); }
}

/* collapsed state */
body.fcpp-collapsed #fcpp-collapse-tab { bottom:0!important; }
body.fcpp-collapsed #fcpp-collapse-tab svg { transform:rotate(180deg); }
body.fcpp-collapsed #fcpp-player { transform:translateY(100%)!important; }
body.fcpp-collapsed.fcpp-active  { padding-bottom:22px!important; }
body.fcpp-collapsed .fcpp-mobile-fabs { display:none!important; }

/* ═══════════════════════════════════════════
   EQUALIZER VISUAL (main player artwork)
═══════════════════════════════════════════ */
/* EQ bars — fondo completo del player */
#fcpp-player .fcpp-eq-bars {
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    gap:2px;         /* overridden by JS with eqCfg.gap */
    padding:0;
    pointer-events:none;
    opacity:0;
    transition:opacity .5s ease;
    z-index:3;
    overflow:hidden;
}
#fcpp-player .fcpp-eq-bars.fcpp-eq-active { opacity:1; }
#fcpp-player .fcpp-eq-bars span {
    border-radius:0;
    animation:fcpp-eq .7s ease-in-out infinite alternate;
    flex-shrink:0;
}
/* staggered delays for natural movement */

/* @keyframes fcpp-eq — injected by player.js with configured height */