/*
 * PEÇAS DE PÁGINA USADAS EM MAIS DE UM LUGAR
 * O que é só de uma ferramenta fica na pasta dela:
 * ferramentas/nome/estilo.css (carregado só nas páginas dela).
 */

/* ============================================================
 * INÍCIO: o teclado que dá nome ao acorde
 * ============================================================ */
.heroi { margin: 8px 0 34px; }
.heroi-chamada { color: var(--ambar); font-weight: 600; letter-spacing: .02em; margin: 0 0 6px; }
.heroi h1 { font-size: clamp(1.75rem, 7vw, 3rem); max-width: 20ch; }
.heroi .resposta { margin-bottom: 10px; }
.heroi-dica { color: var(--suave); margin: 0 0 16px; }
.busca { margin-top: 8px; }
.busca input { width: 100%; min-height: var(--toque); padding: 10px 16px 10px 42px; border-radius: 999px; border: 1px solid var(--linha);
  background: var(--noite-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 14px center / 20px;
  color: var(--creme); font: inherit; }
.busca input:focus { outline: 2px solid var(--ambar); outline-offset: 2px; }
.busca-vazia { color: var(--suave); margin: 12px 4px 0; }
.intro-grupo { color: var(--suave); margin: -4px 0 14px; font-size: .95rem; }
@media (min-width: 700px) {
  .catalogo .linhas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; border-top: 0; }
  .catalogo .linhas li:nth-child(-n+2) { border-top: 1px solid var(--linha); }
}
.palco-teclado { background: var(--noite-2); border: 1px solid var(--linha); border-radius: 22px; padding: 16px 12px 12px; }
.leitor { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 96px; padding: 0 6px 12px; }
.leitor-info .violao { width: 78px; }
.leitor-nome { font-family: var(--mono); font-size: clamp(2rem, 10vw, 3rem); font-weight: 700; color: var(--ambar); line-height: 1; }
.leitor-nome.vazio-nome { font-family: var(--serifa); font-size: 1.15rem; font-weight: 400; color: var(--suave); font-style: italic; }
.leitor-info { text-align: right; font-size: .85rem; color: var(--suave); }
.leitor-info a { display: block; }
.leitor-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px 2px; }
.leitor-outros { font-size: .85rem; color: var(--suave); padding: 6px 6px 0; }
.leitor-outros b { color: var(--azul-claro); font-family: var(--mono); }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* ============================================================
 * DICIONÁRIO: escolher nota e tipo
 * ============================================================ */
.seletor { display: grid; gap: 12px; }
.seletor-linha { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.seletor-linha a { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 46px; padding: 0 12px;
  border-radius: var(--raio-p); background: var(--noite-3); color: var(--creme); text-decoration: none; font-family: var(--mono); font-weight: 700; border: 1px solid transparent; }
.seletor-linha a:hover { border-color: var(--azul-claro); }
.seletor-linha a[aria-current] { background: var(--ambar); color: var(--noite); }
.seletor-tipos a { font-family: var(--sans); font-weight: 600; font-size: .9rem; }
.ficha { display: grid; gap: 16px; }

.seletor .seletor-linha:first-child { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; }

/* ============================================================
 * CAMPO HARMÔNICO
 * ============================================================ */
.graus { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 620px) { .graus { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.graus li { text-align: center; }
.graus button { width: 100%; min-height: 74px; border-radius: 12px; border: 1px solid var(--linha); background: var(--noite-3); color: var(--creme);
  cursor: pointer; font: inherit; display: grid; place-content: center; gap: 2px; padding: 4px 2px; }
.graus button:hover { border-color: var(--ambar); }
.graus button[aria-pressed="true"] { background: var(--ambar); color: var(--noite); }

.tom-tag { display: inline-block; font-family: var(--mono); font-size: .8rem; background: var(--noite-3); color: var(--ambar); border-radius: 6px; padding: 0 7px; }
.escala { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; color: var(--ambar); letter-spacing: .04em; white-space: pre-wrap; margin: 0 0 10px; }

.grau { font-family: var(--mono); color: var(--suave); font-size: .85rem; }

/* ============================================================
 * TRANSPOSITOR
 * ============================================================ */

.tp-saida-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 18px; }
.tp-saida-cab .rotulo { margin: 0; }
.tp-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; min-height: var(--toque); padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--noite); color: var(--creme); font: inherit; font-weight: 600; cursor: pointer; }
.interruptor::before { content: ""; width: 30px; height: 18px; border-radius: 999px; background: var(--noite-3); box-shadow: inset 0 0 0 1px var(--linha);
  background-image: radial-gradient(circle at 9px 9px, var(--suave) 6px, transparent 6.5px); }
