/* =========================================================
   OPENSOUND - THEME
   Sistema visual do projeto
   ========================================================= */


/* =========================================================
   TEMA ESCURO - PADRÃO
   ========================================================= */

:root {

    /* -----------------------------------------------------
       FUNDOS
       ----------------------------------------------------- */

    --cor-fundo: #1d1a27;
    --cor-fundo-secundario: #242031;

    --cor-superficie: #2d2838;
    --cor-superficie-hover: #373143;
    --cor-superficie-clara: #40394c;


    /* -----------------------------------------------------
       TEXTOS
       ----------------------------------------------------- */

    --cor-texto: #fff8f3;
    --cor-texto-secundario: #d8cfd8;
    --cor-texto-fraco: #9f96a3;


    /* -----------------------------------------------------
       PALETA PASTEL DO OPENSOUND

       Estas são as cores de destaque da identidade visual.
       Não significa que todas serão usadas ao mesmo tempo.
       ----------------------------------------------------- */

    /* Só entram cores que a identidade realmente usa. O verde-água e o
       verde foram removidos: nenhuma das duas estava em uso, e a
       verde-água era justamente a cor que atrapalhava no tema claro
       (1,27:1 sobre branco) e que ninguém gostava. */
    --pastel-pessego: #fde4cf;
    --pastel-rosa: #ffcfd2;
    --pastel-rosa-lilas: #f1c0e8;
    --pastel-lilas: #cfbaf0;
    --pastel-azul: #a3c4f3;
    --pastel-amarelo: #fbf8cc;
    --pastel-azul-claro: #90dbf4;
    --pastel-ciano: #8eeff5;


    /* -----------------------------------------------------
       CORES SEMÂNTICAS

       São as cores que os componentes devem usar.
       Assim o layout não precisa saber o HEX.
       ----------------------------------------------------- */

    --cor-primaria: #f1c0e8;
    --cor-primaria-hover: #cfbaf0;

    --cor-secundaria: #a3c4f3;
    --cor-destaque: #fde4cf;

    --cor-sucesso: #b9fbc0;
    --cor-erro: #ffcfd2;
    --cor-aviso: #fbf8cc;
    --cor-info: #90dbf4;


    /* -----------------------------------------------------
       ABAS / ETIQUETAS

       Cores pensadas especialmente para as "abas fofinhas".
       ----------------------------------------------------- */

    --aba-musicas: #ffcfd2;
    --aba-artistas: #cfbaf0;
    --aba-generos: #a3c4f3;
    --aba-biblioteca: #98f5e1;
    --aba-perfil: #fde4cf;
    --aba-config: #fbf8cc;

    /* A aba dos MODAIS é uma cor só, compartilhada por todos eles, e é
       quente de propósito: o rosa das músicas, para o popup não se
       confundir com as abas verde-água/lilas/azul das seções. */
    --aba-modal: #ffcfd2;


    /* A aba "Minhas Playlists" (página da biblioteca) é roxa pastel, para
       não se confundir com a verde-água das outras telas de biblioteca. */
    --aba-playlists: #cfbaf0;



    /* -----------------------------------------------------
       TEXTO SOBRE PASTEL

       As cores pastel são as mesmas nos dois temas, então o texto
       que fica em cima delas (abas, cards de gênero, etc.) também
       usa sempre este tom, pra manter contraste/legibilidade.
       ----------------------------------------------------- */

    --texto-sobre-pastel: #3a3350;


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    --card-fundo: #342e40;
    --card-fundo-hover: #3d364b;

    --card-texto: #fff8f3;

    --card-borda: rgba(255, 255, 255, 0.10);
    --card-borda-hover: rgba(255, 255, 255, 0.18);


    /* -----------------------------------------------------
       BORDAS
       ----------------------------------------------------- */

    --cor-borda: rgba(255, 255, 255, 0.10);
    --cor-borda-forte: rgba(255, 255, 255, 0.18);


    /* -----------------------------------------------------
    PAINÉIS COM ESTÉTICA DE ABA
    ----------------------------------------------------- */

    --painel-fundo: var(--cor-superficie);

    --painel-borda: rgba(255, 255, 255, 0.06);

    --painel-faixa-musicas: var(--aba-musicas);
    --painel-faixa-artistas: var(--aba-artistas);
    --painel-faixa-generos: var(--aba-generos);

    --painel-sombra: var(--sombra-suave);

    --painel-texto-aba: var(--texto-sobre-pastel);


    /* -----------------------------------------------------
       SOMBRAS
       ----------------------------------------------------- */

    --sombra-suave:
        0 4px 12px rgba(0, 0, 0, 0.12);

    --sombra-media:
        0 8px 20px rgba(0, 0, 0, 0.18);

    --sombra-forte:
        0 12px 30px rgba(0, 0, 0, 0.25);


    /* -----------------------------------------------------
       MODAIS / OVERLAY
       ----------------------------------------------------- */

    --cor-overlay: rgba(10, 8, 18, 0.68);

    /* Linha divisória fina entre as colunas do modal de upload. No tema
       escuro é a linha branca; no claro, um traço escuro suave — um
       branco puro sumiria sobre a superfície clara. */
    --linha-divisoria: rgba(255, 255, 255, 0.30);


    /* -----------------------------------------------------
       PLAYER
       ----------------------------------------------------- */

    --player-fundo: #292434;
    --player-borda: rgba(255, 255, 255, 0.12);

    /* Cor do trecho já percorrido da barra de tempo e da de volume.
       Lilás no escuro (8,55:1 sobre o fundo do player). No claro o lilás
       dá 1,76:1 e sumiria, então o bloco [data-theme="light"] troca
       pelo primário fundo — é o mesmo roxo da família, só escuro o
       bastante para existir sobre branco. */
    --player-progresso: #cfbaf0;

    /* Cor do trilho (a parte ainda não tocada). Token próprio em vez de
       --cor-superficie-clara: escurecer o fundo do player no tema claro
       faria o trilho claro desaparecer dentro dele. */
    --player-trilho: #40394c;


    /* -----------------------------------------------------
       INPUTS
       ----------------------------------------------------- */

    --input-fundo: #353041;
    --input-fundo-hover: #3d374a;
    --input-texto: #fff8f3;
    --input-placeholder: #a79eaa;
    --input-borda: rgba(255, 255, 255, 0.10);
    --input-borda-foco: #f1c0e8;
}


