/* Voz a Voz — estilos dos componentes e do layout.
   Todo valor de cor, espaço, raio, sombra, camada e movimento vem de tokens.css (gerado de tokens.json).
   As fontes (Atkinson Hyperlegible Next e Literata) vêm do <link> do Google Fonts no index.html. */

/* ───────────── Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
[data-theme="escuro"] { color-scheme: dark; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 400 17px/26px var(--font-ui);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.hc-num { font-variant-numeric: tabular-nums lining-nums; }
.hc-so-leitor { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Ícones (Lucide, traço 2) */
.hc-icone { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-icone--cheio { fill: currentColor; }
.hc-icone--girando { animation: hc-girar 900ms linear infinite; }
@keyframes hc-girar { to { transform: rotate(360deg); } }

/* ───────────── Botão ───────────── */
.hc-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  min-height: var(--alvo); padding: 0 var(--espaco-5);
  border: 1.5px solid var(--linha-forte); border-radius: var(--raio-1);
  background: var(--superficie); color: var(--tinta);
  font: 700 16px/20px var(--font-ui); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-rapida), border-color var(--dur-rapida);
}
.hc-botao:hover { background: var(--superficie-2); }
.hc-botao:active { transform: translateY(1px); }
.hc-botao .hc-icone { width: 20px; height: 20px; margin-left: -4px; }
.hc-botao--primario { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }
.hc-botao--primario:hover { background: color-mix(in srgb, var(--acao) 86%, var(--fundo)); }
.hc-botao--discreto { background: transparent; border-color: transparent; }
.hc-botao--discreto:hover { background: var(--superficie-2); }
.hc-botao--bloco { width: 100%; }
.hc-botao:disabled, .hc-botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* ───────────── Botão de ícone ───────────── */
.hc-botao-icone {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--alvo); height: var(--alvo); padding: 0;
  border: 0; border-radius: var(--raio-1); background: transparent; color: var(--tinta);
  transition: background-color var(--dur-rapida);
}
.hc-botao-icone:hover { background: var(--superficie-2); }
.hc-botao-icone:disabled { opacity: .4; cursor: not-allowed; background: transparent; }
.hc-botao-icone[aria-pressed="true"] { color: var(--ouro-texto); }
.hc-botao-icone[aria-pressed="true"] .hc-icone { fill: currentColor; }
.hc-botao-icone--rotulado {
  width: auto; min-width: 60px; height: auto; min-height: 56px; padding: 4px 6px;
  grid-template-rows: 24px 16px; gap: 3px; align-content: center;
  font: 700 14px/16px var(--font-ui); letter-spacing: .01em;
}
.hc-botao-icone[aria-expanded="true"] { background: var(--superficie-2); }
.hc-botao-icone__selo {
  position: absolute; top: 5px; right: calc(50% - 18px); width: 10px; height: 10px; border-radius: 50%;
  background: var(--ouro); box-shadow: 0 0 0 2px var(--superficie);
}

/* ───────────── Botão Tocar ───────────── */
.hc-tocar {
  display: grid; place-items: center; flex: none; position: relative;
  width: var(--tocar); height: var(--tocar); padding: 0;
  border: 0; border-radius: var(--raio-pilula);
  background: var(--acao); color: var(--sobre-acao); box-shadow: var(--sombra-polegar);
  transition: transform var(--dur-rapida) var(--curva), background-color var(--dur-rapida);
}
.hc-tocar .hc-icone { width: 30px; height: 30px; fill: currentColor; stroke-width: 1.5; }
.hc-tocar[data-estado="parado"] .hc-icone { transform: translateX(2px); }
.hc-tocar:hover { background: color-mix(in srgb, var(--acao) 86%, var(--fundo)); }
.hc-tocar:active { transform: scale(.95); }
.hc-tocar[data-estado="tocando"]::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 3px solid var(--ouro); pointer-events: none;
}
.hc-tocar[data-estado="carregando"] .hc-icone { fill: none; stroke-width: 2.5; }
.hc-tocar--grande { width: var(--tocar-grande); height: var(--tocar-grande); }
.hc-tocar--grande .hc-icone { width: 34px; height: 34px; }

/* ───────────── Faixa (input range) — base do deslizante e da linha do tempo ───────────── */
.hc-faixa {
  --cor: var(--acao); --valor: 50%; --vazio: color-mix(in srgb, var(--linha-forte) 40%, transparent);
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: var(--alvo); margin: 0; background: transparent; cursor: pointer; touch-action: pan-y;
}
.hc-faixa::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--cor) 0 var(--valor), var(--vazio) var(--valor) 100%);
}
.hc-faixa::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--cor); border: 3px solid var(--superficie); box-shadow: var(--sombra-polegar);
}
.hc-faixa::-moz-range-track { height: 6px; border-radius: 3px; background: var(--vazio); }
.hc-faixa::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--cor); }
.hc-faixa::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cor); border: 3px solid var(--superficie); box-shadow: var(--sombra-polegar);
}
.hc-faixa:focus-visible { outline: none; }
.hc-faixa:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--foco); outline-offset: 2px; }
.hc-faixa:focus-visible::-moz-range-thumb { outline: 3px solid var(--foco); outline-offset: 2px; }
.hc-faixa:disabled { opacity: .4; cursor: not-allowed; }