.interruptor[aria-pressed="true"] { border-color: var(--ambar); }
.interruptor[aria-pressed="true"]::before { background-color: var(--ambar); background-image: radial-gradient(circle at 21px 9px, var(--noite) 6px, transparent 6.5px); }
.capo-caixa { margin-top: 14px; padding: 14px; border-radius: var(--raio); background: var(--noite); border: 1px dashed rgba(243, 217, 160, .4); }
.capo-caixa p { margin: 0; }

/* ============================================================
 * QUE ACORDE É ESSE?
 * ============================================================ */
.identificador .piano { height: 150px; }

/* ============================================================
 * MONTADOR DO CULTO E ESCALA
 * ============================================================ */
.cu-lista { padding: 0; margin: 8px 0; list-style: none; counter-reset: cu; display: grid; gap: 6px; }
.cu-item { counter-increment: cu; display: flex; align-items: center; gap: 10px; background: var(--noite); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 8px 10px; }
.cu-item::before { content: counter(cu); font-family: var(--serifa); font-weight: 600; color: var(--ambar); min-width: 1.4em; font-size: 1.1rem; }
.cu-info { flex: 1; min-width: 0; display: grid; }
.cu-info strong { color: var(--creme); }
.cu-meta { font-size: .85rem; color: var(--suave); }