/* =========================================================
   TEMA CLARO
   Ativado com:

   <html data-theme="light">
   ========================================================= */

[data-theme="light"] {

    /* -----------------------------------------------------
       FUNDOS
       ----------------------------------------------------- */

    --cor-fundo: #faf5f8;
    --cor-fundo-secundario: #f1eaf0;

    --cor-superficie: #ffffff;
    --cor-superficie-hover: #f7eef5;
    --cor-superficie-clara: #eee5ee;


    /* -----------------------------------------------------
       TEXTOS
       ----------------------------------------------------- */

    --cor-texto: #302a34;
    --cor-texto-secundario: #655b68;
    --cor-texto-fraco: #958996;


    /* -----------------------------------------------------
       CORES SEMÂNTICAS
       ----------------------------------------------------- */

    --cor-primaria: #c989b9;
    --cor-primaria-hover: #b979a9;

    --cor-secundaria: #7196c9;
    --cor-destaque: #d9a98f;

    --cor-sucesso: #70af7d;
    --cor-erro: #c9787d;
    --cor-aviso: #b5a45a;
    --cor-info: #6b9db7;


    /* -----------------------------------------------------
       ABAS / ETIQUETAS — TEMA CLARO

       Estas são DIFERENTES das do escuro de propósito. Um pastel
       precisa de superfície escura para existir: em fundo escuro as
       abas ficam entre 8:1 e 13:1 de contraste, em fundo branco
       caem para 1,1:1-1,8:1 e desaparecem. Por isso aqui elas são
       a mesma família de cor (mesmo matiz, a identidade é a mesma)
       só que mais funda, com o texto escuro por cima funcionando.

       A Configuração é a exceção: o amarelo é claro demais para ser
       preenchimento (1,08:1 sobre branco), então vira BORDa — e como
       borda ele funciona, porque a linha é escura contra a superfície.
       ----------------------------------------------------- */

    --aba-musicas: #ff999f;      /* rosa mais fundo */
    --aba-artistas: #c5abed;     /* roxo mais fundo */
    --aba-generos: #a5c5f3;      /* azul mais fundo */
    --aba-biblioteca: #f9b276;   /* pêssego mais fundo (era verde-água) */
    --aba-perfil: #f9b276;       /* pêssego mais fundo */
    --aba-config: #9e9040;       /* âmbar escuro: usado como BORDA, não preenchimento */

    /* A aba dos MODAIS é a mesma rosa das músicas, para o popup não se
       confundir com as abas das seções. */
    --aba-modal: #ff999f;

    --aba-playlists: #c5abed;    /* mesma roxa dos artistas */




    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    --card-fundo: #ffffff;
    --card-fundo-hover: #f7eef5;

    --card-texto: #302a34;

    --card-borda: rgba(48, 42, 52, 0.10);
    --card-borda-hover: rgba(48, 42, 52, 0.18);


    /* -----------------------------------------------------
       BORDAS
       ----------------------------------------------------- */

    --cor-borda: rgba(48, 42, 52, 0.10);
    --cor-borda-forte: rgba(48, 42, 52, 0.18);

    /* -----------------------------------------------------
    PAINÉIS - TEMA CLARO
    ----------------------------------------------------- */

    --painel-fundo: var(--cor-superficie);

    --painel-borda: rgba(48, 42, 52, 0.08);

    --painel-sombra: var(--sombra-suave);

    --painel-texto-aba: var(--texto-sobre-pastel);


    /* -----------------------------------------------------
       SOMBRAS
       ----------------------------------------------------- */

    --sombra-suave:
        0 4px 12px rgba(80, 60, 80, 0.08);

    --sombra-media:
        0 8px 20px rgba(80, 60, 80, 0.12);

    --sombra-forte:
        0 12px 30px rgba(80, 60, 80, 0.16);


    /* -----------------------------------------------------
       MODAIS / OVERLAY
       ----------------------------------------------------- */

    --cor-overlay: rgba(30, 20, 30, 0.42);
    --linha-divisoria: rgba(90, 70, 95, 0.22);


    /* -----------------------------------------------------
       PLAYER
       ----------------------------------------------------- */

    /* Fundo do player no claro: um cinza-rosado um tom abaixo do branco.
       --cor-superficie-clara (#eee5ee) serviria, mas ele é justamente a
       cor que faz o trilho da barra, e os dois ficariam com 1,02:1 — a
       barra sumiria dentro do player. */
    --player-fundo: #f2ebf1;
    --player-borda: rgba(48, 42, 52, 0.12);

    /* Preenchimento roxo das barras no tema claro.

       ESTE HEX NÃO É TOKEN DO TEMA. Os roxos que existem aqui são
       --pastel-lilas (#cfbaf0) e --aba-artistas (#c5abed), e os dois
       somem sobre fundo claro: 1,76:1 e 2,01:1. O --cor-primaria
       (#c989b9) chega a 2,31:1, ainda menos que os 3:1 que uma barra de
       progresso precisa para o trecho pintado existir.

       Então é uma cor nova, criada só para isto, e o critério foi o
       contraste medido: 3,84:1 contra o fundo do player e 3,07:1 contra
       o trilho. Quem preferir puxar para a paleta aceita perder a barra
       clara — a alternativa é um trilho escuro com pastel lilás em cima,
       que também resolve, mas inverte a peça. */
    --player-progresso: #b5568c;

    /* Trilho escurecido junto com o fundo, para manter a mesma leitura de
       antes: 1,25:1 contra o player novo, contra 1,23:1 que o #eee5ee
       dava sobre o branco. O que separa pintado de não pintado continua
       sendo o roxo, com 3,07:1 contra este trilho. */
    --player-trilho: #ddd2de;


    /* -----------------------------------------------------
       INPUTS
       ----------------------------------------------------- */

    --input-fundo: #ffffff;
    --input-fundo-hover: #f7eef5;
    --input-texto: #302a34;
    --input-placeholder: #958996;
    --input-borda: rgba(48, 42, 52, 0.10);
    --input-borda-foco: #c989b9;
}