/* ───────────── Deslizante ───────────── */
.hc-deslizante { display: grid; }
.hc-deslizante__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-3); }
.hc-deslizante__nome { font: 700 16px/20px var(--font-ui); }
.hc-deslizante__valor { font: 400 15px/20px var(--font-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.hc-deslizante__valor strong { color: var(--tinta); font-weight: 700; }

/* ───────────── Interruptor ───────────── */
.hc-interruptor {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3);
  min-height: var(--alvo); cursor: pointer; font: 400 17px/24px var(--font-ui);
}
.hc-interruptor__texto { display: grid; }
.hc-interruptor__ajuda { font: 400 15px/20px var(--font-ui); color: var(--tinta-2); }
.hc-interruptor input, .hc-voz input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hc-interruptor__trilho {
  position: relative; flex: none; width: 52px; height: 32px; border-radius: 16px;
  background: var(--superficie-2); border: 2px solid var(--linha-forte);
  transition: background-color var(--dur-rapida), border-color var(--dur-rapida);
}
.hc-interruptor__trilho::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--linha-forte); box-shadow: var(--sombra-polegar);
  transition: transform var(--dur-rapida) var(--curva), background-color var(--dur-rapida);
}
input:checked + .hc-interruptor__trilho { background: var(--cor, var(--acao)); border-color: var(--cor, var(--acao)); }
input:checked + .hc-interruptor__trilho::after { transform: translateX(20px); background: var(--superficie); }
input:focus-visible + .hc-interruptor__trilho { outline: 3px solid var(--foco); outline-offset: 2px; }
input:disabled + .hc-interruptor__trilho { opacity: .4; }

/* ───────────── Segmentado (timbre, destaque de voz, tema, presets) ───────────── */
.hc-segmentado {
  display: flex; gap: 4px; padding: 4px; margin: 0; min-width: 0;
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: calc(var(--raio-1) + 4px);
}
.hc-segmentado > label { position: relative; flex: 1 1 auto; display: flex; }
.hc-segmentado input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hc-segmentado__opcao {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--alvo); padding: 0 10px; border-radius: var(--raio-1);
  font: 700 15px/18px var(--font-ui); color: var(--tinta-2); text-align: center;
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}
.hc-segmentado__opcao .hc-icone { width: 20px; height: 20px; }
.hc-segmentado input:hover + .hc-segmentado__opcao { color: var(--tinta); }
.hc-segmentado input:checked + .hc-segmentado__opcao { background: var(--acao); color: var(--sobre-acao); box-shadow: var(--sombra-polegar); }
.hc-segmentado input:focus-visible + .hc-segmentado__opcao { outline: 3px solid var(--foco); outline-offset: 2px; }
.hc-segmentado--quebra { flex-wrap: wrap; }
.hc-segmentado--quebra > label { flex: 1 1 30%; }

/* Cabeça de nota: a amostra de cor das vozes (uma elipse inclinada, como a nota impressa) */
.hc-cabeca {
  display: inline-block; flex: none; width: 17px; height: 12px; border-radius: 50%;
  background: var(--cor); border: 2px solid var(--cor); transform: rotate(-22deg);
}
.hc-cabeca--vazia { background: transparent; }

/* ───────────── Chip de voz (linha com liga/desliga e volume) ───────────── */
.hc-voz {
  display: grid; gap: 0; padding: 4px var(--espaco-3) 0 var(--espaco-4);
  border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie);
}
.hc-voz__topo { position: relative; display: flex; align-items: center; gap: var(--espaco-3); min-height: var(--alvo); cursor: pointer; }
.hc-voz__nome { flex: 1; font: 700 17px/24px var(--font-ui); }
.hc-voz__nome small { display: block; font: 400 15px/20px var(--font-ui); color: var(--tinta-2); }
.hc-voz__volume { display: flex; align-items: center; gap: var(--espaco-2); color: var(--tinta-2); padding-left: 29px; }
.hc-voz__volume .hc-icone { width: 20px; height: 20px; }
.hc-voz__volume output { min-width: 3.2em; text-align: right; font: 400 15px/20px var(--font-ui); font-variant-numeric: tabular-nums; }
.hc-voz:has(input[type="checkbox"]:not(:checked)) .hc-cabeca { background: transparent; }
.hc-voz:has(input[type="checkbox"]:not(:checked)) .hc-voz__nome { color: var(--tinta-2); font-weight: 400; }
.hc-voz:has(input[type="checkbox"]:not(:checked)) .hc-voz__volume { opacity: .45; }
.hc-voz[data-destaque] { border-color: var(--cor); box-shadow: inset 0 0 0 1px var(--cor); }

/* Selo S A T B (quais vozes têm som) */
.hc-selo-vozes { display: inline-flex; gap: var(--espaco-1); align-items: center; }
.hc-selo {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 5px; border: 1.5px solid var(--cor, var(--linha-forte));
  background: color-mix(in srgb, var(--cor, var(--superficie-2)) 14%, var(--superficie));
  font: 700 14px/16px var(--font-ui); color: var(--tinta);
}
.hc-selo--texto { padding: 0 8px; border-color: var(--linha-forte); background: var(--superficie-2); color: var(--tinta-2); font-weight: 400; }