.cu-linha { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.cu-titulo { flex: 1 1 200px; }

.dias { border: 0; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dias legend { padding: 0; }
.dia { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: var(--raio-p); background: var(--noite-3); color: var(--creme); }

/* ============================================================
 * TOM IDEAL PARA A VOZ
 * ============================================================ */

.resultado { margin-top: 22px; }
.resultado-tom { font-family: var(--serifa); font-size: 1.35rem; color: var(--creme); margin-bottom: 4px; }
.resultado-tom strong { color: var(--ambar); font-family: var(--mono); font-size: 2rem; }

/* ============================================================
 * MODO PALCO
 * ============================================================ */

.palco { position: fixed; inset: 0; z-index: 50; background: #020f1d; color: var(--creme); display: flex; flex-direction: column; }

.pb { min-width: var(--toque); min-height: var(--toque); border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--noite-2); color: var(--creme); font: inherit; font-weight: 700; cursor: pointer; }
.pb:hover { border-color: var(--azul-claro); }
.pb[aria-pressed="true"] { background: var(--ambar); color: var(--noite); border-color: var(--ambar); }

.palco .cifra { max-width: 1100px; margin: 0 auto; }
.palco .ct { line-height: 1.45; }
.palco .cn { color: var(--azul-claro); }
/* Celular deitado ou tablet: duas colunas, como uma folha aberta na estante. */
@media (orientation: landscape) and (min-width: 700px) {
  .palco .cifra { column-count: 2; column-gap: 40px; column-rule: 1px solid var(--linha); }
  .palco .ce { break-inside: avoid; }
}

/* ============================================================
 * MINI-AULAS
 * ============================================================ */
.texto { font-size: 1.04rem; }
.texto p, .texto li { max-width: 66ch; }
.texto h2 { margin-top: 1.6em; }
.texto ul, .texto ol { padding-left: 22px; }
.texto li { margin: 6px 0; }
.texto .tabela-rola { margin: 0 0 1em; }
.texto .saida { white-space: pre; min-height: 0; }
.ouvir-exemplo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 1.2em; padding: 12px 14px; border-radius: var(--raio);
  background: var(--noite-2); border: 1px solid var(--linha); }
.ouvir-exemplo .seq { font-family: var(--mono); font-weight: 700; color: var(--ambar); }
.painel-ponte { text-align: center; }
.painel-ponte .botao { width: 100%; max-width: 360px; }

/* ============================================================
 * IMPRESSÃO (o navegador também salva em PDF)
 * ============================================================ */
@media print {
  @page { margin: 14mm; }
  html { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 12pt; padding: 0; }
  .topo, .menu, .rodape, .migalhas, .anuncio, .cta-curso, .cta-lista, .faq, .pular, .nota-aparelho, [data-armazem-bloqueado] { display: none !important; }
  .pagina { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .pg-imprimir .pagina > *:not(.bloco), .pg-imprimir .bloco > h2 { display: none !important; }
  .pg-imprimir .folha { padding: 0; }
  .ac, .ac0, .ct { color: #000 !important; }
  .pg-ferramenta:not(.pg-imprimir) .cab, .pg-ferramenta:not(.pg-imprimir) .bloco { display: none !important; }
  .painel { background: #fff !important; color: #000 !important; padding: 0; border: 0; }
  .painel .campo, .painel button, .painel .acoes, .painel label.rotulo, .painel .dica, .painel .dupla, .painel .dias, .cu-add, .es-funcoes, .es-musicos, .cu-linha, .painel-titulo { display: none !important; }
  .es-culto, .cu-item { border: 1px solid #999; background: #fff; break-inside: avoid; color: #000; }
  .es-data, .cu-info strong, .es-nome { color: #000; }
  .es-vaga .campo-mini { display: inline !important; border: 0; appearance: none; -webkit-appearance: none; background: none; color: #000; }
  .saida-msg { display: none; }
}
@media (min-width: 900px) { .identificador .piano { height: 180px; } }

/* ============================================================
 * AFINADOR
 * ============================================================ */

.nota-info { color: var(--suave); min-height: 1.6em; margin: 6px 0 0; }
.cordas { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cordas li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--raio-p); background: var(--noite); border: 1px solid var(--linha); }

/* ============================================================
 * BPM (usado pelo metrônomo e pela calculadora de BPM)
 * ============================================================ */
.bpm-numero { margin: 0 8px; text-align: center; font-family: var(--serifa); font-size: 3.6rem; line-height: 1; color: var(--creme); min-width: 3ch; display: flex; flex-direction: column; align-items: center; }
.bpm-numero small { font-family: var(--sans); font-size: .8rem; color: var(--suave); }
.faixa { width: 100%; accent-color: var(--ambar); margin: 16px 0 4px; height: 32px; }

/* ============================================================
 * ESCALAS: braço do violão
 * ============================================================ */

.braco { display: block; min-width: 620px; width: 100%; }
.br-pestana { fill: var(--marfim); }
.br-traste { stroke: #b8b2a3; stroke-width: 2; }
.br-corda { stroke: #e6dcc3; stroke-width: 1.2; }
.br-num { fill: #cdbfa1; font: 600 11px var(--sans); }
.br-nota { fill: var(--azul-claro); stroke: #0b1220; stroke-width: 1.5; }
.br-raiz { fill: var(--ambar); }

/* ============================================================
 * TABELAS DE ACORDES
 * ============================================================ */

.grade-tabela { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

.tb-item { display: grid; justify-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: var(--raio-p); background: var(--noite-2); border: 1px solid var(--linha); text-decoration: none; }
.tb-item:hover { border-color: var(--ambar); }

.tb-item .violao { width: 86px; }
.tb-item .teclado { max-width: 100%; }
@media print {
  .pg-tabela .cab .acoes, .pg-tabela .seletor-linha { display: none !important; }
  .tb-item { background: #fff; border: 1px solid #999; break-inside: avoid; color: #000; }
  .tb-item .ac { color: #000 !important; }
  .vi-corda, .vi-traste { stroke: #333; } .vi-dedo, .vi-barra { fill: #000; } .vi-pestana-zero { fill: #000; } .vi-solta { stroke: #000; }
  .grade-tabela { grid-template-columns: repeat(8, 1fr); }
}

.nomes-notas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 12px 4px 0; }
.nomes-notas button { min-height: 42px; border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--noite-3); color: var(--creme); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.nomes-notas button[aria-pressed="true"] { background: var(--ambar); color: var(--noite); border-color: var(--ambar); }