/* =========================================================
   COMPONENTES

   Regras de cor aplicadas diretamente aos seletores do
   home.html/home.css, usando as variáveis semânticas acima.
   Como usam var(), funcionam automaticamente nos dois temas.
   ========================================================= */

/* -----------------------------------------------------
   NAVBAR
   ----------------------------------------------------- */

.fixed-bar {
    background: var(--cor-superficie);
    box-shadow: var(--sombra-suave);
}

.fixed-bar button {
    background: var(--cor-superficie-clara);
    color: var(--cor-texto);

    border: 1px solid var(--cor-borda);

    box-shadow: var(--sombra-suave);
}

#btn-entrar,
#btn-register {
    background: var(--cor-primaria);
    color: var(--texto-sobre-pastel);
}

#btn-sair {
    background: var(--cor-erro);
    color: #fff8f3;
}

.nav-center input[type="search"] {
    background: var(--input-fundo);
    color: var(--input-texto);
}

.nav-center input[type="search"]::placeholder {
    color: var(--input-placeholder);
}

/* -----------------------------------------------------
   TÍTULOS DE SEÇÃO EM FORMATO DE "ABA"
   Cada seção usa a cor da sua variável --aba-*, já existente.
   ----------------------------------------------------- */

.secao-titulo {
    color: var(--texto-sobre-pastel);
}