/* ───────────── Busca ───────────── */
.hc-busca { position: relative; }
.hc-busca__campo {
  -webkit-appearance: none; appearance: none; width: 100%; height: 56px; padding: 0 52px;
  border: 2px solid var(--linha-forte); border-radius: var(--raio-2);
  background: var(--superficie); color: var(--tinta); font: 400 19px/24px var(--font-ui);
}
.hc-busca__campo::placeholder { color: var(--tinta-2); opacity: 1; }
.hc-busca__campo::-webkit-search-cancel-button { display: none; }
.hc-busca__campo:focus-visible { border-color: var(--tinta); }
.hc-busca > .hc-icone { position: absolute; left: 16px; top: 16px; color: var(--tinta-2); pointer-events: none; }
.hc-busca__limpar { position: absolute; right: 4px; top: 4px; }
.hc-busca__campo:placeholder-shown ~ .hc-busca__limpar { display: none; }
.hc-busca__resultados {
  list-style: none; margin: var(--espaco-2) 0 0; padding: 4px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2); box-shadow: var(--sombra-flutuante);
}
.hc-busca__resultados:empty { display: none; }
.hc-busca__resultados li { border-radius: var(--raio-1); }
.hc-busca__resultados li[aria-selected="true"] { background: var(--ouro-suave); }
.hc-busca__vazio { padding: var(--espaco-3) var(--espaco-4); color: var(--tinta-2); }

/* ───────────── Teclado numérico ───────────── */
.hc-teclado { display: grid; gap: var(--espaco-3); }
.hc-teclado__visor { display: grid; justify-items: center; gap: 2px; padding: var(--espaco-2) 0 var(--espaco-3); border-bottom: 1px solid var(--linha); }
.hc-teclado__numero {
  min-height: 60px; font: 600 56px/60px var(--font-livro); letter-spacing: .04em; color: var(--tinta);
  font-variant-numeric: tabular-nums lining-nums;
}
.hc-teclado__numero:empty::before { content: "—"; color: var(--linha-forte); }
.hc-teclado__titulo { min-height: 24px; text-align: center; font: 400 17px/24px var(--font-ui); color: var(--tinta-2); }
.hc-teclado__titulo[data-achou] { color: var(--tinta); font-weight: 700; }
.hc-teclado__titulo[data-erro] { color: var(--perigo); }
.hc-teclado__teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espaco-2); }
.hc-tecla {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 60px;
  border: 1px solid var(--linha); border-radius: var(--raio-1); background: var(--superficie-2); color: var(--tinta);
  font: 600 28px/1 var(--font-livro); font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--dur-rapida);
}
.hc-tecla:hover { background: color-mix(in srgb, var(--superficie-2) 70%, var(--linha-forte)); }
.hc-tecla:active { transform: translateY(1px); }
.hc-tecla--acao { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); font: 700 18px/1 var(--font-ui); }
.hc-tecla--acao:hover { background: color-mix(in srgb, var(--acao) 86%, var(--fundo)); }
.hc-tecla--acao:disabled { opacity: .35; cursor: not-allowed; }
.hc-tecla--discreta { background: transparent; }

/* ───────────── Cartão de hino (item de lista) ───────────── */
.hc-hinos { list-style: none; margin: 0; padding: 0; }
.hc-hinos > li + li { border-top: 1px solid var(--linha); }
.hc-hino-item {
  display: grid; grid-template-columns: 3.2ch 1fr auto; align-items: center; column-gap: var(--espaco-4);
  min-height: 64px; padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio-1);
  color: var(--tinta); text-decoration: none;
}
.hc-hino-item:hover { background: var(--superficie-2); }
.hc-hino-item[aria-current="page"] { background: var(--ouro-suave); }
.hc-hino-item__numero {
  justify-self: end; font: 600 20px/24px var(--font-livro); color: var(--ouro-texto);
  font-variant-numeric: tabular-nums lining-nums;
}
.hc-hino-item__corpo { display: grid; gap: 4px; min-width: 0; }
.hc-hino-item__titulo { font: 700 17px/24px var(--font-ui); overflow-wrap: anywhere; }
.hc-hino-item__titulo--vazio { font-weight: 400; color: var(--tinta-2); }
.hc-hino-item > .hc-icone { color: var(--tinta-2); }
.hc-hino-item__fav { width: 20px; height: 20px; color: var(--ouro-texto); fill: currentColor; }
.hc-hino-item--cartao { border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie); }
.hc-hino-item--cartao:hover { border-color: var(--linha-forte); background: var(--superficie); }

