/* Hinário Tabernáculo — família visual do painel do site (DESIGN.md) */
/* Fonte padrão do Hinário: Nunito (arredondada, licença livre SIL OFL), guardada no app (funciona sem internet), nas telas e no telão */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(fontes/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(fontes/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
[hidden] { display: none !important; } /* o atributo hidden vence display das classes (.campo, .b…) */
:root {
  /* família do painel do site (fundo, cartões, bordas); destaque azul do painel; fonte Nunito e selos com sigla dos hinários */
  --papel: #f5f6f8; --papel-2: #eef0f3; --branco: #ffffff; --pedra: #e4e6ea; --pedra-2: #d2d6dc;
  --carvao: #16191f; --tinta-2: #3f4651; --tinta-3: #5f6570; --destaque: #1a5fc4; --destaque-2: #154ea3; --destaque-suave: #e9f1fd; --terracota: #b17c5c; --terracota-tinta: #8a5a3f;
  --titulo: "Nunito", system-ui, sans-serif;
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 16px; --r-sm: 10px;
  /* espaço: grade de 4px (só 1–2px para linhas finas e ajustes ópticos) */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-7: 28px; --esp-8: 32px;
  --esp-10: 40px; --esp-12: 48px; --esp-14: 56px; --esp-16: 64px; --esp-20: 80px; --esp-24: 96px;
  /* cantos */
  --r-xs: 4px; --r-pill: 999px;
  /* letra: escala única (títulos grandes usam clamp nas telas) */
  --t-2xs: 11px; --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-base: 15px; --t-lg: 18px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 28px;
  /* alvos de toque e campos */
  --alvo: 44px; --campo-alto: 46px;
  /* grade da tela: painel da direita e onde ele gruda abaixo da barra de cima (28 + 46 + 12 + 20) */
  --painel-dir: 340px; --abaixo-topo: 106px; --lado: 236px;
  --moldura: 1500px; /* conteúdo + painel da direita; em telas mais largas o resto fica dos lados */
  --sombra: 0 1px 2px rgba(16, 24, 40, .05); --sombra-alta: 0 4px 14px -4px rgba(16, 24, 40, .14);
  --foco: 0 0 0 3px rgba(26, 95, 196, .3);
  --destaque-tinta: #154ea3; --vermelho: #c62828; --vermelho-2: #a82222; --vermelho-suave: #fdecec; --vermelho-tinta: #b42318; --verde: #1e7f46;
  --coro-fundo: #fdf6d8; --coro-borda: #e8c84a; --coro-borda-2: #c9a83a; --coro-tinta: #7a5d00; --aviso-fundo: #fdf3dc; --aviso-borda: #f0d9a6;
  --sobre: rgba(22, 25, 31, .045); --barra: rgba(245, 246, 248, .96); --vidro: rgba(255, 255, 255, .88); --campo: #fff;
  color-scheme: light;
}
/* Modo escuro (Configurações › Geral): escolhido, ou automático seguindo o sistema. O telão não muda. */
:root[data-tema="escuro"] {
  --papel: #121417; --papel-2: #1a1d22; --branco: #1d2026; --pedra: #2c3038; --pedra-2: #3b414b;
  --carvao: #eceef2; --tinta-2: #c4c8d0; --tinta-3: #9aa0aa; --destaque: #2f6fd0; --destaque-2: #3b7fe0; --destaque-suave: #16263d; --destaque-tinta: #8db8f5;
  --terracota: #c99272; --terracota-tinta: #dba585;
  --vermelho: #d64545; --vermelho-2: #e05a5a; --vermelho-suave: #3a1f22; --vermelho-tinta: #ff9b94; --verde: #5fbf86;
  --coro-fundo: #3a321a; --coro-borda: #8a7330; --coro-borda-2: #a8893a; --coro-tinta: #ecd27a; --aviso-fundo: #34291a; --aviso-borda: #6b5532;
  --sobre: rgba(255, 255, 255, .05); --barra: rgba(18, 20, 23, .96); --vidro: rgba(29, 32, 38, .88); --campo: #16181d;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 4px 14px -4px rgba(0, 0, 0, .5); --foco: 0 0 0 3px rgba(141, 184, 245, .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --papel: #121417; --papel-2: #1a1d22; --branco: #1d2026; --pedra: #2c3038; --pedra-2: #3b414b;
    --carvao: #eceef2; --tinta-2: #c4c8d0; --tinta-3: #9aa0aa; --destaque: #2f6fd0; --destaque-2: #3b7fe0; --destaque-suave: #16263d; --destaque-tinta: #8db8f5;
    --terracota: #c99272; --terracota-tinta: #dba585;
    --vermelho: #d64545; --vermelho-2: #e05a5a; --vermelho-suave: #3a1f22; --vermelho-tinta: #ff9b94; --verde: #5fbf86;
    --coro-fundo: #3a321a; --coro-borda: #8a7330; --coro-borda-2: #a8893a; --coro-tinta: #ecd27a; --aviso-fundo: #34291a; --aviso-borda: #6b5532;
    --sobre: rgba(255, 255, 255, .05); --barra: rgba(18, 20, 23, .96); --vidro: rgba(29, 32, 38, .88); --campo: #16181d;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 4px 14px -4px rgba(0, 0, 0, .5); --foco: 0 0 0 3px rgba(141, 184, 245, .4);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; scrollbar-color: var(--pedra-2) transparent; }
body { margin: 0; background: var(--papel); color: var(--carvao); font: var(--t-base)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--destaque-suave); }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-sm); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pular { position: absolute; left: -9999px; } .pular:focus { left: 12px; top: 12px; z-index: 9; background: var(--carvao); color: #fff; padding: var(--esp-2) var(--esp-3); }

/* Estrutura: barra lateral + área principal */
.app { display: grid; grid-template-columns: var(--lado) minmax(0, 1fr); min-height: 100vh; }
.lado { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--esp-7); padding: var(--esp-6) var(--esp-4) var(--esp-5); border-right: 1px solid var(--pedra); background: var(--branco); }
.marca { display: flex; align-items: center; gap: var(--esp-3); padding: 0 var(--esp-2); text-decoration: none; font: 600 var(--t-lg)/1.1 var(--titulo); }
.marca__ic { width: 34px; height: 34px; stroke: var(--destaque-tinta); stroke-width: 1.5; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: var(--esp-3); min-height: 40px; padding: 0 var(--esp-3); border-radius: var(--r-sm); text-decoration: none; color: var(--tinta-2); font-weight: 500; }
.nav a:hover { background: var(--sobre); color: var(--carvao); }
.nav a[aria-current="page"] { background: var(--destaque-suave); color: var(--destaque-tinta); font-weight: 600; }
.nav a[aria-current="page"] svg { color: var(--destaque-tinta); }
/* barra lateral: seções Hinários e Configurações (rolam sozinhas em telas baixas) */
.lado__meio { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--esp-6); margin-top: calc(-1 * var(--esp-2)); padding-top: var(--esp-5); border-top: 1px solid var(--pedra); overflow-y: auto; }
.nav--sec h2 { margin: 0 0 var(--esp-2); padding: 0 var(--esp-3); font: 600 var(--t-2xs)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.nav--sec a { min-height: 36px; font-size: var(--t-md); font-weight: 400; }
.nav--sec a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav__breve { display: flex; align-items: center; gap: var(--esp-3); min-height: 40px; padding: 0 var(--esp-3); color: var(--tinta-3); font-weight: 500; cursor: default; }
.nav__breve em { margin-left: auto; padding: 2px var(--esp-2); white-space: nowrap; border-radius: var(--r-pill); background: var(--papel); font: 500 var(--t-2xs)/1.4 var(--sans); font-style: normal; }
.conta-card { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--papel); color: var(--tinta-2); text-decoration: none; }
.conta-card:hover { border-color: var(--pedra-2); color: var(--carvao); }
.conta-card > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pedra-2); }
.conta-card[data-estado="on"] > i { background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 20%, transparent); }
.conta-card[data-estado="off"] > i { background: var(--terracota); }
.conta-card__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conta-card__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--carvao); font-size: var(--t-sm); font-weight: 600; }
.conta-card__t small { color: var(--tinta-3); font-size: var(--t-xs); }
.lado__pe { margin-top: 0; padding: var(--esp-3) 0 0; }

