/* ═══════════════════════════════════════════════════════════════════
   CIFRATURN — PÁGINA DE CIFRA (repaginação)
   ───────────────────────────────────────────────────────────────────
   A ÚLTIMA folha da cifra.html, depois do ct-cifra-mobile.css. É a
   autoridade sobre o aspecto desta página nos dois temas.

   ── Porque é que existe mais uma folha ──
   A página já era servida por sete camadas (site.css, premium_base,
   ct-dark-theme, bugfixes_patch, mobile.css, theme-premium, tools-
   premium, ct-arcade, ct-cifra-mobile) e por dois blocos <style> de
   milhares de linhas dentro do próprio HTML, escritos em épocas
   diferentes e a contradizerem-se com !important. Reescrever isso a
   partir de dentro era mexer em regras que ninguém consegue provar
   quem usa.

   A alternativa foi esta: uma folha que chega por último, assume o
   comando do que se vê, e diz PORQUÊ em cada decisão. As antigas
   continuam a servir de rede — se esta não carregar, a página fica
   feia mas inteira.

   ── Tema ──
   Nada aqui tem cor fixa. Tudo sai dos tokens `--ct-*` do
   theme-premium.css, que trocam sozinhos entre claro e escuro. Onde o
   claro precisa de mais do que a troca de token, há um bloco
   `body.theme-light` explícito — nunca um `color` genérico, que é a
   armadilha conhecida deste projecto (superfície clara com texto
   claro).

   ── O que NÃO se toca ──
   O alinhamento acorde↔sílaba. A coluna onde um acorde cai é
   informação: diz em que sílaba se muda. Por isso o corpo da cifra
   mantém `white-space: pre` e nunca leva `word-spacing`,
   `text-align: justify` nem nada que mexa na largura do espaço.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Medidas próprias da página ──────────────────────────────────
   Num sítio só, para não andarem espalhadas por cinco ficheiros. */
body.cifra-page {
    --ctc-gap: 18px;
    --ctc-raio: 16px;
    --ctc-cab-h: 92px;
}

/* ═══════════════════════════════════════════════════════════════
   1. ESQUELETO
   ═══════════════════════════════════════════════════════════════ */

body.cifra-page .cifra-page-wrapper {
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 20px 16px 40px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 24px !important;
    align-items: start !important;
}

/* `minmax(0, 1fr)` e não `1fr`: a coluna tem lá dentro conteúdo em
   `white-space: pre`, que não encolhe. Com `1fr` puro a coluna cresce
   até à linha mais longa da cifra e leva a viewport atrás — é um bug
   que já mordeu este projecto noutras páginas. */
body.cifra-page .cifra-main-col {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ctc-gap) !important;
}

body.cifra-page .cifra-side-col {
    min-width: 0 !important;
    position: sticky !important;
    top: calc(var(--header-h, 64px) + 14px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

@media (max-width: 1040px) {
    body.cifra-page .cifra-page-wrapper {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.cifra-page .cifra-side-col { position: static !important; }
}

/* ═══════════════════════════════════════════════════════════════
   2. CABEÇALHO DA MÚSICA
   ───────────────────────────────────────────────────────────────
   Era um cartão alto com o avatar grande, o título, uma fila de
   selos e outra fila de metadados — quatro filas antes de se ver um
   acorde. Numa página que se lê com o instrumento na mão, isso é
   espaço roubado à única coisa que interessa.

   Agora é uma faixa: identidade à esquerda, metadados numa linha só,
   e o vídeo à direita quando existe.
   ═══════════════════════════════════════════════════════════════ */

body.cifra-page .song-header-card {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ctc-raio) !important;
    padding: 18px 20px !important;
    box-shadow: var(--ct-shadow-sm) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Fio dourado no topo do cartão: marca a identidade sem pintar uma
   superfície inteira de dourado, que a esta escala cansa. */
body.cifra-page .song-header-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--ct-gold-metal);
    opacity: .85;
}

body.cifra-page .song-header-top {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
}

body.cifra-page .artist-avatar {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    /* O `min-height` não é enfeite: um bloco antigo do próprio
       cifra.html põe `min-height: 80px` nesta foto, e um mínimo ganha
       sempre ao `height`, tenha ele !important ou não. Ficava 62 de
       largura por 80 de altura — a foto redonda a sair um ovo. Quem
       fixa um lado tem de fixar o mínimo do mesmo lado. */
    max-height: 62px !important;
    min-height: 62px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--ct-gold-line) !important;
    background: var(--ct-surface-2) !important;
    /* Sem `flex-shrink: 0` um avatar redondo dentro de uma fila flex
       vira elipse quando o título é longo. Mesmo defeito que o botão
       do metrónomo tinha. */
    flex-shrink: 0 !important;
}