/* ───────────── Painel de letra ───────────── */
.hc-letra { max-width: var(--leitura); }
.hc-letra__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); }
.hc-letra__alternar {
  display: inline-flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo); padding: 0 var(--espaco-2) 0 0;
  border: 0; background: none; font: 600 22px/28px var(--font-livro); color: var(--tinta);
}
.hc-letra__alternar .hc-icone { transition: transform var(--dur-media) var(--curva); }
.hc-letra__alternar[aria-expanded="false"] .hc-icone { transform: rotate(-90deg); }
.hc-letra__corpo { display: grid; gap: var(--espaco-5); padding: var(--espaco-3) 0 var(--espaco-2); }
.hc-letra__corpo[hidden] { display: none; }
.hc-estrofe { margin: 0; }
.hc-estrofe__rotulo { margin: 0 0 2px; font: italic 600 15px/20px var(--font-livro); color: var(--ouro-texto); }
.hc-estrofe__texto { margin: 0; font: 400 19px/32px var(--font-livro); white-space: pre-line; user-select: text; }
.hc-estrofe--coro .hc-estrofe__texto { padding-left: 1.5em; font-style: italic; }

/* ───────────── Cartão de nota selecionada ───────────── */
.hc-nota {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: var(--espaco-1);
  padding: var(--espaco-2) var(--espaco-2) var(--espaco-3) var(--espaco-4);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2); box-shadow: var(--sombra-flutuante);
}
.hc-nota__voz { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--espaco-2); padding-top: var(--espaco-2); font: 700 15px/20px var(--font-ui); color: var(--tinta-2); }
.hc-nota__nome { grid-area: 2 / 1; margin-top: 2px; font: 600 28px/34px var(--font-livro); color: var(--tinta); }
.hc-nota__detalhes { grid-area: 3 / 1 / 4 / -1; font: 400 15px/22px var(--font-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.hc-nota > .hc-botao-icone { grid-row: 1 / 3; grid-column: 2; }
.hc-nota > .hc-botao-icone + .hc-botao-icone { grid-column: 3; }

/* ───────────── Aviso flutuante ───────────── */
.hc-aviso {
  position: fixed; left: 50%; bottom: calc(var(--hc-altura-tocador, 0px) + var(--espaco-4)); z-index: var(--z-aviso);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 12px 22px 12px 16px; border-radius: var(--raio-pilula);
  background: var(--aviso-fundo); color: var(--aviso-texto); box-shadow: var(--sombra-flutuante);
  font: 700 16px/20px var(--font-ui);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity var(--dur-media), transform var(--dur-media) var(--curva);
}
.hc-aviso[data-visivel] { opacity: 1; transform: translate(-50%, 0); }
.hc-aviso--estatico { position: static; transform: none; opacity: 1; display: inline-flex; }

/* ───────────── Marca ───────────── */
.hc-marca { display: inline-flex; align-items: center; gap: 10px; min-height: var(--alvo); color: var(--tinta); text-decoration: none; }
.hc-marca__vozes { position: relative; width: 26px; height: 26px; flex: none; }
.hc-marca__vozes i { position: absolute; width: 11px; height: 8px; border-radius: 50%; transform: rotate(-22deg); }
.hc-marca__vozes i:nth-child(1) { background: var(--voz-soprano);   left: 15px; top: 0; }
.hc-marca__vozes i:nth-child(2) { background: var(--voz-contralto); left: 10px; top: 6px; }
.hc-marca__vozes i:nth-child(3) { background: var(--voz-tenor);     left: 5px;  top: 12px; }
.hc-marca__vozes i:nth-child(4) { background: var(--voz-baixo);     left: 0;    top: 18px; }
.hc-marca__texto { display: grid; }
.hc-marca__nome { font: 600 21px/24px var(--font-livro); letter-spacing: -.005em; }
.hc-marca__sub { font: 400 13px/16px var(--font-ui); color: var(--tinta-2); }
.hc-marca--compacta .hc-marca__sub { display: none; }

/* ───────────── Seletor de hino ‹ 515 › ───────────── */
.hc-paginador { display: inline-flex; align-items: center; border: 1.5px solid var(--linha); border-radius: var(--raio-pilula); background: var(--superficie); }
.hc-paginador .hc-botao-icone { border-radius: var(--raio-pilula); }
.hc-paginador__numero {
  min-width: 72px; min-height: var(--alvo); padding: 0 10px; border: 0; background: none; border-radius: var(--raio-1);
  font: 600 22px/24px var(--font-livro); color: var(--ouro-texto); font-variant-numeric: tabular-nums lining-nums;
}
.hc-paginador__numero:hover { background: var(--superficie-2); }

/* ───────────── Abas ───────────── */
.hc-abas { display: flex; border-bottom: 1px solid var(--linha); }
.hc-aba {
  position: relative; flex: 1; min-height: var(--alvo); padding: 0 var(--espaco-3);
  border: 0; background: none; color: var(--tinta-2); font: 700 16px/20px var(--font-ui);
}
.hc-aba:hover { color: var(--tinta); }
.hc-aba[aria-selected="true"] { color: var(--tinta); }
.hc-aba[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--espaco-3); right: var(--espaco-3); bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--ouro-texto);
}
.hc-painel-aba { display: grid; gap: var(--espaco-5); padding: var(--espaco-4); }
.hc-painel-aba[hidden] { display: none; }