.principal { min-width: 0; padding: var(--esp-7) var(--esp-10) var(--esp-20); }
.pagina { max-width: 1120px; }
.moldura { max-width: var(--moldura); margin: 0 auto; } /* tudo alinhado à esquerda, na mesma margem; só a largura máxima muda */
.carregando { padding: var(--esp-20) 0; text-align: center; color: var(--tinta-3); }

/* Cabeçalho das páginas */
/* barra de cima fixa: busca e Apresentar sempre à mão ao rolar a lista */
.topo { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: var(--esp-4); margin: calc(-1 * var(--esp-7)) 0 var(--esp-5); padding: var(--esp-7) 0 var(--esp-3); background: var(--papel); }
.busca { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--esp-3); height: var(--campo-alto); padding: 0 var(--esp-4); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); color: var(--tinta-3); }
.busca:focus-within { border-color: var(--destaque); box-shadow: var(--foco); }
.busca input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; color: var(--carvao); outline: none; }
.busca input::placeholder { color: var(--tinta-3); }
.cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-6); padding-bottom: var(--esp-5); margin-bottom: var(--esp-6); border-bottom: 1px solid var(--pedra); }
.cab h1 { margin: 0; font: 600 clamp(28px, 3.2vw, 40px)/1.12 var(--titulo); letter-spacing: -.02em; text-wrap: balance; }
.cab__info { color: var(--tinta-3); font-size: var(--t-sm); text-align: right; white-space: nowrap; }
.cab__info b { display: block; color: var(--carvao); font-weight: 500; font-size: var(--t-md); }
.trilha { display: inline-flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-3); color: var(--tinta-3); font-size: var(--t-sm); text-decoration: none; }
.trilha:hover { color: var(--carvao); }

/* Biblioteca: grade de hinários com capa de livro */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: var(--esp-4); margin: 0; padding: 0; list-style: none; } /* todas as linhas da altura da maior: blocos iguais */
.grade > li { display: flex; }
.livro { flex: 1; display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-3) var(--esp-4) var(--esp-3) var(--esp-3); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); text-decoration: none; box-shadow: var(--sombra); transition: border-color .15s ease, transform .15s ease; }
.livro:hover { border-color: var(--pedra-2); box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.livro__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.livro__nome { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 600 var(--t-lg)/1.25 var(--titulo); }
.livro__meta { display: flex; align-items: center; gap: var(--esp-3); white-space: nowrap; color: var(--tinta-3); font-size: var(--t-sm); }
.livro__meta span { display: inline-flex; align-items: center; gap: var(--esp-1); }
.livro__meta svg { width: 14px; height: 14px; }
.livro > svg { color: var(--tinta-3); }
.capa { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--c, var(--destaque)); color: #fff; font: 700 var(--t-xl)/1 var(--titulo); letter-spacing: .02em; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), var(--sombra); }
.capa--3 { font-size: var(--t-md); }
.capa--p { width: 36px; height: 36px; border-radius: var(--r-sm); font-size: var(--t-sm); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.capa--p.capa--3 { font-size: 10px; letter-spacing: 0; }
.nota { display: flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-6); color: var(--tinta-3); font-size: var(--t-sm); }
.lista__mais { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-4) var(--esp-5); border-top: 1px solid var(--pedra); background: var(--papel-2); color: var(--tinta-2); font-size: var(--t-md); }

/* Lista compacta de hinos (dentro do hinário e na busca) */
.lista { border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); overflow: hidden; }
.lista__cab, .linha { display: grid; grid-template-columns: 64px minmax(0, 2fr) minmax(0, 1fr) 76px; align-items: center; gap: var(--esp-4); padding: 0 var(--esp-5); }
.lista__cab { min-height: 38px; border-bottom: 1px solid var(--pedra); color: var(--tinta-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.linha { min-height: 48px; border-top: 1px solid var(--papel-2); text-decoration: none; cursor: pointer; user-select: none; }
.linha[aria-selected="true"] { background: var(--destaque-suave); box-shadow: inset 3px 0 0 var(--destaque); }
.linha__ver { justify-self: end; font-size: var(--t-sm); color: var(--destaque-tinta); text-decoration: none; opacity: 0; }
.linha:hover .linha__ver, .linha[aria-selected="true"] .linha__ver, .linha__ver:focus-visible { opacity: 1; }
.linha__ver:hover { text-decoration: underline; }
.linha:first-of-type { border-top: 0; }
.linha:hover { background: var(--sobre); }
.linha__n { font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.linha__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.linha__d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-3); font-size: var(--t-sm); }
.linha__d b { color: var(--terracota-tinta); font-weight: 500; }
.linha__trecho { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-3); font-size: var(--t-sm); font-weight: 400; }
.vazio { padding: var(--esp-10) var(--esp-5); text-align: center; color: var(--tinta-3); }
.ponto { display: inline-block; width: 8px; height: 8px; margin-right: var(--esp-2); border-radius: 2px; background: var(--c); vertical-align: 1px; }

