/* ---- grade: [ferramentas] [cifra] ---- */
    .cifra-redesign .cifra-layout{grid-template-columns:minmax(190px,214px) minmax(0,1fr);gap:26px}

    /* ---- coluna de ferramentas ---- 
       29/09/2026 (pedido do responsavel): a coluna deixou de ser GRUDENTA e de rolar
       por dentro. Agora ela e um bloco comum da pagina: o conteudo todo (ferramentas
       + categorias de missa + "Sobre esta cifra") aparece de uma vez e desce junto
       com a pagina da cifra — nada de caixinha com barra de rolagem.
       O fundo ganhou o AZUL do site (#0f4c81, o mesmo do botao ligado) num tom
       claro: fica evidente ao lado da cifra branca, sem atrapalhar a leitura dos
       botoes e dos textos. */
    .cifra-ferramentas{padding:14px;border:1px solid #bcd3ee;border-left:4px solid #0f4c81;border-radius:16px;background:linear-gradient(180deg,#e8f1fb 0%,#dce9f7 100%);box-shadow:0 10px 26px rgba(15,76,129,.10)}
    .cifra-ferramentas-titulo{margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#0f4c81}
    .cifra-ferramentas-corpo{display:flex;flex-direction:column;gap:12px}
    .cf-ferr-grupo{display:grid;gap:7px;padding-top:10px;border-top:1px solid #cfe0f3}
    .cf-ferr-rotulo{font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#4a6a90}
    .cf-ferr-linha{display:flex;align-items:center;gap:6px}
    .cf-ferr-btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 8px;border:1px solid #c9d9ec;border-radius:11px;background:#fff;color:#111827;font:inherit;font-size:12.5px;font-weight:800;line-height:1.15;text-align:center;cursor:pointer}
    .cf-ferr-btn:hover{background:#f1f7fd;border-color:#a8c6e4}
    .cf-ferr-btn.is-on{background:#0f4c81;border-color:#0f4c81;color:#fff}
    .cf-ferr-btn-video{min-height:46px;background:#fff5f5;border-color:#f3c6c6;color:#b91c1c}
    .cf-ferr-btn-video:hover{background:#ffecec}
    .cf-ferr-valor{flex:0 0 56px;text-align:center;font-size:13px;font-weight:900;color:#0f4c81}
    .cf-ferr-ajuda{margin:0;font-size:11px;line-height:1.35;color:#53739b}
    .cf-ferr-progresso{margin-top:12px;height:5px;border-radius:999px;background:#cfe0f3;overflow:hidden}
    .cf-ferr-progresso span{display:block;height:100%;width:0;background:#0f4c81}

    /* ---- categorias de missa na coluna de ferramentas (29/09/2026) ----
       Aqui ficava a propaganda do Google (slot 9537406172), que saiu a pedido do
       responsavel. No lugar dela entra a lista COMPLETA das categorias de missa —
       o mesmo conteudo da home, ligado às páginas /missa/<momento>.
       A coluna tem 190-214px: por isso os itens sao compactos e o nome PODE
       quebrar em duas linhas (truncar nome de categoria e pior que a linha extra).
       O CSS do casco usa !important em quase tudo, entao aqui tambem — e com o
       prefixo body.cifranet-shell para vencer as regras de tema da propria pagina. */
    .cfn-missa-cat{margin:16px 0 0;padding:12px;border:1px solid #c9d9ec;border-radius:14px;background:#fff;box-shadow:0 6px 16px rgba(15,76,129,.06)}
    body.cifranet-shell .cfn-missa-cat h3{margin:0 0 4px!important;font-size:13px;line-height:1.3;color:#0b2447!important;font-weight:900}
    body.cifranet-shell .cfn-missa-cat p{margin:0 0 10px!important;font-size:11.5px;line-height:1.4;color:#94a3b8!important}
    .cfn-missa-cat-lista{display:grid;gap:2px}
    body.cifranet-shell .cfn-missa-cat-lista a{display:block;padding:5px 7px;border:1px solid transparent;border-radius:9px;color:#0b2447!important;text-decoration:none!important;font-size:12.5px;line-height:1.32;font-weight:700}
    body.cifranet-shell .cfn-missa-cat-lista a:hover,
    body.cifranet-shell .cfn-missa-cat-lista a:focus-visible{background:#eef5fd;border-color:#dbe9f8;color:#c2410c!important;outline:none}
    /* Sem rolagem interna e sem "grudar" (29/09/2026): a coluna e um bloco comum da
       pagina, entao o fim da lista e o "Sobre esta cifra" aparecem na rolagem normal. */
    .cifra-ferramentas{display:flex;flex-direction:column}
    .cf-ferr-sobre{margin:16px 0 0;padding:14px;border-radius:14px}
    .cf-ferr-sobre h3{margin:0 0 10px;font-size:13px}
    /* No celular a coluna de ferramentas some: o "Sobre esta cifra" fica com a
       copia do fim da pagina (.cf-sobre-celular), que so aparece la embaixo. */
    .cf-sobre-celular{display:none}

    /* ---- cartao "Continue tocando" -> pagina do artista (imagem 02) ---- */
    .cf-artista-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
    .cf-artista-cta h2{margin:0!important}
    .cf-artista-cta-link{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:#f97300;color:#fff!important;font-size:16px;font-weight:900;text-decoration:none!important;box-shadow:0 10px 22px rgba(249,115,0,.25)}
    .cf-artista-cta-link:hover{filter:brightness(.96)}
    /* ---- Tela amigavel de "precisa de conta" (25/09/2026) ---- */
    .cf-login-veu{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,20,40,.62)}
    .cf-login-veu[hidden]{display:none}
    .cf-login-caixa{position:relative;width:min(520px,100%);padding:26px 24px 20px;border-radius:22px;background:#fff;box-shadow:0 26px 60px rgba(8,20,40,.35);text-align:center}
    .cf-login-x{position:absolute;right:10px;top:10px;width:38px;height:38px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:22px;line-height:1;cursor:pointer;color:#475569}
    .cf-login-emoji{display:inline-block;font-size:34px;line-height:1}
    .cf-login-caixa h2{margin:10px 0 8px;font-size:21px;color:#0b2447}
    .cf-login-caixa p{margin:0 0 10px;color:#475569;font-size:14.5px;line-height:1.6}
    .cf-login-nota{color:#94a3b8!important;font-size:13px!important}
    .cf-login-botoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 10px}
    .cf-login-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid #c2410c;background:#c2410c;color:#fff!important;font-weight:900;font-size:15px;text-decoration:none}
    .cf-login-btn-claro{background:#fff;border-color:#cbd5e1;color:#0b2447!important}
    .cf-login-depois{border:0;background:transparent;color:#64748b;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:underline}
    @media(max-width:640px){.cf-login-caixa{padding:22px 16px 16px}.cf-login-caixa h2{font-size:19px}}
    @media(max-width:640px){.cf-artista-cta{flex-direction:column;align-items:stretch}.cf-artista-cta-link{justify-content:center;width:100%}}

    /* ---- cabecalho: titulo + artista + video ---- */
    .cifra-redesign .cifra-primary>.song-summary.cifra-topo-v2{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;padding:0 0 16px;border:0;border-bottom:1px solid #e9ebee;border-radius:0}
    .cifra-redesign .cifra-primary>.song-summary.cifra-topo-v2 .song-cover{display:none}
    .song-summary-texto{min-width:0}
    .song-video{position:relative;display:block;flex:0 0 auto;width:186px;padding:0;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#000;cursor:pointer}
    .song-video img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.92}
    .song-video:hover img{opacity:1}
    .song-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#e11d2e;color:#fff;font-size:15px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
    .song-video-label{position:absolute;left:8px;bottom:8px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:900;letter-spacing:.05em}

    /* ---- video aberto na lateral (mesmo painel do "Ouvir e tocar junto") ---- */
    #cifraPracticeVideo.is-open{position:fixed;z-index:150;top:88px;right:max(14px,calc((100vw - 1180px)/2));width:min(420px,calc(100vw - 28px));margin:0}

    /* ---- dividir a tela: cifra em duas colunas ---- */
    .cifra-box.cifra-duas-colunas #cifra{column-count:2;column-gap:34px;column-rule:1px solid #eef0f3}
    .cifra-box.cifra-duas-colunas #cifra .cifra-line{break-inside:avoid;page-break-inside:avoid}
    /* Ao dividir a tela, cada linha de acordes fica PRESA na letra que vem
       abaixo dela (bloco .cf-par montado pelo JavaScript): sem isso o acorde
       ficava no fim de uma coluna e a letra no topo da seguinte. */
    .cifra-box.cifra-duas-colunas #cifra .cf-par{break-inside:avoid;page-break-inside:avoid}

    /* ---- blocos do fim da pagina ---- */
    .cifra-extra{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
    .cifra-extra .sidebar-card{order:5}
    .cifra-extra .cifra-sidebar-ad{order:8;grid-column:1 / -1}
    .cifra-extra .fill-links a{display:block;padding:8px 0;border-bottom:1px solid #eee;color:#075fb7!important;font-size:12.5px;font-weight:700;line-height:1.35}
    .cifra-extra .fill-links a span{color:#667085!important;font-weight:600}
    .cifra-extra .fill-links a:last-child{border-bottom:0}
    .cifra-extra .fill-cards{display:grid;gap:10px}
    .cifra-extra .fill-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:center}
    .cifra-extra .fill-card-thumb{position:relative;display:block;width:84px;height:47px;border-radius:6px;overflow:hidden;background:#f3f4f6}
    .cifra-extra .fill-card-thumb img{display:block;width:100%!important;height:100%!important;object-fit:cover}
    .cifra-extra .fill-card-copy{display:block;min-width:0}
    .cifra-extra .fill-card-copy strong{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.3;font-weight:800}
    .cifra-extra .fill-card-copy span{display:block;margin-top:3px;color:#667085!important;font-size:11px}
    .cifra-extra .fill-artistas{display:grid;gap:0}
    .cifra-extra .fill-artista{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid #eee;color:#111827!important}
    .cifra-extra .fill-artista:last-child{border-bottom:0}
    .cifra-extra .fill-avatar{display:block;width:42px;height:42px;border-radius:999px;object-fit:cover;background:#f1f3f6}
    .cifra-extra .fill-artista strong{display:block;font-size:12.5px;line-height:1.2}
    .cifra-extra .fill-artista span span{display:block;margin-top:2px;color:#667085!important;font-size:10.5px}
    .cifra-extra .artist-all{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:800;color:#075fb7}

    /* ---- celular ---- */
    @media(max-width:900px){
      .cifra-redesign .cifra-layout{grid-template-columns:1fr;gap:14px}
      .cifra-ferramentas{display:none!important}
      .cf-sobre-celular{display:block}
      .cifra-ferramentas-corpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
      .cf-ferr-grupo{padding-top:0;border-top:0;gap:5px}
      .cf-ferr-btn{min-height:40px;font-size:12px}
      .cf-ferr-valor{flex:0 0 40px;font-size:12px}
      .song-video{width:128px}
      .cifra-extra{grid-template-columns:1fr;gap:14px}
      #cifraPracticeVideo.is-open{top:auto;left:10px;right:10px;bottom:10px;width:auto}
    }
    @media(max-width:640px){.song-video{width:112px}}

    /* Modo ensaio: tela limpa — a coluna de ferramentas e o fim da pagina saem. */
    .rehearsal-mode .cifra-ferramentas,.rehearsal-mode .cifra-extra{display:none!important}

    /* ---- video na lateral: pode ser ARRASTADO pela tela ---- */
    .practice-video-head{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
    .practice-video.is-dragging{opacity:.97;box-shadow:0 22px 50px rgba(0,0,0,.45)}
    .practice-video.is-dragging .practice-video-head{cursor:grabbing}

    /* ---- celular: barra fixa embaixo + folha com todas as funcoes ---- */
    .cf-barra,.cf-folha,.cf-folha-veu,.cf-cal,.cf-cal-veu{display:none}
    .cf-folha-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
    .cf-folha-fechar{width:36px;height:36px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:20px;line-height:1;cursor:pointer}
    .cf-folha-corpo{display:grid;gap:14px}
    @media(max-width:900px){
      body{padding-bottom:128px}
      .cf-barra{display:flex;flex-wrap:wrap;position:fixed;left:0;right:0;bottom:0;z-index:141;gap:6px;padding:7px 10px calc(7px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -6px 18px rgba(16,24,40,.1)}
      .cf-barra-btn{flex:1 1 0;display:grid;justify-items:center;gap:3px;padding:7px 4px;border:0;border-radius:12px;background:transparent;color:#111827;font:inherit;font-size:11px;font-weight:800;line-height:1.1;cursor:pointer}
      .cf-barra-btn b{font-size:17px;line-height:1}
      .cf-barra-btn.is-on{background:#eef4fb;color:#0f4c81}
      /* 05/10/2026 (pedido do responsavel, imagem 03): faixa de cima da barra fixa.
         O botao leva o icone de calendario e o nome; ele abre o calendario das
         missas POR CIMA da pagina (id cfCal), com os dias ligados ao montador. */
      .cf-barra-cal{flex:1 1 100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 12px;border:0;border-radius:12px;background:linear-gradient(135deg,#0f4c81 0%,#1d78c1 100%);color:#fff;font:inherit;font-size:13px;font-weight:800;line-height:1.1;cursor:pointer}
      .cf-barra-cal svg{flex:0 0 auto;width:18px;height:18px}
      .cf-barra-cal.is-on{background:linear-gradient(135deg,#0b3c66 0%,#155e93 100%)}
      /* O calendario que abre por cima: o MESMO desenho da coluna lateral (classes
         cfn-cal do casco), aqui com a caixa visivel no celular — la ela so aparece
         em tela grande. Cada dia com missa e um link para
         /musicasparamissa/montar.php?data=AAAA-MM-DD (o padrao do site). */
      .cf-cal-veu{display:none;position:fixed;inset:0;z-index:146;background:rgba(15,23,42,.5)}
      .cf-cal-veu.is-open{display:block}
      .cf-cal{display:none;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:147;max-height:80vh;overflow:auto;padding:14px;border-radius:18px;background:#fff;box-shadow:0 18px 46px rgba(16,24,40,.34)}
      .cf-cal.is-open{display:block}
      .cf-cal-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
      .cf-cal-topo strong{font-size:14px;font-weight:900;color:#0b2447}
      .cf-cal-fechar{width:36px;height:36px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:20px;line-height:1;cursor:pointer}
      .cf-cal .cfn-lado-cal{display:block!important;padding:0;border:0;border-radius:0;box-shadow:none}
      .cf-cal .cfn-lado-cal-titulo{display:none}
      /* O calendário do casco foi desenhado para a coluna larga: aqui o dia vira
         ALVO DO DEDO. Precisa das três classes (corpo + caixa + dia) para vencer a
         regra do casco, que é mais específica (body.cifranet-shell .cfn-cal-dia). */
      body.cifranet-shell .cf-cal .cfn-cal-dia,
      body.cifranet-shell .cf-cal .cfn-cal-vazio{min-height:40px}
      body.cifranet-shell .cf-cal .cfn-cal-dia{font-size:14px}
      .cf-cal-pe{margin:10px 0 0;text-align:center;font-size:12px;font-weight:700}
      .cf-cal-pe a{color:#0f4c81}
      .cf-folha-veu{display:none;position:fixed;inset:0;z-index:144;background:rgba(15,23,42,.45)}
      .cf-folha-veu.is-open{display:block}
      .cf-folha{display:none;position:fixed;left:0;right:0;bottom:0;z-index:145;max-height:84vh;overflow:auto;padding:14px 14px calc(14px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -12px 34px rgba(16,24,40,.24)}
      .cf-folha.is-open{display:block}
    }