/* Grupo dentro da gaveta/painel */
.hc-grupo { display: grid; gap: var(--espaco-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.hc-grupo__titulo { padding: 0; font: 700 14px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.hc-grupo__ajuda { margin: 0; font: 400 15px/20px var(--font-ui); color: var(--tinta-2); }
.hc-novo {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--raio-pilula); vertical-align: 1px;
  background: var(--ouro-suave); color: var(--ouro-texto); font: 700 12px/16px var(--font-ui); letter-spacing: .04em; text-transform: uppercase;
}

/* ───────────── Ajuste − valor + ───────────── */
.hc-passo { justify-self: start; display: inline-flex; align-items: center; border: 1.5px solid var(--linha-forte); border-radius: var(--raio-1); background: var(--superficie); }
.hc-passo__valor { min-width: 4.5em; text-align: center; font: 700 16px/20px var(--font-ui); font-variant-numeric: tabular-nums; }

/* ───────────── Estados (carregando, não encontrado, sem conexão) ───────────── */
.hc-estado { display: grid; justify-items: center; align-content: start; gap: var(--espaco-3); max-width: 440px; margin: 0 auto; padding: var(--espaco-7) var(--espaco-5); text-align: center; }
.hc-estado__icone { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--superficie-2); color: var(--tinta); }
.hc-estado__icone .hc-icone { width: 32px; height: 32px; }
.hc-estado--erro .hc-estado__icone { background: var(--perigo-suave); color: var(--perigo); }
.hc-estado__titulo { margin: 0; font: 600 22px/28px var(--font-livro); }
.hc-estado__texto { margin: 0; color: var(--tinta-2); }
.hc-estado__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espaco-2); margin-top: var(--espaco-2); }

/* ───────────── Papel da partitura ───────────── */
.hc-papel {
  position: relative; max-width: var(--pagina); margin: 0 auto; padding: var(--espaco-4) var(--espaco-2);
  background: var(--papel); color: var(--papel-tinta); border-radius: var(--raio-papel); box-shadow: var(--sombra-papel);
  overflow-x: auto;
}
.hc-papel svg { display: block; margin: 0 auto; background: transparent !important; }
.hc-papel img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
/* textos que o motor desenha (o seletor .hc-papel vence o <style> interno do SVG) */
.hc-papel .h-title { font: 600 22px var(--font-livro); fill: var(--papel-tinta); }
.hc-papel .h-sub   { font: italic 400 13px var(--font-livro); fill: var(--papel-tinta-2); }
.hc-papel .h-lyr   { font: 400 14px var(--font-livro); fill: var(--papel-tinta); }
.hc-papel .h-lbl   { font: 700 14px var(--font-livro); fill: var(--papel-tinta); }
.hc-papel .h-chord { font: 700 14px var(--font-ui); fill: var(--cifra); }
.hc-papel .h-dyn   { font: italic 700 16px var(--font-livro); fill: var(--papel-tinta); }
.hc-papel .h-txt   { font: italic 400 13px var(--font-livro); fill: var(--papel-tinta-2); }
.hc-papel .h-nav   { font: italic 600 14px var(--font-livro); fill: var(--papel-tinta); }
.hc-papel .h-mnum  { font: 400 11px var(--font-ui); fill: var(--papel-tinta-2); }
.hc-papel .h-brt   { fill: var(--papel-tinta); }
.hc-papel .vf-stave > path { stroke: var(--papel-pauta); }
.hc-papel .h-cursor { fill: var(--cursor); }
.hc-papel .vf-stavenote { cursor: pointer; }
/* papel carregando: duas pautas vazias pulsando devagar */
.hc-papel--carregando { min-height: 420px; }
.hc-papel--carregando::before {
  content: ""; position: absolute; inset: 72px var(--espaco-5) auto; height: 300px;
  background:
    repeating-linear-gradient(to bottom, var(--linha) 0 1.5px, transparent 1.5px 10px) 0 0 / 100% 41px no-repeat,
    repeating-linear-gradient(to bottom, var(--linha) 0 1.5px, transparent 1.5px 10px) 0 80px / 100% 41px no-repeat,
    repeating-linear-gradient(to bottom, var(--linha) 0 1.5px, transparent 1.5px 10px) 0 190px / 100% 41px no-repeat,
    repeating-linear-gradient(to bottom, var(--linha) 0 1.5px, transparent 1.5px 10px) 0 270px / 100% 41px no-repeat;
  animation: hc-pulsar 1.6s ease-in-out infinite alternate;
}
.hc-papel--carregando::after {
  content: ""; position: absolute; left: 50%; top: 24px; width: 220px; height: 18px; margin-left: -110px;
  border-radius: 4px; background: var(--linha); animation: hc-pulsar 1.6s ease-in-out infinite alternate;
}
@keyframes hc-pulsar { from { opacity: .45; } to { opacity: 1; } }

