/* ══════════════════════════════════════════════════════════════════════════
   CifraNET — PÁGINA DA CIFRA (fase 5 do desenho novo, 06/10/2026)

   Este arquivo é o DESENHO NOVO da página da cifra, e só dele. Ele saiu do
   `cifranet-ui-20261006.css` quando aquele arquivo passou de 60 KB: a home e
   as duas laterais valem em TODAS as páginas, a cifra vale em uma — assim o
   resto do site não paga o peso desta folha.

   Quem carrega: o casco (`cifranet_ui_novo_assets()`), com um <link> a mais,
   SÓ na página da cifra e sempre DEPOIS do arquivo principal (a ordem importa:
   aqui é a última camada do desenho).

   Todo seletor daqui é escopado em `body.cifranet-shell.page-cifra`. O que NÃO
   se toca: a fonte, o tamanho e a entrelinha da letra, a barra do modo ensaio,
   o botão "Ouvir junto" e o tamanho de texto que a pessoa escolheu (12 a 30 px).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 18. PÁGINA DA CIFRA (fase 5) ═══════════════════════════════════════
   ESCOPO: `body.cifranet-shell.page-cifra` — a classe que o casco põe no corpo
   em `cifra.php` (conferida no ar em 06/10/2026). Nada disto sai desta página.

   É SÓ DESENHO. Nenhum `id`, nenhum endereço, nenhuma função e nenhuma medida do
   JavaScript mudam: os botões, os controles e as ações continuam sendo os mesmos
   elementos, com os mesmos `onclick`/`data-*`. O `!important` aparece porque o
   CSS da própria cifra tem 329 `!important` (a página é grande e antiga) — o
   escopo de três classes garante que esta repintura não vaze para o resto.

   O que NÃO se toca aqui, de propósito:
     · a TIPOGRAFIA da letra (`#cifra`, `.cifra-line`) — a folha é monoespaçada
       com espaços significativos: fonte, tamanho, entrelinha, espaçamento e
       preenchimento desalinham a música. O `#cifra .chord` recebe só TINTA
       (cor e marca clara atrás das letras, sem preenchimento) na 4ª parte;
     · a barra do modo ensaio (`#rehearsalToolbar`) e a barra do celular (`#cfBarra`);
     · o botão "Ouvir junto" (`.listen-together`), que tem desenho próprio. */

/* ── O CARTAZ DA MÚSICA (o topo da página, como no desenho de referência) ──
   A foto da música JÁ vinha na página (é a mesma do botão do vídeo) e agora entra
   como FUNDO do cartaz, por uma variável de CSS escrita no próprio <header>
   (`--cn-capa` — ver cifra.php). Assim o topo fica como no desenho: faixa
   azul-marinho com a foto à direita, título grande em branco, artista em laranja,
   os dados em etiquetas e o botão do vídeo em pílula no canto.

   Nenhuma imagem nova é baixada (é a MESMA que a página já carregava) e nenhum
   caminho muda: o botão continua chamando `openVideoModal()`. */