body.cifra-page .song-title-block {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body.cifra-page .song-title-block h1 {
    font-family: var(--ct-font) !important;
    font-size: clamp(20px, 3.4vw, 30px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -.5px !important;
    color: var(--ct-text) !important;
    margin: 0 0 3px !important;
    /* O título pode ser longo; duas linhas chegam e o resto reticencia,
       senão empurra os metadados para fora do cartão. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.cifra-page .song-artist-link {
    display: inline-block !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--ct-gold) !important;
    text-decoration: none !important;
    margin: 0 0 9px !important;
    transition: color var(--ct-t) !important;
}
body.cifra-page .song-artist-link:hover { color: var(--ct-gold-bright) !important; }

body.cifra-page .song-badges {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

body.cifra-page .badge-principal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 11px !important;
    border-radius: var(--ct-r-pill) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    background: var(--ct-gold-glow) !important;
    border: 1px solid var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}

body.cifra-page .btn-favoritar-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 13px !important;
    border-radius: var(--ct-r-pill) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
    cursor: pointer !important;
    transition: all var(--ct-t) !important;
    /* WCAG 2.5.5: alvo de toque. Tinha 26px de altura no telemóvel. */
    min-height: 34px !important;
}
/* O :hover ao alcance do dedo cola-se: toca-se em "Favoritar" e o botão
   fica com o aspecto de estar sob o cursor até se tocar noutro sítio —
   nos screenshots do telemóvel o "Ver videoaula" aparecia dourado cheio
   sem ninguém lá ter o rato. Só onde há rato a sério. */
@media (hover: hover) {
    body.cifra-page .btn-favoritar-top:hover {
        border-color: var(--ct-gold-line) !important;
        color: var(--ct-gold) !important;
    }
}
body.cifra-page .btn-favoritar-top.favoritado,
body.cifra-page .btn-favoritar-top.ativo {
    background: var(--ct-gold-glow) !important;
    border-color: var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}

/* ── Atalho para a videoaula ──
   O vídeo da música estava no fim da página, depois da cifra toda. Fica
   aqui um atalho, na fila dos selos, onde se lê o título — antes da
   primeira linha da música e não depois da última.

   Ao contrário do Favoritar, este é dourado cheio: é a única acção do
   cabeçalho que leva a outro conteúdo, e é a que se está a tentar dar a
   conhecer. O `--ct-gold-metal` é o mesmo gradiente do resto do tema. */
body.cifra-page .btn-videoaula-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 13px !important;
    border-radius: var(--ct-r-pill) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: var(--ct-gold-glow) !important;
    border: 1px solid var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
    cursor: pointer !important;
    transition: all var(--ct-t) !important;
    min-height: 34px !important;
}
@media (hover: hover) {
    body.cifra-page .btn-videoaula-top:hover {
        background: var(--ct-gold) !important;
        border-color: var(--ct-gold) !important;
        color: #0e1621 !important;
    }
}
body.cifra-page .btn-videoaula-top i { font-size: 10px !important; }

/* ⚠ O `hidden` do HTML não chega — o `display: inline-flex !important`
   acima ganha-lhe, que é o mesmo tropeço que já pôs um "DIFICULDADE: —"
   em todas as cifras (ver a nota do .song-info-tabs [hidden]).

   Há uma regra genérica mais abaixo no ficheiro, `body.cifra-page
   [hidden]`, que EMPATA em especificidade com a de cima — o atributo
   conta como classe, portanto (0,2,1) contra (0,2,1) — e só ganha por
   vir depois. Depender da ordem das linhas num ficheiro de mil é pedir
   para partir na próxima arrumação, e o modo de falha é o pior: o botão
   passa a aparecer em cifras SEM vídeo, a prometer uma coisa que não
   existe. Esta linha prende o esconder ao próprio selector, em (0,3,1),
   e deixa de haver empate nenhum. */
body.cifra-page .btn-videoaula-top[hidden] { display: none !important; }

/* ── Fila de metadados ──
   Tom, instrumento, dificuldade. Cada um é um par rótulo/valor
   compacto; separam-se por um fio, não por caixas — caixas dentro de
   um cartão que já é uma caixa criam ruído. */
body.cifra-page .song-info-tabs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 14px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--ct-border) !important;
}

body.cifra-page .info-tab-item {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 0 16px !important;
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}
body.cifra-page .info-tab-item:first-child { padding-left: 0 !important; }
body.cifra-page .info-tab-item + .info-tab-item {
    border-left: 1px solid var(--ct-border) !important;
}

body.cifra-page .info-tab-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    color: var(--ct-text-faint) !important;
}

body.cifra-page .info-tab-value {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--ct-text) !important;
}
body.cifra-page .info-tab-value.orange { color: var(--ct-gold) !important; }

/* ═══════════════════════════════════════════════════════════════
   3. BARRA DE FERRAMENTAS
   ───────────────────────────────────────────────────────────────
   Fica pegada (sticky) por baixo do header: quem está a tocar e
   precisa de subir meio tom não pode ter de rolar até ao topo.
   ═══════════════════════════════════════════════════════════════ */

/* ── A barra de ferramentas é SÓ do computador ──
   No telemóvel ela já não devia aparecer: o `ct-cifra-mobile.css` põe
   `body.ct-cifra-mobile .cifra-toolbar { display: none !important }`,
   porque as mesmas funções vivem na barra flutuante do rodapé.

   Só que a regra daqui era `body.cifra-page .cifra-toolbar` com
   `display: flex !important` — a MESMA especificidade (0,2,1) —, e
   esta folha carrega depois. Empate desfeito pela ordem: eu desliguei
   o que já estava certo, e a barra voltou como uma nuvem gigante por
   cima da cifra.

   Fechada dentro do breakpoint, deixa de haver disputa nenhuma. */
@media (min-width: 769px) {

body.cifra-page .cifra-toolbar {
    position: sticky !important;
    top: var(--header-h, 64px) !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r-pill) !important;
    box-shadow: var(--ct-shadow-sm) !important;
    /* `backdrop-filter` sem fundo opaco por baixo deixaria a cifra ler-se
       através da barra enquanto rola. O fundo é sólido de propósito. */
    margin: 0 !important;
}

/* `.ct-redesign` a mais no selector, e é de propósito: o
   theme-premium.css tem `body.ct-redesign .tool-btn.btn-video` — (0,3,1)
   — a dar-lhe `var(--ct-surface-2)`. Contra isso, o meu (0,2,1) perdia e
   o botão da videoaula ficava escuro no meio de uma barra clara, com o
   rótulo pintado de branco por cima. Empatando em (0,3,1), decide a
   ordem de carregamento — e esta folha vem depois. */
body.cifra-page.ct-redesign .tool-btn,
body.cifra-page.ct-redesign .tool-btn.btn-video {
    background: transparent !important;
    border-color: transparent !important;
}
body.cifra-page.ct-redesign .tool-btn:hover,
body.cifra-page.ct-redesign .tool-btn.btn-video:hover {
    background: var(--ct-surface-2) !important;
}