/* ───────────── Cabeçalho ───────────── */
.hc-cabecalho {
  position: sticky; top: 0; z-index: var(--z-cabecalho);
  display: flex; align-items: center; gap: var(--espaco-1); height: var(--cabecalho); padding: 0 var(--espaco-2);
  background: var(--superficie); border-bottom: 1px solid var(--linha);
}
.hc-cabecalho__meio { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--espaco-3); min-width: 0; }
.hc-cabecalho__titulo { display: none; min-width: 0; font: 600 22px/28px var(--font-livro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-cabecalho__nav { display: none; gap: var(--espaco-1); }
.hc-cabecalho__nav a {
  display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--espaco-3);
  border-radius: var(--raio-1); font: 700 16px/20px var(--font-ui); text-decoration: none; color: var(--tinta);
}
.hc-cabecalho__nav a:hover { background: var(--superficie-2); }
.hc-cabecalho__nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ouro-texto); border-radius: 0; }

/* ───────────── Tocador ───────────── */
.hc-tocador {
  --hc-altura-tocador: 132px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tocador);
  display: grid; grid-template-areas: "info" "trilho" "controles"; padding: 6px var(--espaco-4) calc(4px + env(safe-area-inset-bottom));
  background: var(--superficie); box-shadow: var(--sombra-barra); border-radius: var(--raio-3) var(--raio-3) 0 0;
}
.hc-linha-tempo { display: contents; }
.hc-linha-tempo__info {
  grid-area: info; display: flex; justify-content: space-between; gap: var(--espaco-2);
  font: 400 15px/20px var(--font-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.hc-linha-tempo__info strong { color: var(--tinta); font-weight: 700; }
.hc-linha-tempo__trilho { grid-area: trilho; position: relative; height: 32px; display: flex; align-items: center; }
.hc-linha-tempo__trilho .hc-faixa { position: relative; height: 32px; }
.hc-linha-tempo__trecho {
  position: absolute; top: 8px; height: 16px; left: var(--de); width: calc(var(--ate) - var(--de));
  background: var(--ouro-suave); border-inline: 3px solid var(--ouro); border-radius: 3px; pointer-events: none;
}
.hc-linha-tempo--solta { display: grid; grid-template-areas: "info" "trilho"; }
.hc-tocador__controles { grid-area: controles; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 440px; margin: 0 auto; }
.hc-tocador__extras { display: none; }
.hc-tocador__hino { display: none; }

body:has(.hc-tocador) { --hc-altura-tocador: 132px; }
@media (min-width: 1024px) { body:has(.hc-tocador) { --hc-altura-tocador: 96px; } }

/* ───────────── Ajustes: gaveta (celular) / painel lateral (computador) ───────────── */
.hc-controles { display: flex; flex-direction: column; background: var(--superficie); min-height: 0; }
.hc-controles__alca { display: grid; place-items: center; height: 24px; border: 0; background: none; padding: 0; cursor: grab; }
.hc-controles__alca::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--linha-forte); }
.hc-controles__topo { display: flex; align-items: center; gap: var(--espaco-1); padding: 0 var(--espaco-2) 0 var(--espaco-2); border-bottom: 1px solid var(--linha); }
.hc-controles__topo .hc-abas { flex: 1; border-bottom: 0; }
.hc-controles__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.hc-veu { position: fixed; inset: 0; z-index: var(--z-veu); background: var(--veu); opacity: 0; pointer-events: none; transition: opacity var(--dur-media); }

/* ───────────── Telas ───────────── */
.hc-app { min-height: 100dvh; display: flex; flex-direction: column; background: var(--fundo); }
.hc-tela { flex: 1; width: 100%; max-width: var(--pagina); margin: 0 auto; padding: var(--espaco-5) var(--espaco-4) var(--espaco-7); }
.hc-tela__titulo { margin: 0 0 var(--espaco-4); font: 600 30px/36px var(--font-livro); }
.hc-secao { display: grid; gap: var(--espaco-2); align-content: start; }
.hc-secao__titulo { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-2); font: 600 22px/28px var(--font-livro); }
.hc-secao__titulo a { font: 700 16px/20px var(--font-ui); color: var(--tinta); }
.hc-cartao { padding: var(--espaco-4); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2); }
.hc-faixas-numero { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--espaco-2); }
.hc-faixas-numero a {
  display: grid; place-items: center; min-height: var(--alvo); border: 1px solid var(--linha); border-radius: var(--raio-1);
  background: var(--superficie); font: 700 16px/20px var(--font-ui); text-decoration: none; font-variant-numeric: tabular-nums;
}
.hc-faixas-numero a:hover { border-color: var(--linha-forte); }
.hc-texto { max-width: var(--leitura); }
.hc-texto h2 { margin: var(--espaco-6) 0 var(--espaco-2); font: 600 22px/28px var(--font-livro); }
.hc-texto p, .hc-texto li { margin: 0 0 var(--espaco-3); }
.hc-passos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--espaco-3); }
.hc-passos li { display: grid; grid-template-columns: 48px 1fr; gap: var(--espaco-3); align-items: start; margin: 0; }
.hc-passos .hc-estado__icone { width: 48px; height: 48px; }
.hc-passos .hc-estado__icone .hc-icone { width: 24px; height: 24px; }
.hc-rodape { padding: var(--espaco-5) var(--espaco-4) var(--espaco-6); text-align: center; font: 400 15px/22px var(--font-ui); color: var(--tinta-2); border-top: 1px solid var(--linha); }

