/* ============================================================
   PLAYER — MODELOS E MODO FLUTUANTE
   Classes no <body> (layout.php, a partir de Configurações > Player):
     pl-mod-estudio | pl-mod-destaque   → modelo
     pl-pos-topo                        → o player fica sempre no topo
     pl-flutua (+ pl-flutuando ao rolar) → vira o cartão do locutor
   Cores: --pl-bg, --pl-texto (painel), --primary, --sobre-primaria.
   ============================================================ */

body { --pl-h: 76px; }
body.pl-mod-destaque { --pl-h: 84px; }

/* ── Cores vindas das variáveis (trocam junto com o estilo) ── */
#player-root {
    height: var(--pl-h);
    background: var(--pl-bg);
    border-bottom: 0;
}
#player-root .player-track-title,
#player-root .player-track-artist,
#player-root .player-btn { color: var(--pl-texto); }
#player-root .player-track-artist { opacity: .7; }
#player-root .player-spinner { border-top-color: var(--pl-texto); }
#player-root .player-btn-play {
    background: var(--pl-botao, var(--primary));
    color: var(--pl-botao-texto, var(--sobre-primaria));
}
#player-root .player-vol-slider { accent-color: var(--pl-texto); background: color-mix(in srgb, var(--pl-texto) 25%, transparent); }
#player-root .player-vol-slider::-webkit-slider-thumb { background: var(--pl-texto); }
#player-root .player-eq-bar { background: var(--primary); }
#player-root .player-ambiente { display: none; }
#player-root .player-espaco { display: none; }

/* ── Posição: topo ─────────────────────────────────────── */
/* O player não é fixo: fica no começo da página e sobe junto com ela.
   Ao rolar, vira o cartão do locutor (pl-flutuando) e o menu gruda no topo. */
body.pl-pos-topo { padding-top: var(--pl-h); }
body.pl-pos-topo #player-root { position: absolute; top: 0; }
body.pl-pos-topo .main-header,
body.pl-pos-topo .main-header-t2,
body.pl-pos-topo .main-header-t3,
body.pl-pos-topo .t3-navbar,
body.pl-pos-topo .main-header-t4 { top: 0; }

/* ============================================================
   BARRA DO TOPO (os dois modelos, fora do modo flutuante)
   .player-controls vira "display: contents" para que play, mudo e
   volume se posicionem um a um na barra (ordem pelo "order").
   ============================================================ */
body:not(.pl-flutuando) #player-root::before,
body:not(.pl-flutuando) #player-root::after { display: none; }
body:not(.pl-flutuando) #player-root .player-inner {
    max-width: 1320px;
    height: 100%;
    padding: 0 28px;
    gap: 16px;
}
body:not(.pl-flutuando) #player-root .player-controls { display: contents; }
body:not(.pl-flutuando) #player-root .player-divider { display: none; }
body:not(.pl-flutuando) #player-root .player-dot { display: none; }

/* Capa: quadrada, cantos suaves, sem borda */
body:not(.pl-flutuando) #player-root .player-cover-wrap { order: 1; }
body:not(.pl-flutuando) #player-root .player-cover-img {
    border: 0;
    border-radius: 8px;
    animation: none !important;
    box-shadow: none !important;
    background: color-mix(in srgb, var(--pl-texto) 10%, transparent);
}
body:not(.pl-flutuando) #player-root .player-cover-bg { display: none; }

/* Música e artista */
body:not(.pl-flutuando) #player-root .player-info-wrap { order: 2; flex: 1 1 0; min-width: 0; gap: 1px; padding: 0; }
body:not(.pl-flutuando) #player-root .player-track-title { font-size: 16px; font-weight: 600; line-height: 1.25; }
body:not(.pl-flutuando) #player-root .player-track-artist { font-size: 14px; line-height: 1.25; }

/* Sem o selo "Ao vivo" na barra (pedido do cliente) */
body:not(.pl-flutuando) #player-root .player-live-badge { display: none !important; }

/* Play */
body:not(.pl-flutuando) #player-root .player-loader { order: 4; }
body:not(.pl-flutuando) #player-root .player-btn-play {
    order: 4;
    width: 48px;
    height: 48px;
    font-size: 17px;
    box-shadow: none;
    flex-shrink: 0;
}
body:not(.pl-flutuando) #player-root .player-btn-play::after { display: none; }
body:not(.pl-flutuando) #player-root .player-btn-play:hover { transform: scale(1.05); filter: none; box-shadow: none; }
body:not(.pl-flutuando) #player-root .player-btn-play:active { transform: scale(.95); }