body.cifra-page .tool-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 14px !important;
    min-height: 38px !important;
    border-radius: var(--ct-r-pill) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--ct-text-soft) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background var(--ct-t), color var(--ct-t), border-color var(--ct-t) !important;
    white-space: nowrap !important;
}
body.cifra-page .tool-btn:hover {
    background: var(--ct-surface-2) !important;
    color: var(--ct-text) !important;
}
body.cifra-page .tool-btn[aria-pressed="true"],
body.cifra-page .tool-btn.ativo {
    background: var(--ct-gold-glow) !important;
    border-color: var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}
body.cifra-page .tool-btn i { font-size: 14px !important; }

body.cifra-page .toolbar-sep {
    width: 1px !important;
    align-self: stretch !important;
    margin: 4px 2px !important;
    background: var(--ct-border) !important;
}

/* A quebra forçada só faz sentido enquanto a barra é larga. Numa fila
   que já quebra sozinha, um `flex-basis: 100%` extra abre um buraco. */
body.cifra-page .toolbar-break { display: none !important; }

body.cifra-page .tom-inline-control,
body.cifra-page .ct-stepper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 3px 4px !important;
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ct-r-pill) !important;
}

body.cifra-page .tom-inline-control .lbl,
body.cifra-page .ct-stepper .lbl {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: var(--ct-text-faint) !important;
    padding: 0 6px 0 8px !important;
}

body.cifra-page .tom-inline-control button,
body.cifra-page .ct-stepper button {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: var(--ct-surface-3) !important;
    color: var(--ct-text) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background var(--ct-t), color var(--ct-t) !important;
}
body.cifra-page .tom-inline-control button:hover,
body.cifra-page .ct-stepper button:hover {
    background: var(--ct-gold) !important;
    color: #1c2230 !important;
}

body.cifra-page .tom-val,
body.cifra-page .ct-stepper-val {
    min-width: 34px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--ct-gold) !important;
    font-variant-numeric: tabular-nums !important;
}

}   /* fim do @media (min-width: 769px) — a barra é só do computador */

/* ═══════════════════════════════════════════════════════════════
   4. FAIXA DE ACORDES  (montada pelo ct-cifra-topo.js)
   ───────────────────────────────────────────────────────────────
   Os diagramas estavam atrás de um botão que abre um modal. Quem
   está a aprender a música precisa deles à vista enquanto lê — é o
   que o Cifra Club faz e é a razão de a página deles se conseguir
   tocar sem carregar em nada.
   ═══════════════════════════════════════════════════════════════ */

.ctc-acordes {
    background: var(--ct-surface);
    border: 1px solid var(--ct-border);
    border-radius: var(--ctc-raio);
    box-shadow: var(--ct-shadow-sm);
    overflow: hidden;
}

.ctc-acordes-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ct-border);
}

.ctc-acordes-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--ct-text-dim);
}
.ctc-acordes-titulo i { color: var(--ct-gold); }

.ctc-acordes-acao {
    border: 0;
    background: transparent;
    color: var(--ct-gold);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--ct-r-sm);
    transition: background var(--ct-t);
}
.ctc-acordes-acao:hover { background: var(--ct-gold-glow); }

/* Rola para o lado quando há muitos acordes. `overscroll-behavior-x:
   contain` evita que chegar ao fim dispare o "voltar atrás" do
   navegador — num gesto horizontal repetido, isso acontecia sempre. */
.ctc-acordes-fila {
    display: flex;
    gap: 6px;
    padding: 14px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ct-gold-line) transparent;
}
.ctc-acordes-fila::-webkit-scrollbar { height: 5px; }
.ctc-acordes-fila::-webkit-scrollbar-thumb {
    background: var(--ct-gold-line);
    border-radius: 4px;
}

/* ── A LARGURA TEM DE ESTAR AQUI ──
   O `svgViolao()` devolve `<svg viewBox="…" width="100%">`. Faz
   sentido para o modal, onde o diagrama enche a célula da grelha; aqui
   não havia célula nenhuma. Sem largura declarada no cartão, o
   `width: 100%` do SVG resolvia-se contra a fila inteira e UM acorde
   ocupava o ecrã todo — era a "nota aleatória gigante" no topo da
   página.

   A caixa é fixa e o SVG enche-a. Não se mexe no ct-acordes.js: o
   `100%` continua certo no sítio para onde foi escrito. */
.ctc-acorde {
    flex: 0 0 auto;
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 7px 8px;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-r);
    background: var(--ct-surface-2);
    cursor: pointer;
    transition: background var(--ct-t), border-color var(--ct-t), transform var(--ct-t);
}
.ctc-acorde:hover {
    background: var(--ct-surface-3);
    border-color: var(--ct-gold-line);
    transform: translateY(-2px);
}
.ctc-acorde svg {
    display: block;
    width: 100%;
    height: auto;
    /* O ct-dark-theme.css põe `max-width: 100%` em `*`; sem soltar a
       altura aqui, o SVG ficava com a proporção presa e desenhava-se
       achatado. Mesmo defeito que o aro do metrónomo tinha. */
    max-width: none;
    max-height: none;
}

.ctc-acorde-nome {
    font-size: 13px;
    font-weight: 800;
    color: var(--ct-gold);
    letter-spacing: -.2px;
}

/* O diagrama desenha-se com estas variáveis (ver svgViolao no
   ct-acordes.js). Declará-las aqui é o que o faz mudar de tema. */
body.cifra-page {
    --ct-diag-black: #1c2230;
}
body.theme-light.cifra-page {
    --ct-diag-black: #2a3142;
}

/* ═══════════════════════════════════════════════════════════════
   5. CORPO DA CIFRA
   ───────────────────────────────────────────────────────────────
   O `line-height` estava em 1.8. Numa cifra isso é muito: o par
   acorde+letra é UMA unidade de leitura e o entrelinha afastava-os
   tanto que era preciso procurar a que sílaba pertencia o acorde.
   Aqui a letra cola ao acorde dela (1.45) e o respiro vai para
   ENTRE os pares — que é onde a vista precisa dele.
   ═══════════════════════════════════════════════════════════════ */

