/* ============================================================
   Aplicativo de cifras — estilo geral
   Feito para celular, tablet e computador.
   ============================================================ */

:root {
  --fundo: #f6f7f9;
  --fundo-caixa: #ffffff;
  --borda: #e2e5ea;
  --texto: #1f2430;
  --texto-fraco: #667085;
  --destaque: #e8590c;      /* laranja dos acordes */
  --destaque-fraco: #fff0e6;
  --principal: #1f6feb;
  --principal-escuro: #1a5fd0;
  --perigo: #c92a2a;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
  --raio: 10px;
  --topo-altura: 56px;
}

body.escuro {
  --fundo: #14171d;
  --fundo-caixa: #1b1f27;
  --borda: #2b313c;
  --texto: #e7eaf0;
  --texto-fraco: #9aa4b5;
  --destaque: #ff9248;
  --destaque-fraco: #33240f;
  --principal: #5b9bff;
  --principal-escuro: #4a86e8;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--principal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }

/* ---------------- Topo ---------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--topo-altura);
  padding: 0 1rem;
  background: var(--fundo-caixa);
  border-bottom: 1px solid var(--borda);
}

.marca { display: flex; align-items: center; gap: .5rem; color: var(--texto); font-weight: 700; }
.marca:hover { text-decoration: none; }
.marca-icone { font-size: 1.3rem; }
.marca-nome { white-space: nowrap; }

.menu { display: flex; gap: .25rem; margin-left: auto; align-items: center; }
.menu a {
  padding: .4rem .7rem;
  border-radius: var(--raio);
  color: var(--texto);
  font-size: .95rem;
}
.menu a:hover { background: var(--fundo); text-decoration: none; }
.botao-topo { background: var(--principal); color: #fff !important; font-weight: 600; }
.botao-topo:hover { background: var(--principal-escuro) !important; }

.perfil { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.perfil a { color: var(--texto-fraco); }

@media (max-width: 780px) {
  .marca-nome { display: none; }
  .menu { margin-left: 0; overflow-x: auto; }
  .perfil { margin-left: auto; }
  .perfil a:first-child { display: none; }
}

/* ---------------- Conteudo ---------------- */

.conteudo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}
body.tela-musica .conteudo { max-width: 1280px; }

/* ---------------- Avisos ---------------- */