.secao-titulo.aba-musicas {
    background: var(--aba-musicas);
}

.secao-titulo.aba-artistas {
    background: var(--aba-artistas);
}

.secao-titulo.aba-generos {
    background: var(--aba-generos);
}

/* -----------------------------------------------------
   SEÇÕES DA HOME (catálogo, artistas, gêneros)
   ----------------------------------------------------- */

.artists,
.genres {
    background: var(--cor-superficie);
}

/* =====================================================
   SETAS DO CARROSSEL
   ===================================================== */

.msc-seta {
    background: var(--cor-superficie-clara);
    color: var(--cor-texto);
}

.msc-seta:hover {
    background: var(--cor-primaria);
    color: var(--texto-sobre-pastel);
}

/* -----------------------------------------------------
   MODAIS (registro, login, cadastro de artista, upload)
   ----------------------------------------------------- */

.modal {
    background: var(--cor-overlay);
}

.conteudo-modal {
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    /* A sombra do modal é única: antes cada um repetia a sua, e os que
       nasceram depois (artista, upload, adicionar à playlist, nova
       playlist) acabavam com a --sombra-forte, bem mais fraca. */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(255, 255, 255, .02);
}

.conteudo-modal h2 {
    color: var(--cor-texto);
}

/* O seletor de arquivo precisa entrar na lista: sem ele o input de
   upload fica com a cor nativa do navegador, que não casa com o modal
   escuro nem com o claro. */
.conteudo-modal input[type="email"],
.conteudo-modal input[type="password"],
.conteudo-modal input[type="text"],
.conteudo-modal input[type="file"] {
    background: var(--input-fundo);
    color: var(--input-texto);
    border: 1px solid var(--input-borda);
}

.conteudo-modal input:focus {
    outline: none;
    border-color: var(--input-borda-foco);
}

.conteudo-modal input::placeholder {
    color: var(--input-placeholder);
}