/* Leitura do hino */
.hino { max-width: 720px; }
.hino__meta { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin-top: var(--esp-3); color: var(--tinta-3); font-size: var(--t-md); }
.letra-cartao { padding: var(--esp-8) var(--esp-8) var(--esp-2); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); box-shadow: var(--sombra); }
.bloco { margin: 0 0 var(--esp-6); }
.bloco__rot { display: block; margin-bottom: var(--esp-2); color: var(--tinta-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bloco p { margin: 0; font: 400 var(--t-xl)/1.65 var(--sans); }
.bloco--c { padding-left: var(--esp-5); border-left: 1px solid var(--terracota); }
.bloco--c .bloco__rot { color: var(--terracota-tinta); }

/* Botão único de apresentar (topo de todas as telas) */
.topo__vao { flex: 1; }
.tema-bt { flex: none; width: var(--campo-alto); min-height: var(--campo-alto); border-radius: var(--r); color: var(--tinta-2); }
.tema-bt svg { width: 20px; height: 20px; }
.apresentar { display: inline-flex; align-items: center; gap: var(--esp-3); height: var(--campo-alto); padding: 0 var(--esp-5) 0 var(--esp-4); border: 0; border-radius: var(--r); background: var(--destaque); color: #fff; font: 600 var(--t-md)/1.15 var(--sans); cursor: pointer; text-align: left; max-width: 300px; }
.apresentar:hover { background: var(--destaque-2); }
.apresentar svg { width: 20px; height: 20px; }
.apresentar:disabled { background: var(--pedra); color: var(--tinta-3); cursor: default; }
.apresentar--fim { background: var(--vermelho); }
.apresentar--fim:hover { background: var(--vermelho-2); }

/* Botões da tela de controle */
.b { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-5); border: 1px solid var(--pedra-2); border-radius: var(--r-sm); background: var(--branco); color: var(--carvao); font: 500 var(--t-md) var(--sans); text-decoration: none; cursor: pointer; }
.b:hover { border-color: var(--tinta-3); }
.b:disabled { opacity: .45; cursor: default; }
.b--forte { border-color: var(--destaque); background: var(--destaque); color: #fff; }
.b--forte:hover { background: var(--destaque-2); }
.b--perigo { color: var(--vermelho-tinta); }
.b--off { color: var(--tinta-3); border-style: dashed; cursor: default; }
.b--off:hover { border-color: var(--pedra-2); }
.b--perigo:hover { border-color: var(--vermelho); background: var(--vermelho-suave); }
.b--ic { min-width: var(--alvo); padding: 0 var(--esp-3); }

/* Apresentação: o que está no ar, o próximo, as partes e o controle */
.pagina--larga { max-width: 1240px; }
.cab__acoes { display: flex; align-items: center; gap: var(--esp-3); }
.telao { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--tinta-3); font-size: var(--t-sm); }
.telao i { width: 8px; height: 8px; border-radius: 50%; background: var(--pedra-2); }
.telao--on i { background: var(--verde); }
.previas { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--esp-5); margin-bottom: var(--esp-7); }
.previa { margin: 0; }
.previa figcaption { display: flex; align-items: baseline; gap: var(--esp-2); margin-bottom: var(--esp-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.previa figcaption span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.previa--ar figcaption { color: var(--vermelho-tinta); }
.previa__tela { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: #000; overflow: hidden; container-type: inline-size; }
/* a área e as cores da letra vêm do visual em uso (previaTela no app.js) */
.previa--ar .previa__tela { box-shadow: 0 0 0 2px var(--vermelho); }
.previa__faixa { position: absolute; left: 7%; right: 7%; top: var(--pv-topo, 75.5%); height: var(--pv-alt, 21.8%); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--pv-letra, #fff); font: 700 calc(var(--pv-t, 64) * .052cqi)/1.22 "Nunito", sans-serif; }
.previa__faixa--c { color: var(--pv-coro, #ffd84a); }
.partes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 104px; gap: var(--esp-3); margin: 0 0 var(--esp-24); padding: 0; list-style: none; }
.partes li { min-width: 0; }
/* todos os blocos do mesmo tamanho: verso longo é cortado com "…" aqui (no telão sai inteiro) */
.parte { display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--branco); color: var(--carvao); font: 400 var(--t-md)/1.45 var(--sans); text-align: left; cursor: pointer; overflow: hidden; }
.parte:hover { border-color: var(--pedra-2); }
.parte__v { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parte__nome { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-2); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.parte__nome em { margin-left: auto; padding: 2px var(--esp-2); border-radius: var(--r-pill); background: var(--vermelho); color: #fff; font-style: normal; letter-spacing: .04em; }
/* coro: fundo amarelo-claro (no telão ele sai amarelo) */
.parte--c { border-color: var(--coro-borda); background: var(--coro-fundo); }
.parte--c:hover { border-color: var(--coro-borda-2); }
.parte--c .parte__nome { color: var(--coro-tinta); }
/* bloco no ar: moldura vermelha forte */
.parte[aria-current="true"] { border-color: var(--vermelho-tinta); box-shadow: 0 0 0 2px var(--vermelho); }
.controle { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; margin: 0 calc(-1 * var(--esp-2)); padding: var(--esp-3) var(--esp-2) calc(var(--esp-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--pedra); background: var(--barra); backdrop-filter: blur(6px); }
.controle__dica { margin-left: auto; color: var(--tinta-3); font-size: var(--t-xs); }

/* Aviso na tela de controle */
.aviso { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-5); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--aviso-borda); border-radius: var(--r-sm); background: var(--aviso-fundo); color: var(--carvao); font-size: var(--t-md); }
.aviso > svg { color: var(--terracota-tinta); }
.aviso span { flex: 1; }
.aviso .b { min-height: 38px; text-decoration: none; white-space: nowrap; }

/* Configurações */
.cartao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); padding: var(--esp-6); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); }
.cartao p { margin: 0; max-width: 62ch; }
.cartao__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.ajuste > span:last-child:not(.ajuste__ctl) { font-variant-numeric: tabular-nums; }
.opcoes { display: flex; flex-direction: column; gap: var(--esp-2); width: 100%; margin: 0; padding: 0; border: 0; }
.opcoes legend { margin-bottom: var(--esp-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.opcao { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--pedra); border-radius: var(--r-sm); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--destaque); background: var(--destaque-suave); }
.opcao input { margin-top: var(--esp-1); accent-color: var(--destaque); }
.opcao span { display: flex; flex-direction: column; color: var(--tinta-3); font-size: var(--t-sm); }
.opcao b { color: var(--carvao); font-size: var(--t-base); font-weight: 500; }
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); width: 100%; padding-top: var(--esp-4); border-top: 1px solid var(--pedra); }
.ajuste > span:first-child { display: flex; flex-direction: column; color: var(--tinta-3); font-size: var(--t-sm); }
.ajuste > span:first-child b { color: var(--carvao); font-size: var(--t-base); font-weight: 500; }
.ajuste__ctl { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ajuste__ctl b { min-width: 28px; text-align: center; font-weight: 600; }

/* Buscar: títulos das seções quando há busca */
.secao { display: flex; align-items: baseline; gap: var(--esp-3); margin: var(--esp-7) 0 var(--esp-3); font: 600 var(--t-xl)/1.2 var(--titulo); }
.secao:first-child, .cab + .secao { margin-top: 0; } /* só sem nada antes; depois de um cartão o título precisa de ar */
.secao span { font: 400 var(--t-sm)/1 var(--sans); color: var(--tinta-3); }
.grade + .secao { margin-top: var(--esp-8); }

/* Início: tela própria, sem a barra lateral */
/* Início e Entrar: sem o painel lateral (o Início mantém as margens das outras páginas) */
:root:is([data-tela="inicio"], [data-tela="entrar"]) .app { grid-template-columns: minmax(0, 1fr); }
:root:is([data-tela="inicio"], [data-tela="entrar"]) .lado { display: none; }
:root[data-tela="entrar"] .principal { padding: 0; }
/* Início: sem barra lateral, o bloco (título, busca, atalhos) fica centralizado na janela, com a largura máxima das outras páginas */
:root[data-tela="inicio"] .inicio { margin: 0 auto; }
.inicio__hero { display: flex; flex-direction: column; align-items: center; padding: var(--esp-12) 0 var(--esp-14); text-align: center; }
.inicio__hero h1 { margin: 0 0 var(--esp-3); font: 600 clamp(32px, 4vw, 52px)/1.1 var(--titulo); letter-spacing: -.02em; text-wrap: balance; }
.inicio__hero p { margin: 0 0 var(--esp-8); color: var(--tinta-3); font-size: var(--t-base); }
.busca--grande { flex: none; width: min(100%, 720px); height: 60px; padding: 0 var(--esp-6); border-radius: var(--r-pill); box-shadow: var(--sombra-alta); font-size: var(--t-base); }
.busca--grande svg { width: 22px; height: 22px; }
.cab__sub { margin: var(--esp-2) 0 0; color: var(--tinta-3); font-size: var(--t-base); }
.atalhos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--esp-4); }
/* 5 atalhos: 3 em cima e 2 mais largos embaixo; 6 (estúdio, com Adicionar hino): 3 + 3 */
.atalho { grid-column: span 2; }
.atalho:nth-child(4):nth-last-child(2), .atalho:nth-child(5):nth-last-child(1) { grid-column: span 3; }
.atalho { position: relative; display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-6) var(--esp-12) var(--esp-6) var(--esp-6); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--vidro); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.atalho > svg:first-child { width: 26px; height: 26px; margin-bottom: var(--esp-3); color: var(--destaque-tinta); stroke-width: 1.4; }
.atalho > svg:last-child { position: absolute; right: 18px; top: 50%; color: var(--tinta-3); }
.atalho[aria-disabled="true"] { color: var(--tinta-3); }
.atalho[aria-disabled="true"] > svg { color: var(--pedra-2); }
.atalho__t { font: 600 var(--t-lg)/1.2 var(--titulo); color: inherit; }
.atalho__t em { white-space: nowrap; margin-left: var(--esp-2); padding: 2px var(--esp-2); border-radius: var(--r-pill); background: var(--papel-2); font: 500 var(--t-2xs)/1.4 var(--sans); font-style: normal; color: var(--tinta-3); vertical-align: 2px; }
.atalho__d { font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-3); }