/* Equalizador (só quando está tocando) */
body:not(.pl-flutuando) #player-root .player-eq { order: 5; padding: 0; height: 18px; }

/* Volume: no canto direito, maior que o padrão */
body:not(.pl-flutuando) #player-root .player-btn-mute {
    order: 7;
    width: 44px;
    height: 44px;
    font-size: 18px;
    background: color-mix(in srgb, var(--pl-texto) 10%, transparent);
    margin-left: auto;
}
body:not(.pl-flutuando) #player-root .player-btn-mute:hover { background: color-mix(in srgb, var(--pl-texto) 18%, transparent); }
body:not(.pl-flutuando) #player-root .player-vol-slider {
    order: 8;
    width: 150px;
    height: 6px;
    border-radius: 6px;
}
body:not(.pl-flutuando) #player-root .player-vol-slider::-webkit-slider-thumb { width: 18px; height: 18px; }
body:not(.pl-flutuando) #player-root .player-vol-slider::-moz-range-thumb { width: 18px; height: 18px; }

/* ── Modelo ESTÚDIO: música à esquerda, play no centro, volume à direita ── */
/* O espaço flexível equilibra a música do outro lado e mantém o play no meio */
body.pl-mod-estudio:not(.pl-flutuando) #player-root .player-espaco { display: block; order: 6; flex: 1 1 0; }
body.pl-mod-estudio:not(.pl-flutuando) #player-root .player-btn-mute { margin-left: 0; }
body.pl-mod-estudio:not(.pl-flutuando) #player-root .player-cover-wrap,
body.pl-mod-estudio:not(.pl-flutuando) #player-root .player-cover-img { width: 52px; height: 52px; }
body.pl-mod-estudio:not(.pl-flutuando) #player-root .player-btn-play {
    background: var(--pl-texto);
    color: var(--pl-bg);
}

/* ── Modelo CAPA EM DESTAQUE: capa maior, play colado, fundo com a cor da capa ── */
body.pl-mod-destaque #player-root { overflow: hidden; }
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-ambiente {
    display: block;
    position: absolute;
    inset: -60px;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(1.5);
    opacity: .5;
    transition: background-image .8s ease;
    pointer-events: none;
}
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-inner { position: relative; z-index: 1; gap: 18px; }
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-cover-wrap,
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-cover-img { width: 64px; height: 64px; }
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-cover-img {
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4) !important;   /* capa "solta" sobre o fundo */
}
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-btn-play { order: 2; width: 52px; height: 52px; font-size: 18px; }
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-loader { order: 2; }
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-info-wrap { order: 4; }
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-track-title { font-size: 18px; font-weight: 700; }
body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-eq { order: 5; }

/* ── Celular: capa, música e play ───────────────────────── */
@media (max-width: 767px) {
    body { --pl-h: 68px; }
    body.pl-mod-destaque { --pl-h: 74px; }
    body:not(.pl-flutuando) #player-root .player-inner { padding: 0 14px; gap: 12px; }
    body:not(.pl-flutuando) #player-root :is(.player-espaco, .player-btn-mute, .player-vol-slider, .player-eq) { display: none !important; }
    body:not(.pl-flutuando) #player-root .player-btn-play { order: 9; width: 44px; height: 44px; font-size: 15px; }
    body.pl-mod-estudio:not(.pl-flutuando) #player-root .player-cover-wrap,
    body.pl-mod-estudio:not(.pl-flutuando) #player-root .player-cover-img { width: 46px; height: 46px; }
    body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-cover-wrap,
    body.pl-mod-destaque:not(.pl-flutuando) #player-root .player-cover-img { width: 54px; height: 54px; }
    body:not(.pl-flutuando) #player-root .player-track-title { font-size: 15px; }
    body:not(.pl-flutuando) #player-root .player-track-artist { font-size: 13px; }
}

/* ── Flutuante: ao rolar vira o cartão do locutor ──────────
   Canto de baixo à direita: foto do locutor no ar com o programa
   sobre ela e, embaixo, o play com "Ao vivo" e o nome da rádio.
   O cartão (.player-locutor) só existe na página quando o player
   é flutuante (layout.php) e só aparece no modo pl-flutuando. */