.conteudo-modal button[type="submit"] {
    background: var(--cor-primaria);
    color: #fff8f3;
}

.conteudo-modal button[type="submit"]:hover {
    background: var(--cor-primaria-hover);
}

.btn-fechar {
    color: var(--cor-texto-fraco);
}

.campo-checkbox {
    color: var(--cor-texto-secundario);
}

.regras-senha li {
    color: var(--cor-erro);
}

.regras-senha li.valido {
    color: var(--cor-sucesso);
}

.texto-timer {
    color: var(--cor-texto-fraco);
}

#email-mascarado {
    color: var(--cor-primaria);
    font-weight: 700;
}

.texto-artista-info {
    color: var(--cor-texto-secundario);
}

.upload-artista-atual {
    color: var(--cor-texto-secundario);
}

.upload-artista-atual strong {
    color: var(--cor-texto);
}

/* -----------------------------------------------------
   GRADE OTP (2FA)
   ----------------------------------------------------- */

.input-otp {
    background: var(--input-fundo);
    color: var(--input-texto);
    border: 2px solid var(--input-borda);
}

.input-otp:focus {
    border-color: var(--input-borda-foco);
}

/* -----------------------------------------------------
   UPLOAD: campo de arquivo + preview ao vivo
   ----------------------------------------------------- */

/* O seletor de arquivo não tem mais regra própria: os dois modais que
   o usam passaram a usar o cartão .btn-upload, que já se veste com
   as variáveis de input daqui (--input-fundo, --input-borda...). */

.preview-upload-capa-wrapper,
.preview-upload-capa-vazio {
    background: var(--cor-superficie-clara);
    color: var(--cor-texto-fraco);
}

.preview-upload-titulo {
    color: var(--cor-texto);
}

.preview-upload-artista,
.preview-upload-audio {
    color: var(--cor-texto-secundario);
}

/* -----------------------------------------------------
   CATÁLOGO DE MÚSICAS
   ----------------------------------------------------- */

.lista-musicas {
    background: var(--cor-superficie);
}

.msc-seta {
    background: var(--card-fundo);
    color: var(--cor-texto);
}

.msc-seta:hover {
    background: var(--card-fundo-hover);
}

.msc-nome {
    color: var(--cor-texto);
}

.msc-artista {
    color: var(--cor-texto-secundario);
}

.mensagem-lista {
    color: var(--cor-texto-fraco);
}

.btn-play {
    background: var(--cor-primaria);
    color: #fff8f3;
}

/* -----------------------------------------------------
   PLAYER
   ----------------------------------------------------- */

.player-barra {
    background: var(--player-fundo);
    border-top: 1px solid var(--player-borda);
    box-shadow: var(--sombra-media);
    color: var(--cor-texto);
}

.player-titulo {
    color: var(--cor-texto);
}

.player-artista {
    color: var(--cor-texto-secundario);
}

/* Link para o perfil de alguém (nome do artista na barra do player, cartão
   de artista, resultado de busca). Herda a cor do lugar onde aparece: o
   azul padrão do navegador destoaria de todos os dois temas. */
.os-link-perfil {
    color: inherit;
    text-decoration: none;
}

.os-link-perfil:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.os-link-perfil:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: 3px;
}

#player-play-pause {
    background: var(--cor-primaria);
    color: #fff8f3;
}

.player-tempo {
    color: var(--cor-texto-fraco);
}

/* O contador de tempo é o único texto do player que ficaria ruim com o
   fundo do tema claro mais escuro: o --cor-texto-fraco drops de 3,34:1
   para 2,85:1, e é texto pequeno demais para aceitar. Só no claro ele
   sobe um degrau, para 5,52:1.

   No escuro o --cor-texto-fraco continua valendo (3,86:1) — a correção é
   do tema claro, e não da barra. */
[data-theme="light"] .player-tempo {
    color: var(--cor-texto-secundario);
}