.avisos { max-width: 1100px; margin: .75rem auto 0; padding: 0 1rem; }
.aviso {
  padding: .6rem .9rem;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--fundo-caixa);
  margin: 0 0 .5rem;
  font-size: .95rem;
}
.aviso-ok      { border-color: #7bc47f; background: #eefbf0; color: #14532d; }
.aviso-erro    { border-color: #f1a2a2; background: #fdeeee; color: #7f1d1d; }
.aviso-atencao { border-color: #f0c36d; background: #fff8e6; color: #7a5300; }
body.escuro .aviso-ok      { background: #12301c; color: #a7e5b5; }
body.escuro .aviso-erro    { background: #341717; color: #f3b0b0; }
body.escuro .aviso-atencao { background: #34290f; color: #f2d18c; }

/* ---------------- Botoes ---------------- */

button, .botao-principal, .botao-claro, .botao-perigo, .botao-mini {
  font: inherit;
  cursor: pointer;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--fundo-caixa);
  color: var(--texto);
  padding: .5rem .9rem;
  transition: background .12s, border-color .12s;
}
button:hover, .botao-claro:hover { background: var(--fundo); }

.botao-principal {
  background: var(--principal);
  border-color: var(--principal);
  color: #fff;
  font-weight: 600;
}
.botao-principal:hover { background: var(--principal-escuro); text-decoration: none; }
.botao-perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.botao-perigo:hover { filter: brightness(.92); text-decoration: none; }
.botao-mini { padding: .25rem .5rem; font-size: .8rem; }
.largo { width: 100%; display: block; text-align: center; margin-top: .5rem; }
.ativa, .ativo { border-color: var(--principal); background: var(--destaque-fraco); }

/* ---------------- Formularios ---------------- */

input, select, textarea {
  font: inherit;
  color: var(--texto);
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .5rem .65rem;
  width: 100%;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--principal);
  outline-offset: -1px;
}
input.erro { border-color: var(--perigo); }
label { display: block; font-size: .85rem; color: var(--texto-fraco); }
label input, label select, label textarea { margin-top: .2rem; color: var(--texto); font-size: 1rem; }

.formulario { display: grid; gap: .75rem; }
.formulario.estreito { max-width: 380px; }
.form-linha {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-end;
  margin: .75rem 0;
}
.form-linha input, .form-linha select { width: auto; flex: 0 1 auto; }
.form-linha .cresce, .form-linha select.cresce { flex: 1 1 220px; }
.form-inline { display: inline-flex; gap: .25rem; align-items: center; }
.form-inline input { width: auto; }
.campo-com-botao { display: flex; gap: .25rem; }
.campo-com-botao input { flex: 1; }

.bloco {
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ---------------- Tela de entrada ---------------- */

body.tela-entrada { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
body.tela-entrada .conteudo { padding: 1rem; width: 100%; }
.caixa-entrada {
  max-width: 360px;
  margin: 0 auto;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.5rem;
  box-shadow: var(--sombra);
}
.entrada-marca { text-align: center; margin-bottom: 1.25rem; }
.entrada-marca .marca-icone { font-size: 2.5rem; }
.entrada-marca h1 { margin: .25rem 0 0; }
.entrada-marca p { color: var(--texto-fraco); margin: .25rem 0 0; font-size: .9rem; }
.rodape-entrada { text-align: center; font-size: .85rem; color: var(--texto-fraco); margin-top: 1rem; }

/* ---------------- Lista de musicas ---------------- */

.barra-busca { margin-bottom: 1rem; }
.form-busca { display: flex; gap: .5rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.filtro {
  font-size: .82rem;
  padding: .25rem .6rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo-caixa);
  color: var(--texto-fraco);
}
.filtro.ativo { border-color: var(--principal); color: var(--principal); font-weight: 600; }
.filtro:hover { text-decoration: none; }
.contagem { color: var(--texto-fraco); font-size: .85rem; margin: 0 0 .5rem; }
.dica-busca { color: var(--texto-fraco); font-size: .8rem; margin: .4rem 0 0; }
.dica-busca kbd {
  font-family: inherit;
  font-size: .78rem;
  padding: 0 .3rem;
  border: 1px solid var(--borda);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--fundo-caixa);
}
.nada-encontrado { text-align: center; padding: 2rem 1rem; color: var(--texto-fraco); }

.lista-musicas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-musicas a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .7rem .9rem;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
}
.lista-musicas a:hover { border-color: var(--principal); text-decoration: none; }
.m-titulo { font-weight: 600; }
.m-artista { color: var(--texto-fraco); font-size: .88rem; }
.m-dados { margin-left: auto; display: flex; gap: .3rem; }
.lista-musicas.compacta a { padding: .45rem .7rem; }

.etiqueta {
  font-size: .75rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  white-space: nowrap;
}
.etiqueta-tom {
  font-size: .78rem;
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--destaque-fraco);
  color: var(--destaque);
}

/* ---------------- Grupos da igreja ---------------- */

.abas-grupos {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--borda);
  scrollbar-width: thin;
}
.aba-grupo {
  --cor-grupo: var(--texto-fraco);
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  padding: .4rem .8rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo-caixa);
  color: var(--texto);
  font-size: .88rem;
  white-space: nowrap;
}
.aba-grupo:hover { border-color: var(--cor-grupo); text-decoration: none; }
.aba-grupo.ativa {
  border-color: var(--cor-grupo);
  background: var(--cor-grupo);
  color: #fff;
  font-weight: 600;
}
.aba-grupo.ativa .grupo-bolinha { background: #fff; }
.aba-total {
  font-size: .72rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--fundo);
  color: var(--texto-fraco);
}
.aba-grupo.ativa .aba-total { background: rgba(255, 255, 255, .25); color: #fff; }
.aba-mais { font-weight: 700; padding: .4rem .7rem; }

.grupo-bolinha {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--cor-grupo, var(--texto-fraco));
  flex: 0 0 auto;
  display: inline-block;
}

.grupo-etiqueta {
  --cor-grupo: var(--texto-fraco);
  font-size: .72rem;
  font-weight: 600;
  padding: .05rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--cor-grupo);
  color: var(--cor-grupo);
  white-space: nowrap;
}
a.grupo-etiqueta:hover { background: var(--cor-grupo); color: #fff; text-decoration: none; }
.m-grupos { display: flex; gap: .25rem; flex-wrap: wrap; }

.cabecalho-grupo { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.cabecalho-grupo h1 { display: flex; align-items: center; gap: .5rem; margin: 0; }
.cabecalho-grupo .botao-claro { margin-left: auto; }

.lista-grupos { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.lista-grupos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .6rem .9rem;
}
.grupo-cabeca { display: flex; align-items: center; gap: .5rem; color: var(--texto); flex: 1; }
.grupo-cabeca:hover { text-decoration: none; }
.grupo-nome { font-weight: 600; }
.grupo-total { color: var(--texto-fraco); font-size: .85rem; }
.grupo-botoes { display: flex; gap: .25rem; align-items: center; }
.grupo-botoes form { margin: 0; }
.grupo-mais summary { cursor: pointer; padding: .25rem .5rem; color: var(--texto-fraco); }
.grupo-mais .form-inline { margin: .3rem 0; }

.escolher-musicas {
  display: grid;
  gap: .2rem;
  max-height: 55vh;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .5rem;
  margin: .5rem 0;
}
.escolha {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem;
  border-radius: 6px;
  color: var(--texto);
  font-size: .92rem;
}
.escolha:hover { background: var(--fundo); }
.escolha input { width: auto; flex: 0 0 auto; }
.escolha > span:nth-child(2) { flex: 1; }
.escolha em { color: var(--texto-fraco); font-style: normal; font-size: .85rem; margin-left: .4rem; }

.escolha-grupos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.marca-grupo {
  --cor-grupo: var(--texto-fraco);
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--texto);
}
.marca-grupo:has(input:checked) {
  border-color: var(--cor-grupo);
  background: var(--cor-grupo);
  color: #fff;
  font-weight: 600;
}
.marca-grupo input { width: auto; }

.grupos-rapido { position: relative; }
.grupos-rapido summary { cursor: pointer; list-style: none; }
.grupos-rapido summary::-webkit-details-marker { display: none; }
.painel-embutido {
  position: absolute;
  z-index: 25;
  top: 1.8rem;
  left: 0;
  min-width: 180px;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: .6rem .75rem;
}

.vazio-grande { text-align: center; padding: 3rem 1rem; color: var(--texto-fraco); }
.vazio { color: var(--texto-fraco); font-size: .9rem; }
.dica { color: var(--texto-fraco); font-size: .88rem; }
.dica code { background: var(--fundo); padding: 0 .25rem; border-radius: 4px; }

/* ---------------- Pagina da musica ---------------- */

.pagina-musica { display: flex; gap: 1.25rem; align-items: flex-start; }

.barra-ferramentas {
  position: sticky;
  top: calc(var(--topo-altura) + 1rem);
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.ferramenta {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-caixa);
  color: var(--texto);
  font-size: .85rem;
  text-align: left;
  width: 100%;
}
.ferramenta:hover { background: var(--fundo); text-decoration: none; }
.ferramenta.ativa { border-color: var(--principal); background: var(--destaque-fraco); }
.fe-icone { font-size: 1rem; width: 1.2rem; text-align: center; flex: 0 0 auto; }
.fe-separador { height: 1px; background: var(--borda); margin: .35rem 0; }

.corpo-musica { flex: 1; min-width: 0; }

.cabecalho-musica {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: .75rem;
}
.cabecalho-musica h1 { margin: 0; }
.artista { color: var(--destaque); font-weight: 600; margin: .1rem 0 .4rem; }
.cm-linha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9rem; }
.cm-linha .destaque { color: var(--destaque); }
.cm-linha .obs { color: var(--texto-fraco); font-size: .85rem; }
.cm-acoes { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.cm-acoes form { margin: 0; }

.observacoes {
  background: var(--destaque-fraco);
  border-radius: var(--raio);
  padding: .6rem .9rem;
  font-size: .92rem;
  margin-bottom: .75rem;
}

/* ---------------- A cifra ---------------- */

.cifra {
  font-family: "Cascadia Mono", Consolas, "Roboto Mono", "DejaVu Sans Mono", monospace;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  padding: .5rem 0 1.5rem;
  tab-size: 4;
}
.cifra.duas-colunas {
  column-count: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--borda);
  white-space: pre-wrap;
}
.cifra .ac {
  color: var(--destaque);
  font-weight: 700;
  cursor: pointer;
  border-radius: 3px;
}
.cifra .ac:hover, .cifra .ac:focus { background: var(--destaque-fraco); outline: none; }
.cifra .marcador { color: var(--texto-fraco); font-weight: 700; }
.cifra .lin-tab { color: var(--texto-fraco); }
body.escondendo-tab .cifra .lin-tab { display: none; }

