/*
 * 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; }

/* ---------------- Cabeçalho da música (título + card de vídeo) ---------------- */

/* título/artista à esquerda, card de vídeo do YouTube (quando a música tem
   um cadastrado) no canto direito — igual CifraClub. É flex com wrap, não
   posicionamento fixo/absoluto: em telas largas os dois ficam lado a lado
   (vídeo "flutua" pro canto direito por sobrar espaço), e em telas
   estreitas o card de vídeo simplesmente desce pra uma linha própria
   abaixo do título, sem nunca cobrir o texto. */
.cabecalho-musica {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 1rem;
}

.cabecalho-musica-info {
    flex: 1 1 260px;
    min-width: 0;
}

/* Card de vídeo — visual "moderno": cantos mais arredondados, sombra suave
   pra destacar do fundo, e leve elevação no hover, igual card de mídia de
   app atual. Alinhado ao centro do cabeçalho (não mais colado no topo). */
.card-video {
    flex: 0 0 auto;
    width: min(100%, 320px);
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    border-radius: 1rem;
    padding: .45rem;
    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .55);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card-video:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .6);
    border-color: var(--cor-destaque, var(--cor-borda));
}

.card-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: .7rem;
    overflow: hidden;
    background: #000;
}

.card-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------- 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;
}

/* em telas largas, a barra quebra pra fora da largura de leitura (900px)
   — usa o espaço vazio nas laterais pra caber o controle de Velocidade do
   lado do Autoscroll, na mesma linha, sem quebrar pra uma segunda linha.
   Técnica "full-bleed": largura própria (min(94vw,1180px)) + margin-left
   calculada fazem ela ficar centralizada na JANELA (não no
   <main class="container">, mais estreito, onde ela mora). O "434px" vem
   de metade da largura interna do .container (900px − 2×1rem padding =
   868px ÷ 2) — se o max-width do .container mudar, recalcular aqui.
   PRECISA vir depois da regra ".ferramentas-cifra" acima: como as duas
   têm a mesma especificidade, é a ordem no arquivo que decide, e só o
   margin-left daqui deve vencer o "margin: 1rem 0" de cima (o
   top/bottom continuam voltando pra aquela regra, já que aqui só mexe
   no left). Abaixo de 901px nem entra: no mobile ela já ocupa 100% da
   tela, igual sempre foi. */
@media (min-width: 901px) {
    .container:not(.container-colunas) .ferramentas-cifra {
        width: min(94vw, 1180px);
        margin-left: calc(434px - min(94vw, 1180px) / 2);
    }

    /* o card da letra/cifra usa a MESMA largura full-bleed da barra de
       ferramentas acima dele, pra ficarem alinhados e com a mesma largura
       horizontal em telas largas — sem isso, a barra (full-bleed) fica mais
       larga que o card da música (preso aos 900px do .container). Só se
       aplica fora do modo colunas: lá o .container em si já alarga pra
       1180px (ver ".container.container-colunas" abaixo), então o .cifra
       já ocupa a largura toda sem precisar desse mesmo truque. */
    .container:not(.container-colunas) .cifra {
        width: min(94vw, 1180px);
        margin-left: calc(434px - min(94vw, 1180px) / 2);
    }
}

.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-custom, var(--cor-acorde));
    background: var(--cor-acorde-fundo);
    font-weight: 700;
    border-radius: .2rem;
    padding: 0 .15rem;
}

/* negrito separado pra cifra e letra - controlado pelos botoes
   "Negrito (cifra)"/"Negrito (letra)" na barra de ferramentas */
.cifra.cifra-sem-negrito .acorde { font-weight: 400; }
.cifra.letra-negrito .linha-letra { font-weight: 700; }

/* 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; }
    .card-video { width: 100%; }
}

/* Prévia de impressão — deixa o leitor ajustar o tamanho da letra antes de imprimir */
.previa-impressao {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.previa-impressao[hidden] { display: none; }

.previa-impressao-caixa {
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    border-radius: 1rem;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .55);
}

.previa-impressao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cor-borda);
}
.previa-impressao-topo h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--cor-texto);
}
.previa-impressao-fechar {
    background: none;
    border: none;
    color: var(--cor-texto-suave);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .5rem;
}
.previa-impressao-fechar:hover { color: var(--cor-texto); }