/* Início */
.hc-inicio { display: grid; gap: var(--espaco-6); align-content: start; }
.hc-inicio__topo { display: grid; gap: var(--espaco-4); }
.hc-inicio__topo .hc-tela__titulo { margin: 0; }
.hc-inicio__ou { margin: var(--espaco-2) 0 calc(-1 * var(--espaco-2)); font: 700 16px/20px var(--font-ui); color: var(--tinta-2); }
.hc-inicio__colunas { display: grid; gap: var(--espaco-6); align-items: start; }
.hc-inicio__colunas .hc-hinos { padding: 4px; }
.hc-vazio { margin: 0; padding: var(--espaco-4); color: var(--tinta-2); }

/* Lista */
.hc-lista__filtro { position: sticky; top: var(--cabecalho); z-index: 2; display: grid; gap: var(--espaco-3); margin: 0 calc(-1 * var(--espaco-4)); padding: var(--espaco-3) var(--espaco-4); background: var(--fundo); }
.hc-lista__faixas { display: flex; gap: var(--espaco-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hc-lista__faixas a {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pilula); background: var(--superficie); font: 700 15px/18px var(--font-ui); text-decoration: none; font-variant-numeric: tabular-nums;
}
.hc-lista__faixas a[aria-current="true"] { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }
.hc-lista__contagem { margin: 0; font: 400 15px/20px var(--font-ui); color: var(--tinta-2); }
.hc-lista .hc-hinos > li { content-visibility: auto; contain-intrinsic-size: auto 72px; }

/* Tela do hino */
.hc-hino { --hc-altura-tocador: 132px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; }
.hc-hino__partitura { min-width: 0; padding: var(--espaco-2) var(--espaco-2) calc(var(--hc-altura-tocador) + var(--espaco-5)); }
.hc-hino__partitura > .hc-letra { margin: var(--espaco-5) auto 0; padding: 0 var(--espaco-2); }
.hc-hino__vizinhos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-2); max-width: var(--leitura); margin: var(--espaco-5) auto 0; }
.hc-hino__vizinhos a { display: grid; gap: 2px; padding: var(--espaco-3); border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie); text-decoration: none; min-height: var(--alvo); }
.hc-hino__vizinhos a:last-child { text-align: right; }
.hc-hino__vizinhos small { font: 400 15px/20px var(--font-ui); color: var(--tinta-2); }
.hc-hino__vizinhos strong { font: 700 16px/22px var(--font-ui); }
.hc-hino__nota { position: fixed; left: var(--espaco-2); right: var(--espaco-2); bottom: calc(var(--hc-altura-tocador) + var(--espaco-2)); z-index: var(--z-aviso); }
.hc-hino__nota[hidden] { display: none; }

/* Folha de diálogo (Ir para outro hino) */
.hc-folha {
  width: min(420px, 100vw); max-height: 100dvh; margin: auto auto 0; padding: var(--espaco-2) var(--espaco-4) calc(var(--espaco-4) + env(safe-area-inset-bottom));
  border: 0; border-radius: var(--raio-3) var(--raio-3) 0 0; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-flutuante);
}
.hc-folha::backdrop { background: var(--veu); }
.hc-folha__topo { display: flex; align-items: center; justify-content: space-between; }
.hc-folha__titulo { margin: 0; font: 600 22px/28px var(--font-livro); }

/* ───────────── Celular e tablet: gaveta ───────────── */
@media (max-width: 1023.98px) {
  .hc-controles {
    position: fixed; left: 0; right: 0; bottom: var(--hc-altura-tocador); z-index: var(--z-gaveta);
    max-height: calc(100dvh - var(--cabecalho) - var(--hc-altura-tocador) - 16px);
    border-radius: var(--raio-3) var(--raio-3) 0 0; box-shadow: var(--sombra-flutuante);
    transform: translateY(calc(100% + var(--hc-altura-tocador))); visibility: hidden;
    transition: transform var(--dur-media) var(--curva), visibility 0s linear var(--dur-media);
  }
  .hc-hino[data-controles="aberto"] .hc-controles { transform: none; visibility: visible; transition: transform var(--dur-media) var(--curva); }
  .hc-hino[data-controles="aberto"] .hc-veu { opacity: 1; pointer-events: auto; }
  .hc-hino[data-controles="aberto"] .hc-hino__nota { display: none; }
  .hc-controles__corpo { padding-bottom: var(--espaco-3); }
}
@media (min-width: 560px) and (max-width: 1023.98px) {
  .hc-controles { left: 50%; right: auto; width: 520px; margin-left: -260px; }
  .hc-hino__nota { left: 50%; right: auto; width: 440px; margin-left: -220px; }
}

/* ───────────── Tablet ───────────── */
@media (min-width: 720px) {
  .hc-cabecalho { padding: 0 var(--espaco-4); gap: var(--espaco-2); }
  .hc-cabecalho__nav { display: flex; }
  .hc-hino__partitura { padding-left: var(--espaco-5); padding-right: var(--espaco-5); padding-top: var(--espaco-5); }
  .hc-papel { padding: var(--espaco-6) var(--espaco-5); }
  .hc-tela { padding: var(--espaco-7) var(--espaco-5) var(--espaco-8); }
}