body.cifra-page .cifra-body-card {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ctc-raio) !important;
    padding: 24px 22px !important;
    box-shadow: var(--ct-shadow-sm) !important;
    margin: 0 !important;
}

body.cifra-page .cifra-conteudo {
    font-family: var(--ct-font-mono) !important;
    font-size: var(--ct-cifra-size, 16px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    color: var(--ct-text) !important;
    /* NÃO MEXER: a coluna do acorde é informação. Qualquer coisa que
       altere a largura do espaço (word-spacing, justify, tab-size)
       desloca o acorde da sílaba a que pertence. */
    white-space: pre !important;
    background: transparent !important;
    overflow-x: visible !important;
    max-width: 100% !important;
    /* ── A moldura branca à volta da cifra ──
       Vinha do site.css:5239, da era do tema claro:
       `background:#fdfdfe; border:1px solid #eef2f6; border-radius:8px;
       padding:16px`, tudo com !important. Aqui só o fundo estava a ser
       anulado — sobrava a moldura clara, o raio e o enchimento, e num
       fundo escuro isso lê-se como uma folha branca colada por cima da
       página. Era a diferença que se via de longe entre isto e o Cifra
       Club, onde a cifra é o texto da página e mais nada.

       O enchimento não é só estética: 16px de cada lado são ~3
       caracteres a menos por linha num telemóvel. */
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* O `hidden` tem de ganhar às regras que põem `display: inline-flex`
   (secção 4) e `display: flex` (a versão de telemóvel, secção 8) em
   todos os .info-tab-item. Sem isto, um item escondido continuava
   visível — era assim que aparecia "DIFICULDADE: —" em cifras que não
   têm dificuldade nenhuma.

   A primeira regra existe por causa da ORDEM: entre dois !important da
   mesma especificidade ganha o último, e a regra de telemóvel vem
   depois desta no ficheiro. Com o `.song-info-tabs` pelo meio subimos
   para (0,3,1) e a ordem deixa de decidir. A segunda fica como rede
   para qualquer outro `hidden` da página. */
body.cifra-page .song-info-tabs [hidden] { display: none !important; }
body.cifra-page [hidden] { display: none !important; }

/* ── Ritmo vertical por papel ── */
body.cifra-page .cifra-conteudo .cl { min-height: 1px; }

/* O acorde cola à letra que vem a seguir. */
body.cifra-page .cifra-conteudo .cl-acordes { margin-top: 0 !important; }

/* O respiro vive entre pares, não dentro deles. */
body.cifra-page .cifra-conteudo .cl-vazia {
    height: .85em !important;
    line-height: .85em !important;
}

/* ── Acordes ── */
body.cifra-page .cifra-conteudo .chord {
    color: var(--ct-gold) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    transition: background var(--ct-t), color var(--ct-t) !important;
}
body.cifra-page .cifra-conteudo .chord:hover {
    background: var(--ct-gold-glow) !important;
    color: var(--ct-gold-bright) !important;
}

/* ── A pista de que o acorde responde ──
   `hover: none` apanha ecrãs tácteis. Aí o sublinhado fica sempre
   visível, porque não há outro momento em que possa aparecer. Com
   rato, deixa-se o hover a fazer o trabalho e não se suja o texto. */
@media (hover: none) {
    body.cifra-page .cifra-conteudo .chord {
        text-decoration: underline dotted !important;
        text-decoration-color: color-mix(in srgb, var(--ct-gold) 55%, transparent) !important;
        text-decoration-thickness: from-font !important;
        text-underline-offset: .18em !important;
    }
    /* Enquanto o dedo está em cima. Sem isto não há qualquer
       resposta ao toque, e a pessoa não sabe se acertou. */
    body.cifra-page .cifra-conteudo .chord:active {
        background: var(--ct-gold-glow) !important;
        color: var(--ct-gold-bright) !important;
    }
}

/* ── Títulos de secção ──
   Eram texto dourado com um traço por baixo, colado à linha anterior
   e com um buraco a seguir. Passam a ter ar EM CIMA (que é o que
   separa uma parte da anterior) e a colar ao que vem a seguir. */
/* 1.1em por cima era pouco: com o marcador da secção na MESMA cor dos
   acordes (ver abaixo), uma música com oito secções lia-se como um bloco
   único de texto dourado. O ar por cima é o que diz "acabou uma parte";
   por baixo continua colado, porque os acordes que se seguem são desta
   secção e não da anterior. */
body.cifra-page .cifra-conteudo .cl-secao {
    margin: 1.75em 0 .25em !important;
    /* A barra de ferramentas é pegada; sem isto, saltar para uma secção
       deixava o título por baixo dela. */
    scroll-margin-top: calc(var(--header-h, 64px) + var(--toolbar-h, 56px) + 16px) !important;
}
body.cifra-page .cifra-conteudo .cl-secao:first-child { margin-top: 0 !important; }

/* ── Marcador de secção: TEXTO, não pílula ──
   Era uma pílula dourada em maiúsculas, com fonte proporcional,
   moldura e enchimento. Três problemas, e todos vêm do mesmo erro —
   tratar o marcador como um elemento de interface e não como parte da
   cifra:

     • saía da grelha monoespaçada. Um `[Intro] Em7(9) D Bm A11` é
       meia linha de cifra: a pílula empurrava os acordes para fora do
       alinhamento com o resto;
     • cada uma comia uma linha inteira mais margens. Numa música com
       oito secções, isso é um ecrã inteiro de enfeite;
     • `text-transform: uppercase` apagava o que o autor escreveu —
       "Dedilhado - Intro" virava "DEDILHADO - INTRO".

   Fica texto simples, na mesma fonte e no mesmo tamanho do resto,
   dourado e a negrito. É assim que se lê numa cifra em papel, e é
   assim que o Cifra Club o faz. */
/* ── E porque é que o marcador NÃO é dourado ──
   Era. E numa linha como `[Intro] Em7(9)  D  Bm  A11` isso punha o nome
   da secção e os quatro acordes exactamente na mesma cor, no mesmo peso e
   na mesma fonte: cinco palavras douradas seguidas, sem nada a dizer que a
   primeira é um rótulo e as outras são para tocar. Lia-se como uma papa.

   O marcador passa a texto discreto (`--ct-text-soft`) e o dourado fica
   reservado ao que se toca. É a mesma hierarquia do Cifra Club, e é a que
   funciona: a vista salta de acorde em acorde e o nome da secção lê-se
   quando se procura por ele.

   A grelha monoespaçada não é tocada — só muda a COR. Qualquer alteração
   de fonte, tamanho ou espaçamento aqui desalinhava os acordes que vêm a
   seguir na mesma linha. */
body.cifra-page .cifra-conteudo .section-title,
body.cifra-page .cifra-conteudo .section-title-inline {
    display: inline !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: inherit !important;
    color: var(--ct-text-soft) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}

/* Os parênteses que NÃO fazem parte de um acorde — os que envolvem uma
   linha inteira, `( Em7(5-)  A7(13-) )`. Tinham `style="color:#bbb"` em
   linha, o que no tema claro é cinzento-claro sobre branco: sumiam. Aqui
   saem do token de texto esbatido, que troca sozinho com o tema. */
body.cifra-page .cifra-conteudo .cifra-paren {
    color: var(--ct-text-faint) !important;
    font-weight: 400 !important;
}

/* ── Tablatura ──
   O bloco que rola sozinho (ver formatarConteudoCifra). Recebe um
   fundo próprio para se ler como um objecto à parte da letra. */
/* A moldura e o fundo saíram. A tablatura é cifra como o resto — pô-la
   numa caixa fazia-a parecer um anexo, e a caixa ainda comia largura
   dos dois lados, logo na parte do conteúdo que é MAIS larga.

   O `overflow-x` fica: as tablaturas vêm da fonte já partidas em
   trechos que cabem, mas uma fonte mal formatada continua a poder
   trazer 90 colunas seguidas, e aí é melhor arrastar a tab do que
   arrastar a página. */
body.cifra-page .cifra-tab-bloco {
    background: none;
    border: 0;
    padding: 0;
    margin: .5em 0;
}
body.cifra-page .cifra-conteudo .cl-tab { line-height: 1.35 !important; }
body.cifra-page .cifra-conteudo .cifra-tab {
    color: var(--ct-text-dim) !important;
}

/* ── Rodapé do cartão ── */
body.cifra-page .cifra-footer-row {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 26px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--ct-border) !important;
}

body.cifra-page .action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    min-height: 40px !important;
    border-radius: var(--ct-r-pill) !important;
    background: var(--ct-surface-2) !important;
    border: 1px solid var(--ct-border) !important;
    color: var(--ct-text-soft) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all var(--ct-t) !important;
}
body.cifra-page .action-btn:hover {
    border-color: var(--ct-gold-line) !important;
    color: var(--ct-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5b. CIFRAS RELACIONADAS — a foto que nunca aparecia
   ───────────────────────────────────────────────────────────────
   As fotos ficavam em branco por um IMPASSE entre três regras que
   sozinhas parecem inofensivas:

     1. o tailwind.css impõe `img { height: auto }` a toda a página;
     2. a moldura tem 42×42, mas a `<img>` lá dentro não declarava
        altura — e com `height: auto` uma imagem AINDA NÃO CARREGADA
        mede zero;
     3. a `<img>` é `loading="lazy"`, e o carregamento preguiçoso
        dispara quando ela entra no ecrã — mas uma caixa de altura
        zero não tem área para entrar em sítio nenhum.

   Não carregava porque não tinha altura, e não tinha altura porque
   não carregava. Medido no browser, já com a secção rolada para o
   meio do ecrã: `caixa=39x0`, `natural=0x0`, nas cinco.

   Dar altura à imagem quebra o ciclo: passa a haver caixa, o
   observador dispara, e o `object-fit: cover` enquadra seja qual for
   a proporção do original.
   ═══════════════════════════════════════════════════════════════ */

body.cifra-page .relacionada-foto {
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

body.cifra-page .relacionada-foto img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    /* Enquanto não chega, uma superfície em vez de um buraco. */
    background: var(--ct-surface-3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. COLUNA LATERAL
   ═══════════════════════════════════════════════════════════════ */

body.cifra-page .cifra-side-col > * {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ctc-raio) !important;
    box-shadow: var(--ct-shadow-sm) !important;
}

body.cifra-page .painel-videoaula {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-border) !important;
    border-radius: var(--ctc-raio) !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. TEMA CLARO
   ───────────────────────────────────────────────────────────────
   Os tokens já trocam sozinhos; aqui só o que a troca não resolve.
   Regra da casa: nesta folha NUNCA se declara um `color` genérico
   num selector largo — é assim que aparece texto claro sobre fundo
   claro, o bug recorrente deste projecto.
   ═══════════════════════════════════════════════════════════════ */

/* ATENÇÃO AO SELECTOR: `body.cifra-page` está na PRÓPRIA <body>
   (`<body class="cifra-page ct-redesign">`), e o `theme-light` que o
   ct-shell.js liga também. Portanto os dois vivem no mesmo elemento e o
   selector tem de ser COMPOSTO — `body.theme-light.cifra-page`, sem
   espaço. Escrito com espaço, pede um `body.cifra-page` dentro da body, que
   não existe, e o tema claro inteiro desta folha não pegava. */
body.theme-light.cifra-page .song-header-card,
body.theme-light.cifra-page .cifra-body-card,
body.theme-light.cifra-page .cifra-toolbar,
body.theme-light.cifra-page .ctc-acordes {
    box-shadow: 0 1px 2px rgba(90, 74, 30, .06), 0 6px 20px rgba(90, 74, 30, .07) !important;
}

/* No claro o dourado puro sobre branco fica com pouco contraste para
   texto pequeno. O tom fundo (--ct-gold-deep) mantém a família e
   passa o rácio de leitura. */
body.theme-light.cifra-page .song-artist-link,
body.theme-light.cifra-page .info-tab-value.orange,
body.theme-light.cifra-page .tom-val,
body.theme-light.cifra-page .ct-stepper-val,
body.theme-light.cifra-page .cifra-conteudo .chord,
body.theme-light.cifra-page .ctc-acorde-nome,
body.theme-light.cifra-page .ctc-acordes-acao {
    color: var(--ct-gold-deep) !important;
}

/* O marcador de secção seguia aqui dourado, com fundo e moldura de uma
   pílula que já não existe — restos da versão anterior. Agora acompanha o
   escuro: texto discreto, sem caixa. O token `--ct-text-soft` já é escuro
   no tema claro, portanto não é preciso valor próprio. */
body.theme-light.cifra-page .cifra-conteudo .section-title,
body.theme-light.cifra-page .cifra-conteudo .section-title-inline {
    color: var(--ct-text-soft) !important;
    background: none !important;
    border: 0 !important;
}

/* Tom, instrumento e dificuldade apanhavam a regra genérica de
   superfícies do tema claro e cada um ficava com um rectângulo branco
   por trás — três caixas dentro de um cartão que já é uma caixa, e com
   os cantos a não bater certo com nada. Não são superfícies: são pares
   rótulo/valor em cima do cartão. */
body.theme-light.cifra-page .song-info-tabs,
body.theme-light.cifra-page .info-tab-item,
body.theme-light.cifra-page .song-header-top,
body.theme-light.cifra-page .song-title-block,
body.theme-light.cifra-page .song-badges {
    background: none !important;
    box-shadow: none !important;
}

body.theme-light.cifra-page .tom-inline-control button:hover,
body.theme-light.cifra-page .ct-stepper button:hover {
    background: var(--ct-gold-deep) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. TELEMÓVEL
   ───────────────────────────────────────────────────────────────
   O ct-cifra-mobile.css trata da barra flutuante e da gaveta. Aqui
   só a densidade do que fica visível.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    body.cifra-page .cifra-page-wrapper {
        padding: 12px 10px 30px !important;
        gap: 14px !important;
    }

    /* ══════════════════════════════════════════════════════════
       CABEÇALHO DA MÚSICA NO TELEMÓVEL
       ──────────────────────────────────────────────────────────
       Estava desarrumado por três razões, todas de alinhamento:

         • o avatar centrava-se verticalmente contra o bloco de
           texto inteiro, e o texto é mais alto do que ele — a foto
           acabava a flutuar a meio, sem relação com o título que
           devia acompanhar;
         • "Cifra: Principal" e "Favoritar" empilhavam-se, uma
           por linha, porque eram larguras soltas numa caixa
           estreita;
         • a fila de metadados era feita de itens separados por
           bordas à esquerda. Ao quebrar para a segunda linha, a
           borda do primeiro item da linha nova ficava pendurada
           no ar — o traço solto ao lado de "DIFICULDADE".

       Aqui: avatar alinhado ao topo com o título, selos numa fila
       que encolhe, e os metadados numa grelha de verdade, onde
       quebrar é normal e não deixa restos.
       ══════════════════════════════════════════════════════════ */

    body.cifra-page .song-header-card {
        padding: 14px 14px 12px !important;
        border-radius: 14px !important;
    }

    /* ── A foto, o título e os selos ──
       Os selos estavam dentro da coluna do título, ou seja, à direita
       da foto. Sobrava-lhes a largura do ecrã menos 52px de avatar
       menos o intervalo: três pastilhas a disputar 270px, que quebravam
       em duas filas encavalitadas e desalinhadas de tudo o resto do
       cartão. Era o "não está bonito" da foto/tom/favoritar.

       Aqui a fila de cima passa a grelha e o .song-title-block a
       `display: contents` — deixa de ter caixa, e os seus três filhos
       (título, artista, selos) tornam-se itens da grelha. Assim os
       selos podem ocupar a largura toda do cartão, por baixo da foto,
       sem tocar no HTML. */
    body.cifra-page .song-header-top {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-areas:
            'foto titulo'
            'foto artista'
            'selos selos' !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        align-items: start !important;
    }
    body.cifra-page .song-title-block { display: contents !important; }
    body.cifra-page .song-title-block h1 { grid-area: titulo !important; }
    body.cifra-page .song-artist-link { grid-area: artista !important; }
    body.cifra-page .song-badges { grid-area: selos !important; }

    body.cifra-page .artist-avatar {
        grid-area: foto !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        align-self: start !important;
        /* Desce o meio da foto até à altura do par título+artista,
           em vez de a centrar contra o bloco todo. */
        margin-top: 2px !important;
    }

    body.cifra-page .song-title-block h1 {
        font-size: 21px !important;
        line-height: 1.2 !important;
        margin-bottom: 1px !important;
    }

    body.cifra-page .song-artist-link {
        font-size: 13.5px !important;
        margin-bottom: 8px !important;
    }

    /* Três pastilhas não cabem em 360px numa fila só — em `nowrap`
       ficavam todas cortadas por reticências, incluindo a do vídeo, que
       existe precisamente para ser lida. Quebram, portanto; o que muda é
       que já não quebram ao acaso.

       O selo "Cifra: Principal" é um rótulo e fica do tamanho que tem.
       Os dois botões são acções e crescem para encher o que sobra da
       fila: em 360px entra o "Favoritar" ao lado do selo e o "Ver
       videoaula" passa para baixo, com a largura toda. É a única acção
       do cartão que leva a outro conteúdo, e é a que se quer dar a
       conhecer — merece a barra inteira. Sem vídeo, o "Favoritar" fica
       com esse lugar e o cartão não muda de forma. */
    body.cifra-page .song-badges {
        gap: 8px !important;
        flex-wrap: wrap !important;
        margin-top: 12px !important;
    }
    body.cifra-page .badge-principal {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
        white-space: nowrap !important;
    }
    body.cifra-page .btn-favoritar-top,
    body.cifra-page .btn-videoaula-top {
        flex: 1 1 46% !important;
        justify-content: center !important;
        min-width: 0 !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
        min-height: 38px !important;
    }

    /* Dourado cheio, e não o contorno do desktop: aqui está sozinho numa
       fila e é o botão que se está a tentar dar a ver. */
    body.cifra-page .btn-videoaula-top {
        background: var(--ct-gold-metal) !important;
        border-color: transparent !important;
        color: #17202b !important;
    }
    body.cifra-page .btn-videoaula-top i { color: #17202b !important; }

    /* O mesmo `--ct-gold-metal` é claro no tema escuro e escuro no tema
       claro — é essa a graça do token. O texto por cima não pode ser o
       mesmo nos dois: no claro ficava cinzento-escuro sobre ouro velho,
       quase ilegível. Aqui é branco, e o contraste volta. */
    body.theme-light.cifra-page .btn-videoaula-top,
    body.theme-light.cifra-page .btn-videoaula-top i {
        color: #fff !important;
    }

    /* ── Metadados em grelha ──
       Colunas iguais que se reorganizam sozinhas. Sem bordas
       entre itens: numa grelha que quebra, um separador lateral
       é sempre um traço órfão à espera de acontecer. O que separa
       é o espaço. */
    body.cifra-page .song-info-tabs {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
        gap: 10px 14px !important;
        margin-top: 12px !important;
        padding-top: 11px !important;
    }
    body.cifra-page .info-tab-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1px !important;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0 !important;
    }
    /* O `border: 0` de cima não chega: o fio entre metadados vem de
       `.info-tab-item + .info-tab-item`, que tem uma classe a mais e
       ganha-lhe mesmo com !important dos dois lados. Era o traço solto
       à esquerda do "DIFICULDADE" quando ele passa para a segunda fila
       — um separador a separar de nada, que é precisamente o que este
       bloco dizia ter resolvido. */
    body.cifra-page .info-tab-item + .info-tab-item {
        border-left: 0 !important;
    }
    body.cifra-page .info-tab-label {
        font-size: 9.5px !important;
        letter-spacing: .7px !important;
    }
    body.cifra-page .info-tab-value {
        font-size: 14px !important;
        line-height: 1.25 !important;
        /* Um instrumento longo ("Violão/Guitarra") não pode empurrar
           a coluna do lado. */
        overflow-wrap: anywhere !important;
    }

    /* ── Sem cartão nenhum à volta da cifra ──
       Ficava uma moldura clara a correr dos dois lados, do princípio ao
       fim da música. Numa página que é 90% cifra, esse rectângulo não
       separa a cifra de coisa nenhuma — não há nada à volta dela para
       separar — e só a faz parecer um documento colado por cima da
       página. É a diferença mais visível entre isto e o Cifra Club,
       onde a cifra é simplesmente o texto da página.

       E há o lado prático: cada pixel de moldura e enchimento é uma
       coluna a menos de texto. Com 16px de cada lado mais 10px do
       wrapper iam-se ~52px, que a 16px monoespaçados são quase 6
       caracteres — a diferença entre um verso caber e ser quebrado. */
    body.cifra-page .cifra-body-card {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 6px 4px 14px !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    /* Pela mesma razão, a faixa de acordes deixa de ser um cartão: fica
       a fila de diagramas e um fio a separá-la da cifra. */
    body.cifra-page .ctc-acordes {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ct-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    body.cifra-page .ctc-acordes-topo {
        border-bottom: 0 !important;
        padding: 8px 10px 0 !important;
    }

    /* A faixa de acordes encosta às margens do ecrã: com 16px de cada
       lado, um diagrama inteiro deixava de caber na primeira posição e
       lia-se sempre meio cortado. */
    .ctc-acordes-fila { padding: 12px 10px !important; }

    body.cifra-page .cifra-footer-row { margin-top: 20px !important; }
}

/* Ecrãs estreitos: o título e o avatar dividem mal 320px. */
@media (max-width: 400px) {
    body.cifra-page .song-title-block h1 { font-size: 19px !important; }
    body.cifra-page .info-tab-value { font-size: 14px !important; }
    body.cifra-page .info-tab-item { padding: 0 9px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   9. IMPRIMIR
   ───────────────────────────────────────────────────────────────
   O que saía do telemóvel eram cinco páginas em branco com a gaveta
   de ferramentas desenhada por cima da primeira. Três coisas de uma
   vez:

   • A gaveta e a barra flutuante são `position: fixed`. Ninguém as
     escondia na impressão, e um elemento fixo pinta-se por cima do
     papel — a lista "Afinador / Metrónomo / Imprimir" ficava em cima
     da música.
   • O `overflow: clip` que corrige o arrastar lateral no telemóvel
     vale para o papel também: corta o documento à altura de um ecrã e
     o resto sai em branco.
   • O cartão da cifra tem margens negativas no telemóvel, para ganhar
     colunas de texto. Na folha, isso empurra a primeira coluna para
     fora da margem — lia-se "uando eu digo" em vez de "Quando".

   O princípio: no papel fica a música e mais nada. Sem cabeçalho, sem
   barras, sem diagramas, sem vídeo, sem selos — nada disso se toca
   numa folha impressa, e cada um deles é tinta. Tudo a preto sobre
   branco, que é o que uma impressora doméstica faz de qualquer forma.
   ═══════════════════════════════════════════════════════════════ */
@page {
    margin: 12mm 10mm;
}

/* O prefixo repete a classe de propósito. As folhas antigas pintam
   estes mesmos elementos com `body.ct-redesign .x { color: … !important }`
   — (0,2,1) e !important dos dois lados —, e ser a última folha do
   ficheiro só desempata quando a especificidade é igual. Com a classe
   repetida isto passa a (0,3,2) e o papel deixa de depender da ordem
   de carregamento. Ver a nota do .ct-cor-propria no tema claro. */
@media print {
    /* ── Fora do papel ── */
    html body.cifra-page.cifra-page .ct-header,
    html body.cifra-page.cifra-page #ct-mobile-nav,
    html body.cifra-page.cifra-page #loading,
    html body.cifra-page.cifra-page #error,
    html body.cifra-page.cifra-page .cifra-toolbar,
    html body.cifra-page.cifra-page .cifra-side-col,
    html body.cifra-page.cifra-page .cifra-footer-row,
    html body.cifra-page.cifra-page .cifras-relacionadas-section,
    html body.cifra-page.cifra-page .footer,
    html body.cifra-page.cifra-page .song-badges,
    html body.cifra-page.cifra-page .artist-avatar,
    html body.cifra-page.cifra-page .btn-favoritar-top,
    html body.cifra-page.cifra-page .ct-cifra-bar,
    html body.cifra-page.cifra-page .ct-gaveta,
    html body.cifra-page.cifra-page .ct-faixa-acordes,
    html body.cifra-page.cifra-page .ctc-acordes,
    html body.cifra-page.cifra-page .ctc-acordes-acao,
    html body.cifra-page.cifra-page #video-preview-area,
    html body.cifra-page.cifra-page .painel-videoaula,
    html body.cifra-page.cifra-page #youtube-miniplayer-container,
    html body.cifra-page.cifra-page #cookie-consent-banner,
    html body.cifra-page.cifra-page #bmc-wbtn,
    html body.cifra-page.cifra-page .adsbygoogle,
    html body.cifra-page.cifra-page ins,
    html body.cifra-page.cifra-page iframe,
    html body.cifra-page.cifra-page .ct-toast,
    html body.cifra-page.cifra-page .modal-overlay { display: none !important; }

    /* ── Sem cortes ──
       O `overflow: clip` de html/body existe para o arrastar lateral
       no telemóvel; no papel corta o documento a uma página. */
    html,
    html body.cifra-page.cifra-page {
        overflow: visible !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* ── Tinta preta sobre papel branco ──
       O regra universal é de propósito: as superfícies escuras do tema
       vêm de dezenas de selectores diferentes, e listá-los um a um era
       garantir que o próximo ficava de fora. */
    html body.cifra-page.cifra-page,
    html body.cifra-page.cifra-page * {
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: #000 !important;
        border-color: #999 !important;
    }
    html body.cifra-page.cifra-page { background: #fff !important; }
    html body.cifra-page.cifra-page .song-header-card::before { display: none !important; }

    /* ── A folha é a largura toda ── */
    html body.cifra-page.cifra-page .cifra-page-wrapper {
        display: block !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body.cifra-page.cifra-page .song-header-card,
    html body.cifra-page.cifra-page .cifra-body-card {
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body.cifra-page.cifra-page .song-header-card { margin-bottom: 6mm !important; }
    html body.cifra-page.cifra-page .song-title-block h1 { font-size: 18pt !important; }
    html body.cifra-page.cifra-page .song-artist-link { font-size: 11pt !important; }
    html body.cifra-page.cifra-page .song-info-tabs {
        border-top: 1px solid #999 !important;
        padding-top: 2mm !important;
    }

    /* ── A cifra ──
       Não rola, portanto o que não couber tem de quebrar; e um acorde
       nunca fica na página anterior à sílaba dele. */
    html body.cifra-page.cifra-page .cifra-conteudo,
    html body.cifra-page.cifra-page .cifra-tab-bloco {
        overflow: visible !important;
        max-width: none !important;
    }
    html body.cifra-page.cifra-page .cifra-conteudo {
        font-size: 10pt !important;
        line-height: 1.35 !important;
    }
    /* O dourado sai cinzento-claro numa impressora — e o acorde é a
       única coisa da folha que tem de se ler de longe, em cima de uma
       estante. Aqui distingue-se pelo peso, não pela cor. A regra do
       tema que pinta `.cifra-conteudo .chord` tem três classes e ganha
       ao reset universal lá de cima; por isso volta a nomear-se. */
    html body.cifra-page.cifra-page .cifra-conteudo .chord,
    html body.cifra-page.cifra-page .cifra-conteudo .section-title,
    html body.cifra-page.cifra-page .cifra-conteudo .section-title-inline,
    html body.cifra-page.cifra-page .cifra-conteudo .cifra-tab,
    html body.cifra-page.cifra-page .info-tab-value,
    html body.cifra-page.cifra-page .info-tab-value.orange,
    html body.cifra-page.cifra-page .info-tab-label,
    html body.cifra-page.cifra-page .song-artist-link {
        color: #000 !important;
    }
    html body.cifra-page.cifra-page .cifra-conteudo .chord,
    html body.cifra-page.cifra-page .cifra-conteudo .section-title,
    html body.cifra-page.cifra-page .cifra-conteudo .section-title-inline {
        font-weight: 800 !important;
    }
    html body.cifra-page.cifra-page .cifra-conteudo .cifra-paren {
        color: #555 !important;
    }

    /* "Violão/Guitarra" cabia em três colunas de telemóvel com
       reticências. Na folha há largura: mostra-se inteiro. */
    html body.cifra-page.cifra-page .info-tab-value {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }
    html body.cifra-page.cifra-page .cl { break-inside: avoid !important; }
    html body.cifra-page.cifra-page .cl-acordes { break-after: avoid !important; }
    html body.cifra-page.cifra-page .cl-secao { break-after: avoid !important; break-before: auto !important; }
    html body.cifra-page.cifra-page .cifra-tab-bloco { break-inside: avoid !important; }
}

/* ═══════════════════════════════════════════════════════════════
   10. MOVIMENTO REDUZIDO
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ctc-acorde:hover { transform: none; }
    body.cifra-page * { transition-duration: .01ms !important; }
}