.rodape-musica {
  border-top: 1px solid var(--borda);
  padding-top: .6rem;
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--texto-fraco);
}

/* ---------------- Paineis flutuantes ---------------- */

.painel-flutuante {
  position: fixed;
  z-index: 60;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: .75rem;
  max-width: min(92vw, 320px);
  max-height: 80vh;
  overflow-y: auto;
}
.painel-titulo { margin: 0 0 .5rem; font-size: .8rem; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .03em; }
.painel-dica { font-size: .78rem; color: var(--texto-fraco); margin: .5rem 0 0; }
.linha-botoes { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.linha-botoes .valor { min-width: 2.2rem; text-align: center; font-weight: 700; }
.linha-campo { display: flex; gap: .4rem; margin-top: .5rem; }
.opcao { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; color: var(--texto); font-size: .92rem; }
.opcao input { width: auto; }
.item-lista {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 6px;
  padding: .45rem .5rem;
  background: none;
  font-size: .9rem;
}
.item-lista:hover { background: var(--fundo); }
.item-lista.ativa { background: var(--destaque-fraco); color: var(--destaque); font-weight: 600; }

.grade-tons { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: .5rem 0; }
.tecla-tom { padding: .4rem 0; text-align: center; font-weight: 600; }
.grade-sufixos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: .5rem 0; }
.tecla-sufixo { padding: .3rem 0; font-size: .78rem; text-align: center; }

