/* ═══════════════════════════════════════════════════════════════════ CIFRATURN — PÁGINA DE CIFRA NO TELEMÓVEL ─────────────────────────────────────────────────────────────────── Acompanha o ct-cifra-mobile.js. Tudo aqui está dentro de @media (max-width: 768px) e depende da classe `ct-cifra-mobile` que o script põe no — assim, se o script não correr, a página fica exactamente como estava em vez de ficar meio desmontada. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── O que sai do caminho ───────────────────────────────────── A barra de cima ocupava três filas antes de qualquer conteúdo. As mesmas funções passam a viver na barra do rodapé. */ body.ct-cifra-mobile .cifra-toolbar { display: none !important; } /* ── O widget do Buy Me a Coffee ── Vem de fora (cdnjs.buymeacoffee.com) e planta-se `position: fixed` no canto inferior direito, por cima de tudo. Numa página de cifra isso é o pior sítio possível: tapa o fim das linhas enquanto se toca, e ainda por cima cai em cima da barra flutuante do leitor. Não se esconde — continua a haver quem queira apoiar. Sobe para acima da barra, encolhe, e fica por baixo dela na ordem de empilhamento (a barra usa z-index 900), para que numa sobreposição quem ganha seja o controlo do leitor. */ body.ct-cifra-mobile #bmc-wbtn, body.ct-cifra-mobile .bmc-btn-container, body.ct-cifra-mobile [id^="bmc-wbtn"] { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; right: 10px !important; transform: scale(.72) !important; transform-origin: bottom right !important; z-index: 890 !important; opacity: .85; } /* A coluna lateral é do computador; no telemóvel só empurra a cifra para baixo, e as ferramentas dela estão na gaveta. */ body.ct-cifra-mobile .cifra-side-col { display: none !important; } /* Espaço no fundo para a barra flutuante não tapar a última linha da cifra nem os botões de imprimir/partilhar. */ body.ct-cifra-mobile { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* ── Barra flutuante ─────────────────────────────────────────── */ .ct-cifra-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 900; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--ct-elev-3, rgba(19, 29, 46, .93)); border: 1px solid var(--ct-line, rgba(255, 255, 255, .1)); box-shadow: 0 10px 34px rgba(0, 0, 0, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: calc(100vw - 24px); } body.theme-light .ct-cifra-bar { background: rgba(253, 252, 249, .95); border-color: rgba(28, 34, 48, .12); box-shadow: 0 10px 30px rgba(90, 74, 30, .18); } .ct-cb-btn { flex: 1 1 0; min-width: 68px; border: 0; background: transparent; color: inherit; border-radius: 999px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; letter-spacing: .01em; cursor: pointer; transition: background .16s ease, color .16s ease; } .ct-cb-btn i { font-size: 15px; } .ct-cb-btn:active, .ct-cb-btn.activo { background: var(--ct-gold, #d4af37); color: #0e1621; } /* ── Gaveta ──────────────────────────────────────────────────── */ .ct-gaveta { position: fixed; inset: 0; z-index: 950; } .ct-gv-fundo { position: absolute; inset: 0; background: rgba(6, 9, 13, .6); opacity: 0; transition: opacity .2s ease; } .ct-gaveta.aberta .ct-gv-fundo { opacity: 1; } .ct-gv-folha { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ct-elev-2, #131d2e); border-radius: 22px 22px 0 0; border-top: 1px solid var(--ct-line, rgba(255, 255, 255, .1)); padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .22s cubic-bezier(.32, .72, 0, 1); max-height: 76vh; overflow-y: auto; } body.theme-light .ct-gv-folha { background: #fdfcf9; } .ct-gaveta.aberta .ct-gv-folha { transform: translateY(0); } .ct-gv-puxador { width: 38px; height: 4px; border-radius: 4px; background: var(--ct-line, rgba(255, 255, 255, .22)); margin: 0 auto 14px; } .ct-gv-titulo { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-bottom: 12px; } .ct-gv-linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ct-line, rgba(255, 255, 255, .07)); font-size: 14px; } .ct-gv-linha:last-child { border-bottom: 0; } .ct-gv-ctrl { display: flex; align-items: center; gap: 14px; } .ct-gv-ctrl button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ct-line, rgba(255, 255, 255, .14)); background: transparent; color: inherit; font-size: 19px; line-height: 1; cursor: pointer; } .ct-gv-ctrl button:active { background: var(--ct-gold, #d4af37); color: #0e1621; } .ct-gv-ctrl strong { min-width: 34px; text-align: center; color: var(--ct-gold, #d4af37); font-size: 16px; } .ct-gv-linha input[type="range"] { flex: 1 1 auto; max-width: 55%; accent-color: var(--ct-gold, #d4af37); } .ct-gv-grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ct-gv-grelha button { border: 1px solid var(--ct-line, rgba(255, 255, 255, .1)); background: var(--ct-elev-1, rgba(255, 255, 255, .04)); color: inherit; border-radius: 14px; padding: 15px 6px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; cursor: pointer; } .ct-gv-grelha button i { font-size: 17px; color: var(--ct-gold, #d4af37); } .ct-gv-grelha button:active { border-color: var(--ct-gold, #d4af37); } /* ── Faixa de acordes ────────────────────────────────────────── */ .ct-faixa-acordes { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximate; padding: 4px 2px 12px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ct-faixa-acordes::-webkit-scrollbar { display: none; } .ct-fa-item { flex: 0 0 auto; width: 78px; scroll-snap-align: start; background: var(--ct-elev-1, rgba(255, 255, 255, .04)); border: 1px solid var(--ct-line, rgba(255, 255, 255, .09)); border-radius: 12px; padding: 8px 5px 5px; color: inherit; cursor: pointer; } .ct-fa-nome { display: block; font-size: 12px; font-weight: 800; color: var(--ct-gold, #d4af37); margin-bottom: 3px; } /* ── Vídeo: miniatura em vez de player de largura total ──────── */ body.ct-cifra-mobile .painel-videoaula:not(.aberto) { display: none; } } /* ═══════════════════════════════════════════════════════════════════ CORRECÇÕES DE USO — reportadas em 10/08/2026 ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* 1. FECHAR A GAVETA Só havia o fundo escurecido, que ninguém percebe ser botão. Quem tentava arrastar a folha para baixo accionava o "puxar para recarregar" do Chrome e perdia a página inteira. */ .ct-gv-fechar { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ct-line, rgba(255, 255, 255, .14)); background: var(--ct-elev-1, rgba(255, 255, 255, .06)); color: inherit; font-size: 14px; display: grid; place-items: center; cursor: pointer; z-index: 2; } .ct-gv-fechar:active { background: var(--ct-gold, #d4af37); color: #0e1621; } /* Trava o "puxar para recarregar" enquanto a gaveta está aberta. `overscroll-behavior: none` impede que o gesto suba ao documento; fixar o body impede o resto. */ .ct-gaveta { overscroll-behavior: none; touch-action: none; } .ct-gv-folha { overscroll-behavior: contain; touch-action: pan-y; padding-top: 6px; } /* 2. ROLAGEM — botão grande e velocidade no mesmo sítio */ .ct-gv-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--ct-gold-line, rgba(212, 175, 55, .4)); background: transparent; color: var(--ct-gold, #d4af37); font-weight: 700; font-size: 14px; cursor: pointer; } .ct-gv-toggle.ligado { background: var(--ct-gold, #d4af37); color: #0e1621; } .ct-gv-vel-wrap { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; max-width: 62%; } .ct-gv-vel-wrap input[type="range"] { flex: 1 1 auto; accent-color: var(--ct-gold, #d4af37); height: 26px; } .ct-gv-vel-wrap strong { min-width: 22px; text-align: right; color: var(--ct-gold, #d4af37); } .ct-gv-dica { margin: 12px 0 0; font-size: 11px; opacity: .5; line-height: 1.5; } /* 3. O WIDGET DO CAFÉ TAPAVA O BOTÃO "MAIS" Ele fixa-se em baixo à direita, exactamente onde a barra da cifra tem o último botão. Sobe acima da barra enquanto se está numa cifra; nas outras páginas fica onde sempre esteve. */ body.ct-cifra-mobile #bmc-wbtn, body.ct-cifra-mobile .bmc-btn-container, body.ct-cifra-mobile iframe[src*="buymeacoffee"] { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; z-index: 800 !important; } /* 4. A BARRA COM CINCO BOTÕES O "Vídeo" só existe nas cifras que têm vídeo, portanto a barra tem quatro ou cinco botões conforme a música. Com cinco, os 68px de largura mínima somam 340px, mais folgas e enchimento: passa dos 336px que sobram num ecrã de 360. Os botões não encolhem sozinhos porque o `min-width` é um chão — é preciso baixá-lo. */ .ct-cifra-bar.ct-bar-5 .ct-cb-btn { min-width: 54px; padding: 8px 4px; } /* O botão do vídeo é o único da barra que não é ferramenta de leitura: leva a outro conteúdo. O ícone a dourado diz isso sem precisar de uma cor de fundo, que aí competiria com o estado "activo" da rolagem. */ .ct-cb-btn.ct-cb-video i { color: var(--ct-gold, #d4af37); } .ct-cb-btn.ct-cb-video:active i { color: inherit; } /* 5. O MINIPLAYER FICAVA POR BAIXO DA BARRA Está `fixed` a 10px do fundo à direita — exactamente onde a barra flutuante vive. Abrir o vídeo pelo botão novo dava um player meio tapado, e o X de fechar caía debaixo do "Mais". Sobe acima da barra e passa a ocupar a largura toda: 260px de vídeo num telemóvel não se vê, e não há aqui nada ao lado com que competir por espaço. z-index 901 para ficar por cima da barra (900) e por baixo da gaveta (950), que é modal. O `!important` é obrigatório, não é hábito: o bugfixes_patch.css prende este mesmo elemento com `bottom: 10px !important` e `max-width: 320px !important` dentro do mesmo @media. Sem isto, herda-se o canto de baixo — que é exactamente onde a barra flutuante está — e a correcção não se vê. O `max-width` tem de ser desfeito à mão pelo mesmo motivo. */ body.ct-cifra-mobile #youtube-miniplayer-container { left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; z-index: 901; } }