#player-root .player-locutor,
#player-root .player-locutor-rotulo { display: none; }

@keyframes plEntraCartao {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.pl-flutuando #player-root {
    position: fixed;
    top: auto;
    bottom: 20px;
    left: auto;
    right: 20px;
    width: 176px;
    height: auto;
    padding: 0;
    transform: none;
    background: var(--pl-bg);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);   /* flutua de verdade sobre a página */
    overflow: hidden;
    pointer-events: auto;
    animation: plEntraCartao .3s cubic-bezier(.2, .8, .2, 1);
}
body.pl-flutuando #player-root::before,
body.pl-flutuando #player-root::after { display: none; }
body.pl-flutuando #player-root .player-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "foto foto" "play rotulo";
    align-items: center;
    column-gap: 10px;
    height: auto;
    max-width: none;
    padding: 0 0 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.pl-flutuando #player-root :is(.player-cover-wrap, .player-info-wrap, .player-eq, .player-live-badge,
    .player-divider, .player-btn-mute, .player-vol-slider) { display: none !important; }

body.pl-flutuando #player-root .player-locutor {
    grid-area: foto;
    display: block;
    position: relative;
    aspect-ratio: 1;
    margin-bottom: 12px;
    background: var(--primary);
}
body.pl-flutuando #player-root .player-locutor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.pl-flutuando #player-root .player-locutor.sem-programa img { object-fit: contain; padding: 18%; }
body.pl-flutuando #player-root .player-locutor-txt {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    padding: 28px 12px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); /* véu para ler sobre a foto */
    color: #fff;
    line-height: 1.2;
}
body.pl-flutuando #player-root .player-locutor-quem { font-size: 11px; opacity: .85; }
body.pl-flutuando #player-root .player-locutor-prog {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.pl-flutuando #player-root .player-controls { grid-area: play; padding-left: 12px; gap: 0; }
body.pl-flutuando #player-root .player-btn-play {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
body.pl-flutuando #player-root .player-loader { display: none; }

body.pl-flutuando #player-root .player-locutor-rotulo {
    grid-area: rotulo;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 12px;
    line-height: 1.2;
}
body.pl-flutuando #player-root .player-locutor-vivo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #ff453a;
}
body.pl-flutuando #player-root .player-locutor-luz {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff453a;
    animation: plLuz 1.6s ease-in-out infinite;
}
@keyframes plLuz { 50% { opacity: .35; } }
/* "Voltar ao topo" sai de baixo do cartão */
body.pl-flutuando :is(.botaotopo, #toTop) { right: 212px !important; bottom: 20px !important; }
@media (max-width: 600px) {
    body.pl-flutuando :is(.botaotopo, #toTop) { right: 16px !important; bottom: 84px !important; }
}
body.pl-flutuando #player-root .player-locutor-radio {
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O menu sobe para o topo quando o player sai de lá */
body.pl-flutuando .main-header,
body.pl-flutuando .main-header-t2,
body.pl-flutuando .main-header-t3,
body.pl-flutuando .t3-navbar,
body.pl-flutuando .main-header-t4 { top: 0; }

/* Celular: cápsula compacta (foto redonda + Ao vivo/programa + play) */
@media (max-width: 600px) {
    body.pl-flutuando #player-root {
        bottom: 16px;
        right: 16px;
        width: min(280px, calc(100vw - 32px));
        border-radius: 9999px;
    }
    body.pl-flutuando #player-root .player-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "foto rotulo play";
        padding: 6px;
    }
    body.pl-flutuando #player-root .player-locutor {
        width: 44px;
        height: 44px;
        margin: 0;
        border-radius: 50%;
        overflow: hidden;
    }
    body.pl-flutuando #player-root .player-locutor-txt { display: none; }
    body.pl-flutuando #player-root .player-locutor-radio { font-size: 12px; }
    body.pl-flutuando #player-root .player-controls { padding: 0; }
    body.pl-flutuando #player-root .player-locutor-rotulo { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.pl-flutuando #player-root { animation: none; }
}

/* ── Menu (header) não fixo: rola junto com a página ───── */
body .main-header,
body .main-header-t2,
body .main-header-t3,
body .t3-navbar,
body .main-header-t4 {
    position: relative !important;
    top: auto !important;
}