/* -----------------------------------------------------
   BARRAS DO PLAYER (tempo e volume)

   As duas são o mesmo desenho: trilho arredondado em ponta, o trecho já
   percorrido pintado de roxo, e um botão redondo com um anel da cor do
   fundo por cima — é esse anel que faz o botão parecerfuradeira em vez
   de um disco chapado sobre o preenchimento.

   POR QUE ESTE BLOCO ESTÁ AQUI E NÃO NUMA FOLHA DE PÁGINA

   A barra do player aparece nas quatro páginas e a sua geometria está
   copiada em home.css, minhas-musicas.css e perfil.css (o item 7 da §5
   do RELATORIO). Aquelas cópias setting: flex-grow, a largura e a
   aparência nativa. Tudo que é APARÊNCIA mora aqui, num lugar só — se
   cada página tivesse a sua, trocar a cor do progresso significaria
   editar três folhas e esquecer uma.

   O seletor leva .player-barra na frente porque home.css/minhas-musicas
   /perfil.css carregam DEPOIS do theme.css e redeclaram .volume-slider
   com border-radius e background. Duas classes (0,2,0) ganham de uma
   (0,1,0) sem depender de ordem de carga — que é o problema da §3.
   ----------------------------------------------------- */

.player-barra .player-seek,
.player-barra .volume-slider {
    /* -webkit-appearance e appearance juntos: sem o prefixo o Chrome não
       desiste do desenho nativo e o trilho quadrado volta. */
    -webkit-appearance: none;
    appearance: none;

    height: 6px;
    border-radius: 999px;

    outline: none;
    cursor: pointer;

    /* O preenchimento é um gradiente com a parada no valor do slider. Não
       dá para fazer isso só com CSS de slider: o navegador não expõe o
       valor para o CSS, e o truque do ::-moz-range-progress só existe no
       Firefox. O player.js escreve a fração (0 a 100) em
       --player-preenchido. */
    background:
        linear-gradient(to right,
            var(--player-progresso) 0%,
            var(--player-progresso) calc(var(--player-preenchido, 0) * 1%),
            var(--player-trilho) calc(var(--player-preenchido, 0) * 1%),
            var(--player-trilho) 100%);
}

/* O Firefox tem pseudo-elemento próprio e pinta o percorrido sozinho, sem
   precisar do gradiente nem da variável do JS. */
.player-barra .player-seek::-moz-range-progress,
.player-barra .volume-slider::-moz-range-progress {
    background: var(--player-progresso);
    border-radius: 999px;
}

.player-barra .player-seek::-moz-range-track,
.player-barra .volume-slider::-moz-range-track {
    height: 6px;
    background: var(--player-trilho);
    border-radius: 999px;
}

/* Firefox não deixa estilizar o trilho e o polegar em regras separadas do
   próprio input. */
.player-barra .player-seek::-moz-range-thumb,
.player-barra .volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--player-fundo);
    border-radius: 50%;
    background: var(--player-progresso);
    box-shadow: var(--sombra-suave);
}

.player-barra .player-seek::-webkit-slider-thumb,
.player-barra .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 14px;
    height: 14px;
    border: 2px solid var(--player-fundo);
    border-radius: 50%;

    background: var(--player-progresso);
    box-shadow: var(--sombra-suave);

    cursor: pointer;

    transition: transform var(--transicao-rapida);
}

.player-barra .player-seek::-webkit-slider-thumb:hover,
.player-barra .volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* O foco precisa continuar visível depois que o desenho nativo saiu. */
.player-barra .player-seek:focus-visible {
    outline: 2px solid var(--player-progresso);
    outline-offset: 4px;
    border-radius: 999px;
}

/* -----------------------------------------------------
   MENU HAMBURGUER
   ----------------------------------------------------- */

.dropdown-hamburguer {
    background: var(--cor-superficie);
    box-shadow: var(--sombra-forte);
}

.item-dropdown {
    color: var(--cor-texto);
}