.grade-capo { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; }
.casa-capo { padding: .45rem 0; text-align: center; font-weight: 600; }
.campo-bpm { width: 5rem; text-align: center; font-weight: 700; }

.popup-acorde { text-align: center; }
.popup-notas { font-size: .8rem; color: var(--texto-fraco); margin: .35rem 0; }
.botao-pequeno { font-size: .8rem; padding: .3rem .6rem; }

/* ---------------- Desenhos dos acordes ---------------- */

.painel-acordes {
  border-top: 1px solid var(--borda);
  padding-top: 1rem;
  margin-top: 1rem;
}
.abas-instrumento { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem; }
.aba { padding: .35rem .8rem; font-size: .85rem; }
.aba.ativa { background: var(--texto); color: var(--fundo-caixa); border-color: var(--texto); }

.grade-acordes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .8rem;
}
.grade-acordes.grande { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ac-cartao { text-align: center; font-size: .8rem; }
.ac-cartao svg { max-width: 100%; height: auto; }
.ac-real { color: var(--texto-fraco); font-size: .7rem; line-height: 1.2; margin-top: .2rem; }
.ac-posicao { color: var(--texto-fraco); font-size: .75rem; }
.ac-notas { font-size: .7rem; color: var(--texto-fraco); }
.ac-notas small { color: var(--destaque); font-size: .85em; margin-left: 1px; }
.ac-vazio { color: var(--texto-fraco); padding: 1rem 0; }

/* Cores dentro dos SVGs */
.dg-titulo { fill: var(--destaque); font-weight: 700; font-family: inherit; }
.dg-casa { fill: var(--texto-fraco); font-family: inherit; }
.dg-traste, .dg-corda { stroke: var(--borda); stroke-width: 1; }
.dg-nut { fill: var(--texto); }
.dg-capo { fill: #4b5563; }
.dg-capo-texto { fill: #fff; letter-spacing: .12em; font-family: inherit; }
.dg-dedo, .dg-pestana { fill: var(--texto); }
.dg-dedo-num { fill: var(--fundo-caixa); font-weight: 700; font-family: inherit; }
.dg-abafada { fill: var(--texto-fraco); font-family: inherit; }
.dg-solta { fill: none; stroke: var(--texto-fraco); stroke-width: 1; }
.dg-presa { fill: var(--texto-fraco); }
.tc-branca { fill: #fff; stroke: #98a2b3; stroke-width: 1; }
.tc-preta { fill: #1f2430; stroke: #1f2430; }
.tc-ponto { fill: #1f2430; }
.tc-ponto-claro { fill: #fff; }
body.escuro .tc-branca { fill: #e7eaf0; stroke: #667085; }

/* ---------------- Editor ---------------- */

.editor-topo { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.editor-topo h1 { margin: 0; }
.editor-acoes-topo { margin-left: auto; display: flex; gap: .5rem; }

.editor-campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .9rem;
}
.editor-campos .c-grande { grid-column: span 2; }
.editor-campos .c-total { grid-column: 1 / -1; }

.editor-barra {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin: .8rem 0;
}
.editor-marcadores { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; }

.editor-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.editor-lado { min-width: 0; }
.rotulo-campo { font-size: .85rem; color: var(--texto-fraco); margin-bottom: .25rem; display: block; }
.dica-inline { font-size: .78rem; color: var(--texto-fraco); font-style: italic; }

#conteudo {
  width: 100%;
  min-height: 55vh;
  font-family: "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.previa {
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .75rem;
  min-height: 55vh;
  max-height: 70vh;
  overflow: auto;
  font-size: 14px;
}
.previa .ac.editavel { border-bottom: 1px dashed var(--destaque); }
.contador { font-size: .78rem; color: var(--texto-fraco); margin: .3rem 0; }
.resumo-acordes { display: flex; flex-wrap: wrap; gap: .25rem; }
.resumo-acordes .etiqueta { color: var(--destaque); font-weight: 600; }

.lista-partes { display: grid; gap: .3rem; margin-top: .3rem; }
.parte {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: .85rem;
}
.parte-nome { font-weight: 600; }
.parte-info { color: var(--texto-fraco); font-size: .78rem; }
.parte-botoes { margin-left: auto; display: flex; gap: .15rem; }
.parte-botoes button { padding: .15rem .4rem; font-size: .8rem; }

.editor-rodape { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }
.editor-rodape .largo { width: auto; flex: 1; margin: 0; }

/* ---------------- Repertorios ---------------- */

.cabecalho-lista { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.cabecalho-lista h1 { margin: 0; }
.cabecalho-lista .botao-principal { margin-left: auto; }

.lista-repertorios { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-repertorios a {
  display: block;
  padding: .7rem .9rem;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
}
.lista-repertorios a:hover { border-color: var(--principal); text-decoration: none; }
.lista-repertorios .m-artista { display: block; }

.lista-repertorio { margin: 0; padding: 0 0 0 1.6rem; display: grid; gap: .5rem; }
.lista-repertorio li {
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .6rem .8rem;
}
.item-principal { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.item-nome { color: var(--texto); }
.item-nome span { color: var(--texto-fraco); font-size: .85rem; margin-left: .4rem; }
.item-dados { margin-left: auto; display: flex; gap: .3rem; }
.item-obs { margin: .3rem 0 0; font-size: .85rem; color: var(--texto-fraco); }
.item-ajustes summary { cursor: pointer; font-size: .8rem; color: var(--texto-fraco); margin-top: .3rem; }
.item-botoes { display: flex; gap: .3rem; }
.item-botoes form { margin: 0; }
.form-excluir { margin-top: 2rem; }

/* ---------------- Tabela (usuarios) ---------------- */

.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--fundo-caixa); }
.tabela th, .tabela td { padding: .5rem .6rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela th { font-size: .78rem; color: var(--texto-fraco); text-transform: uppercase; }
.tabela tr.inativo { opacity: .5; }
.acoes-tabela { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.acoes-tabela summary { cursor: pointer; font-size: .8rem; color: var(--texto-fraco); }

/* ---------------- Dicionario ---------------- */

.dic-escolhas { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.dic-grupo { margin-bottom: .8rem; }
.dic-rotulo { display: block; font-size: .78rem; color: var(--texto-fraco); text-transform: uppercase; margin-bottom: .3rem; }
.dic-botoes { display: flex; flex-wrap: wrap; gap: .3rem; }
.dic-botao { padding: .35rem .7rem; font-size: .88rem; }
.dic-botao.ativo { background: var(--texto); color: var(--fundo-caixa); border-color: var(--texto); }
.dic-tipos .dic-botao { font-size: .8rem; padding: .3rem .55rem; }
.dic-resultado { margin-top: 1.5rem; border-top: 1px solid var(--borda); padding-top: 1rem; }
.dic-notas-acorde { color: var(--texto-fraco); font-size: .9rem; }

.caixa-confirmacao {
  max-width: 460px;
  margin: 2rem auto;
  background: var(--fundo-caixa);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.5rem;
  text-align: center;
}
.caixa-confirmacao form { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }

/* ============================================================
   Telas menores
   ============================================================ */

@media (max-width: 900px) {
  .editor-corpo { grid-template-columns: 1fr; }
  .previa { min-height: 30vh; }
  #conteudo { min-height: 40vh; }
  .editor-marcadores { margin-left: 0; width: 100%; }
}

@media (max-width: 820px) {
  .pagina-musica { display: block; }

  .barra-ferramentas {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 40;
    flex-direction: row;
    gap: .25rem;
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
    background: var(--fundo-caixa);
    border-top: 1px solid var(--borda);
    overflow-x: auto;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  }
  .ferramenta {
    flex: 0 0 auto;
    width: auto;
    flex-direction: column;
    gap: .1rem;
    padding: .35rem .55rem;
    border: none;
    font-size: .68rem;
  }
  .fe-icone { font-size: 1.15rem; width: auto; }
  .fe-separador { display: none; }
  .corpo-musica { padding-bottom: 5rem; }
  .cm-acoes { margin-left: 0; }
  .cifra.duas-colunas { column-count: 1; }
}

@media (max-width: 560px) {
  .conteudo { padding: .75rem; }
  h1 { font-size: 1.25rem; }
  .m-dados { margin-left: 0; width: 100%; }
  .editor-campos { grid-template-columns: 1fr 1fr; }
  .editor-campos .c-grande { grid-column: 1 / -1; }
  .grade-acordes { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .item-dados { margin-left: 0; }
}

/* ============================================================
   Impressao
   ============================================================ */

@media print {
  .topo, .barra-ferramentas, .cm-acoes, .rodape-musica, .avisos,
  .painel-flutuante, #aviso-tab { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .conteudo { max-width: none; padding: 0; }
  .cifra { font-size: 10.5pt; padding: 0; }
  .cifra .ac { color: #000; font-weight: 700; }
  .painel-acordes { page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}