/* Favoritos e Histórico */
.fav { flex: none; }
.fav--on { border-color: var(--coro-borda); background: var(--coro-fundo); }
.fav--on svg { fill: #d9a520; stroke: #b8860b; }
.selo { margin-right: var(--esp-2); padding: 2px var(--esp-2); border-radius: var(--r-pill); background: var(--vermelho-suave); color: var(--vermelho-tinta); font-size: var(--t-2xs); font-weight: 600; }
.selo--neutro { background: var(--papel-2); color: var(--tinta-2); }

/* Apresentações preparadas: painel à direita da Biblioteca, do hinário e do hino */
.com-apres { display: grid; grid-template-columns: minmax(0, 1fr) var(--painel-dir); gap: var(--esp-8); align-items: start; }
.com-apres > .pagina { width: 100%; }
.apres { position: sticky; top: var(--abaixo-topo); max-height: calc(100vh - var(--abaixo-topo) - var(--esp-4)); overflow-y: auto; padding: var(--esp-1) var(--esp-1) var(--esp-3); }
.apres__ic { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--tinta-3); cursor: pointer; list-style: none; }
.apres__ic::-webkit-details-marker { display: none; }
.apres__ic:hover { background: var(--sobre); color: var(--carvao); }
.apres__lista { display: flex; flex-direction: column; gap: var(--esp-3); margin: 0 0 var(--esp-3); padding: 0; list-style: none; }
.apres__c { padding: var(--esp-4) var(--esp-3) var(--esp-3) var(--esp-4); border: 1px solid var(--pedra); border-left: 4px solid var(--c); border-radius: var(--r); background: var(--branco); box-shadow: var(--sombra); }
.apres__topo { display: flex; align-items: center; gap: 2px; min-height: 32px; }
.apres__topo h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-lg)/1.25 var(--titulo); }
.apres__nome { flex: 1; display: flex; gap: var(--esp-2); }
.apres__nome input { flex: 1; min-width: 0; height: 36px; padding: 0 var(--esp-3); border: 1px solid var(--destaque); border-radius: var(--r-sm); background: var(--campo); font: 500 var(--t-base) var(--sans); color: var(--carvao); outline: none; box-shadow: var(--foco); }
.apres__nome .b { min-height: 36px; }
.apres__menu { position: relative; }
.apres__menu > div { position: absolute; right: 0; top: 36px; z-index: 5; min-width: 160px; padding: var(--esp-2); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--branco); box-shadow: 0 8px 24px -8px rgba(37, 42, 35, .25); }
.apres__menu button { width: 100%; min-height: 36px; padding: 0 var(--esp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--vermelho-tinta); font: 500 var(--t-md) var(--sans); text-align: left; cursor: pointer; }
.apres__menu button:hover { background: var(--vermelho-suave); }
.apres__meta { display: flex; align-items: center; margin: 2px 0 var(--esp-2); color: var(--tinta-3); font-size: var(--t-sm); }
.apres__meta .ponto { border-radius: 50%; }
.apres__hs { margin: 0; padding: 0; list-style: none; }
.apres__h { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: var(--esp-2); min-height: 34px; padding: 0 0 0 var(--esp-2); border-radius: var(--r-sm); font-size: var(--t-md); cursor: pointer; user-select: none; }
.apres__h:hover { background: var(--sobre); }
.apres__h[aria-selected="true"] { background: var(--destaque-suave); box-shadow: inset 3px 0 0 var(--destaque); }
.apres__n { color: var(--tinta-3); font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.apres__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apres__tirar { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--tinta-3); cursor: pointer; opacity: 0; }
.apres__tirar svg { width: 15px; height: 15px; }
.apres__h:hover .apres__tirar, .apres__h:focus-within .apres__tirar, .apres__tirar:focus-visible { opacity: 1; }
.apres__tirar:hover { background: var(--vermelho-suave); color: var(--vermelho-tinta); }
.apres__vazio { margin: 0 0 var(--esp-1); color: var(--tinta-3); font-size: var(--t-sm); }
.apres__add { display: flex; align-items: center; gap: var(--esp-2); width: 100%; min-height: 36px; margin-top: var(--esp-2); padding: 0 var(--esp-2); border: 1px dashed var(--pedra-2); border-radius: var(--r-sm); background: none; color: var(--destaque-tinta); font: 500 var(--t-sm) var(--sans); text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.apres__add:hover { border-color: var(--destaque); background: var(--destaque-suave); }
.apres__nova { display: flex; align-items: center; justify-content: center; gap: var(--esp-2); width: 100%; min-height: var(--alvo); border: 1px solid var(--pedra-2); border-radius: var(--r); background: var(--branco); color: var(--carvao); font: 500 var(--t-md) var(--sans); cursor: pointer; }
.apres__nova:hover { border-color: var(--tinta-3); }
.arrasto { position: fixed; left: -1000px; top: 0; max-width: 260px; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--destaque); border-radius: var(--r-sm); background: var(--branco); color: var(--carvao); font: 500 var(--t-sm) var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 16px -6px rgba(37, 42, 35, .3); }
.apres__c.apres--alvo { border-color: var(--destaque); box-shadow: var(--foco); }
.apres__nova.apres--alvo { border-style: dashed; border-color: var(--destaque); background: var(--destaque-suave); }
.apres__nota { margin: var(--esp-3) 2px 0; color: var(--tinta-3); font-size: var(--t-xs); }
/* tela estreita: o painel desce para baixo da lista */
@media (max-width: 1180px) {
  .com-apres { grid-template-columns: minmax(0, 1fr); }
  .apres { position: static; max-height: none; }
}