.item-dropdown:hover {
    background: var(--cor-superficie-hover);
}

/* -----------------------------------------------------
   PÁGINA DE CONFIGURAÇÕES
   ----------------------------------------------------- */

.titulo-navbar-config {
    color: var(--cor-texto);
}

.secao-config {
    background: var(--painel-fundo);
    color: var(--cor-texto);
    border: 1px solid var(--painel-borda);
}

.secao-config input[type="text"],
.secao-config input[type="password"] {
    background: var(--input-fundo);
    color: var(--input-texto);
    border: 1px solid var(--input-borda);
}

.secao-config input:focus {
    outline: none;
    border-color: var(--input-borda-foco);
}

.secao-config input::placeholder {
    color: var(--input-placeholder);
}

.secao-config button {
    background: var(--cor-primaria);
    color: var(--texto-sobre-pastel);
}

.secao-perigo {
    border: 2px solid var(--cor-erro);
}

.btn-perigo {
    background: var(--cor-erro) !important;
    color: #fff8f3 !important;
}

.mensagem-cooldown {
    color: var(--cor-erro);
}

/* -----------------------------------------------------
   MINHAS MÚSICAS (botão de excluir + aba)
   ----------------------------------------------------- */

.secao-titulo.aba-biblioteca {
    background: var(--aba-biblioteca);
}

.btn-excluir-musica {
    background: var(--cor-erro);
    color: #292434;
}

/* -----------------------------------------------------
   PLAYLISTS / FAVORITOS
   ----------------------------------------------------- */

/* Botão de ícone genérico (coração e "adicionar à playlist").

   Mora aqui, e não na home.css, porque TODAS as páginas carregam esta
   folha e todas colocam esses botões na barra do player. O formato base
   é comum a todas; as cores ficam nos blocos de tema daqui e de baixo. */
.btn-icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    padding: 0;

    border: none;
    border-radius: var(--raio-circular);

    font-size: var(--texto-grande);
    font-weight: 800;
    line-height: 1;

    flex-shrink: 0;
    cursor: pointer;

    transition:
        transform var(--transicao-rapida),
        filter var(--transicao-rapida),
        background-color 0.3s ease,
        color 0.3s ease;
}

.btn-icone:hover {
    transform: scale(1.1);
}

.btn-icone:active {
    transform: scale(0.94);
}

/* Na barra do player: acompanha o tema. */
.player-barra .btn-icone {
    background: var(--cor-superficie-clara);
    color: var(--cor-texto);
}

.player-barra .btn-icone:hover {
    background: var(--cor-superficie-hover);
}

/* Sobre a capa: fundo escuro translúcido nos dois temas, porque quem
   manda no contraste ali é a imagem, não o tema. */
.msc-acoes-capa .btn-icone {
    background: rgba(20, 16, 30, 0.62);
    color: #fff8f3;
}

.msc-acoes-capa .btn-icone:hover {
    background: rgba(20, 16, 30, 0.82);
}

/* Coração preenchido (música favoritada). */
.btn-icone.ativo {
    color: #ff6b8b;
}

.item-playlist-modal {
    background: var(--input-fundo);
    color: var(--cor-texto);
    border-color: var(--input-borda);
}

.item-playlist-modal:hover {
    background: var(--input-fundo-hover);
}

.item-playlist-modal.adicionada {
    border-color: var(--cor-sucesso);
}

.item-playlist-capa {
    background: var(--cor-superficie-clara);
}
.item-playlist-estado {
    color: var(--cor-sucesso);
}
/* -----------------------------------------------------
   GRADE DE CARDS (Biblioteca, Playlist, Minhas Músicas)
   ----------------------------------------------------- */

.card-playlist,
.card-musica {
    background: var(--card-fundo);
    box-shadow: var(--sombra-suave);
}

.card-playlist:hover,
.card-musica:hover {
    background: var(--card-fundo-hover);
    box-shadow: var(--sombra-media);
}