.previa-impressao-controles {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--cor-borda);
}
.tom-atual-largo { min-width: 3.6rem; }
.previa-impressao-paginas {
    margin-left: auto;
    font-size: .85rem;
    color: var(--cor-texto-suave);
    white-space: nowrap;
}
.previa-impressao-paginas-aviso {
    color: var(--cor-destaque);
    font-weight: 600;
}

.previa-impressao-pagina {
    flex: 1;
    overflow: auto;
    background: #fff;
    margin: 1rem 1.25rem;
    padding: 1.2cm 1cm;
    border-radius: .25rem;
}
.previa-impressao-pagina .cifra {
    font-family: var(--fonte-cifra);
    font-size: calc(11pt * var(--escala-impressao, 1));
    color: #111;
    width: 100%;
    margin-left: 0;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
}
.previa-impressao-pagina .cifra-secao { color: #000 !important; }
.previa-impressao-pagina .acorde {
    color: var(--cor-acorde-custom, var(--cor-acorde));
    background: none;
    font-weight: 700;
}

.previa-impressao-rodape {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--cor-borda);
}

/* ==== Área de playlist (login por código) ==== */
.topo-playlist-link {
  color: var(--cor-link);
  font-size: .9rem;
  white-space: nowrap;
  text-decoration: none;
}
.topo-playlist-link:hover { text-decoration: underline; }

.aviso {
  padding: .75rem 1rem;
  border-radius: 8px;
  margin: 0 0 1rem;
  font-size: .95rem;
  border: 1px solid transparent;
}
.aviso-erro {
  background: color-mix(in srgb, var(--cor-destaque) 15%, transparent);
  border-color: color-mix(in srgb, var(--cor-destaque) 35%, transparent);
  color: var(--cor-destaque);
}
.aviso-sucesso {
  background: color-mix(in srgb, #2ecc71 15%, transparent);
  border-color: color-mix(in srgb, #2ecc71 35%, transparent);
  color: #2ecc71;
}

.botao-pl {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
}
.botao-pl:hover { background: var(--cor-fundo-hover); }
.botao-pl.primario {
  background: var(--cor-acorde-fundo);
  border-color: var(--cor-acorde-fundo);
  color: #fff;
}
.botao-pl.primario:hover { filter: brightness(1.08); }
.botao-pl.pequeno { padding: .35rem .7rem; font-size: .85rem; }

.playlist-login-caixa {
  max-width: 420px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo-elevado);
}
.playlist-login-caixa h1 { margin-top: 0; font-size: 1.4rem; }
.playlist-login-form {
  display: flex;
  gap: .6rem;
  margin-top: 1rem;
}
.playlist-login-form input[type="text"] {
  flex: 1;
  padding: .6rem .8rem;
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-cifra);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.playlists-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
.playlist-nova-form {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.playlist-nova-form input[type="text"] {
  flex: 1;
  min-width: 220px;
  padding: .6rem .8rem;
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
}

.playlists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.playlist-cartao {
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-fundo-elevado);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.playlist-cartao h2 { margin: 0; font-size: 1.1rem; }
.playlist-cartao-info { margin: 0; color: var(--cor-texto-suave); font-size: .85rem; }
.playlist-cartao-acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }

.playlist-editor-colunas {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 860px) {
  .playlist-editor-colunas { grid-template-columns: 1fr; }
}

.playlist-editor-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.playlist-editor-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo-elevado);
}
.playlist-editor-item .numero {
  min-width: 1.6rem;
  text-align: center;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}
.playlist-editor-item .info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.playlist-editor-item .titulo { color: var(--cor-texto); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-editor-item .titulo:hover { text-decoration: underline; }
.playlist-editor-item .artista { color: var(--cor-texto-suave); font-size: .85rem; }
.playlist-editor-item .acoes { display: flex; gap: .3rem; }
.playlist-editor-item .acoes button {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  cursor: pointer;
}
.playlist-editor-item .acoes button:disabled { opacity: .35; cursor: default; }
.playlist-editor-item .acoes button:hover:not(:disabled) { background: var(--cor-fundo-hover); }

.playlist-busca input[type="search"] {
  width: 100%;
  padding: .6rem .8rem;
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
  margin-bottom: .75rem;
}
.playlist-busca-resultados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.playlist-busca-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.playlist-busca-item .info { display: flex; flex-direction: column; min-width: 0; }
.playlist-busca-item .titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-busca-item .artista { color: var(--cor-texto-suave); font-size: .85rem; }