body.cifranet-shell.page-cifra .cifra-primary > .song-summary.cifra-topo-v2 {
    position: relative;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    align-content: space-between;
    min-height: 208px;
    padding: 1.5rem 1.6rem 1.45rem !important;
    border: 0 !important;
    border-radius: var(--cn-raio) !important;
    background: var(--cn-marinho) !important;
    box-shadow: var(--cn-sombra) !important;
}
body.cifranet-shell.page-cifra .cifra-primary > .song-summary.cifra-topo-v2::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image: var(--cn-capa); background-repeat: no-repeat;
    background-position: right center; background-size: cover;
    filter: brightness(.78) saturate(1.05);
}
body.cifranet-shell.page-cifra .cifra-primary > .song-summary.cifra-topo-v2::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, #0b2447 0%, rgba(11, 36, 71, .95) 34%, rgba(11, 36, 71, .64) 62%, rgba(11, 36, 71, .3) 100%);
}
body.cifranet-shell.page-cifra .song-summary-texto { position: relative; z-index: 2; }
body.cifranet-shell.page-cifra .song-summary.cifra-topo-v2 h1 {
    color: #fff !important;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 2px 14px rgba(4, 12, 26, .45);
}
body.cifranet-shell.page-cifra .song-summary .song-artist { color: #ffb479 !important; font-size: 1.02rem !important; font-weight: 900 !important; }
/* Tom / Afinação / Capotraste viram etiquetas, como no desenho. */
body.cifranet-shell.page-cifra .song-summary .song-facts { gap: .5rem !important; margin-top: 1.05rem !important; }
body.cifranet-shell.page-cifra .song-summary .song-facts > span {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .34rem .78rem !important; border-radius: var(--cn-raio-pill) !important;
    background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .22) !important;
    color: #fff !important; font-size: .76rem !important; font-weight: 800 !important;
}
body.cifranet-shell.page-cifra .song-summary .song-facts > span b { color: #ffd9bd !important; }
body.cifranet-shell.page-cifra .song-summary .song-stats {
    gap: .4rem 1.2rem !important; margin-top: 1rem !important;
    color: rgba(255, 255, 255, .78) !important; font-size: .8rem !important;
}
/* O botão do vídeo: pílula no canto de baixo. Ele é uma LINHA da própria grade do
   cartaz (e não algo por cima): assim nunca encosta no texto, em largura nenhuma —
   foi o que a medição pegou quando ele estava posicionado por cima. */
body.cifranet-shell.page-cifra .song-summary .song-video {
    position: static !important; z-index: 3;
    justify-self: end; align-self: end; margin-top: 1.15rem;
    display: inline-flex !important; align-items: center; gap: .55rem;
    width: auto !important; padding: .7rem 1.15rem !important;
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    border-radius: var(--cn-raio-pill) !important;
    color: #fff !important; font-size: .84rem !important; font-weight: 900 !important;
}
body.cifranet-shell.page-cifra .song-summary .song-video:hover { background: rgba(255, 255, 255, .26) !important; }
body.cifranet-shell.page-cifra .song-summary .song-video img { display: none !important; }
body.cifranet-shell.page-cifra .song-summary .song-video-play {
    position: static !important; transform: none !important;
    display: grid !important; place-items: center;
    width: 26px !important; height: 26px !important; font-size: 11px !important;
    background: var(--cn-laranja) !important; color: #fff !important; box-shadow: none !important;
}
body.cifranet-shell.page-cifra .song-summary .song-video-label {
    position: static !important; padding: 0 !important; background: none !important;
    color: #fff !important; font-size: .84rem !important; letter-spacing: 0 !important;
}
/* Neste cartaz a capa não entra: a foto já é o fundo (nada de imagem dobrada). */
body.cifranet-shell.page-cifra .song-summary .song-cover { display: none !important; }

/* No celular o cartaz fica mais baixo, com o título menor e a pílula embaixo. */
@media (max-width: 1099px) {
    body.cifranet-shell.page-cifra .cifra-primary > .song-summary.cifra-topo-v2 {
        min-height: 0;
        padding: 1.1rem 1.05rem 1.05rem !important;
        border-radius: 16px !important;
    }
    body.cifranet-shell.page-cifra .song-summary.cifra-topo-v2::after {
        background: linear-gradient(90deg, #0b2447 0%, rgba(11, 36, 71, .93) 52%, rgba(11, 36, 71, .62) 100%);
    }
    body.cifranet-shell.page-cifra .song-summary.cifra-topo-v2 h1 { font-size: clamp(1.5rem, 4.2vw, 2.1rem) !important; }
    body.cifranet-shell.page-cifra .song-summary .song-artist { font-size: .94rem !important; }
    body.cifranet-shell.page-cifra .song-summary .song-video { padding: .56rem .95rem !important; font-size: .78rem !important; margin-top: .9rem; }
    body.cifranet-shell.page-cifra .song-summary .song-video-label { font-size: .78rem !important; }
    body.cifranet-shell.page-cifra .song-summary .song-video-play { width: 22px !important; height: 22px !important; font-size: 9px !important; }
}

/* No celular o cartaz é mais enxuto: título menor, etiquetas e números mais
   juntos — o topo não pode comer a tela de quem abriu a cifra para tocar. */
@media (max-width: 640px) {
    body.cifranet-shell.page-cifra .song-summary.cifra-topo-v2 h1 { font-size: 1.32rem !important; }
    body.cifranet-shell.page-cifra .song-summary .song-facts { gap: .35rem !important; margin-top: .75rem !important; }
    body.cifranet-shell.page-cifra .song-summary .song-facts > span { padding: .28rem .62rem !important; font-size: .7rem !important; }
    body.cifranet-shell.page-cifra .song-summary .song-stats { gap: .2rem .9rem !important; margin-top: .65rem !important; font-size: .72rem !important; }
    body.cifranet-shell.page-cifra .song-summary .song-video { margin-top: .8rem !important; }
}

/* ── A coluna de ferramentas vira um cartão ─────────────────────────────── */
body.cifranet-shell.page-cifra .cifra-ferramentas {
    background: var(--cn-card) !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: var(--cn-raio) !important;
    box-shadow: var(--cn-sombra) !important;
    padding: 1rem .95rem 1.05rem !important;
}
body.cifranet-shell.page-cifra .cifra-ferramentas-titulo {
    margin: 0 0 .6rem !important;
    font-size: .72rem !important; font-weight: 900 !important;
    letter-spacing: .15em !important; text-transform: uppercase;
    color: var(--cn-tinta-3) !important;
}
body.cifranet-shell.page-cifra .cifra-ferramentas-corpo { gap: .55rem !important; }
/* Os blocos de baixo (categorias da missa e "Sobre esta cifra") ganham um
   separador suave, para a coluna ler como uma lista de grupos e não como um bolo. */
body.cifranet-shell.page-cifra .cfn-missa-cat,
body.cifranet-shell.page-cifra .cf-ferr-sobre {
    margin-top: .45rem !important;
    padding-top: .85rem !important;
    border-top: 1px solid var(--cn-linha) !important;
}

/* ── O topo da música vira um cartão ───────────────────────────────────── */
body.cifranet-shell.page-cifra .cifra-primary > .song-summary {
    background: var(--cn-card) !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: var(--cn-raio) !important;
    box-shadow: var(--cn-sombra) !important;
    padding: 1.15rem 1.25rem !important;
}
body.cifranet-shell.page-cifra .song-summary h1 {
    font-size: clamp(1.45rem, 2.5vw, 2.05rem) !important;
    font-weight: 900 !important; letter-spacing: -.02em !important;
    color: var(--cn-tinta) !important;
}
body.cifranet-shell.page-cifra .song-artist { font-size: 1.02rem !important; font-weight: 800 !important; }
body.cifranet-shell.page-cifra .song-facts { gap: .4rem .5rem !important; margin-top: .75rem !important; color: var(--cn-tinta-2) !important; }
body.cifranet-shell.page-cifra .song-facts > span {
    display: inline-flex !important; align-items: center; gap: .3rem;
    padding: .3rem .7rem !important; border-radius: var(--cn-raio-pill) !important;
    background: var(--cn-fundo-2) !important; color: var(--cn-tinta-2) !important;
    font-size: .8rem !important;
}
body.cifranet-shell.page-cifra .song-facts b { color: var(--cn-tinta) !important; font-weight: 800 !important; }
body.cifranet-shell.page-cifra .song-stats { gap: .35rem 1rem !important; margin-top: .65rem !important; color: var(--cn-tinta-3) !important; font-size: .78rem !important; }
body.cifranet-shell.page-cifra .song-cover,
body.cifranet-shell.page-cifra .song-video { border-radius: 14px !important; overflow: hidden; }
body.cifranet-shell.page-cifra .song-video-play { background: rgba(11, 36, 71, .82) !important; }

/* ── A barra de ações: um painel com botões em pílula ──────────────────── */
body.cifranet-shell.page-cifra .cifra-actionbar {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: .5rem !important;
    margin-top: 12px !important;
    padding: .6rem .7rem !important;
    background: var(--cn-fundo-2) !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: var(--cn-raio) !important;
}
/* `:not(.listen-together)` de propósito: aquele botão tem desenho próprio
   (gradiente laranja) e não pode ser achatado por estas regras. */
body.cifranet-shell.page-cifra .cifra-action:not(.listen-together) {
    display: inline-flex !important; align-items: center !important; gap: .4rem !important;
    min-height: 38px !important; padding: .4rem .85rem !important;
    background: #fff !important; border: 1px solid var(--cn-linha) !important;
    border-radius: var(--cn-raio-pill) !important; color: var(--cn-tinta) !important;
    font: 700 .84rem/1 var(--cn-fonte) !important; cursor: pointer !important;
    text-decoration: none !important;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
body.cifranet-shell.page-cifra .cifra-action:not(.listen-together):hover {
    background: var(--cn-laranja-suave) !important;
    border-color: #ffd9bd !important;
    color: var(--cn-laranja-escuro) !important;
    transform: translateY(-1px);
}
body.cifranet-shell.page-cifra .cifra-action:not(.listen-together):focus-visible { outline: 3px solid rgba(255, 106, 0, .4) !important; outline-offset: 2px; }
body.cifranet-shell.page-cifra .cifra-action .action-symbol { font-size: 1rem !important; }
/* Favorito marcado e Modo ensaio ficam com cor cheia (são as duas ações "de estado") */
body.cifranet-shell.page-cifra .cifra-action.favorite-icon.is-favorite {
    background: var(--cn-laranja) !important; border-color: var(--cn-laranja) !important; color: #fff !important;
}
body.cifranet-shell.page-cifra .cifra-action.favorite-icon.is-favorite svg { fill: currentColor; }
body.cifranet-shell.page-cifra .cifra-action.rehearsal-trigger {
    background: var(--cn-marinho) !important; border-color: var(--cn-marinho) !important; color: #fff !important;
}
body.cifranet-shell.page-cifra .cifra-action.rehearsal-trigger:hover {
    background: var(--cn-marinho-claro) !important; border-color: var(--cn-marinho-claro) !important; color: #fff !important;
}

/* ── O texto de contexto (o que o Google lê) fica discreto, mas legível ── */
body.cifranet-shell.page-cifra .cifra-context-intro { margin-top: 18px !important; }
body.cifranet-shell.page-cifra .cifra-context-intro h2 { font-size: 1.06rem !important; font-weight: 800 !important; color: var(--cn-tinta) !important; letter-spacing: -.01em; }
body.cifranet-shell.page-cifra .cifra-context-intro p { color: var(--cn-tinta-2) !important; font-size: .92rem !important; line-height: 1.6 !important; }
body.cifranet-shell.page-cifra .cifra-context-facts { gap: .35rem !important; }
body.cifranet-shell.page-cifra .cifra-context-facts > span {
    padding: .28rem .7rem !important; border-radius: var(--cn-raio-pill) !important;
    background: var(--cn-fundo-2) !important; color: var(--cn-tinta-2) !important; font-size: .78rem !important;
}

/* ── A moldura do cartão da cifra (a LETRA não se mexe) ─────────────────── */
body.cifranet-shell.page-cifra .cifra-box {
    background: var(--cn-card) !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: 20px !important;
    box-shadow: var(--cn-sombra) !important;
    padding: 1.35rem 1.5rem !important;
}

/* ── As caixas de baixo (acordes usados, próxima do repertório, artista) ── */
body.cifranet-shell.page-cifra .content-details {
    background: var(--cn-card) !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: var(--cn-raio) !important;
    box-shadow: var(--cn-sombra) !important;
}
body.cifranet-shell.page-cifra .content-details > summary { font-weight: 800 !important; color: var(--cn-tinta) !important; }
body.cifranet-shell.page-cifra .repertorio-next,
body.cifranet-shell.page-cifra .continue-playing-cta.cf-artista-cta {
    border-radius: var(--cn-raio) !important;
    box-shadow: var(--cn-sombra) !important;
}

/* ── Os CONTROLES da coluna de ferramentas (fase 5, 2ª parte) ──────────── */
/* A marcação real (conferida no ar): `.cf-ferr-grupo` com um `.cf-ferr-rotulo`
   em cima e um `.cf-ferr-linha` embaixo; `.cf-ferr-btn` são os botões pequenos
   (Tom − e +, A− e A+, Rolar, Velocidade − e +, Dividir a tela) e `.cf-ferr-valor`
   é o valor do meio (tom, tamanho, 0.3x). NADA de id/onclick muda aqui. */
body.cifranet-shell.page-cifra .cf-ferr-grupo {
    background: var(--cn-fundo-2) !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: 14px !important;
    padding: .6rem .65rem !important;
}
body.cifranet-shell.page-cifra .cf-ferr-rotulo {
    display: block !important; margin: 0 0 .45rem !important;
    font-size: .68rem !important; font-weight: 900 !important;
    letter-spacing: .12em !important; text-transform: uppercase;
    color: var(--cn-tinta-3) !important;
}
body.cifranet-shell.page-cifra .cf-ferr-linha { display: flex !important; align-items: center !important; gap: .4rem !important; }
body.cifranet-shell.page-cifra .cf-ferr-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .35rem !important;
    min-height: 36px !important; min-width: 36px !important; padding: .35rem .7rem !important;
    background: #fff !important; border: 1px solid var(--cn-linha) !important;
    border-radius: var(--cn-raio-peq) !important; color: var(--cn-tinta) !important;
    font: 800 .82rem/1 var(--cn-fonte) !important; cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
body.cifranet-shell.page-cifra .cf-ferr-btn:hover { background: var(--cn-laranja-suave) !important; border-color: #ffd9bd !important; color: var(--cn-laranja-escuro) !important; }
body.cifranet-shell.page-cifra .cf-ferr-btn:active { transform: translateY(1px); }
body.cifranet-shell.page-cifra .cf-ferr-btn:focus-visible { outline: 3px solid rgba(255, 106, 0, .4) !important; outline-offset: 2px; }
/* Os que ocupam a linha inteira: Vídeo, Rolar e Dividir a tela. */
body.cifranet-shell.page-cifra .cf-ferr-btn-video,
body.cifranet-shell.page-cifra .cf-ferr-grupo > .cf-ferr-btn,
body.cifranet-shell.page-cifra .cf-ferr-grupo-colunas .cf-ferr-btn { width: 100% !important; min-height: 40px !important; }
body.cifranet-shell.page-cifra .cf-ferr-btn-video { background: var(--cn-marinho) !important; border-color: var(--cn-marinho) !important; color: #fff !important; }
body.cifranet-shell.page-cifra .cf-ferr-btn-video:hover { background: var(--cn-marinho-claro) !important; border-color: var(--cn-marinho-claro) !important; color: #fff !important; }
body.cifranet-shell.page-cifra .cf-ferr-valor {
    flex: 1 1 auto; text-align: center;
    font: 900 .95rem/1 var(--cn-fonte) !important; color: var(--cn-tinta) !important;
}
/* Rolagem LIGADA fica laranja (é um estado, como o favorito). */
body.cifranet-shell.page-cifra #cifraAutoScrollToggle[aria-pressed="true"] {
    background: var(--cn-laranja) !important; border-color: var(--cn-laranja) !important; color: #fff !important;
}
/* O rótulo "↝ Rolagem automática" é o mais longo da coluna (214 px): com .78rem ele
   cabe numa linha só, em vez de quebrar em duas. */
body.cifranet-shell.page-cifra #cifraAutoScrollToggle { font-size: .78rem !important; }
body.cifranet-shell.page-cifra .cf-ferr-ajuda { margin: .1rem 0 0 !important; font-size: .74rem !important; line-height: 1.45 !important; color: var(--cn-tinta-3) !important; }
body.cifranet-shell.page-cifra .cf-ferr-progresso { height: 6px !important; background: var(--cn-fundo-2) !important; border-radius: var(--cn-raio-pill) !important; overflow: hidden; }
body.cifranet-shell.page-cifra .cf-ferr-progresso > span { background: var(--cn-laranja) !important; border-radius: var(--cn-raio-pill) !important; }

/* ── A barra do CELULAR da cifra (posição e medida continuam como estavam) ─ */
body.cifranet-shell.page-cifra .cf-barra { background: rgba(255, 255, 255, .97) !important; border-top: 1px solid var(--cn-linha) !important; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important; box-shadow: 0 -6px 20px rgba(15, 35, 66, .08) !important; }
body.cifranet-shell.page-cifra .cf-barra-btn,
body.cifranet-shell.page-cifra .cf-barra-cal {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important;
    min-height: 46px !important; padding: .3rem .35rem !important;
    background: #fff !important; border: 1px solid var(--cn-linha) !important;
    border-radius: 12px !important; color: var(--cn-tinta-2) !important;
    font: 800 .66rem/1.15 var(--cn-fonte) !important; text-align: center !important; cursor: pointer !important;
}
body.cifranet-shell.page-cifra .cf-barra-btn b,
body.cifranet-shell.page-cifra .cf-barra-cal svg { font-size: 1.05rem !important; width: 20px !important; height: 20px !important; }
body.cifranet-shell.page-cifra .cf-barra-btn.is-on,
body.cifranet-shell.page-cifra .cf-barra-cal.is-on { background: var(--cn-laranja-suave) !important; border-color: #ffd9bd !important; color: var(--cn-laranja-escuro) !important; }

/* ── O rodapé da própria página (os links que o Google lê continuam iguais) ─ */
body.cifranet-shell.page-cifra .cifra-footer { background: var(--cn-marinho) !important; color: #fff !important; margin-top: 26px !important; }
body.cifranet-shell.page-cifra .cifra-footer h3 { color: #fff !important; font-size: .95rem !important; letter-spacing: -.01em; }
body.cifranet-shell.page-cifra .cifra-footer p { color: rgba(255, 255, 255, .72) !important; font-size: .84rem !important; }
body.cifranet-shell.page-cifra .cifra-footer a { color: rgba(255, 255, 255, .84) !important; text-decoration: none !important; font-size: .86rem !important; }
body.cifranet-shell.page-cifra .cifra-footer a:hover { color: var(--cn-laranja) !important; }

/* ── AS DUAS FAIXAS DO REPERTÓRIO (fase 5, 3ª parte) ─────────────────────
   Só aparecem quando a cifra é aberta de dentro de um repertório — por isso
   ficaram para o fim. A marcação real (conferida em cifra.php, linha ~1748 e
   ~2573): o progresso é <aside class="repertorio-progress"> com
   .repertorio-progress-label / <strong> / .repertorio-progress-links e
   .repertorio-progress-count; o convite é <section class="repertorio-next">
   com .repertorio-next-kicker / <h2> / <p> / .repertorio-next-actions >
   .repertorio-next-button + .repertorio-next-back — e, quando o repertório
   acabou, a MESMA section ganha .repertorio-complete. Aqui só muda a tinta:
   nenhum texto, link, onclick ou ordem é diferente. */
body.cifranet-shell.page-cifra .repertorio-progress {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .9rem !important;
    margin: 0 0 1rem !important;
    padding: .8rem 1rem !important;
    background: var(--cn-card) !important;
    border: 1px solid var(--cn-linha) !important;
    border-left: 4px solid var(--cn-laranja) !important;
    border-radius: var(--cn-raio-peq) !important;
    box-shadow: 0 2px 6px rgba(15, 35, 66, .05) !important;
}
body.cifranet-shell.page-cifra .repertorio-progress-label {
    color: var(--cn-laranja-escuro) !important;
    font-size: .66rem !important; letter-spacing: .12em !important;
}
body.cifranet-shell.page-cifra .repertorio-progress strong { color: var(--cn-tinta) !important; font-size: 1.02rem !important; line-height: 1.25 !important; }
body.cifranet-shell.page-cifra .repertorio-progress-links { gap: 1rem !important; margin-top: .5rem !important; }
body.cifranet-shell.page-cifra .repertorio-progress-links a { color: var(--cn-marinho-claro) !important; font-size: .78rem !important; font-weight: 800 !important; text-decoration: none !important; }
body.cifranet-shell.page-cifra .repertorio-progress-links a:hover { color: var(--cn-laranja) !important; }
/* O contador ("Música 3 de 12") vira uma pílula marinho, como os chips do site. */
body.cifranet-shell.page-cifra .repertorio-progress-count {
    display: inline-flex !important; align-items: center !important;
    padding: .45rem .8rem !important;
    background: var(--cn-marinho) !important; color: #fff !important;
    border-radius: var(--cn-raio-pill) !important;
    font-size: .72rem !important; font-weight: 900 !important; white-space: nowrap !important;
}

/* O convite para a próxima música: cartão branco com o kicker laranja. */
body.cifranet-shell.page-cifra .repertorio-next {
    margin: 1.5rem 0 !important;
    padding: 1.15rem 1.2rem !important;
    background: var(--cn-card) !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: var(--cn-raio) !important;
    box-shadow: var(--cn-sombra) !important;
}
body.cifranet-shell.page-cifra .repertorio-next-kicker { color: var(--cn-laranja-escuro) !important; font-size: .68rem !important; letter-spacing: .12em !important; }
body.cifranet-shell.page-cifra .repertorio-next h2 { color: var(--cn-tinta) !important; font-size: clamp(1.15rem, 2.4vw, 1.5rem) !important; line-height: 1.18 !important; }
body.cifranet-shell.page-cifra .repertorio-next p { color: var(--cn-tinta-2) !important; font-size: .9rem !important; }
body.cifranet-shell.page-cifra .repertorio-next-actions { flex-wrap: wrap !important; gap: .6rem !important; margin-top: 1.05rem !important; }
body.cifranet-shell.page-cifra .repertorio-next-button {
    min-height: 48px !important; padding: 0 1.3rem !important;
    border-radius: var(--cn-raio-peq) !important;
    background: var(--cn-laranja) !important; color: #fff !important;
    font-size: .88rem !important; font-weight: 900 !important; text-decoration: none !important;
}
body.cifranet-shell.page-cifra .repertorio-next-button:hover { background: var(--cn-laranja-escuro) !important; color: #fff !important; }
/* "Ver repertório completo" e "Voltar à lista" viram botão de contorno (alvo de
   polegar no celular), sem perder a ligação. */
body.cifranet-shell.page-cifra .repertorio-next-back {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-height: 44px !important; padding: 0 1.1rem !important;
    background: var(--cn-fundo-2) !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: var(--cn-raio-peq) !important;
    color: var(--cn-tinta-2) !important;
    font-size: .84rem !important; font-weight: 800 !important; text-decoration: none !important;
}
body.cifranet-shell.page-cifra .repertorio-next-back:hover { background: var(--cn-laranja-suave) !important; border-color: #ffd9bd !important; color: var(--cn-laranja-escuro) !important; }

/* Repertório concluído: a mesma faixa, em marinho — a pessoa vê de longe que acabou. */
body.cifranet-shell.page-cifra .repertorio-next.repertorio-complete { background: var(--cn-marinho) !important; border-color: var(--cn-marinho) !important; }
body.cifranet-shell.page-cifra .repertorio-next.repertorio-complete .repertorio-next-kicker { color: #ffb27a !important; }
body.cifranet-shell.page-cifra .repertorio-next.repertorio-complete h2 { color: #fff !important; }
body.cifranet-shell.page-cifra .repertorio-next.repertorio-complete p { color: rgba(255, 255, 255, .78) !important; }
body.cifranet-shell.page-cifra .repertorio-next.repertorio-complete .repertorio-next-back { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .3) !important; color: #fff !important; }
body.cifranet-shell.page-cifra .repertorio-next.repertorio-complete .repertorio-next-back:hover { background: rgba(255, 255, 255, .18) !important; border-color: rgba(255, 255, 255, .5) !important; color: #fff !important; }

/* ── A LETRA E OS ACORDES (fase 5, 4ª parte) ───────────────────────────────
   A folha da cifra é MONOESPAÇADA e desenhada com `white-space:pre`: o acorde
   fica em cima da sílaba certa porque os ESPAÇOS contam. Por isso aqui NÃO se
   encosta em fonte, tamanho, entrelinha, espaçamento de letra nem preenchimento
   — qualquer um deles muda a largura de um caractere (ou do acorde) e desalinha
   a música inteira. Também não se encosta no tamanho que a pessoa escolheu
   (12 a 30 px, guardado no navegador dela).

   O que muda é só a TINTA: o acorde passa a usar a cor do desenho novo (o mesmo
   azul-marinho dos títulos) e ganha uma marca clara atrás das letras. A marca é
   `background` SEM preenchimento: a caixa do realce é exatamente a do texto,
   então nada anda um milésimo de milímetro. */
body.cifranet-shell.page-cifra #cifra .chord {
    color: var(--cn-marinho) !important;
    background: rgba(255, 106, 0, .12) !important;
    border-radius: 4px;
}
/* Ao selecionar um trecho (para copiar), a seleção usa a cor do site. */
body.cifranet-shell.page-cifra #cifra ::selection { background: rgba(255, 106, 0, .22); }
/* O nome do acorde nos cartões "Acordes usados" segue a mesma tinta do texto. */
body.cifranet-shell.page-cifra .chord-gallery-name { color: var(--cn-marinho) !important; }
/* Papel: sem realce atrás das letras (economiza tinta e sai melhor na impressora). */
@media print {
    body.cifranet-shell.page-cifra #cifra .chord { background: transparent !important; color: #000 !important; }
}
/* Se o modo escuro estiver ligado, o acorde clareia — senão sumiria no fundo. */
body.cifranet-shell.page-cifra .darkmode #cifra .chord { color: #ffb27a !important; }

/* ── Celular: mesmas peças, com menos moldura e alvos maiores ──────────── */
@media (max-width: 1099px) {
    body.cifranet-shell.page-cifra .cifra-primary > .song-summary { padding: .95rem 1rem !important; }
    body.cifranet-shell.page-cifra .cifra-box { padding: 1rem .85rem !important; border-radius: 16px !important; }
    body.cifranet-shell.page-cifra .cifra-action:not(.listen-together) { min-height: 42px !important; padding: .45rem .8rem !important; font-size: .82rem !important; }
    body.cifranet-shell.page-cifra .song-summary h1 { font-size: clamp(1.32rem, 5.6vw, 1.6rem) !important; }
}

/* As faixas do repertório empilham SÓ abaixo de 760px — é o ponto em que a própria
   página já empilha (conferido no CSS dela); acima disso os dois botões ficam lado
   a lado, como sempre ficaram. */
@media (max-width: 760px) {
    body.cifranet-shell.page-cifra .repertorio-progress { padding: .75rem .85rem !important; border-left-width: 3px !important; }
    body.cifranet-shell.page-cifra .repertorio-progress-count { justify-self: start !important; }
    body.cifranet-shell.page-cifra .repertorio-next { padding: 1rem .95rem !important; }
    body.cifranet-shell.page-cifra .repertorio-next-actions { align-items: stretch !important; flex-direction: column !important; }
    body.cifranet-shell.page-cifra .repertorio-next-button,
    body.cifranet-shell.page-cifra .repertorio-next-back { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   A COLUNA DA DIREITA DA CIFRA (06/10/2026, a pedido — imagem 04)
   ───────────────────────────────────────────────────────────────────────────
   O desenho de referência põe, ao lado da cifra, o cartão do ARTISTA e as duas
   listas do site ("Cifras em alta no CifraNET" e "Artistas mais buscados") —
   no computador a página fica em TRÊS colunas: ferramentas · cifra · esta
   coluna. Até aqui, a partir de 900 px, essa faixa ficava vazia (só com os
   anúncios) e a cifra dividia o espaço apenas com a coluna de ferramentas.

   O markup vem do `aside.cifra-extra` (que já existia e já levava os anúncios).
   Aqui ele só muda de LUGAR: continua abaixo, em duas colunas, em telas
   menores — a terceira coluna entra a partir de 1400 px, onde há largura de
   sobra para os três (abaixo disso, 214 + 280 px de laterais apertariam a
   cifra mais do que ela precisa).

   As medidas são em `!important` de propósito: o `<style id="cifra-casca-v2">`
   vive no CORPO da página e, por isso, é lido DEPOIS deste arquivo — no empate
   ele venceria. */
@media (min-width: 1400px) {
    body.cifranet-shell.page-cifra .cifra-redesign .cifra-layout {
        grid-template-columns: minmax(190px, 214px) minmax(0, 1fr) minmax(280px, 320px) !important;
        gap: 26px 22px !important;
    }
    body.cifranet-shell.page-cifra .cifra-redesign .cifra-extra {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        margin-top: 0 !important;
        align-content: start !important;
        min-width: 0 !important;
    }
}

/* ── Os cartões da coluna (artista e as duas listas) ──────────────────── */
body.cifranet-shell.page-cifra .cf-lado-caixa {
    padding: 1rem 1.05rem 1.1rem !important;
    border: 1px solid var(--cn-linha) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: var(--cn-sombra) !important;
}
body.cifranet-shell.page-cifra .cf-lado-caixa .cn-painel-topo { margin-bottom: .55rem; }
body.cifranet-shell.page-cifra .cf-lado-caixa .cn-painel-topo h2 { color: var(--cn-tinta) !important; font-size: 1rem !important; }
body.cifranet-shell.page-cifra .cf-lado-caixa .cn-secao-mais { color: var(--cn-marinho) !important; }
body.cifranet-shell.page-cifra .cf-lado-caixa .cn-secao-mais:hover { color: var(--cn-laranja) !important; }

/* O cartão do ARTISTA: foto + nome + "N cifras" e o botão de continuar. */
body.cifranet-shell.page-cifra .cf-lado-quem { display: flex; align-items: center; gap: .7rem; min-width: 0; }
body.cifranet-shell.page-cifra .cf-lado-foto { display: inline-flex; flex: 0 0 auto; }
body.cifranet-shell.page-cifra .cf-lado-foto img,
body.cifranet-shell.page-cifra .cf-lado-letra {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; background: var(--cn-fundo-2); color: var(--cn-marinho);
    font-size: 1.3rem; font-weight: 800; flex: 0 0 auto;
}
body.cifranet-shell.page-cifra .cf-lado-quem-txt { min-width: 0; }
body.cifranet-shell.page-cifra .cf-lado-quem-txt strong {
    display: block; font-size: 1.02rem; line-height: 1.2; color: var(--cn-tinta) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.cifranet-shell.page-cifra .cf-lado-quem-txt em {
    display: block; margin-top: .15rem; font-style: normal; font-size: .78rem;
    color: var(--cn-tinta-3) !important; overflow: hidden; text-overflow: ellipsis;
}
body.cifranet-shell.page-cifra .cf-lado-tocar {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 42px; margin-top: .75rem; padding: 0 1rem; border-radius: var(--cn-raio-pill);
    background: var(--cn-marinho); color: #ffffff !important; font-size: .9rem; font-weight: 800;
    text-decoration: none !important; white-space: nowrap;
}
body.cifranet-shell.page-cifra .cf-lado-tocar:hover { background: var(--cn-marinho-claro); }

/* As duas listas: capa pequena + nome e artista (+ o número, quando existe). */
body.cifranet-shell.page-cifra .cf-lado-item {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center;
    gap: .6rem; padding: .42rem 0; border-bottom: 1px solid var(--cn-linha);
    color: var(--cn-tinta) !important; text-decoration: none !important;
}
body.cifranet-shell.page-cifra .cf-lado-item:last-child { border-bottom: 0; padding-bottom: 0; }
body.cifranet-shell.page-cifra .cf-lado-item:hover .cf-lado-copia strong { color: var(--cn-laranja) !important; }
body.cifranet-shell.page-cifra .cf-lado-mini { display: inline-flex; flex: 0 0 auto; }
body.cifranet-shell.page-cifra .cf-lado-mini img,
body.cifranet-shell.page-cifra .cf-lado-sem-foto {
    display: grid; place-items: center; width: 56px; height: 42px; border-radius: 8px;
    object-fit: cover; background: var(--cn-fundo-2); color: var(--cn-tinta-3); font-size: 1rem;
}
body.cifranet-shell.page-cifra .cf-lado-mini-redondo img,
body.cifranet-shell.page-cifra .cf-lado-mini-redondo .cf-lado-letra { width: 42px; height: 42px; border-radius: 50%; font-size: 1rem; }
body.cifranet-shell.page-cifra .cf-lado-copia { min-width: 0; }
body.cifranet-shell.page-cifra .cf-lado-copia strong {
    display: block; font-size: .86rem; line-height: 1.25; color: var(--cn-tinta) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.cifranet-shell.page-cifra .cf-lado-copia em {
    display: block; margin-top: .1rem; font-style: normal; font-size: .75rem;
    color: var(--cn-tinta-3) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.cifranet-shell.page-cifra .cf-lado-dado {
    font-size: .74rem; font-weight: 700; color: var(--cn-tinta-3) !important; white-space: nowrap;
}

/* No celular e no tablet os cartões ficam com o MESMO peso dos anúncios que já
   estavam ali: uma faixa por linha, sem aperto. */
@media (max-width: 1099px) {
    body.cifranet-shell.page-cifra .cf-lado-caixa { padding: .85rem .9rem .95rem !important; }
}