.capa-musica.capa-vazia {
    background: var(--cor-superficie-clara);
    color: var(--cor-texto-fraco);
}

.titulo-musica {
    color: var(--card-texto);
}

.artista-musica {
    color: var(--cor-texto-secundario);
}

/* ============================================================
   PAINEL DA FILA
   --------------------------------------------
   Vive aqui (e não na home.css) porque a fila é do player, que
   existe em todas as páginas — inclusive no perfil, que não
   carrega a folha da home. Esta é a regra do arquivo.
   ============================================================ */
.player-fila-painel {
  position: fixed;
  right: 16px;
  bottom: 92px; /* acima da barra de player */
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--raio-medio);
  background: var(--painel-fundo);
  border: 1px solid var(--painel-borda);
  box-shadow: var(--sombra-forte);
  color: var(--cor-texto);
  z-index: 950; /* acima do conteúdo, abaixo do painel de upload (1001) */
}



.player-fila-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}



.player-fila-titulo-h2 {
  font-size: var(--texto-base);
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 8px;
}



.player-fila-contagem {
  font-size: var(--texto-minimo);
  font-weight: 600;
  color: var(--cor-texto-fraco);
}



.player-fila-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
}



.player-fila-btn,
.player-fila-fechar {
  border: 1px solid var(--input-borda);
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-minimo);
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}



.player-fila-btn:hover,
.player-fila-fechar:hover {
  background: var(--cor-superficie-hover);
  color: var(--cor-texto);
}



.player-fila-fechar {
  padding: 2px 8px;
  font-size: var(--texto-grande);
  line-height: 1;
}



.player-fila-dica {
  font-size: var(--texto-minimo);
  color: var(--cor-texto-fraco);
}



.player-fila-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}



.player-fila-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  border: 1px solid transparent;
  cursor: grab;
  transition: background 0.2s ease, border-color 0.2s ease;
}



.player-fila-item:hover {
  background: var(--cor-superficie-hover);
  border-color: var(--painel-borda);
}



.player-fila-item.arrastando {
  opacity: 0.45;
  cursor: grabbing;
}



.player-fila-posicao {
  font-size: var(--texto-minimo);
  font-weight: 700;
  color: var(--cor-texto-fraco);
  min-width: 16px;
  text-align: center;
  flex-shrink: 0;
}



.player-fila-capa {
  width: 32px;
  height: 32px;
  border-radius: var(--raio-pequeno);
  object-fit: cover;
  flex-shrink: 0;
}



.player-fila-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-grow: 1;
}



.player-fila-titulo {
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--cor-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.player-fila-artista {
  font-size: var(--texto-minimo);
  color: var(--cor-texto-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.player-fila-remover {
  border: none;
  background: none;
  color: var(--cor-texto-fraco);
  cursor: pointer;
  font-size: var(--texto-pequeno);
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.2s ease;
}



.player-fila-remover:hover {
  color: var(--cor-erro);
}



.player-fila-vazia {
  font-size: var(--texto-pequeno);
  font-style: italic;
  color: var(--cor-texto-fraco);
  padding: 10px 2px;
}



.player-fila-btn-abrir {
  flex-shrink: 0;
}


/*===================================================
  TOCAR PLAYLIST + BUSCA DE MÚSICAS NA PLAYLIST
  Biblioteca (botão no card) e página da playlist
  (botão na navbar + bloco de busca).
====================================================*/

/* A música que está tocando no topo da lista da fila. Fica fora da
   reordenação por arrasto, que só se aplica às próximas. */
.player-fila-atual {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria);
  color: var(--texto-sobre-pastel);
}



.player-fila-atual .player-fila-texto {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}



/* O título herda a cor do texto normal, que ficaria ilegível sobre o pastel. */
.player-fila-atual .player-fila-titulo {
  color: var(--texto-sobre-pastel);
}



.player-fila-agora {
  font-size: var(--texto-minimo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}