/* ───────────── Computador ───────────── */
@media (min-width: 1024px) {
  .hc-cabecalho__meio { justify-content: flex-start; }
  .hc-cabecalho__titulo { display: block; }
  .hc-hino { --hc-altura-tocador: 96px; grid-template-columns: minmax(0, 1fr) 0; }
  .hc-hino[data-controles="aberto"] { grid-template-columns: minmax(0, 1fr) var(--painel); }
  .hc-controles {
    position: sticky; top: var(--cabecalho); height: calc(100dvh - var(--cabecalho) - var(--hc-altura-tocador));
    border-left: 1px solid var(--linha); overflow: hidden;
  }
  .hc-hino:not([data-controles="aberto"]) .hc-controles { display: none; }
  .hc-controles__alca, .hc-controles__fechar, .hc-veu { display: none; }
  .hc-controles__topo { padding: 0 var(--espaco-2); }
  .hc-hino__partitura { padding: var(--espaco-5) var(--espaco-5) calc(var(--hc-altura-tocador) + var(--espaco-6)); }
  .hc-hino__nota { left: var(--espaco-5); right: auto; width: 380px; margin: 0; bottom: calc(var(--hc-altura-tocador) + var(--espaco-4)); }

  .hc-tocador {
    --hc-altura-tocador: 96px; border-radius: 0; padding: 0 var(--espaco-5) 8px; column-gap: var(--espaco-5);
    grid-template-columns: 1fr auto 1fr; grid-template-areas: "trilho trilho trilho" "info controles extras";
    align-items: center;
  }
  .hc-linha-tempo__trilho { height: 24px; margin: 0 calc(-1 * var(--espaco-5)); padding: 0 var(--espaco-5); }
  .hc-linha-tempo__trilho .hc-faixa { height: 24px; }
  .hc-linha-tempo__trecho { top: 4px; }
  .hc-linha-tempo__info { flex-direction: column; justify-content: center; gap: 0; }
  .hc-tocador__controles { width: auto; gap: var(--espaco-2); }
  .hc-tocador__controles .hc-tocar { width: var(--tocar); height: var(--tocar); }
  .hc-tocador__controles .hc-botao-icone--rotulado[data-so-celular] { display: none; }
  .hc-tocador__extras { grid-area: extras; display: flex; justify-content: flex-end; align-items: center; gap: var(--espaco-2); }
  .hc-tela { padding-left: var(--espaco-6); padding-right: var(--espaco-6); }
  .hc-inicio__topo { width: 100%; max-width: 640px; margin: 0 auto; text-align: center; }
  .hc-inicio__topo .hc-busca { text-align: left; }
  .hc-inicio__colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hc-lista { max-width: 760px; margin: 0 auto; }
  .hc-lista__filtro { margin: 0; padding: var(--espaco-3) 0; }
  .hc-so-celular { display: none !important; }
}
@media (max-width: 1023.98px) { .hc-so-computador { display: none !important; } }

/* ───────────── Modo telão (novo) ───────────── */
.hc-hino[data-telao] { --hc-altura-tocador: 0px; grid-template-columns: minmax(0, 1fr) !important; background: var(--papel); }
.hc-hino[data-telao] .hc-controles, .hc-hino[data-telao] .hc-letra, .hc-hino[data-telao] .hc-hino__vizinhos { display: none; }
.hc-hino[data-telao] .hc-papel { max-width: none; box-shadow: none; border-radius: 0; }
.hc-app:has(.hc-hino[data-telao]) > .hc-cabecalho { display: none; }
.hc-hino[data-telao] .hc-tocador { transform: translateY(100%); transition: transform var(--dur-media) var(--curva); }
.hc-hino[data-telao][data-mostrar-tocador] .hc-tocador { transform: none; }

.hc-hino[data-telao] .hc-tocador [aria-controls], .hc-hino[data-telao] .hc-tocador__extras { visibility: hidden; }
.hc-telao-sair { display: none; position: fixed; top: var(--espaco-3); right: var(--espaco-3); z-index: var(--z-tocador); box-shadow: var(--sombra-flutuante); }
.hc-hino[data-telao][data-mostrar-tocador] .hc-telao-sair { display: inline-flex; }

/* Contagem antes de começar (novo) */
.hc-contagem { position: fixed; inset: 0; z-index: var(--z-aviso); display: grid; place-items: center; pointer-events: none; }
.hc-contagem span {
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  background: var(--aviso-fundo); color: var(--aviso-texto); box-shadow: var(--sombra-flutuante);
  font: 600 72px/1 var(--font-livro); font-variant-numeric: lining-nums;
}

/* ───────────── Movimento reduzido ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Moldura das prévias e do protótipo: a própria .hc-app rola, e não a página */
html.hc-moldura, html.hc-moldura body { height: 100%; overflow: hidden; }
html.hc-moldura .hc-app { height: 100%; min-height: 0; overflow-y: auto; }