/* Sequências: lista, editor com a corrente de hinos e o painel Biblioteca / Para depois / Sequência */
.seqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
.seqs__c { display: flex; flex-direction: column; gap: var(--esp-1); height: 100%; padding: var(--esp-4) var(--esp-5); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); text-decoration: none; box-shadow: var(--sombra); transition: border-color .15s ease, transform .15s ease; }
.seqs__c:hover { border-color: var(--pedra-2); transform: translateY(-1px); }
.seqs__nome { font: 600 var(--t-lg)/1.25 var(--titulo); }
.seqs__meta { color: var(--tinta-3); font-size: var(--t-sm); margin-bottom: var(--esp-2); }
.seqs__hs { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-md); }
.seqs__hs span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seqs__hs b { display: inline-block; width: 38px; color: var(--tinta-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.seq { display: grid; grid-template-columns: minmax(0, 1fr) var(--painel-dir); gap: var(--esp-8); align-items: start; }
.seq__cab { align-items: center; }
.seq__tit { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; flex: 1; }
.seq__tit h1 { overflow: hidden; text-overflow: ellipsis; }
.seq__nome { max-width: 520px; }
.seq__nome input { height: var(--alvo); font: 600 var(--t-2xl) var(--titulo); }
.seq__meta { color: var(--tinta-3); font-size: var(--t-sm); white-space: nowrap; }
.seq__dados { display: grid; grid-template-columns: 180px 120px minmax(0, 1fr); gap: var(--esp-4); margin-bottom: var(--esp-5); }
.seq__dados .campo > span { color: var(--tinta-3); font-size: var(--t-sm); }
@media (max-width: 640px) { .seq__dados { grid-template-columns: minmax(0, 1fr) 100px; } .seq__dados .campo:last-of-type { grid-column: 1 / -1; } }
.corrente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-5) var(--esp-8); min-height: 260px; padding: var(--esp-7); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco) radial-gradient(circle, var(--pedra) 1px, transparent 1.2px) 0 0 / 22px 22px; }
.corrente.no--alvo { box-shadow: var(--foco); }
.corrente__ini { display: inline-flex; align-items: center; gap: var(--esp-2); height: var(--alvo); padding: 0 var(--esp-4); border-radius: var(--r-sm); background: var(--destaque); color: #fff; font-weight: 600; font-size: var(--t-md); }
.no { position: relative; display: flex; align-items: center; gap: var(--esp-3); width: 230px; min-height: 76px; padding: var(--esp-3) var(--esp-2) var(--esp-3) var(--esp-3); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--branco); box-shadow: 0 2px 6px -2px rgba(37, 42, 35, .12); cursor: grab; }
/* ligação com o anterior (a corrente é uma só, sem ramos) */
.corrente > :not(:first-child)::before { content: ""; position: absolute; left: -34px; top: 50%; width: 34px; border-top: 1.5px solid var(--pedra-2); }
.corrente__ini { position: relative; }
.no.no--alvo { border-color: var(--destaque); box-shadow: -4px 0 0 var(--destaque); }
.no__t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-sm); }
.no__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--t-md); }
.no__t small { color: var(--tinta-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no .capa--p { width: 36px; height: 36px; }
.no--add { justify-content: center; gap: var(--esp-2); border-style: dashed; background: var(--vidro); box-shadow: none; color: var(--tinta-3); font: 500 var(--t-md) var(--sans); cursor: pointer; }
.no--add:hover { border-color: var(--destaque); color: var(--destaque-tinta); }
.apres__menu button.neutro { color: var(--carvao); }
.apres__menu button.neutro:hover { background: var(--papel-2); }
.apres__menu > div { min-width: 200px; }
.seq__lado { position: sticky; top: var(--abaixo-topo); display: flex; flex-direction: column; gap: var(--esp-3); max-height: calc(100vh - var(--abaixo-topo) - var(--esp-4)); padding: var(--esp-4); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); }
.seq__abas { display: flex; gap: var(--esp-1); border-bottom: 1px solid var(--pedra); }
.seq__abas button { flex: 1; min-height: 40px; padding: 0 var(--esp-2); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tinta-3); font: 500 var(--t-md) var(--sans); cursor: pointer; white-space: nowrap; }
.seq__abas button[aria-selected="true"] { border-bottom-color: var(--destaque); color: var(--carvao); }
.seq__abas span { padding: 1px var(--esp-2); border-radius: var(--r-pill); background: var(--papel-2); font-size: var(--t-xs); }
.busca--p { flex: none; height: 40px; }
.seq__res { min-height: 0; overflow-y: auto; }
.seql__lista { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.seql { display: flex; align-items: center; gap: var(--esp-3); min-height: 58px; padding: var(--esp-2) 2px; border-bottom: 1px solid var(--papel-2); cursor: grab; }
.seql .capa--p { width: 32px; height: 32px; }
.seql__t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-md); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seql__t b { color: var(--tinta-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.seql__t small { color: var(--tinta-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; }
.seq__filtro { flex: none; height: 40px; padding: 0 var(--esp-3); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--branco); color: var(--carvao); font: 500 var(--t-md) var(--sans); }
.seql--hinario { width: 100%; border: 0; border-bottom: 1px solid var(--papel-2); background: none; color: var(--carvao); font: inherit; text-align: left; cursor: pointer; }
.seql--hinario:hover { background: var(--sobre); }
.seql--hinario > svg { color: var(--tinta-3); }
.seq__dica { margin: var(--esp-1) 2px; color: var(--tinta-3); font-size: var(--t-sm); }
/* editar a letra de um hino só dentro da sequência */
.letra-ed { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-6); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); }
.letra-ed__cab h2 { margin: 0; font: 600 var(--t-3xl)/1.15 var(--titulo); }
.letra-ed__cab .nota { margin-top: var(--esp-2); }
.letra-ed textarea { width: 100%; padding: var(--esp-4) var(--esp-4); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--campo); color: var(--carvao); font: 400 var(--t-lg)/1.6 var(--sans); resize: vertical; }
.letra-ed textarea:focus { outline: none; border-color: var(--destaque); box-shadow: var(--foco); }
.letra-ed .nota { align-items: flex-start; }
.letra-ed .nota b { color: var(--coro-tinta); }
.letra-ed__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.letra-ed__orig { margin-left: auto; }
.no__t em { color: var(--terracota-tinta); font-style: normal; }
@media (min-width: 761px) { .corrente > .no--quebra::before { display: none; } } /* primeiro da linha: a ligação vem do fim da linha de cima */
/* Editar o acervo: formulários, hinário aberto, Obter informações */
.pagina--form { max-width: 860px; }
.form { gap: var(--esp-5); }
.campo { display: flex; flex-direction: column; gap: var(--esp-2); width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo > span, .campo > legend { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: var(--alvo); padding: 0 var(--esp-3); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--campo); color: var(--carvao); font: 400 var(--t-base)/1.4 var(--sans); }
.campo textarea { padding: var(--esp-3) var(--esp-4); font: 400 var(--t-lg)/1.6 var(--sans); resize: vertical; }
.campo :is(input, select, textarea):focus { outline: none; border-color: var(--destaque); box-shadow: var(--foco); }
.form__linha { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: var(--esp-4); width: 100%; }
.form__linha:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
.form__link { display: flex; align-items: flex-end; gap: var(--esp-3); width: 100%; }
.form__link .b, .form__dica .b { flex: none; white-space: nowrap; }
.form .nota { margin: calc(-1 * var(--esp-2)) 0 0; align-items: flex-start; }
.form .nota b { color: var(--coro-tinta); }
.form__dica { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); width: 100%; margin-top: calc(-1 * var(--esp-2)); }
.form__dica .nota { margin: 0; }
.form__mais { width: 100%; border-top: 1px solid var(--pedra); padding-top: var(--esp-4); }
.form__mais summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); }
.form__ppt { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.form__ppt .nota { flex: 1; min-width: 220px; margin: 0; }
/* Selecionar vários hinos de um hinário */
.b--p { min-height: 36px; padding: 0 var(--esp-3); }
.selbar { position: sticky; top: var(--abaixo-topo); z-index: 4; display: flex; flex-direction: column; gap: var(--esp-3); margin-bottom: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--destaque); border-radius: var(--r); background: var(--branco); box-shadow: var(--sombra); }
.selbar__l { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); }
.selbar__l > b { margin-right: var(--esp-2); }
.selbar__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
.selbar__f { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--pedra); }
.selbar__f .campo { flex: 1 1 220px; width: auto; }
.selbar .nota { margin: 0; }
.lista--sel .lista__cab, .linha--sel { grid-template-columns: 20px 52px minmax(0, 2fr) minmax(0, 1fr); }
.lista--sel .lista__cab::before { content: ""; }
.linha--sel input { width: 18px; height: 18px; margin: 0; accent-color: var(--destaque); }
.linha--on { background: var(--destaque-suave); }
/* Arrastar um hinário para mudar a ordem (depois de segurar 1 s) */
.livro--arrasta { position: relative; z-index: 3; border-color: var(--destaque); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .35); transform: scale(1.02); cursor: grabbing; user-select: none; }
[data-grade-ordem] a.livro { -webkit-touch-callout: none; }
/* Menu do botão direito num hinário */
.menu-ctx { position: fixed; z-index: 50; display: flex; flex-direction: column; min-width: 220px; padding: var(--esp-2); border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--branco); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35); }
.menu-ctx__t { overflow: hidden; max-width: 260px; padding: var(--esp-1) var(--esp-3) var(--esp-2); color: var(--tinta-3); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.menu-ctx [role=menuitem] { display: flex; align-items: center; gap: var(--esp-3); min-height: 36px; padding: 0 var(--esp-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--carvao); font: 500 var(--t-md) var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.menu-ctx [role=menuitem]:hover, .menu-ctx [role=menuitem]:focus-visible { background: var(--sobre); outline: none; }
.menu-ctx [role=menuitem] svg { width: 16px; height: 16px; flex: none; color: var(--tinta-3); }
.menu-ctx .perigo, .menu-ctx .perigo svg { color: var(--vermelho-tinta); }
.menu-ctx__n { padding: var(--esp-2) var(--esp-3) var(--esp-1); color: var(--tinta-3); font-size: var(--t-xs); }
@media (max-width: 640px) { .lista--sel .lista__cab, .linha--sel { grid-template-columns: 20px 40px minmax(0, 1fr); } .linha--sel .linha__d { display: none; } .selbar__acoes { margin-left: 0; } }

/* Importar PowerPoints: lista para revisar antes de salvar */
.lote__links { width: 100%; padding-top: var(--esp-4); border-top: 1px solid var(--pedra); }
.lote__links summary { cursor: pointer; font-weight: 600; }
.lote__links[open] summary { margin-bottom: var(--esp-3); }
.lote__links .campo { margin-bottom: var(--esp-3); }
.lote__links textarea { min-height: 140px; padding: var(--esp-3); font: 400 var(--t-sm)/1.5 ui-monospace, Menlo, monospace; }
.lote__links .nota { margin-top: var(--esp-3); }
.lote__cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); margin: var(--esp-6) 0 var(--esp-3); }
.lote__cab p { margin: 0; color: var(--tinta-2); font-size: var(--t-sm); }
.lote { margin: 0; padding: 0; list-style: none; border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); overflow: hidden; }
.lote__l { display: grid; grid-template-columns: 20px 44px minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3); min-height: 56px; padding: var(--esp-2) var(--esp-4); border-top: 1px solid var(--papel-2); }
.lote__l:first-child { border-top: 0; }
.lote__l input { width: 18px; height: 18px; margin: 0; accent-color: var(--destaque); }
.lote__l--fora .lote__t, .lote__l--fora .lote__n { opacity: .55; }
.lote__n { color: var(--tinta-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.lote__t { display: flex; flex-direction: column; min-width: 0; font-weight: 500; }
.lote__t small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tinta-3); font-size: var(--t-xs); font-weight: 400; }
.lote__s { font-size: var(--t-sm); white-space: nowrap; color: var(--tinta-3); }
.lote__s--aviso { color: var(--terracota-tinta); }
.lote__s--erro { color: var(--vermelho-tinta); }
.lote__s--ok { color: var(--verde); }
@media (max-width: 640px) { .lote__l { grid-template-columns: 20px 36px minmax(0, 1fr); } .lote__s { grid-column: 3; white-space: normal; } }
.form__grade { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); margin-top: var(--esp-4); }
.form__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.form__acoes .b { text-decoration: none; }
.cores { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.cor { position: relative; width: var(--alvo); height: var(--alvo); border-radius: 12px; background: var(--c); cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.cor input { position: absolute; opacity: 0; }
.cor:has(input:checked) { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 2px var(--branco), 0 0 0 4px var(--destaque); }
.cor:has(input:focus-visible) { outline: 2px solid var(--destaque-tinta); outline-offset: 4px; }
.livro--novo { border-style: dashed; box-shadow: none; }
.capa--vazia { background: var(--papel-2); color: var(--tinta-3); border: 1px dashed var(--pedra-2); box-shadow: none; }
.capa--vazia svg { width: 26px; height: 26px; }
.cab__ferr { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); }
.cab__ferr .b { text-decoration: none; }
.nota--topo { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); }
.colocar { flex-basis: auto; }
.colocar[open] { flex-basis: 100%; }
.colocar > summary { list-style: none; width: fit-content; }
.colocar > summary::-webkit-details-marker { display: none; }
.colocar__form { display: flex; align-items: flex-end; gap: var(--esp-3); margin-top: var(--esp-3); padding: var(--esp-4); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); }
.campo--n { width: 110px; flex: none; }
.info { margin-bottom: var(--esp-4); gap: var(--esp-2); }
.info .secao { margin: 0 0 var(--esp-2); }
.info dl { display: flex; flex-direction: column; width: 100%; margin: 0; }
.info__l { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--esp-4); padding: var(--esp-3) 0; border-top: 1px solid var(--papel-2); }
.info__l:first-child { border-top: 0; }
.info dt { color: var(--tinta-3); font-size: var(--t-sm); }
.info dd { margin: 0; overflow-wrap: anywhere; }
.info dd a { color: var(--destaque-tinta); }
.info__vazio { color: var(--tinta-3); }
.versoes { width: 100%; margin: 0; padding: 0; list-style: none; }
.versoes li { padding: var(--esp-3) 0; border-top: 1px solid var(--papel-2); }
.versoes summary { cursor: pointer; }
.versao__letra { margin: var(--esp-3) 0; padding: var(--esp-4); border-radius: var(--r-sm); background: var(--papel); font: 400 var(--t-base)/1.6 var(--sans); white-space: pre-wrap; }
/* Entrar (login do painel) */
.entrar { display: grid; place-items: center; min-height: 100vh; padding: var(--esp-6) var(--esp-4); }
.entrar__c { width: min(100%, 420px); gap: var(--esp-4); padding: var(--esp-8); }
.entrar__c .marca { padding: 0; }
.entrar__c .marca svg { width: 34px; height: 34px; stroke: var(--destaque-tinta); stroke-width: 1.5; }
.entrar__c h1 { margin: var(--esp-2) 0 0; font: 600 var(--t-3xl)/1.15 var(--titulo); }
.entrar__c p { color: var(--tinta-2); font-size: var(--t-md); }
.entrar__erro { min-height: 1em; margin: 0; color: var(--vermelho-tinta) !important; }
.entrar__c .b { width: 100%; }
/* Ajustes e Conta: lista compacta */
.aj-lista { gap: 0; padding: 0 var(--esp-5); }
.aj { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); width: 100%; min-height: 64px; padding: var(--esp-3) 0; border-top: 1px solid var(--pedra); color: inherit; text-decoration: none; }
.aj:first-child { border-top: 0; }
.aj__t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.aj__t b { font-weight: 600; }
.aj__t small { color: var(--tinta-3); font-size: var(--t-sm); }
.aj__v { flex: none; max-width: 50%; color: var(--tinta-2); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.aj--link:hover .aj__t b { color: var(--destaque-tinta); }
.aj--link > svg { color: var(--tinta-3); }
.aj__on { display: inline-flex; align-items: center; gap: var(--esp-2); }
.aj__on i { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.aj__on--off i { background: var(--terracota); }
.seg { flex: none; display: inline-flex; padding: 3px; border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--papel); }
.seg label { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--esp-3); border-radius: 7px; color: var(--tinta-2); font-size: var(--t-md); font-weight: 500; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--branco); color: var(--carvao); box-shadow: var(--sombra); }
.seg label:has(input:focus-visible) { box-shadow: var(--foco); }
.conta-card[aria-current="page"] { border-color: var(--destaque); }
/* Editor de letra: linhas; coro marcado por seleção */
.ed-letra { display: flex; flex-direction: column; border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--campo); overflow: hidden; }
.ed-letra:focus-within { border-color: var(--destaque); box-shadow: var(--foco); }
.ed-letra__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); padding: var(--esp-2); border-bottom: 1px solid var(--pedra); background: var(--papel); }
.ed-letra__barra .b { min-height: 36px; }
.ed-letra__dica { color: var(--tinta-3); font-size: var(--t-sm); }
.ed-letra__txt { min-height: 280px; max-height: 60vh; overflow-y: auto; padding: var(--esp-3) var(--esp-4); font: 400 var(--t-lg)/1.6 var(--sans); color: var(--carvao); outline: none; white-space: pre-wrap; }
.ed-letra__txt > div { padding: 0 var(--esp-2); border-radius: 4px; }
.ed-letra__txt > .ln--c { background: var(--coro-fundo); box-shadow: inset 3px 0 0 var(--coro-borda); color: var(--carvao); }
/* Configurações › Apresentação: visuais da letra */
.visuais { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--esp-4); width: 100%; margin: 0 0 var(--esp-4); padding: 0; list-style: none; }
.visual { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-3); border: 1px solid var(--pedra); border-radius: var(--r); background: var(--branco); }
.visual--uso { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque); }
.visual__info { display: flex; align-items: center; gap: var(--esp-2); min-height: 36px; padding-left: var(--esp-1); }
.visual__info b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.visual__info .selo { margin: 0; }
.visual__info .b { height: 36px; min-height: 36px; padding: 0 var(--esp-3); text-decoration: none; }
.selo--uso { background: var(--destaque-suave); color: var(--destaque-tinta); }
.visual-ed { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--esp-6); align-items: start; }
.visual-ed__previa { position: sticky; top: var(--abaixo-topo); display: flex; flex-direction: column; gap: var(--esp-3); }
.visual-ed__previa .previa__tela { border-radius: var(--r); }
.opcao--linha { align-items: center; border: 0; padding: 0; }
.opcoes--linha { flex-direction: row; flex-wrap: wrap; }
.opcoes--linha .opcao { flex: 1; }
.campo .opcao input { width: auto; min-height: 0; padding: 0; flex: none; } /* rádio dentro de .campo não herda a altura dos campos */
.cab__acoes .seq__filtro { height: var(--alvo); }
.opcao input[type=color], .campo input[type=color] { width: 56px; height: 36px; padding: 2px; border: 1px solid var(--pedra); border-radius: var(--r-sm); background: var(--campo); }
.campo input[type=color] { width: 100%; }
.opcao input[type=file] { margin-top: var(--esp-2); font-size: var(--t-sm); }
.campo input[type=range] { padding: 0; accent-color: var(--destaque); }
/* telão: início de cada hino da sequência na grade de partes */
.partes__novo { grid-column-start: 1; }
@media (max-width: 1180px) {
  .seq { grid-template-columns: minmax(0, 1fr); }
  .seq__lado { position: static; max-height: none; }
}

