html{max-width:100%;overflow-x:hidden}
body.cifranet-shell,
body.cifranet-shell *,
body.cifranet-shell *::before,
body.cifranet-shell *::after{box-sizing:border-box}
body.cifranet-shell{
--bg:#ffffff;
--card:#ffffff;
--text:#111111;
--muted:#52525b;
--primary:#111111;
--primary-dark:#000000;
--green:#111111;
--green-dark:#000000;
--dark:#111111;
--border:#d4d4d8;
--shadow:0 18px 44px rgba(0,0,0,.06);
--radius:20px;
--chord:#000000;
background:#ffffff !important;
color:#111111 !important;
max-width:100%;
overflow-x:hidden;
}
body.cifranet-shell img,
body.cifranet-shell video,
body.cifranet-shell canvas,
body.cifranet-shell svg{max-width:100% !important;height:auto}
body.cifranet-shell iframe{display:block;max-width:100% !important}
body.cifranet-shell table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
body.cifranet-shell .container{width:min(1180px,calc(100% - 28px)) !important;max-width:calc(100% - 28px) !important;margin-left:auto !important;margin-right:auto !important}
body.cifranet-shell .container,
body.cifranet-shell main,
body.cifranet-shell section,
body.cifranet-shell .page,
body.cifranet-shell .hero{max-width:100%}
body.cifranet-shell [class*="grid"] > *,
body.cifranet-shell [class*="list"] > *,
body.cifranet-shell [class*="cols"] > *,
body.cifranet-shell [class*="wrap"] > *{min-width:0}
/* ══ Páginas da rede social no próprio site (painel.php, meu-perfil.php) ══
Pedido de 24/09/2026: a rede social funciona na RAIZ, não numa área separada.
Este é o visual dessas páginas — mesmo cartão, mesma paleta e mesmos botões do
resto da rede. Só vale dentro da casca do site (body.cifranet-shell), então
não encosta no CSS da área /social/. */
/* A FONTE do site é Arial, Helvetica (é o que o tema declara no body). As
páginas da rede — painel.php, meu-perfil.php, entrar/cadastrar — são escritas
à mão e NÃO têm o CSS do tema, então caíam na fonte padrão do navegador
(Times): o conteúdo saía serifado com o cabeçalho e o menu certos. Falha
vista em 24/09/2026. O valor aqui é o mesmo do tema: nada muda nas páginas
antigas. */
body.cifranet-shell{font-family:Arial,Helvetica,sans-serif}
/* A margem do corpo da pagina no navegador e 8px. O tema do site zera isso; as
paginas escritas a mao (painel, perfil, contas) nao zeravam — e o que aparecia
na tela era "um pequeno espaco acima e nas laterais": cabecalho, faixa do
shopping e conteudo afastados 8px da borda e desalinhados do menu da rede.
Medido em 25/09/2026: cabecalho em left:8 / top:8 (na home, 0/0).
ATENCAO: no CSS que sai para a pagina nunca escrever a tag do corpo com os
sinais de menor e maior: o passe que poe a classe da casca no corpo procura
por essa tag e trocaria o comentario — foi o que deixou o site sem CSS em
25/09/2026 (a classe nao entrava no corpo e todo o estilo, que depende dela,
saia do ar). */
body.cifranet-shell{margin:0}
/* A coluna de conteúdo usa a MESMA caixa do container do site (banner, faixa do
shopping), para o texto ficar alinhado com o que vem acima. Antes eram 900px
centralizados — o conteúdo saía 94px à direita da faixa do shopping.
Medido em 1432px: conteúdo e faixa, ambos de 322 a 1410. */
body.cifranet-shell .cfn-pagina{width:min(1088px,calc(100% - 28px));margin:18px auto 30px;min-width:0}
body.cifranet-shell .cfn-pagina h1{margin:0 0 6px;font-size:26px;letter-spacing:-.6px;color:#0b2447 !important}
body.cifranet-shell .cfn-pagina h2{color:#0b2447 !important}
body.cifranet-shell .cfn-num b{color:#0b2447 !important}
body.cifranet-shell .cfn-sub{margin:0 0 16px;color:#64748b;font-size:14.5px;line-height:1.6}
body.cifranet-shell .cfn-nota{color:#94a3b8;font-size:13px;line-height:1.6}
body.cifranet-shell .cfn-card{background:#ffffff !important;border:1px solid #e2e8f0;border-radius:20px;padding:18px 20px;box-shadow:0 10px 26px rgba(15,35,66,.05)}
body.cifranet-shell .cfn-abas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
body.cifranet-shell .cfn-abas a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #e2e8f0;background:#ffffff;color:#0b2447 !important;font-weight:800;font-size:14px;text-decoration:none !important}
body.cifranet-shell .cfn-abas a:hover{background:#eef1f6}
body.cifranet-shell .cfn-abas a.is-on{background:#0b2447;border-color:#0b2447;color:#ffffff !important}
body.cifranet-shell .cfn-abas b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#eef1f6;color:#0b2447;font-size:12px}
body.cifranet-shell .cfn-abas a.is-on b{background:rgba(255,255,255,.2);color:#ffffff}
body.cifranet-shell .cfn-lista{display:grid;gap:10px}
body.cifranet-shell .cfn-item{padding:12px 14px;border:1px solid #eef1f6;border-radius:14px;background:#ffffff;color:#0b2447 !important}
body.cifranet-shell .cfn-item b{display:block;font-size:15px}
body.cifranet-shell .cfn-item b a{color:#c2410c !important;text-decoration:none}
body.cifranet-shell .cfn-item b a:hover{text-decoration:underline}
body.cifranet-shell .cfn-item span{display:block;margin-top:3px;color:#64748b !important;font-size:13.5px}
body.cifranet-shell .cfn-item-nota{margin:8px 0 0;color:#475569 !important;font-size:14px;line-height:1.6}
body.cifranet-shell .cfn-vazio{border:1px dashed #cbd5e1;border-radius:18px;padding:20px;color:#64748b;background:#ffffff !important}
body.cifranet-shell .cfn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid #c2410c;background:#c2410c;color:#ffffff !important;font-weight:800;text-decoration:none !important}
body.cifranet-shell .cfn-btn:hover{background:#a8360a}
body.cifranet-shell .cfn-btn-claro{background:#ffffff;border-color:#cbd5e1;color:#0b2447 !important}
body.cifranet-shell .cfn-btn-claro:hover{background:#eef1f6}
body.cifranet-shell .cfn-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
body.cifranet-shell .cfn-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
body.cifranet-shell .cfn-num{background:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:14px;text-align:center}
body.cifranet-shell .cfn-num b{display:block;font-size:24px;color:#0b2447}
body.cifranet-shell .cfn-num span{color:#64748b;font-size:13px}
body.cifranet-shell .cfn-perfil-topo{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
body.cifranet-shell .cfn-perfil-topo .cfn-social-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* ── Fonte e tamanho unicos dos menus (topo e lateral) ─────────────
Antes cada pagina trazia a sua propria fonte, entao o menu "pulava" de pagina
para pagina (pedido de 24/09/2026). Aqui os dois menus passam a usar a mesma
familia e os mesmos tamanhos, em todo o site. */
body.cifranet-shell .cifranet-main-header,
body.cifranet-shell .cifranet-main-header *,
body.cifranet-shell .cifranet-more-panel,
body.cifranet-shell .cifranet-more-panel *,
body.cifranet-shell .cfn-lado,
body.cifranet-shell .cfn-lado *{font-family:Arial,Helvetica,sans-serif !important}
body.cifranet-shell .cifranet-main-link,body.cifranet-shell .cifranet-more-panel a{font-size:14px !important;letter-spacing:0 !important}
body.cifranet-shell .cifranet-more-panel{max-height:min(74vh,560px);overflow-y:auto}
/* O botao "Mais" abre com todos os caminhos do site: uma lista so, igual em
todas as paginas. */
body.cifranet-shell .cifranet-more-panel a{padding:9px 12px;border-radius:12px;background:#ffffff;font-weight:700}
body.cifranet-shell .cifranet-more-panel a:hover{background:#eef1f6}
body.cifranet-shell .cfn-lado-item{font-size:14px !important}
body.cifranet-shell .cfn-lado-titulo{font-size:11px !important;letter-spacing:.16em !important}
body.cifranet-shell .cfn-lado-btn{font-size:14px !important}
body.cifranet-shell .cfn-lado-card h3{font-size:15px !important}
/* ══ Menu da rede social na coluna da ESQUERDA (24/09/2026) ═════════════
Pedido do responsavel, com os recortes em maos: TODAS as paginas do site no
layout da rede social — menu da rede na coluna da esquerda, conteudo no meio
e a coluna da propria pagina (anuncios, "sobre esta cifra") a direita.
Nenhuma pagina, nenhuma consulta e nenhum endereco do site mudou: aqui so
entra marcacao e estilo.
Como o espaco e reservado: o body ganha um padding a esquerda do tamanho da
coluna e o menu fica FIXO nesse espaco (acompanha a rolagem, como numa rede
social). Só o CABEÇALHO e o RODAPÉ voltam a ocupar a largura toda (margin-left
negativo) — eles são as duas faixas de ponta a ponta. Tudo o mais, inclusive
propaganda e carrossel do shopping, fica DENTRO da coluna de conteudo: com
margem negativa a propaganda passava por cima do menu (24/09/2026). */
@media(min-width:1200px){
body.cifranet-shell.cfn-com-lado{padding-left:300px}
body.cifranet-shell.cfn-com-lado > .cifranet-main-header,
body.cifranet-shell.cfn-com-lado > footer,
body.cifranet-shell.cfn-com-lado > .footer{margin-left:-300px}
body.cifranet-shell .cfn-lado{position:fixed;top:92px;left:14px;width:272px;max-height:calc(100vh - 116px);overflow-y:auto;display:grid;gap:12px;align-content:start}
/* A coluna é UMA coluna de grade de largura fixa: sem o `minmax(0,1fr)` um
filho largo (o painel do "Mais", por exemplo, quando o CSS dele não carrega)
estica a coluna inteira e a coluna transborda o menu lateral (visto no ar em
05/10/2026: os 272 px viravam 687). */
body.cifranet-shell .cfn-lado{grid-template-columns:minmax(0,1fr)}
}
/* ── Celular e tablet: o menu vira uma FAIXA rolável abaixo do cabeçalho ──
Antes, abaixo de 1200 px a coluna do menu simplesmente desaparecia — e como o
único menu do topo é o botão "Mais" (que no celular fica dentro do botão
"Menu"), várias páginas ficavam SEM MENU nenhum (reclamação de 24/09/2026).
Agora os links mais usados aparecem numa faixa que se arrasta para o lado, sem
depender de JavaScript, e a lista COMPLETA fica no botão "Menu" do topo. */
@media(max-width:1199px){
body.cifranet-shell .cfn-lado{display:block;position:static;top:auto;left:auto;right:auto;width:auto;max-height:none;overflow:visible;gap:0;background:#ffffff;border-bottom:1px solid #e6ecf5;box-shadow:0 6px 16px rgba(11,36,71,.06);padding:8px 10px}
body.cifranet-shell .cfn-lado-menu{display:flex;gap:8px;overflow-x:auto;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;scrollbar-width:thin}
body.cifranet-shell .cfn-lado-titulo{display:none}
body.cifranet-shell .cfn-lado-item{flex:0 0 auto;padding:8px 12px;border:1px solid #e2e8f0;background:#f8fafc;font-size:13.5px !important;white-space:nowrap}
body.cifranet-shell .cfn-lado-item::after{display:none}
body.cifranet-shell .cfn-lado-ico{width:22px;height:22px;border-radius:7px;font-size:12px}
body.cifranet-shell .cfn-lado-rede{margin-top:0}
body.cifranet-shell .cfn-lado-card{display:none}
}
/* IMPORTANTE (ordem do CSS): o ajuste do botao "Menu" no celular NAO pode
ficar aqui. Este trecho vem ANTES das regras base do cabecalho
(.cifranet-main-link / .cifranet-more-panel) e o CSS deixa valer a ULTIMA
regra lida — foi assim que o botao "Mais" continuou aparecendo no celular
mesmo com a regra 'display:none' escrita (24/09/2026).
O ajuste esta no bloco @media(max-width:900px) mais abaixo, junto das
outras regras de cabecalho para telas pequenas. */
body.cifranet-shell .cfn-lado-menu{background:#ffffff;border:1px solid #e2e8f0;border-radius:20px;padding:10px;box-shadow:0 12px 28px rgba(15,35,66,.07)}
body.cifranet-shell .cfn-lado-titulo{margin:8px 10px 6px;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8}
body.cifranet-shell .cfn-lado-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:#0b2447 !important;font-size:14px;font-weight:800;text-decoration:none !important}
body.cifranet-shell .cfn-lado-item::after{content:'›';margin-left:auto;font-size:17px;line-height:1;color:#cbd5e1}
body.cifranet-shell .cfn-lado-item:hover{background:#eef1f6}
body.cifranet-shell .cfn-lado-item.is-on{background:#0b2447;color:#ffffff !important}
body.cifranet-shell .cfn-lado-item.is-on::after{color:rgba(255,255,255,.6)}
body.cifranet-shell .cfn-lado-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:#eef1f6;font-size:14px;flex:0 0 auto}
body.cifranet-shell .cfn-lado-item.is-on .cfn-lado-ico{background:rgba(255,255,255,.18)}
body.cifranet-shell .cfn-lado-rede{background:linear-gradient(135deg,#4f2ee8 0%,#6d4dfa 100%);color:#ffffff !important;margin-top:6px}
body.cifranet-shell .cfn-lado-rede::after{color:rgba(255,255,255,.65)}
body.cifranet-shell .cfn-lado-rede .cfn-lado-ico{background:rgba(255,255,255,.2)}
body.cifranet-shell .cfn-lado-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:20px;padding:16px;box-shadow:0 12px 28px rgba(15,35,66,.07)}
body.cifranet-shell .cfn-lado-card h3{margin:0 0 8px;font-size:15px;color:#0b2447 !important}
body.cifranet-shell .cfn-lado-card p{margin:0;font-size:13.5px;line-height:1.6;color:#64748b}
body.cifranet-shell .cfn-lado-lista{margin:0 0 12px;padding-left:18px;display:grid;gap:6px;font-size:13.5px;color:#475569}
body.cifranet-shell .cfn-lado-btn{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid #c2410c;background:#c2410c;color:#ffffff !important;font-size:14px;font-weight:800;text-decoration:none !important;text-align:center}
body.cifranet-shell .cfn-lado-btn:hover{background:#a8360a}
body.cifranet-shell .cfn-lado-btn + .cfn-lado-btn{margin-top:8px}
body.cifranet-shell .cfn-lado-btn-claro{background:#ffffff;border-color:#cbd5e1;color:#0b2447 !important}
body.cifranet-shell .cfn-lado-btn-claro:hover{background:#eef1f6}
/* ── Calendário das missas na coluna lateral (05/10/2026) ─────────
Pedido do responsável (imagem 02): o calendário entra logo abaixo de
"Notícias", com o mesmo desenho do Mural da comunidade — dia com celebração
com o PONTO DOURADO e ligado ao montador de repertório.
Na largura estreita a coluna não existe (vira faixa rolável) e o calendário
fica escondido: a faixa é do MENU, e um mês inteiro empurraria o conteúdo de
todas as páginas para baixo. */
body.cifranet-shell .cfn-lado-cal{display:none}
body.cifranet-shell .cfn-lado-cal-titulo{margin:0 0 8px;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8}
body.cifranet-shell .cfn-cal{display:grid;gap:6px}
body.cifranet-shell .cfn-cal-topo{display:flex;align-items:center;gap:8px}
body.cifranet-shell .cfn-cal-mes{font-size:14px;font-weight:900;color:#0b2447}
body.cifranet-shell .cfn-cal-nav{margin-left:auto;display:flex;gap:4px}
body.cifranet-shell .cfn-cal-nav a{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eef1f6;color:#0b2447 !important;font-size:16px;font-weight:900;line-height:1;text-decoration:none !important}
body.cifranet-shell .cfn-cal-nav a:hover{background:#0b2447;color:#ffffff !important}
body.cifranet-shell .cfn-cal-dias,
body.cifranet-shell .cfn-cal-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
body.cifranet-shell .cfn-cal-dias span{text-align:center;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#94a3b8}
body.cifranet-shell .cfn-cal-dia{position:relative;display:grid;place-items:center;min-height:32px;border-radius:10px;border:1px solid transparent;color:#0b2447 !important;font-size:13px;font-weight:700;text-decoration:none !important}
body.cifranet-shell .cfn-cal-dia:hover{background:#eef1f6}
body.cifranet-shell .cfn-cal-vazio{min-height:32px}
body.cifranet-shell .cfn-cal-hoje{border-color:#c7d2fe;color:#4f2ee8 !important;font-weight:900}
body.cifranet-shell .cfn-cal-missa{background:linear-gradient(135deg,#0b7a5c 0%,#14b8a6 100%);color:#ffffff !important;font-weight:900;box-shadow:0 8px 16px rgba(11,122,92,.22)}
body.cifranet-shell .cfn-cal-missa:hover{color:#ffffff !important}
body.cifranet-shell .cfn-cal-missa i{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:#ffc84a}
body.cifranet-shell .cfn-cal-legenda{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:11.5px;color:#64748b}
body.cifranet-shell .cfn-cal-legenda i{width:10px;height:10px;border-radius:50%;background:#ffc84a;flex:0 0 auto}
@media(min-width:1200px){
body.cifranet-shell .cfn-lado-cal{display:block;background:#ffffff;border:1px solid #e2e8f0;border-radius:20px;padding:14px;box-shadow:0 12px 28px rgba(15,35,66,.07)}
}
/* ── Cabecalho da rede social (azul-marinho + ambar) ────────────
24/09/2026: o site passou a se apresentar como a rede social do CifraNET. A
identidade e a MESMA da area /social/ (azul-marinho #0b2447 + ambar #c2410c),
de modo que quem entra numa rede reconhece a outra pelo cabecalho. Nenhum
endereco do site mudou. */
body.cifranet-shell .cifranet-main-header{position:sticky;top:0;z-index:60;background:#0b2447;color:#ffffff;border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 8px 26px rgba(11,36,71,.28)}
body.cifranet-shell .cifranet-nav-inner{width:min(1500px,calc(100% - 24px));margin:0 auto;display:grid;grid-template-columns:auto minmax(220px,380px) minmax(0,1fr);align-items:center;gap:14px;padding:12px 0;position:relative}
body.cifranet-shell .cifranet-brand{display:inline-flex;align-items:center;gap:4px;color:#ffffff;text-decoration:none;font-size:24px;font-weight:900;letter-spacing:-.5px}
body.cifranet-shell .cifranet-brand::before{content:'♫';display:inline-flex;align-items:center;justify-content:center;width:32px;height:38px;margin-right:6px;border-radius:13px;background:#c2410c;color:#ffffff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);font-size:17px}
body.cifranet-shell .cifranet-brand span{color:#ffb066}
/* ── As DUAS logos da rede, uma ao lado da outra (29/09/2026) ────────────────
Pedido do responsavel: no topo do CifraNET a logo do site e, ao lado dela, a
logo do Musicas para MISSA — que e tambem o caminho para a outra rede (o chip
"Músicas para MISSA" do canto saiu, senao seria a mesma coisa duas vezes).
Cada logo entra com o DESENHO DE SEMPRE. A da comunidade vem na placa clara,
como no cabecalho dela: e o fundo branco que sustenta o texto escuro (sobre o
azul-marinho daqui ele sumiria). Escala = a de la (quadrado 38x38, texto em
duas linhas com "MISSA" em violeta). */
body.cifranet-shell .cifranet-marcas{display:flex;align-items:center;gap:14px;min-width:0}
body.cifranet-shell .cfn-marca-missa{display:inline-flex;align-items:center;gap:9px;min-width:0;padding:4px 12px 4px 6px;border-radius:15px;background:#ffffff;border:1px solid rgba(255,255,255,.55);box-shadow:0 6px 16px rgba(11,36,71,.20);text-decoration:none !important}
body.cifranet-shell .cfn-marca-missa:hover{box-shadow:0 10px 22px rgba(11,36,71,.32)}
body.cifranet-shell .cfn-marca-missa-ico{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#0f9d76 0%,#14b8a6 48%,#0b7a5c 100%);color:#ffffff;box-shadow:0 12px 40px rgba(15,157,118,.18)}
body.cifranet-shell .cfn-marca-missa-txt{display:flex;flex-direction:column;line-height:1.05;font-weight:700;font-size:.96rem;color:#191733;white-space:nowrap}
body.cifranet-shell .cfn-marca-missa-txt b{color:#0f9d76}
body.cifranet-shell .cfn-marca-missa-txt small{font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#7b7896}
/* ── Conta: ícones e, para quem está logado, SÓ A FOTO (29/09/2026) ───────── */
body.cifranet-shell .cfn-social-chip-icones{gap:8px}
body.cifranet-shell .cfn-social-ico-btn{width:42px;min-width:42px;height:42px;min-height:42px;padding:0;justify-content:center}
body.cifranet-shell .cfn-social-ico-btn svg{display:block}
body.cifranet-shell .cfn-social-eu-caixa{position:relative;display:inline-flex;align-items:center}
body.cifranet-shell .cfn-social-foto{display:inline-flex;align-items:center;justify-content:center;padding:2px;border-radius:50%;border:2px solid rgba(255,255,255,.38);background:transparent;cursor:pointer}
body.cifranet-shell .cfn-social-foto:hover,
body.cifranet-shell .cfn-social-foto:focus-visible{border-color:#ffb066;outline:none}
body.cifranet-shell .cfn-social-conta-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;display:grid;gap:6px;padding:10px;background:#ffffff;border:1px solid #d4d4d8;border-radius:18px;box-shadow:0 22px 45px rgba(0,0,0,.20);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:70}
body.cifranet-shell .cfn-social-eu-caixa.is-open .cfn-social-conta-menu{opacity:1;visibility:visible;transform:none}
body.cifranet-shell .cfn-social-conta-menu a{display:block;padding:10px 12px;border-radius:12px;background:#fafafa;border:1px solid transparent;color:#111111 !important;text-decoration:none !important;font-weight:700;font-size:13.5px}
body.cifranet-shell .cfn-social-conta-menu a:hover,
body.cifranet-shell .cfn-social-conta-menu a:focus-visible{background:#111111;color:#ffffff !important;outline:none}
body.cifranet-shell .cfn-social-conta-sair{color:#c2410c !important}
body.cifranet-shell .cifranet-local-search{display:flex;align-items:center;min-width:0;width:100%;margin:0;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
body.cifranet-shell .cifranet-local-search input{flex:1;min-width:0;width:100%;height:42px;border:0!important;background:transparent!important;padding:0 14px;color:#ffffff;font-size:14px;font-family:inherit;outline:none}
body.cifranet-shell .cifranet-local-search input::placeholder{color:#b9c6de}
body.cifranet-shell .cifranet-local-search:focus-within{border-color:#ffb066;outline:none}
body.cifranet-shell .cifranet-local-search button{display:flex;align-items:center;justify-content:center;flex:0 0 42px;height:42px;padding:0;border:0;background:transparent;color:#ffb066;cursor:pointer}
body.cifranet-shell .cifranet-local-search button:hover{background:rgba(255,255,255,.14)}
body.cifranet-shell .cifranet-menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#ffffff;border-radius:14px;cursor:pointer}
body.cifranet-shell .cifranet-menu-toggle:hover,
body.cifranet-shell .cifranet-menu-toggle:focus-visible{background:rgba(255,255,255,.22);outline:none}
body.cifranet-shell .cifranet-menu-toggle svg{display:block}
body.cifranet-shell .cifranet-main-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex-wrap:wrap}
body.cifranet-shell .cifranet-main-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 13px;border-radius:999px;color:#ffffff;text-decoration:none;font-weight:800;font-size:14px;border:1px solid transparent;background:transparent;cursor:pointer;white-space:nowrap}
body.cifranet-shell .cifranet-main-link:hover,
body.cifranet-shell .cifranet-main-link:focus-visible{background:rgba(255,255,255,.16);color:#ffffff;outline:none}
body.cifranet-shell .cifranet-main-link.is-active,
body.cifranet-shell .cifranet-more.is-active > .cifranet-main-link{background:#c2410c;border-color:#c2410c;color:#ffffff}
body.cifranet-shell .cifranet-more{position:relative}
body.cifranet-shell .cifranet-more-toggle{appearance:none}
body.cifranet-shell .cifranet-more-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:280px;display:grid;gap:8px;padding:14px;background:#ffffff;border:1px solid #d4d4d8;border-radius:20px;box-shadow:0 22px 45px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
body.cifranet-shell .cifranet-more-panel a{display:block;padding:11px 14px;border-radius:14px;color:#111111;text-decoration:none;font-weight:700;background:#fafafa;border:1px solid transparent}
body.cifranet-shell .cifranet-more-panel a:hover,
body.cifranet-shell .cifranet-more-panel a:focus-visible,
body.cifranet-shell .cifranet-more-panel a.is-active{background:#111111;color:#ffffff;outline:none}
body.cifranet-shell .cifranet-more:hover .cifranet-more-panel,
body.cifranet-shell .cifranet-more:focus-within .cifranet-more-panel,
body.cifranet-shell .cifranet-more.is-open .cifranet-more-panel{opacity:1;visibility:visible;transform:translateY(0)}
body.cifranet-shell .header,
body.cifranet-shell .topbar{background:#ffffff !important}
body.cifranet-shell .logo span{color:#216cf4 !important}
body.cifranet-shell .hero,
body.cifranet-shell .page,
body.cifranet-shell main,
body.cifranet-shell section{background:#ffffff !important}
body.cifranet-shell .hero{padding-top:42px !important;padding-bottom:26px !important}
body.cifranet-shell .hero-card,
body.cifranet-shell .card,
body.cifranet-shell .feature,
body.cifranet-shell .stat,
body.cifranet-shell .side-card,
body.cifranet-shell .cifra-card,
body.cifranet-shell .empty,
body.cifranet-shell .notice{background:#ffffff !important;border:1px solid #d4d4d8 !important;border-radius:20px !important;box-shadow:0 14px 34px rgba(0,0,0,.05) !important;color:#111111 !important}
body.cifranet-shell .mini-card{background:#111111 !important;color:#ffffff !important;border:1px solid #111111 !important;box-shadow:0 16px 34px rgba(0,0,0,.10) !important}
body.cifranet-shell .mini-card strong,
body.cifranet-shell .mini-card b,
body.cifranet-shell .mini-card h3{color:#ffffff !important}
body.cifranet-shell .mini-card p,
body.cifranet-shell .mini-card span{color:#e4e4e7 !important}
body.cifranet-shell .mini-card.green{background:#111111 !important}
body.cifranet-shell h1,
body.cifranet-shell h2,
body.cifranet-shell h3,
body.cifranet-shell h4,
body.cifranet-shell strong,
body.cifranet-shell .article,
body.cifranet-shell .cifra-card strong,
body.cifranet-shell .list-item strong,
body.cifranet-shell .section-title h2{color:#111111 !important}
body.cifranet-shell p,
body.cifranet-shell .muted,
body.cifranet-shell .subtitle,
body.cifranet-shell .meta,
body.cifranet-shell .small,
body.cifranet-shell .section-title p,
body.cifranet-shell .cifra-card span,
body.cifranet-shell .list-item span{color:#52525b !important}
body.cifranet-shell .badge,
body.cifranet-shell .kicker,
body.cifranet-shell .tag{display:inline-flex;align-items:center;gap:8px;background:#ffffff !important;color:#111111 !important;padding:7px 12px;border-radius:999px;border:1px solid #d4d4d8 !important;box-shadow:none !important}
body.cifranet-shell .btn,
body.cifranet-shell .btn.ghost{background:#ffffff !important;border:1px solid #111111 !important;color:#111111 !important}
body.cifranet-shell .btn.green,
body.cifranet-shell .btn.dark,
body.cifranet-shell .search-top button,
body.cifranet-shell .search button,
body.cifranet-shell .search-box button,
body.cifranet-shell .big-search button{background:#111111 !important;border:1px solid #111111 !important;color:#ffffff !important}
body.cifranet-shell .btn:hover,
body.cifranet-shell .btn:focus-visible,
body.cifranet-shell .search-top button:hover,
body.cifranet-shell .search button:hover,
body.cifranet-shell .search-box button:hover,
body.cifranet-shell .big-search button:hover{background:#000000 !important;color:#ffffff !important}
body.cifranet-shell .search-top,
body.cifranet-shell .search,
body.cifranet-shell .search-box,
body.cifranet-shell .big-search{background:#ffffff !important;border:1px solid #111111 !important;box-shadow:none !important}
body.cifranet-shell input[type="text"],
body.cifranet-shell input[type="search"],
body.cifranet-shell input[type="email"],
body.cifranet-shell input[type="date"],
body.cifranet-shell select,
body.cifranet-shell textarea{background:#ffffff !important;border:1px solid #d4d4d8 !important;color:#111111 !important;box-shadow:none !important}
body.cifranet-shell input::placeholder,
body.cifranet-shell textarea::placeholder{color:#71717a !important}
body.cifranet-shell .thumb,
body.cifranet-shell .cover{background:#f4f4f5 !important;border:1px solid #e4e4e7}
body.cifranet-shell .cifra-card:hover,
body.cifranet-shell .thumb:hover,
body.cifranet-shell .artist-list a:hover,
body.cifranet-shell .list-item:hover,
body.cifranet-shell .result:hover{transform:translateY(-2px);border-color:#111111 !important;box-shadow:0 18px 34px rgba(0,0,0,.08) !important}
body.cifranet-shell .artist-list a,
body.cifranet-shell .term-cloud a,
body.cifranet-shell .pager a,
body.cifranet-shell .pager span{background:#ffffff !important;border:1px solid #111111 !important;color:#111111 !important}
body.cifranet-shell .pager .active{background:#111111 !important;color:#ffffff !important}
body.cifranet-shell .player-shell,
body.cifranet-shell .youtube,
body.cifranet-shell .radio-live-shell{background:#111111 !important}
/* ── Login único (CifraNET + Músicas para MISSA) e troca de rede ───── */
body.cifranet-shell .cfn-social-topo{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* A copia do bloco de conta que vive no CABECALHO: no computador nao aparece
(a conta fica no menu do topo). No celular e ela que entra — ver o bloco
@media(max-width:900px) mais abaixo (25/09/2026). */
body.cifranet-shell .cfn-social-topo-cabecalho{display:none}
body.cifranet-shell .cfn-troca-rede{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px dashed #ffb066;background:rgba(255,255,255,.10);color:#ffd0a3 !important;font-size:12.5px;font-weight:800;text-decoration:none !important;white-space:nowrap}
body.cifranet-shell .cfn-social-chip{display:inline-flex;align-items:center;gap:8px}
body.cifranet-shell .cfn-social-link{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#ffffff !important;font-size:12.5px;font-weight:800;text-decoration:none !important;white-space:nowrap}
body.cifranet-shell .cfn-social-link-forte{background:#c2410c;color:#ffffff !important}
body.cifranet-shell .cfn-social-eu{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px 0 6px;border-radius:999px;background:rgba(255,255,255,.14);color:#ffffff !important;font-size:12.5px;font-weight:800;text-decoration:none !important}
body.cifranet-shell .cfn-social-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto}
body.cifranet-shell .cfn-social-avatar-inicial{display:inline-flex;align-items:center;justify-content:center;background:#4f2ee8;color:#ffffff;font-size:13px;font-weight:900}
/* Aviso das funções que exigem conta (a página abre, a ação pede login). */
body.cifranet-shell .cfn-aviso-login{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;border-radius:16px;border:1px solid #dbe4ff;background:#f5f8ff;color:#26325c;font-size:13.5px;line-height:1.6;margin:0 0 14px}
body.cifranet-shell .cfn-aviso-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:#ffffff;border:1px solid #cbd5e1;color:#111111 !important;font-weight:800;font-size:13px;text-decoration:none !important;white-space:nowrap}
body.cifranet-shell .cfn-aviso-btn-forte{background:#111111;border-color:#111111;color:#ffffff !important}
/* Chaves de anúncio desligadas (admin > Google Adsense): nada de caixa vazia. */
body.cifranet-shell.cfn-sem-adsense .ad,
body.cifranet-shell.cfn-sem-adsense .page-ad-slot,
body.cifranet-shell.cfn-sem-adsense ins.adsbygoogle,
/* A propaganda unica do site vive ABAIXO DO MENU (25/09/2026): faixa clara, mesma
largura do conteudo. */
body.cifranet-shell .cfn-ads-menu{padding:14px 0 10px;background:#ffffff}
body.cifranet-shell .cfn-ads-menu .container{width:min(1180px,calc(100% - 28px)) !important;margin:0 auto !important}
body.cifranet-shell .cfn-ads-menu .ad{min-height:70px;margin:0}
body.cifranet-shell.cfn-sem-adsense .cfn-ads-menu{display:none !important}
/* Chaves desligadas: a sobra das colunas da home tambem nao reserva espaco. */
body.cifranet-shell.cfn-sem-adsense .cfn-sobra-anuncio{display:none !important}
body.cifranet-shell.cfn-sem-adsense .cifranet-shared-ad-wrap:not(.cifranet-shop-top){display:none !important}
body.cifranet-shell.cfn-sem-afiliados .cifranet-shop-top,
body.cifranet-shell.cfn-sem-afiliados .cifranet-shop-promo{display:none !important}
/* Aproveitar a tela (24/09/2026): páginas mais largas, como nas redes sociais. */
body.cifranet-shell .container{width:min(1400px,calc(100% - 28px)) !important;max-width:calc(100% - 28px) !important}
body.cifranet-shell .page-ad-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:transparent !important;max-width:100%;min-width:0;overflow:visible;min-height:118px}
body.cifranet-shell .page-ad-slot ins.adsbygoogle{display:block !important;width:100% !important;max-width:100% !important;min-height:90px;margin:0 auto;overflow:visible !important}
/* 25/09/2026 (pedido do responsavel): propaganda do Google e SO propaganda — sem
caixa, sem borda, sem sombra e sem fundo em volta. Antes cada anuncio vinha
dentro de um cartao branco de fundo laranja com borda de 4px no topo e largura
travada em 970px: o anuncio parecia um bloco de conteudo do site (e a caixa
ficava a mostra quando o Google nao preenchia o espaco). Agora o anuncio ocupa
a largura do conteudo e nada mais.
Vale para TODOS os anuncios do site: a propaganda abaixo do menu, os anuncios
laterais das cifras e as caixas proprias das paginas. */
body.cifranet-shell .ad,
body.cifranet-shell .container.ad > .ad,
body.cifranet-shell .cifranet-shared-ad-wrap .ad{width:min(100%,970px);max-width:100%;min-width:0;margin:0 auto !important;padding:0 !important;background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;color:inherit !important;overflow:visible}
/* Rotulo do anuncio. Fica em caixa alta, com espacamento entre as letras e cor da
loja: chama atencao sem competir com o conteudo e continua legivel em qualquer
tela. Vale para o rotulo simples (render_ad), para o "ad-caption" do cifra.php e
para os anuncios laterais. O !important vence as regras de cada tema de pagina,
que usavam fonte menor e cinza. */
body.cifranet-shell .ad.page-ad-slot,
body.cifranet-shell .ad .ad-caption,
body.cifranet-shell .ad-caption{font-size:12px !important;font-weight:800 !important;letter-spacing:.18em !important;text-transform:uppercase !important;color:#c2410c !important;line-height:1.25;font-style:normal}
/* Anuncios laterais do cifra.php: mesmo destaque dos demais blocos. */
body.cifranet-shell .cifra-sidebar-ad{padding:0 !important;background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
body.cifranet-shell .container.ad,
body.cifranet-shell .cifranet-shared-ad-wrap,
body.cifranet-shell .cifranet-shared-ad-wrap .container{display:flex;justify-content:center;max-width:100%;min-width:0;overflow:visible}
body.cifranet-shell .ad iframe,
body.cifranet-shell ins.adsbygoogle iframe{max-width:100% !important;margin:0 auto !important}
body.cifranet-shell .cifranet-shared-ad-top{padding:14px 0 6px}
body.cifranet-shell .cifranet-shared-ad-top .container{width:min(1180px,calc(100% - 28px));margin:0 auto}
body.cifranet-shell .cifranet-shared-ad-top .ad{min-height:132px}
/* Bloco de produtos do shopping que ocupa o lugar do anuncio superior. Mantem as
classes cifranet-shared-ad-* porque a deduplicacao do shell se apoia nelas.
23/09/2026 — virou CARROSSEL de 5 ofertas, no corpo do banner da rede social (mesma
largura do container) e com as escritas fortes: nome grande em negrito, preco
destacado em verde e botao grande de "Ver oferta". */
body.cifranet-shell .cifranet-shop-top{padding:14px 0 8px}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car{position:relative !important;width:100% !important;max-width:100% !important;margin:0 auto !important;padding:16px 18px 12px !important;border:1px solid #f4ddcf !important;border-top:5px solid #c2410c !important;border-radius:22px !important;background:linear-gradient(135deg,#fff4ec 0%,#ffffff 62%) !important;box-shadow:0 18px 40px rgba(194,65,12,.13),0 2px 8px rgba(15,35,66,.05) !important;overflow:hidden !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-cabeca{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:14px !important;flex-wrap:wrap !important;margin:0 0 10px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-selo{display:inline-flex !important;align-items:center !important;min-height:32px !important;padding:0 15px !important;border-radius:999px !important;background:#c2410c !important;color:#ffffff !important;font-size:.78rem !important;font-weight:900 !important;letter-spacing:.1em !important;text-transform:uppercase !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-dica{color:#8a4a1d !important;font-size:.82rem !important;font-weight:800 !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-janela{position:relative !important;overflow:hidden !important;border-radius:16px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-trilha{display:flex !important;transition:transform .5s ease !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-slide{flex:0 0 100% !important;display:flex !important;align-items:center !important;gap:22px !important;padding:8px 6px !important;text-decoration:none !important;color:inherit !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-slide:focus-visible{outline:3px solid #c2410c !important;outline-offset:2px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-media{flex:0 0 auto !important;display:flex !important;align-items:center !important;justify-content:center !important;width:190px !important;height:190px !important;border-radius:18px !important;background:#ffffff !important;border:1px solid #eef0f3 !important;overflow:hidden !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-media img{width:100% !important;height:100% !important;object-fit:contain !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-texto{display:flex !important;flex-direction:column !important;gap:7px !important;min-width:0 !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-rotulo{font-size:.8rem !important;font-weight:900 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:#c2410c !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-nome{font-size:1.75rem !important;line-height:1.2 !important;font-weight:900 !important;color:#111111 !important;letter-spacing:-.01em !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-rodape{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:16px !important;margin-top:4px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-preco{font-size:1.45rem !important;font-weight:900 !important;color:#0f7b3f !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-cta{display:inline-flex !important;align-items:center !important;min-height:50px !important;padding:0 26px !important;border-radius:999px !important;background:#c2410c !important;color:#ffffff !important;font-size:1.05rem !important;font-weight:900 !important;text-decoration:none !important;box-shadow:0 10px 22px rgba(194,65,12,.28) !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-seta{position:absolute !important;top:50% !important;transform:translateY(-50%) !important;z-index:2 !important;display:flex !important;align-items:center !important;justify-content:center !important;width:46px !important;height:46px !important;padding:0 !important;border:1px solid #e4e7ec !important;border-radius:50% !important;background:rgba(255,255,255,.95) !important;color:#c2410c !important;font-size:26px !important;font-weight:900 !important;line-height:1 !important;cursor:pointer !important;box-shadow:0 8px 18px rgba(15,35,66,.14) !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-seta-prev{left:4px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-seta-next{right:4px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-pontos{display:flex !important;justify-content:center !important;align-items:center !important;gap:8px !important;margin:10px 0 0 !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-ponto{width:10px !important;height:10px !important;padding:0 !important;border:0 !important;border-radius:50% !important;background:#e8d5c6 !important;cursor:pointer !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-ponto.ativo{width:28px !important;border-radius:999px !important;background:#c2410c !important}
/* Promocao compacta do shopping, para usar dentro das paginas (cartao da cifra).
Mesmo sorteio da faixa do topo: muda a cada carregamento. */
body.cifranet-shell .cifranet-shop-promo{display:block;margin:14px 0}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-link{display:flex;align-items:center;gap:16px;padding:14px 16px;background:linear-gradient(180deg,#fff6f0 0%,#ffffff 58%);border:1px solid #f4ddcf;border-top:4px solid #c2410c;border-radius:20px;box-shadow:0 12px 30px rgba(194,65,12,.10);text-decoration:none !important;color:#111111 !important}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-media{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:14px;background:#ffffff;border:1px solid #eef0f3;overflow:hidden}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-media img{width:100%;height:100%;object-fit:contain}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-texto{display:flex;flex-direction:column;gap:6px;min-width:0}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-rotulo{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#c2410c !important}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-nome{font-size:17px;line-height:1.3;color:#111111 !important}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-rodape{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-preco{font-size:17px;font-weight:800;color:#111111 !important}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-cta{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:#c2410c;color:#ffffff !important;font-size:13px;font-weight:800}
/* No cifra.php o bloco fica logo abaixo do "Ouvir e tocar junto" e continua o
mesmo cartao: o canto de baixo do play-along sai e passa para ca. */
body.cifranet-shell.page-cifra .cifra-redesign .cifra-primary>.cifranet-shop-promo{order:2;margin:0 0 14px !important}
body.cifranet-shell.page-cifra .cifra-redesign .cifra-primary>.cifranet-shop-promo .cifranet-shop-promo-link{padding:16px 18px;background:#ffffff;border:1px solid #e4e7ec;border-top:3px solid #c2410c;border-radius:0 0 20px 20px;box-shadow:0 14px 34px rgba(15,23,42,.08)}
body.cifranet-shell.page-cifra .cifra-redesign .cifra-primary:has(>.cifranet-shop-promo)>.cifra-playalong-card{border-radius:0 !important;border-bottom:0 !important;margin-bottom:0 !important}
@media(max-width:640px){
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-link{flex-direction:column;align-items:center;gap:12px;padding:14px;text-align:center}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-media{width:100%;max-width:220px;height:160px}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-texto{align-items:center}
body.cifranet-shell .cifranet-shop-promo .cifranet-shop-promo-rodape{justify-content:center}
}
body.cifranet-shell .footer,
body.cifranet-shell footer{background:#111111 !important;color:#ffffff !important;border-top:1px solid #27272a}
body.cifranet-shell .footer *,
body.cifranet-shell footer *{color:inherit !important}
body.cifranet-shell .chord{color:#000000 !important}
body.cifranet-shell.page-index .featured-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
body.cifranet-shell.page-index .hero{background:linear-gradient(112deg,#132433 0%,#0b2c63 60%,#06285c 100%) !important;padding:44px 0 28px !important}
body.cifranet-shell.page-index .hero h1{color:#ffffff !important}
body.cifranet-shell.page-index .hero p{color:#dce8fb !important}
body.cifranet-shell.page-index .featured-card{padding:0;overflow:hidden}
body.cifranet-shell.page-index .featured-card-body{padding:18px}
body.cifranet-shell.page-index .featured-thumb{aspect-ratio:16/10;display:block;overflow:hidden;background:#f4f4f5}
body.cifranet-shell.page-index .featured-thumb img{width:100%;height:100%;object-fit:cover}
body.cifranet-shell.page-index .featured-card strong{font-size:17px;line-height:1.4}
body.cifranet-shell.page-index .featured-card-body span{display:block;margin-top:6px;color:#52525b}
body.cifranet-shell.page-blog .blog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
body.cifranet-shell.page-blog .blog-card{padding:0;overflow:hidden}
body.cifranet-shell.page-blog .blog-thumb{aspect-ratio:16/10;display:block;overflow:hidden;background:#f4f4f5}
body.cifranet-shell.page-blog .blog-thumb img{width:100%;height:100%;object-fit:cover}
body.cifranet-shell.page-blog .blog-card-body{padding:16px 16px 18px}
body.cifranet-shell.page-blog .blog-card h2{font-size:18px;line-height:1.35;margin:10px 0 8px}
body.cifranet-shell.page-blog .blog-card .meta{font-size:13px}
body.cifranet-shell.page-blog .blog-card p{font-size:14px;line-height:1.55;margin-bottom:0}
@media(max-width:900px){
body.cifranet-shell .cifranet-nav-inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 16px}
body.cifranet-shell .cifranet-local-search{grid-column:1 / -1;justify-self:center;min-width:0;max-width:none;width:100%;order:3}
body.cifranet-shell .cifranet-menu-toggle{display:inline-flex}
/* ── 25/09/2026 — CELULAR: a conta no CABECALHO (imagem 01) ─────────────────
Os botoes "Entrar" e "Criar conta" passam a ocupar o espaco livre ao lado do
logo; a busca continua na linha de baixo, em toda a largura. No computador
nada muda: quem mostra a conta continua sendo o menu do topo. */
/* Layout da linha 1 no celular: LOGO (encolhe) + BOTOES DA CONTA. O botao
"Menu" desce para a linha 2, ao lado da busca. Assim nada se sobrepoe:
medido em 390px, com logo 155 + botoes 164 + Menu 73 na MESMA linha o chip
subia 57px sobre o logo (a coluna do meio ficava com 118px). */
body.cifranet-shell .cifranet-main-header .cifranet-nav-inner{grid-template-columns:minmax(0,1fr) auto}
body.cifranet-shell .cifranet-main-header .cifranet-marcas{grid-column:1;grid-row:1;gap:8px;min-width:0}
body.cifranet-shell .cifranet-main-header .cifranet-brand{grid-column:auto;grid-row:auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:18px}
/* 29/09/2026 — CELULAR: linha 1 = as DUAS logos COM O NOME + os ICONES (menu,
entrar/criar conta ou a foto) alinhados a direita; linha 2 = a busca inteira.
Antes o botao "Menu" era texto e descia para a linha de baixo, e a placa da
comunidade aparecia sem o nome — o pedido (print do celular) foi o contrario. */
body.cifranet-shell .cifranet-main-header .cifranet-nav-inner{grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px}
body.cifranet-shell .cifranet-main-header .cifranet-marcas{grid-column:1;grid-row:1;gap:7px;min-width:0}
body.cifranet-shell .cifranet-main-header .cifranet-brand{grid-column:auto;grid-row:auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:17px}
body.cifranet-shell .cifranet-main-header .cifranet-brand::before{width:28px;height:32px;margin-right:5px;border-radius:11px;font-size:15px}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa{padding:2px 8px 2px 2px;border-radius:13px;gap:7px}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa-ico{width:28px;height:28px;border-radius:9px;box-shadow:none}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa-ico svg{width:16px;height:16px}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa-txt{font-size:.74rem}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa-txt small{display:none}
body.cifranet-shell .cifranet-main-header .cifranet-menu-toggle{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:12px;align-self:center}
body.cifranet-shell .cfn-social-topo-cabecalho{grid-column:3;grid-row:1;display:flex;justify-self:end;margin-left:0;gap:6px;flex-wrap:nowrap}
body.cifranet-shell .cfn-social-topo-cabecalho .cfn-troca-rede{display:none !important}
body.cifranet-shell .cfn-social-topo-cabecalho .cfn-social-chip{gap:6px}
body.cifranet-shell .cfn-social-topo-cabecalho .cfn-social-link{padding:0 10px;font-size:11.5px;min-height:32px}
body.cifranet-shell .cfn-social-topo-cabecalho .cfn-social-ico-btn{width:36px;min-width:36px;height:36px;min-height:36px;padding:0}
body.cifranet-shell .cfn-social-topo-cabecalho .cfn-social-conta-menu{right:-4px}
body.cifranet-shell .cfn-social-topo-cabecalho .cfn-social-eu{padding:0 10px 0 4px;font-size:11.5px;min-height:32px}
body.cifranet-shell .cifranet-main-header .cifranet-local-search{grid-column:1 / -1;grid-row:2;justify-self:stretch;margin-top:2px}
/* A copia que fica dentro do menu (painel do "Menu") nao aparece no celular:
a conta ja esta no cabecalho, e o painel fica so com os links. */
body.cifranet-shell .cifranet-main-nav .cfn-social-topo{display:none}
body.cifranet-shell .cifranet-main-nav{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 130px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;background:#0b2447;border-top:1px solid rgba(255,255,255,.16);box-shadow:0 18px 36px rgba(11,36,71,.36)}
/* display:block e NAO flex. Com flex, a lista de 24 links + os cartoes do topo
ultrapassa os ~700px do painel e o EXCESSO DE CIMA sai da area rolavel: as
primeiras opcoes ficam inalcancaveis (medido: primeiro link em -414px,
24/09/2026). Em bloco o conteudo entra no fluxo e rola por inteiro. */
body.cifranet-shell .cifranet-main-nav.is-open{display:block}
body.cifranet-shell .cifranet-main-link{width:100%;justify-content:flex-start;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);white-space:normal}
/* 24/09/2026 — no celular o botao "Mais" NAO aparece: os 24 links ficam
direto dentro do painel do botao "Menu", entao um unico toque ja mostra
todos os caminhos (antes era preciso tocar em "Menu" e depois em "Mais").
Nao depende de JavaScript: o painel fica sempre aberto (display:grid). */
body.cifranet-shell .cifranet-more-toggle{display:none !important}
body.cifranet-shell .cifranet-more{width:100%}
body.cifranet-shell .cifranet-more-panel{position:static;left:auto;right:auto;top:auto;min-width:0;width:100%;max-height:none;margin-top:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;opacity:1;visibility:visible;transform:none;overflow:visible;display:grid;gap:6px}
body.cifranet-shell .cifranet-more-panel a{padding:10px 13px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#ffffff !important;font-weight:700}
body.cifranet-shell .cifranet-more-panel a:hover,
body.cifranet-shell .cifranet-more-panel a:focus-visible,
body.cifranet-shell .cifranet-more-panel a.is-active{background:#c2410c;border-color:#c2410c;color:#ffffff !important}
body.cifranet-shell.page-index .featured-grid,
body.cifranet-shell.page-blog .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* No tablet o carrossel continua grande: so a imagem e o nome encolhem um pouco,
senao o texto empurra o botao de "Ver oferta" para fora da faixa. */
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-slide{gap:16px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-media{width:150px !important;height:150px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-nome{font-size:1.35rem !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-preco{font-size:1.25rem !important}
}
@media(max-width:640px){
body.cifranet-shell .cifranet-brand{font-size:23px}
body.cifranet-shell.page-index .featured-grid,
body.cifranet-shell.page-blog .blog-grid{grid-template-columns:1fr}
/* 25/09/2026: o cartao do anuncio saiu para TODAS as telas — nao ha mais padding
nem borda de caixa a ajustar aqui no celular. */
body.cifranet-shell .page-ad-slot{gap:8px}
body.cifranet-shell .cifranet-shared-ad-top{padding:12px 0 4px}
/* No celular o bloco do produto empilha: imagem em cima, nome embaixo.
A imagem menor (150x130) evita que a faixa ocupe metade da primeira tela. */
/* No celular o carrossel empilha: imagem em cima, texto e botao embaixo. A imagem
menor evita que a faixa ocupe metade da primeira tela — mas o nome e o botao
continuam grandes, que e o que faz a propaganda ser vista. */
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car{padding:12px 12px 10px !important;border-radius:18px !important;border-top-width:4px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-cabeca{justify-content:center !important;text-align:center !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-dica{display:none !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-slide{flex-direction:column !important;align-items:center !important;gap:10px !important;padding:6px 2px !important;text-align:center !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-media{width:150px !important;height:150px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-texto{align-items:center !important;gap:6px !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-nome{font-size:1.15rem !important;line-height:1.28 !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-rodape{flex-direction:column !important;align-items:center !important;gap:8px !important;width:100% !important}
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-cta{width:100% !important;justify-content:center !important;min-height:46px !important;padding:0 20px !important;font-size:1rem !important}
/* No celular as setas ficam em cima da imagem e atrapalham: o dedo arrasta e as
bolinhas mostram em qual oferta o visitante esta. */
body.cifranet-shell .cifranet-shop-top .cifranet-shop-car-seta{display:none !important}
}
/* Telas bem estreitas (celular comum, ate 430px): tudo um pouco menor para as
DUAS logos COM NOME e os tres icones continuarem na MESMA linha. */
@media(max-width:430px){
body.cifranet-shell .cifranet-main-header .cifranet-nav-inner{column-gap:8px}
body.cifranet-shell .cifranet-main-header .cifranet-marcas{gap:6px}
body.cifranet-shell .cifranet-main-header .cifranet-brand{font-size:15px}
body.cifranet-shell .cifranet-main-header .cifranet-brand::before{width:24px;height:28px;margin-right:4px;border-radius:9px;font-size:13px}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa{padding:2px 6px 2px 2px;gap:5px}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa-ico{width:24px;height:24px;border-radius:8px}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa-txt{font-size:.68rem}
body.cifranet-shell .cifranet-main-header .cifranet-menu-toggle{width:34px;height:34px;border-radius:11px}
body.cifranet-shell .cfn-social-topo-cabecalho{gap:5px}
body.cifranet-shell .cfn-social-topo-cabecalho .cfn-social-ico-btn{width:34px;min-width:34px;height:34px;min-height:34px}
}
/* 320-350px (tela muito pequena): a placa da comunidade fica só com a nota —
com o nome ela não caberia ao lado da logo do site e dos três ícones e o
texto sairia para fora do branco. De 351px para cima o nome continua. */
@media(max-width:350px){
body.cifranet-shell .cifranet-main-header .cfn-marca-missa{padding:2px}
body.cifranet-shell .cifranet-main-header .cfn-marca-missa-txt{display:none}
}
/* ══════════════════════════════════════════════════════════════════════════
A BARRA DO TOPO: LOGO + BUSCA + CONTA (06/10/2026, a pedido — imagem 02)
─────────────────────────────────────────────────────────────────────────
O topo de TODAS as páginas passa a ser uma barra só, de ponta a ponta, em
qualquer largura: a LOGO à esquerda, a BUSCA no meio e a CONTA à direita
(a foto de quem está logado; "Entrar"/"Criar conta" para o visitante). É para
computador E celular.
Ela NÃO é fixa: `position:static` sobrepõe o `sticky` da regra base do
cabeçalho, então a barra rola junto com a página (pedido do responsável). Por
isso a COLUNA da esquerda (que continua fixa) começa ABAIXO dela — no
computador, `top:80px` no bloco @media(min-width:1200px) mais abaixo.
De onde vieram as peças (nenhum endereço do site mudou):
· logo e busca moravam na coluna da esquerda (`.cfn-lado-marcas` e
`.cfn-lado-busca`) e subiram para cá — as regras delas continuam logo
abaixo, caso voltem para a coluna;
· a conta é o bloco `cfn-social-topo` de social-sessao.php (o mesmo das duas
redes): dois ícones para o visitante e, para quem tem conta, a foto com o
menu curto (o `data-conta-toggle` que o JavaScript do casco já liga).
══════════════════════════════════════════════════════════════════════════ */
body.cifranet-shell .cfn-topo-perfil{position:static;top:auto;background:#ffffff;border-bottom:1px solid #e6ebf5;box-shadow:0 2px 10px rgba(15,35,66,.05);padding:0}
body.cifranet-shell .cfn-topo-barra{width:min(1500px,calc(100% - 28px));margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 0;flex-wrap:wrap;color:#0f172a}
body.cifranet-shell .cfn-topo-marcas{display:inline-flex;align-items:center;flex:0 0 auto}
body.cifranet-shell .cfn-topo-marca{display:inline-flex;align-items:center;gap:.6rem;font-size:1.34rem;font-weight:900;letter-spacing:-.02em;color:#0b2447 !important;text-decoration:none !important;white-space:nowrap}
body.cifranet-shell .cfn-topo-marca b{color:#ff6a00}
body.cifranet-shell .cfn-topo-marca-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#ff8f45 0%,#ff6a00 100%);color:#ffffff;box-shadow:0 8px 18px rgba(255,106,0,.30)}
body.cifranet-shell .cfn-topo-marca-ico svg{width:24px;height:24px;stroke-width:2}
/* A busca é o item que estica. A caixa é a MESMA da coluna (campo branco e lupa
em botão marinho) — inclusive os `!important` no campo, porque o reset do
casco pinta todo `input[type=search]` de branco com borda. */
body.cifranet-shell .cfn-topo-busca{flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:8px;background:#f1f5f9;border:1px solid #e8edf5;border-radius:999px;padding:5px 16px 5px 12px;box-shadow:none}
body.cifranet-shell .cfn-topo-busca:focus-within{background:#ffffff;border-color:#a7e8d3;box-shadow:0 0 0 4px rgba(15,157,118,.09)}
body.cifranet-shell .cfn-topo-busca input[type="search"]{flex:1 1 auto;min-width:0;border:0 !important;background:transparent !important;box-shadow:none !important;min-height:36px;padding:0 !important;font-size:14.5px;font-weight:600;color:#0f172a !important}
body.cifranet-shell .cfn-topo-busca input[type="search"]::placeholder{color:#94a3b8 !important}
/* 06/10/2026 (imagem de referência): a LUPA vai para a ESQUERDA do campo e deixa
de ser um botão escuro; o envio continua no clique e no Enter. */
body.cifranet-shell .cfn-topo-busca button{order:-1;display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border:0;border-radius:0;background:transparent;color:#94a3b8;cursor:pointer}
body.cifranet-shell .cfn-topo-busca button:hover{color:#0b2447}
body.cifranet-shell .cfn-topo-conta{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:auto}
body.cifranet-shell .cfn-topo-conta .cfn-social-topo{margin-left:0}
/* A conta de quem TEM conta: foto + primeiro nome + setinha, num chip claro. */
body.cifranet-shell .cfn-topo-eu-btn{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border:1px solid #e2e8f0;border-radius:999px;background:#ffffff;color:#0b2447;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
body.cifranet-shell .cfn-topo-eu-btn:hover{background:#f4f7fc;border-color:#cbd5e1}
body.cifranet-shell .cfn-topo-eu .cfn-social-avatar{width:36px;height:36px}
body.cifranet-shell .cfn-topo-eu-nome{white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
body.cifranet-shell .cfn-topo-eu-seta{display:inline-flex;color:#94a3b8}
/* Os botões de conta do VISITANTE nasceram no cabeçalho azul (texto branco sobre
véu claro): na barra branca eles precisam de texto escuro e de fundo visível. */
body.cifranet-shell .cfn-topo-conta .cfn-social-link{min-height:40px;padding:0 16px;border-radius:999px;background:#f1f5f9;color:#0b2447 !important;font-size:13px}
body.cifranet-shell .cfn-topo-conta .cfn-social-ico-btn{width:40px;min-width:40px;height:40px;min-height:40px;background:#f1f5f9;color:#0b2447 !important}
body.cifranet-shell .cfn-topo-conta .cfn-social-ico-btn:hover{background:#e2e8f0}
body.cifranet-shell .cfn-topo-conta .cfn-social-link-forte{background:#0b2447;color:#ffffff !important}
body.cifranet-shell .cfn-topo-conta .cfn-social-link-forte:hover{background:#123a6b}
/* Do tablet pequeno para baixo a barra vira DUAS linhas: as DUAS LOGOS (e a conta)
em cima, a busca e os ícones de recados embaixo (numa linha só, entre a logo e a
conta, o campo ficaria com ~110 px e o texto do que se busca sumiria). O `order`
faz a troca sem mexer no HTML. As medidas são as MESMAS do componente
(`rede-perfil-shared.php`) — as duas logos ficaram juntas em 06/10/2026. */
@media(max-width:1080px){
body.cifranet-shell .cfn-topo-barra{gap:8px;padding:8px 0}
body.cifranet-shell .cfn-topo-marcas{gap:6px}
body.cifranet-shell .cfn-topo-marca{font-size:.95rem;gap:.35rem}
body.cifranet-shell .cfn-topo-marca-missa{font-size:.86rem}
body.cifranet-shell .cfn-topo-marca-ico{width:30px;height:30px;border-radius:10px}
body.cifranet-shell .cfn-topo-marca-ico svg{width:17px;height:17px}
body.cifranet-shell .cfn-topo-busca{order:6;flex:1 1 200px;padding-right:12px}
body.cifranet-shell .cfn-topo-eu-btn{gap:6px;padding:3px 8px 3px 3px;font-size:13px}
body.cifranet-shell .cfn-topo-eu-nome{max-width:64px}
body.cifranet-shell .cfn-topo-conta .cfn-social-link{padding:0 13px;font-size:12.5px}
}
/* Celular de verdade: sem o primeiro nome, as duas logos e o avatar cabem na
linha de cima. */
@media(max-width:560px){
body.cifranet-shell .cfn-topo-eu-nome{display:none}
body.cifranet-shell .cfn-topo-marca{font-size:.9rem}
body.cifranet-shell .cfn-topo-marca-missa{font-size:.82rem}
}
/* ── Coluna da esquerda: logo, busca e o botão "Mais" (05/10/2026) ─────── */
/* ATENÇÃO (06/10/2026): a LOGO e a BUSCA saíram da coluna — agora elas abrem a
barra do topo (cifranet_render_main_nav), que é a mesma em computador e
celular. As regras abaixo ficam de pé caso as duas voltem para a coluna. */
body.cifranet-shell .cfn-lado-marcas{display:flex;align-items:center;gap:8px;padding:2px 2px 0}
/* As DUAS placas (CifraNET + Músicas para MISSA) não cabem lado a lado nos 257
px úteis da coluna: sem quebrarem, a segunda era CORTADA na borda e a coluna
ganhava barra de rolagem lateral (o `overflow-y:auto` vira `overflow-x:auto`).
Aqui elas quebram para a linha de baixo — e a placa da comunidade perde o
"comunidade" embaixo, que é o que a deixava mais larga. */
body.cifranet-shell .cfn-lado-marcas{flex-wrap:wrap}
body.cifranet-shell .cfn-lado-marcas .cfn-marca-missa{max-width:100%}
body.cifranet-shell .cfn-lado-marcas .cfn-marca-missa-txt small{display:none}
body.cifranet-shell .cfn-lado-marca{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:14px;background:#0b2447;color:#fff !important;font-size:1.05rem;font-weight:900;letter-spacing:-.4px;text-decoration:none !important;box-shadow:0 8px 20px rgba(11,36,71,.22);white-space:nowrap}
body.cifranet-shell .cfn-lado-marca:hover{box-shadow:0 12px 24px rgba(11,36,71,.34)}
body.cifranet-shell .cfn-lado-marca b{color:#ffb066}
body.cifranet-shell .cfn-lado-marca-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#c2410c;color:#fff}
body.cifranet-shell .cfn-lado-marcas .cfn-marca-missa{min-width:0}
body.cifranet-shell .cfn-lado-busca{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:6px 8px 6px 14px;box-shadow:0 10px 22px rgba(15,35,66,.05)}
body.cifranet-shell .cfn-lado-busca input[type="search"]{flex:1 1 auto;min-width:0;border:0 !important;background:transparent !important;min-height:34px;padding:0 !important;font-size:14px;font-weight:600}
body.cifranet-shell .cfn-lado-busca button{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border:0;border-radius:999px;background:#0b2447;color:#fff;cursor:pointer}
body.cifranet-shell .cfn-lado-busca button:hover{background:#123a6b}
body.cifranet-shell .cfn-lado-menu-pe{margin-top:8px}
body.cifranet-shell .cfn-lado .cfn-mais-btn-rail{background:transparent;color:#0b2447;font-size:14px;font-weight:800;padding:8px 10px;border-radius:12px}
body.cifranet-shell .cfn-lado .cfn-mais-btn-rail:hover{background:#eef1f6}
body.cifranet-shell .cfn-lado .cfn-mais-btn-rail .cfn-mais-ico{width:28px;height:28px;border-radius:9px;background:#eef1f6;font-size:15px;color:#0b2447}
@media(min-width:1200px){
/* A barra do topo é de PONTA A PONTA (por isso o cabeçalho conserva a margem
negativa da regra base, que a faz avançar sobre os 300 px reservados para a
coluna) e a coluna começa ABAIXO dela: 80 px = 62 da barra + 18 de respiro. */
body.cifranet-shell .cfn-lado{top:80px;max-height:calc(100vh - 96px)}
}
/* ── NO CELULAR A COLUNA NÃO APARECE (05/10/2026, quinto pedido) ────────
O responsável marcou a faixa inteira na página da cifra — os caminhos ("Meu
perfil", "Meus Repertórios"...), o botão "Mais", o calendário e o "Sair" — e
pediu para tirá-la. No celular quem manda é o item "Menu" da barra do rodapé,
que abre TODOS os caminhos do site (e agora o "Sair" também).
ATENÇÃO: esta regra vive no FIM do CSS de propósito. A que transforma a coluna
numa faixa branca (`display:block`, no @media(max-width:1199px) do meio do
arquivo) tem a mesma força e venceria se esta viesse antes — é o mesmo tropeço
que deixou a logo e a busca visíveis no celular no ar. */
@media(max-width:1199px){
body.cifranet-shell .cfn-lado{display:none !important}
}