/*
 * Base do sistema — layout, tipografia, componentes.
 * Responsivo de mobile a desktop (mobile-first).
 * As CORES vêm sempre das variáveis definidas em /assets/css/themes/*.css
 * — nunca usar cor fixa aqui, pra qualquer tema novo funcionar sem
 * mexer neste arquivo.
 */

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-base);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.5;
}

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

.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ---------------- Cabeçalho ---------------- */

.topo {
    background: var(--cor-fundo-elevado);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topo .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    flex-wrap: wrap;
}

.marca {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--cor-texto);
    white-space: nowrap;
}

.busca {
    flex: 1 1 220px;
    min-width: 0;
}

.busca input {
    width: 100%;
    padding: .55rem .8rem;
    border-radius: .5rem;
    border: 1px solid var(--cor-borda);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: 1rem;
}

/* ---------------- Cartões de música ---------------- */

.lista-musicas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.cartao-musica {
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    border-radius: .6rem;
    padding: .85rem 1rem;
    transition: background .15s ease;
}

.cartao-musica:hover { background: var(--cor-fundo-hover); }

.cartao-musica .titulo { font-weight: 600; color: var(--cor-texto); }
.cartao-musica .artista { color: var(--cor-texto-suave); font-size: .9rem; }

/* ---------------- Barra de ferramentas da cifra ---------------- */

.ferramentas-cifra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    border-radius: .6rem;
    padding: .6rem .75rem;
    margin: 1rem 0;
    position: sticky;
    top: 0;
}

.ferramentas-cifra button,
.ferramentas-cifra .botao {
    background: var(--cor-fundo);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    border-radius: .5rem;
    padding: .4rem .75rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ferramentas-cifra button:hover,
.ferramentas-cifra .botao:hover { background: var(--cor-fundo-hover); }

/* estado ativo — dá feedback visual de qual modo está ligado
   (Simplificar, Só letra, Colunas, bemol/sustenido) */
.ferramentas-cifra .botao.ativo,
.ferramentas-cifra button.ativo {
    background: var(--cor-acorde-fundo);
    color: var(--cor-acorde);
    border-color: transparent;
}

.rotulo-ferramenta {
    font-size: .8rem;
    color: var(--cor-texto-suave);
    font-weight: 600;
}

/* seletor de tom — pílula com −/+ nas pontas, mais moderno que botões soltos */
.seletor-tom {
    display: inline-flex;
    align-items: center;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    overflow: hidden;
}

.seletor-tom a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--cor-texto-suave);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.seletor-tom a:hover {
    background: var(--cor-fundo-hover);
    color: var(--cor-acorde);
    text-decoration: none;
}

.seletor-tom .tom-atual {
    min-width: 2.7rem;
    text-align: center;
    font-weight: 800;
    font-size: .92rem;
    color: var(--cor-acorde);
    padding: 0 .2rem;
}

/* ---------------- Corpo da cifra ---------------- */

.cifra {
    font-family: var(--fonte-cifra);
    font-size: clamp(.85rem, 2.2vw, 1rem);
    /* NÃO herdar pre-wrap aqui: o HTML gerado tem quebras de linha reais
       entre as divs (.linha-acorde, .linha-letra, .cifra-secao...) só para
       ficar legível no código-fonte. Com white-space:pre-wrap no ancestral,
       essas quebras viram uma linha em branco VISÍVEL entre o acorde e a
       letra (por herança de white-space). Cada div já controla seu próprio
       white-space (.linha-acorde/.linha-letra usam pre) — aqui fica normal. */
    white-space: normal;
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    border-radius: .6rem;
    padding: 1rem 1.1rem;
    overflow-x: auto;
}

.cifra-secao {
    color: var(--cor-secao);
    font-weight: 700;
    margin: 1rem 0 .3rem;
}
.cifra-secao:first-child { margin-top: 0; }

.cifra-linha-vazia { height: .6rem; }

/* linha de acordes: fica sempre em cima da linha de letra correspondente,
   com espaços à esquerda alinhando cada acorde na sílaba certa (nunca
   "inline" no meio do texto, nunca grudado no início da linha).
   IMPORTANTE: as duas linhas usam white-space:pre e NUNCA podem quebrar —
   se a letra desse "word-wrap", o acorde de cima deixaria de ficar
   alinhado com a sílaba certa. Quem rola horizontalmente se alguma linha
   for maior que a coluna é o .cifra (overflow-x: auto), nunca a linha. */
.linha {
    margin-top: .3rem;
}
.linha-acorde {
    white-space: pre;
    line-height: 1.3;
}
.linha-letra {
    white-space: pre;
    line-height: 1.3;
}

.acorde {
    color: var(--cor-acorde);
    background: var(--cor-acorde-fundo);
    font-weight: 700;
    border-radius: .2rem;
    padding: 0 .15rem;
}

/* modo colunas — telas largas mostram a cifra em 2 colunas, igual
   CifraClub: o texto flui continuamente e quebra sozinho entre uma
   coluna e outra (balanceamento automático do navegador).
   column-count (em vez de column-width) força sempre 2 colunas, mesmo
   que o container não seja largo o bastante pra "caberem" 2 colunas do
   tamanho mínimo — cada coluna simplesmente fica mais estreita.
   break-inside:avoid-column no .linha garante que o navegador só quebra
   ENTRE uma linha (acorde+letra) e outra, nunca no meio de uma — assim
   o acorde nunca fica separado da sua letra em colunas diferentes. */
.cifra.modo-colunas {
    column-count: 2;
    column-gap: 2.5rem;
    column-rule: 1px solid var(--cor-borda);
    column-fill: balance;
}

.cifra.modo-colunas .linha,
.cifra.modo-colunas .cifra-secao {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
}

/* o container fica mais largo só no modo colunas, pra dar espaço real
   às 2 colunas em vez de espremê-las */
.container.container-colunas {
    max-width: 1180px;
}

/* ---------------- Responsivo ---------------- */

@media (max-width: 560px) {
    .ferramentas-cifra { gap: .4rem; padding: .5rem; }
    .ferramentas-cifra button, .ferramentas-cifra .botao { padding: .35rem .55rem; font-size: .82rem; }
    .cifra { padding: .75rem; }
    .cifra.modo-colunas { column-count: 1; }
    .marca { font-size: 1rem; }
}