@media (min-width: 761px) { .so-celular { display: none !important; } }
/* Celular: a barra lateral vira uma barra fixa embaixo */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* celular: a navegação vira uma barra fixa embaixo, ao alcance do polegar */
  .lado { position: fixed; z-index: 10; inset: auto 0 0 0; height: auto; display: block; padding: var(--esp-1) var(--esp-2) calc(var(--esp-1) + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--pedra); background: var(--branco); }
  .lado > .marca, .lado__meio, .lado__pe { display: none; }
  .nav { flex-direction: row; justify-content: space-around; gap: 0; }
  .nav a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 54px; padding: var(--esp-1) 2px; font-size: var(--t-2xs); font-weight: 500; text-align: center; white-space: nowrap; }
  .nav a svg { width: 22px; height: 22px; }
  .principal { padding: var(--esp-5) var(--esp-4) calc(var(--esp-24) + env(safe-area-inset-bottom)); }
  .controle { bottom: calc(63px + env(safe-area-inset-bottom)); }
  .topo { margin-top: calc(-1 * var(--esp-5)); padding-top: var(--esp-5); }
  .cab { flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
  .cab__info { text-align: left; }
  .lista__cab { display: none; }
  .linha__ver { grid-column: 3; grid-row: 1 / span 2; align-self: center; opacity: 1; padding: var(--esp-2) 0 var(--esp-2) var(--esp-2); }
  .previas { grid-template-columns: minmax(0, 1fr); }
  .visual-ed { grid-template-columns: minmax(0, 1fr); }
  .aj:has(.seg) { flex-wrap: wrap; } /* só o seletor de tema desce; valores e botões ficam à direita */
  .aj:has(.seg) .aj__t { flex-basis: 100%; }
  .cab__ferr { width: 100%; }
  .cab__ferr .b { flex: 1 1 auto; justify-content: center; white-space: nowrap; } /* linhas cheias, sem sobra torta à direita */
  .visual-ed__previa { position: static; }
  .controle__dica { display: none; }
  .linha { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px var(--esp-3); padding: var(--esp-2) var(--esp-4); }
  .linha__d { grid-column: 2; margin-top: calc(-1 * var(--esp-1)); }
  .bloco p { font-size: var(--t-lg); }
  .letra-cartao { padding: var(--esp-5) var(--esp-5) var(--esp-1); }
  .atalhos { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
  .atalho, .atalho:nth-child(4):nth-last-child(2), .atalho:nth-child(5):nth-last-child(1) { grid-column: auto; }
  .atalho { padding: var(--esp-4) var(--esp-12) var(--esp-4) var(--esp-4); }
  .atalho > svg:first-child { margin-bottom: var(--esp-1); }
  /* sequência no celular: a corrente desce em coluna */
  .corrente { flex-direction: column; align-items: stretch; gap: var(--esp-5); padding: var(--esp-5); }
  .corrente__ini { align-self: flex-start; }
  .no { width: auto; }
  .corrente > :not(:first-child)::before { left: 28px; top: -18px; width: 0; height: 18px; border-top: 0; border-left: 1.5px solid var(--pedra-2); }
  .apresentar { padding: 0 var(--esp-4) 0 var(--esp-3); }
  .so-largo { display: none; }
  :root[data-tela="inicio"] .principal { padding: var(--esp-5) var(--esp-4) var(--esp-10); } /* sem a barra de baixo */
  .inicio__hero { padding: var(--esp-6) 0 var(--esp-8); }
  .inicio__hero p { margin-bottom: var(--esp-5); }
  .form__linha, .form__grade, .info__l { grid-template-columns: minmax(0, 1fr); }
  .form__link, .form__dica, .colocar__form { flex-direction: column; align-items: stretch; }
  .campo--n { width: 100%; }
    }

/* Impressão: só a letra (o navegador oferece "Salvar como PDF"); o conteúdo vem de imprimir() em #impressao */
#impressao { display: none; }
@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #000; }
  .app, .pular { display: none !important; }
  #impressao { display: block; font: 400 13pt/1.5 var(--sans); color: #000; }
  .imp__seq { margin: 0 0 8mm; font: 700 20pt/1.2 var(--titulo); }
  .imp__hino { break-inside: auto; margin-bottom: 10mm; }
  .imp__hino h2 { margin: 0; font: 700 18pt/1.2 var(--titulo); }
  .imp__sub { margin: 1mm 0 6mm; color: #555; font-size: 10pt; }
  .imp__b { break-inside: avoid; margin: 0 0 5mm; }
  .imp__b span { display: block; color: #666; font-size: 8pt; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .imp__b p { margin: 1mm 0 0; }
  .imp__b--c { padding-left: 5mm; border-left: 1.5pt solid #999; }
}