/* ======================================================= */
/* ARQUIVO STYLE.CSS COMPLETO E FINAL (CORREÇÃO BARRA SIMPLES) */
/* ======================================================= */

@font-face {
    font-family: 'ChordPadFont'; /* Damos um nome para usar no CSS */
    src: url('fonts/chordpad.otf') format('opentype'); /* Caminho para a fonte */
    font-weight: normal;
    font-style: normal;
}

/* --- GERAL --- */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    margin: 0;
    background-color: #EAEAEA; /* ALTERADO: Fundo cinza claro */
    padding: 0px;
}

/* ======================================================= */
/* ESTILOS DO NOVO HEADER (v2 - Mockup) - VERSÃO CORRIGIDA */
/* ======================================================= */

/* Wrapper que segura as duas barras e fica fixo no topo */
.header-sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 101; /* Garante que fique acima de tudo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Barra Superior (Links, Logo, Créditos) */
.header-top-bar {
    background-color: #333; /* Fundo escuro */
    border-bottom: 1px solid #1a1a1a;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px; 
}


 .header-logo-group {
    flex-shrink: 0; /* Impede o logo de encolher */
}

.header-logo-group .header-logo {
    height: 40px; 
    width: auto;  
    display: block; 
    margin-bottom: 5px;
}

.header-credits {
    color: #aaa;
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.2;
}

/* Barra de Ações (Botões e Usuário) */
.header-action-bar {
    background-color: #444; /* Tom ligeiramente mais claro */
    border-bottom: 1px solid #222;
    padding: 8px 20px;
    display: flex;
    align-items: center;
}

/* Lado esquerdo e direito da barra de ações */
.header-group-left {
    display: flex;
}
.header-group-right {
    flex-shrink: 0; /* Impede a autenticação de encolher */
    display: flex;
    gap: 10px;
}

/* Estilo unificado para TODOS os botões na barra de ações */
.header-action-bar button {
    background-color: #f0f0f0; /* [CORRIGIDO] Fundo cinza claro */
    border: 1px solid #ccc;    /* Borda cinza padrão */
    color: #333;               /* Cor do texto (caso haja) */
    width: 38px;
    height: 38px;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagem (ícone) dentro dos botões */
.header-action-bar button img {
    height: 24px;
    width: 24px;
    display: block;
    /* [CORRIGIDO] Remove filtro para ícones escuros/originais */
    filter: none; 
    opacity: 1;
}

/* Efeito Hover unificado */
.header-action-bar button:hover {
    background-color: #e0e0e0; /* Cinza um pouco mais escuro */
    border-color: #bbb;
}

/* Estilo para botões desabilitados */
.header-action-bar button.disabled-button { 
    opacity: 0.6 !important; 
    cursor: not-allowed !important; 
    background-color: #e9e9e9 !important; /* Fundo desabilitado claro */
    border-color: #ddd !important;
    pointer-events: none;
}
.header-action-bar button.disabled-button img {
     opacity: 0.5 !important; /* Opacidade da imagem */
     filter: none; /* Sem filtro */
}

/* Estilos para o  Menu de Texto */
.header-text-menu {    
    display: flex;
    margin-left: 30px;
    gap: 30px; /* Espaço entre os links */
    align-items: center;
}

/* Estilo para cada link (A) - Torna-o um Flex Container */
.header-text-menu a {
    color: #eee;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    
    /* CRÍTICO: Configuração Flexbox para alinhar ícone e texto */
    display: flex;          
    align-items: center;    /* Alinhamento vertical no centro */
    gap: 5px;               /* Espaço entre o ícone e o texto */
}

.header-text-menu a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Estilo para a imagem (Ícone) dentro do link */
.header-text-menu a img {
    height: 20px; /* Tamanho do ícone (ajuste conforme necessário) */
    width: auto;
    /* Filtrar o ícone para cor clara, caso o original seja escuro (Opcional) */
    /* filter: invert(80%); */
    vertical-align: middle;
}

/* Info do Usuário (Olá, Nome) */
.header-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eee;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ======================================================= */
/* ALINHAMENTO (PROJETO / EDIÇÃO / SUPORTE)                */
/* ======================================================= */

.header-top-nav-left {
    display: flex;
    margin-top: 45px
}

.header-top-nav-left span {
        color: #eee;
        font-weight: 500;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        text-align: left;
        padding: 0 10px;
        
        display: flex;
        align-items: flex-end;
        padding-bottom: 3px;
        margin-bottom: -20px; 
    }
    
.header-top-nav-left span:nth-child(1) { flex-grow: 7; } /* PROJETO */
.header-top-nav-left span:nth-child(2) { flex-grow: 2; } /* EDIÇÃO */
.header-top-nav-left span:nth-child(3) { flex-grow: 2; } /* SUPORTE */

.header-top-nav-right {
    display: flex;
    flex-direction: row;
    margin-top: 45px;
    margin-left: -0px;
    margin-right: 800px;
    gap: 20px;
}

.header-top-nav-right span {
        color: #eee;
        font-weight: 500;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        text-align: left;
        padding: 0 10px;
        display: flex;
        align-items: flex-end;
        padding-bottom: 3px; 
        margin-right: 10px;
        margin-bottom: -20px;
        mergin-left: 20px;
    }
    
    .header-top-nav-right span:nth-child(1) { flex-grow: 7; } /* PROJETO */
    .header-top-nav-right span:nth-child(2) { flex-grow: 2; } /* EDIÇÃO */
    .header-top-nav-right span:nth-child(3) { flex-grow: 2; } /* SUPORTE */

/* Estiliza os novos containers de coluna */
.header-column {
    display: flex;
    justify-content: flex-start;
    padding: 0 10px;
    border-right: 1px solid #555; /* Cria a linha separadora */
}
.header-column:last-child {
    border-right: none;
}

/* Estiliza o grupo de botões real dentro da coluna */
.header-button-group {
    display: flex;
    gap: 8px; /* Espaço entre os botões */
}

/* --- TOOLBAR --- */
.toolbar {
     background-color: #fff;
     padding: 10px 20px;
     border-bottom: 1px solid #ccc;
     display: flex;
     gap: 10px;
     position: sticky;
     top: 0; z-index: 100;
 }

.toolbar button { 
    padding: 0; /* Remove padding original */
    border-radius: 5px; 
    border: 1px solid #ccc; 
    background-color: #f8f8f8; 
    cursor: pointer; 
    
    /* --- AJUSTES PARA ÍCONES --- */
    font-size: 1.2rem;   /* Tamanho do ícone */
    width: 38px;         /* Largura fixa */
    height: 38px;        /* Altura fixa */
    line-height: 38px;   /* Alinhamento vertical */
    text-align: center;  /* Alinhamento horizontal */
}

.toolbar button:hover { background-color: #e8e8e8; }

.toolbar-separator {
    width: 0px;
    background-color: #bbb; /* Cor da linha vertical */
    margin: 0 5px; /* Espaçamento lateral */
    align-self: stretch; /* Estica na altura dos botões */
}

/* --- ÁREA DO EDITOR (Estilo Papel) --- */
#editor-area {
    font-family: "Caveat Brush", cursive;
    font-weight: 400;
    font-style: normal;
    background-color: #fff;
    overflow: visible !important;
    max-height: none !important;
    max-width: 900px;
    margin: 20px auto;
    border-radius: 2px;
    position: relative;
    min-height: 80vh;
    margin-top: 290px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
    padding: 20mm !important;
    /* ✅ NOVO: Suaviza o scroll em navegadores modernos */
    scroll-behavior: smooth;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}


#pdf-header-credit {
    position: absolute; /* Posiciona relativo ao #editor-area */
    top: 30px;      /* Distância do topo da "página" */
    left: 40px;     /* Distância da esquerda da "página" */
    font-size: 0.75rem; /* Tamanho pequeno */
    color: #555;      /* Cor cinza escuro */
    font-family: inherit; /* Usa a fonte do editor (manuscrita ou padrão) */
    z-index: 5;       /* Garante que fique acima da pauta, se houver sobreposição */
}

/* Garante que títulos e autores usem a nova fonte */
#info-title, #info-authors, #info-key, #info-bpm-unit {
    font-family: inherit; /* Herda a fonte do #editor-area */
}

/* Aplica aos acordes (OPCIONAL - Verifique a legibilidade) */
.chord-symbol {
    /* ... (outras regras como font-size, font-weight) ... */
    font-family: inherit; /* Herda a fonte do #editor-area */
    /* Pode ser necessário ajustar font-size ou font-weight aqui */
}

/* Garante que ANOTAÇÕES usem a nova fonte */
.annotation-symbol { 
    /* ... (outras regras como font-size, color) ... */
    font-family: inherit; /* Herda a fonte do #editor-area */
}

.notation-toolbar #btn-spacer {
    font-family: 'ChordPadFont', sans-serif !important;
    font-size: 1.8rem; /* Ajuste o tamanho para que o símbolo fique visível */
    line-height: 30px; /* Garante que o símbolo esteja centralizado verticalmente */
    padding: 0 3px; /* Ajuste para o espaçamento horizontal do botão */
}

/* IMPORTANTE: Mantém a ChordPadFont para símbolos específicos */
.time-unit-symbol, 
.repeat-symbol-annotation,
.chords-container .rest-symbol, /* */
.chord-modifier, /* */
.notation-toolbar [id^="btn-rest-"], 
.notation-toolbar [id^="btn-repeat-"], 
.notation-toolbar [id^="btn-mod-"],
.notation-toolbar #btn-toggle-tie {
    font-family: 'ChordPadFont', sans-serif !important; /* Força a fonte de símbolos */
}

.notation-toolbar #btn-repeat-dc,
.notation-toolbar #btn-repeat-ds,
.notation-toolbar #btn-ending-1,
.notation-toolbar #btn-ending-line,
.notation-toolbar #btn-ending-2 {
    width: 30; /* Permite que a largura seja definida pelo padding e conteúdo */
    min-width: 30px;
    padding: 0px; /* Padding um pouco maior para o texto não ficar colado */
    font-weight: bold;
    }

/* Aplica a fonte customizada especificamente aos botões de Repetição e N.C. */
.notation-toolbar #btn-symbol-nc,
.notation-toolbar #btn-symbol-repeat {
    font-family: 'ChordPadFont', sans-serif !important;
    font-size: 1.8rem; /* Ajuste o tamanho para que os símbolos fiquem visíveis (pode ser maior que o padrão) */
    line-height: 30px; /* Garante que o símbolo esteja centralizado verticalmente */
}    

/* --- ESTRUTURA GERAL DA PAUTA E COMPASSOS --- */

/* Estilos para o Espaçador Invisível */

.measure-spacer-element {
    /* Torna o elemento invisível, mas mantendo a presença no layout */
    visibility: hidden; 
    
    /* CRÍTICO: Define a largura para empurrar o acorde */
    min-width: 30px; /* Largura mínima para empurrar os modificadores de acorde */
    width: 30px; 
    
    /* Garante que seja um elemento Flex */
    display: inline-block; 
    
    /* Alinhamento e espaçamento interno (para que não se sobreponha à barra de compasso) */
    padding: 0;
    margin: 0;
}

/* Estilo para o espaçador injetado via JavaScript */
.measure-spacer {
    /* Torna o elemento invisível, mas mantém sua presença no Flexbox */
    visibility: hidden;
    height: 1px; /* Altura mínima */
    
    /* Configuração Flexbox */
    flex-basis: 0;      /* Não deve ter largura inicial */
    flex-grow: 1;       /* CRÍTICO: Permite que ele cresça e absorva o espaço */
    flex-shrink: 1;

    /* Igual aos compassos reais, para forçar a quebra no mesmo ponto */
    margin: 0 10px 50px 0; /* Espaçamento idêntico ao .measure (se for o caso) */
    
    /* Não precisa de borda */
    border-right: none !important; 
    
    /* Largura mínima do compasso mais estreito */
    min-width: 50px; /* Garante que ele ocupe a largura de um compasso estreito */
}

/* Compasso Individual (.measure) */
.measure {
    /* Mantenha position: relative e border-right */
    position: relative;
    border-right: 2px solid #000;
    
    /* CRÍTICO: Otimização de Espaço */
    flex-grow: 1; /* VOLTAMOS A PERMITIR O CRESCIMENTO (Para esticar) */
    flex-shrink: 1;
    flex-basis: auto;   /* Largura inicial baseada no conteúdo */
    min-width: 0 !important; 
  
    /* Garante que o padding interno seja mínimo */
    padding: 0;

    flex-grow: 1; /* VOLTA A PERMITIR O ESTICAMENTO UNIFORME */
    flex-basis: auto;   
    min-width: 0 !important; 
    
    /* Garante que o espaçamento seja consistente */
    margin: 60px 0 60px 0; /* Ajuste o espaçamento aqui para alinhar com o .measure-spacer */    
     
}

/* Container Principal (.staff) */
.staff {
    display: flex;
    flex-wrap: wrap;             
    /* REMOVIDO: justify-content: space-between; (Impede o gap, mas exige o "spacer") */
    justify-content: flex-start; /* CRÍTICO: Alinha os itens à esquerda */
    width: 100%;                 
    margin-bottom: 50px;         
    
    /* ADICIONADO: Margem negativa para compensar o espaçamento horizontal do próprio Flex */
    /* Isso é fundamental para que o último item se alinhe corretamente quando o wrap acontece */
    margin-left: -5px; /* Compensa o padding/margin que cria o alinhamento */
    margin-right: -10px; /* Compensa a margin-right de 10px dos compassos */
}

/* --- Hack: Forçar alinhamento da última linha à esquerda --- */
/* Adicionamos um número grande de elementos Flex invisíveis que absorvem o espaço,
   fazendo com que a última linha fique alinhada à esquerda. */
.staff::after {
    content: "";
    flex: 10000; /* Absorve o espaço restante */
    min-width: 100%; /* Garante que o 'spacer' caia para a última linha */
}

.staff-lines-container {
    position: relative;
    height: 50px;
    width: 100%;
    background-color: #fff;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    cursor: pointer;
    /* --- Fundo de Pentagrama --- */
    background-image: url('images/pentagram.png'); 
    background-repeat: repeat-x;    
    background-position: center center; 
    background-size: auto 100%; 
    padding: 0;
}

.measure:hover .staff-lines-container {
    background-color: #eef8ff;
}

.chords-container {
    display: flex;
    align-items: center;
    gap: 0px;
    height: 100%;
    padding: 0;
}

.chord-symbol,
.notation-symbol { /* REGRA COMBINADA */
    font-size: 1.6rem;
    color: #000;
}

.notation-symbol.custom-font-symbol {
    font-family: 'ChordPadFont', sans-serif !important;
    font-size: 2.8rem; /* Ajuste o tamanho para que fiquem visíveis (ex: maior que o texto padrão) */
    font-weight: normal;
    position: relative;
    top: 2px; /* Ajuste fino vertical */
}

/* Garante que os outros símbolos de texto (//) usem a fonte padrão, se necessário */
.notation-symbol {
    /* ... (Mantenha as regras gerais) ... */
    font-family: inherit; /* Ou a fonte de texto normal */
    font-size: 1.2rem; /* Ajuste o tamanho para que fiquem visíveis (ex: maior que o texto padrão) */
    font-weight: normal;
    position: relative;
    top: 2px; /* Ajuste fino vertical */
}

/* ======================================================= */
/* BARRAS DE COMPASSO - PADRÃO UNIFICADO + REPETIÇÕES DUPLAS (CORRIGIDO) */
/* ======================================================= */

/* Todas as barras têm largura uniforme (2px por padrão) */
.measure {
    border-right: 2px solid #000;
}

/* Remove pseudo-elementos herdados */
.measure .staff-lines-container::before,
.measure .staff-lines-container::after {
    content: none;
}

/* --- Barra dupla --- */
.measure.bar-double {
    border-right-width: 4px; /* Torna a barra da direita (principal) grossa */
}
.measure.bar-double .staff-lines-container {
     /* border-right é controlado pelo .measure.bar-double */
}
.measure.bar-double .staff-lines-container::before {
    content: '';
    position: absolute;
    right: 4px;
    width: 2px;   /* Esta é a linha fina da esquerda */
    height: 100%;
    background: #000;
}

/* ======================================================= */
/* BARRAS DE REPETIÇÃO — duas linhas + dois pontos fixos */
/* ======================================================= */

/* --- Início de repetição --- */
.measure.bar-repeat_start .staff-lines-container {
    border-right: 2px solid #000; /* Linha fina no FIM do compasso (mantida) */
}
.measure.bar-repeat_start .staff-lines-container::before {
    content: '';
    position: absolute;
    left: -10px; 
    width: 4px;  
    height: 100%;
    background: #000;
    z-index: 2;
}

/* dois pontos (elementos separados) */
.measure.bar-repeat_start .staff-lines-container::after {
    content: '';
    position: absolute;
    left: 5px; /* [AJUSTE] Era 3px. Afasta os pontos da linha grossa. */
    top: 17px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 13px 0 #000; /* segundo ponto abaixo */
}

/* --- Fim de repetição --- */
.measure.bar-repeat_end {
    border-right-width: 4px; /* Torna a barra da direita (principal) grossa */
}
.measure.bar-repeat_end .staff-lines-container {
     /* border-right é controlado pelo .measure.bar-repeat_end */
}
.measure.bar-repeat_end .staff-lines-container::before {
    content: '';
    position: absolute;
    right: 4px; /* [AJUSTE] Era 6px. Aproxima a linha fina da grossa. */
    width: 2px;   /* Esta é a linha fina da esquerda */
    height: 100%;
    background: #000;
}
/* dois pontos (elementos separados) */
.measure.bar-repeat_end .staff-lines-container::after {
    content: '';
    position: absolute;
    right: 11px; /* [AJUSTE] Era 12px. Acompanha a linha fina. */
    top: 17px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 13px 0 #000; /* segundo ponto abaixo */
}



/* --- BOTÃO DE EDIÇÃO DE COMPASSO --- */
.measure-edit-button { position: absolute; bottom: 2px; right: 2px; width: 20px; height: 20px; background-color: rgba(0, 0, 0, 0.1); border: 1px solid #ccc; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 18px; text-align: center; color: #555; opacity: 0; transition: opacity 0.2s, background-color 0.2s; z-index: 10; }
.measure:hover .measure-edit-button { opacity: 1; }
.measure-edit-button:hover { background-color: #ddd; }

/* --- MODAIS --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 200; justify-content: center; align-items: center; }
.modal-content { background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 90%; max-width: 450px; }
.modal-content.small { max-width: 300px; }
.modal-content h2 { margin-top: 0; margin-bottom: 20px; font-size: 1.2rem; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; }
.form-group input[type="text"], .form-group input[type="number"], .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.modal-actions { margin-top: 25px; display: flex; justify-content: flex-end; gap: 10px; }

.time-unit-selector {
    gap: 15px; /* Aumenta o espaço entre os símbolos */
    margin-left: 5px;
}

/* Estiliza os rótulos (f, h, j) com a fonte de símbolos */
.time-unit-label {
    font-family: 'ChordPadFont'; /* */
    font-size: 2.2rem; /* Tamanho grande para o símbolo */
    font-weight: normal;
    line-height: 1;
    position: relative;
    top: 2px; /* Ajuste vertical fino para alinhar com o radio button */
    
    /* Reseta estilos de label de texto padrão */
    display: inline-block;
    margin-bottom: 0; 
    font-weight: normal; 
    cursor: pointer;
}

/* Ajusta o alinhamento do radio button real */
.time-unit-selector input[type="radio"] {
    position: relative;
    top: -5px; /* Sobe o radio button */
}

/* ======================================================= */
/* ESTILOS DO MODAL ABRIR MÚSICA (Layout Restaurado)       */
/* ======================================================= */

/* 1. Layout do Modal (Altura Fixa + Scroll) */
#open-song-modal .modal-content {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
}

#open-song-modal h2,
#open-song-modal .form-group,
#open-song-modal .modal-actions {
    flex-shrink: 0; /* Não encolhem */
}

/* 2. Container da Lista (Scrollável) */
.song-list-container {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow-y: auto; /* Scroll apenas aqui */
    flex-grow: 1;     /* Ocupa o espaço restante */
}

/* 3. Item da Lista (Flexbox Horizontal) */
.song-list-container li {
    display: flex; /* [REVERTIDO] Flex em vez de Grid */
    justify-content: space-between; /* Espaço entre Info e Botão */
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    cursor: default;
    transition: background-color 0.2s;
}
.song-list-container li:hover {
    background-color: #f0f8ff;
}

/* 4. Área de Informação (Clicável e Empilhada) */
.song-list-info {
    display: block; /* [REVERTIDO] Bloco normal para empilhar div sobre div */
    cursor: pointer;
    flex-grow: 1;
    margin-right: 15px;
}
.song-list-info:hover .song-title {
    color: #007bff;
}

/* 5. Tipografia */
.song-list-container .song-title {
    font-weight: bold;
    color: #333;
    font-size: 1rem;
    margin-bottom: 4px; /* Espacinho entre título e autor */
}

.song-list-container .song-authors {
    font-size: 0.85rem;
    color: #777;
    display: block;
}

/* 6. Botão de Excluir */
.btn-delete-song {
    justify-self: center;
    flex-shrink: 0;
}

.key-selector, .notation-style-selector, .form-group.inline { display: flex; align-items: center; gap: 8px; }
.key-selector label, .notation-style-selector label, .form-group.inline label { display: inline; margin-bottom: 0; font-weight: normal; }
#style-freestyle { margin-left: 20px; }

#realbook-fields {
    border: none;
    padding: 0;
    margin: 0;
}

/* Estiliza o fieldset quando desabilitado (Modo Livre) */
#realbook-fields:disabled {
    opacity: 0.5; /* Deixa os campos cinzas */
    pointer-events: none; /* Impede cliques */
}

/* ======================================================= */
/* CORREÇÃO DE LAYOUT DO MODAL ABRIR MÚSICA                */
/* ======================================================= */

/* 1. Trava a altura do modal e organiza em coluna */
#open-song-modal .modal-content {
    max-height: 80vh;        /* Limita a altura a 80% da janela */
    display: flex;           /* Habilita flexbox */
    flex-direction: column;  /* Organiza itens um embaixo do outro */
    padding: 20px;           
    overflow: hidden;        /* Impede rolagem dupla */
}

/* 2. O Título (H2) não deve encolher */
#open-song-modal h2 {
    flex-shrink: 0;
    margin-top: 0;
}

/* 3. A área de Busca não deve encolher */
#open-song-modal .form-group {
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* 4. O Cabeçalho da Tabela não deve encolher */
.song-list-header {
    flex-shrink: 0;
    /* Garante que a largura do scroll seja compensada (opcional) */
    padding-right: 15px; 
}

/* 5. A LISTA é a única que deve crescer e rolar */
.song-list-container {
    flex-grow: 1;      /* Ocupa todo o espaço disponível no meio */
    overflow-y: auto;  /* Cria a barra de rolagem interna */
    max-height: none;  /* Remove limites fixos antigos (como 400px) */
    margin: 0;
    border-bottom: 1px solid #eee;
}

/* 6. O Rodapé (Botões) fica fixo no fundo */
#open-song-modal .modal-actions {
    flex-shrink: 0;
    margin-top: 15px;
    padding-top: 0;
}

/* --- ESTILOS DOS BOTÕES DE AÇÃO NO MODAL --- */

.measure-actions-group {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.measure-actions-group.danger-zone {
    margin-top: 10px;
    padding-top: 10px;
}

.btn-full {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}
.btn-full:hover {
    background-color: #e8e8e8;
}

.btn-danger {
    background-color: #fbebee;
    border-color: #f44336;
    color: #c53030;
}
.btn-danger:hover {
    background-color: #f8d7da;
    color: #a92020;
}

/* --- ÁREA DE INFORMAÇÃO DA MÚSICA --- */
#song-info-area {
    background-color: transparent; 
    padding: 0 0 15px 0;         
    border: none;               
    box-shadow: none;           
    display: grid;
    grid-template-areas:
        "title title title"
        "authors authors authors"
        "bpm-unit . key"; 
    grid-template-columns: auto 1fr auto; 
    gap: 5px 20px; 
    border-bottom: 1px solid #eee; 
    margin-bottom: 50px; 
    padding-bottom: 15px; 
} /* <-- Chave adicionada */


#info-title {
    grid-area: title;
    font-size: 3.2rem; 
    font-weight: bold;
    color: #000;
    text-align: center; 
    margin-bottom: 0; 
}

#info-authors {
    grid-area: authors;
    font-size: 1.6rem;
    color: #555;
    font-style: italic;
    text-align: center; 
    margin-top: -5px; 
}

#info-key {
    grid-area: key;
    font-size: 1.0rem; 
    color: #333;
    text-align: right; 
    align-self: center; 
}

#info-bpm-unit {
    grid-area: bpm-unit;
    font-size: 1.0rem;
    color: #333;
    text-align: left; 
    display: flex; 
    align-items: center;
    gap: 8px; 
}

.time-unit-symbol {
    font-family: 'ChordPadFont'; 
    font-size: 1.8rem; 
    line-height: 1;
    position: relative;
    top: 2px; 
}

/* --- ESTADO DE COMPASSO SELECIONADO --- */
.measure.selected .staff-lines-container {
    background-color: #d6ebff; 
}
/* :hover styles já definidos antes */

/* ======================================================= */
/* ESTILOS DAS BARRAS DE NOTAÇÃO E SEÇÕES                  */
/* ======================================================= */

/* Ajustes gerais para as barras de notação */
.notation-toolbar {
    background-color: #f8f9fa; 
    padding: 5px 15px; 
    gap: 10px; 
    align-items: flex-start; 
    flex-wrap: wrap; 
    position: sticky; /* Fixar */
    top: 150px;
    z-index: 100; /* Abaixo do header principal */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #ccc; /* Adiciona borda inferior */
}
/* Recalcular o 'top' acima baseado na altura real do .header-main */
/* Ex: Inspecione o .header-main no navegador e veja sua altura total. */

/* Estilo das Seções */
.toolbar-section {
    display: flex;
    flex-direction: column; /* Rótulo acima */
    align-items: stretch; /* Wrapper estica */
    gap: 5px; 
    padding: 8px 10px 5px 10px; 
    border: 1px solid #e0e0e0; 
    border-radius: 5px;
    background-color: #fff; 
}

/* Estilo do Rótulo da Seção */
.toolbar-section-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px; 
    white-space: nowrap; 
    text-align: center; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 3px;          
    margin-right: 0; 
}

/* Container para os botões dentro de uma seção */
.toolbar-buttons-wrapper {
    display: flex;      
    flex-wrap: nowrap;  
    gap: 5px;           
    align-items: center;
    justify-content: center; 
}

/* ======================================================= */
/* ESTILOS DOS BOTÕES NA BARRA DE NOTAÇÃO                  */
/* ======================================================= */

/* Ajustes específicos gerais para botões DENTRO da barra de notação */
.notation-toolbar button {

height: 30px; 
    line-height: 28px; 
    font-size: 0.9rem;
    padding: 0 6px; /* Redução do padding horizontal para tornar os botões mais estreitos */
    min-width: 30px; /* Largura mínima para botões de ícone/letra *
    box-sizing: border-box; 
    text-align: center; 
    /* Herda cores, bordas, etc. da regra .toolbar button */
}

/* Botões +/- Compasso */
.notation-toolbar #btn-add-measure,
.notation-toolbar #btn-delete-measure-toolbar {
    width: 32px;         
    height: 32px;        
    line-height: 32px;   /* CENTRALIZA */
    padding: 0;          
    font-size: 1.6rem;   /* Tamanho +/- */
    font-weight: bold;   
    text-align: center;  
    position: static; 
    top: auto; 
    font-family: inherit; 
    color: #333; /* Garante cor escura */
}

/* Botões Fórmula de Compasso */
.notation-toolbar .btn-ts { 
    height: 32px; 
    width: auto; 
    padding: 0 8px; 
    font-size: 0.9rem; 
    font-weight: bold;
    line-height: 30px; 
    font-family: inherit; 
    color: #333; /* Garante cor escura */
}

.notation-toolbar #btn-toggle-tie {
    /* (Regras de display: flex e align-items: center já existentes) */
    
    /* CRÍTICO: Força o uso da fonte customizada para renderizar 'w' como arco */
    font-family: 'ChordPadFont', sans-serif !important; 
    
    /* (Mantenha ou ajuste estas propriedades de tamanho e alinhamento) */
    line-height: 1; 
    font-size: 2.2rem; 
    position: relative;
    top: 0; 
}

/* Botões com Símbolos (Pausa, Repetição, Modificador, Tie) */
.notation-toolbar [id^="btn-rest-"], 
.notation-toolbar [id^="btn-repeat-"], 
.notation-toolbar [id^="btn-mod-"],
.notation-toolbar #btn-toggle-tie { 
    font-family: 'ChordPadFont'; 
    font-size: 1.8rem;         
    padding: 0px;           
    width: 30px;               
    height: 32px;              
    line-height: 32px;         
    position: center;        
    top: 0;                    
    font-weight: normal; 
    color: #333; /* Garante cor escura */
}

/* Botões de Texto (1., 2.) */
.notation-toolbar #btn-ending-1,
.notation-toolbar #btn-ending-2 {
    font-size: 1.0rem; 
    font-weight: bold;
    width: auto;
    padding: 0 10px;
    font-family: inherit;
    color: #333; /* Garante cor escura */
}

/* Botões de Limpar/Excluir Ícone */
.notation-toolbar #btn-clear-annotations,
.notation-toolbar #btn-delete-element {
    width: 32px; 
    padding: 0; 
    font-size: 1.3rem; 
    color: #c53030; /* Cor vermelha */
    font-family: inherit; /* Usa fonte padrão para ícone unicode */
}
.notation-toolbar #btn-clear-annotations:hover,
.notation-toolbar #btn-delete-element:hover {
    background-color: #f8d7da; 
    color: #a92020;
}

/* --- ESTILO DO SÍMBOLO RENDERIZADO NA PAUTA (Fórmula de Compasso) --- */

.time-signature-symbol {
    font-size: 1.3rem; 
    font-weight: bold;
    color: #000;
    line-height: 1.0;
    padding-top: 4px; /* Alinha melhor com os acordes */
    /* Garante largura suficiente */
    min-width: 20px; 
    text-align: center;
}

/* --- ESTILOS DA "FRAÇÃO" (para pauta) --- */
.time-signature-symbol .ts-num, 
.time-signature-symbol .ts-den { /* Seletor mais específico */
    display: block;
    text-align: center;
    line-height: 1.1; /* Ajusta altura da linha interna */
}
.time-signature-symbol .ts-num { /* Seletor mais específico */
    border-bottom: none;
    padding-bottom: 1px; /* Espaço linha-número */
    margin-bottom: -5px; /* Espaço número-linha */
}
.time-signature-symbol .ts-den { /* Seletor mais específico */
    padding-top: 1px;   
}

/* ======================================================= */
/* ESTILOS DAS ANOTAÇÕES ACIMA DA PAUTA                    */
/* ======================================================= */

/* --- CONTAINER GERAL DAS ANOTAÇÕES --- */
.annotations-container {
    position: absolute;
    top: -30px;         
    left: -3px;
    width: 100%;    
    padding-left: 2px;  
    padding-right: 2px; 
    box-sizing: border-box;
    min-height: 2.2em;  
    font-size: 1rem;  
    color: #333;
    font-weight: normal;
    text-align: left;
    z-index: 5;
    pointer-events: none;
    white-space: nowrap; 
    overflow: hidden;    
}

/* --- TEXTO NORMAL DE ANOTAÇÃO --- */
 .annotation-symbol {
     font-size: 1.2rem; /* DIMINUÍDO */
     color: #333;
     font-weight: bold;
     vertical-align: bottom; 
     display: inline-block;
     margin-right: 4px;
     position: absolute;
     top: -8px;
}

/* --- SÍMBOLOS DE REPETIÇÃO (DC, Segno, Coda) --- */
.repeat-symbol-annotation {
    font-family: 'ChordPadFont';
    font-size: 1.8rem;
    font-weight: normal;
    color: #000;
    margin-right: 4px; 
    display: inline-block;
    vertical-align: bottom; 
    position: absolute;
    top: 1px; 
    margin-bottom: 2px;
    margin-left: -10px;
}

/* --- CONTAINER "Dal Segno al Coda" --- */
.annotations-container .ds-instruction {
    display: inline-block;
    vertical-align: bottom; 
    margin-right: 0px !important; 
    white-space: nowrap;
    position: absolute;
    right: -20px;
    top: 0px;
    margin-bottom: 2px;
}

/* Spans INTERNOS (q, n, r, p) dentro do DS */
.annotations-container .ds-instruction span {
    margin-right: 5px; /* Espaçamento INTERNO */
    vertical-align: middle; 
    font-size: 1.8rem; 
    position: relative;
    top: -6px; 
}

/* Remove margem do ÚLTIMO span (p) dentro do DS */
.annotations-container .ds-instruction span:last-child {
     margin-right: 22px;
}



/* Regra específica para o tipo 'Line' */
.ending-annotation:empty, 
.ending-annotation:not(:has-text)::before {
    /* Se a sua implementação final depender apenas do valor vazio no JS, use esta regra */
    /* Se você usar 'Line' como valor, defina a cor do texto para transparente ou use 'text-indent' */
}

.ending-annotation[data-value="Line"] {
    color: transparent; /* Oculta o texto "Line", mas mantém a linha */
    border-left: none;
    border-right: none;
    top: 0;
    margin-bottom: 50px;
}


/* ======================================================= */
/* ESTILOS DOS MODIFICADORES DE ACORDE                     */
/* ======================================================= */

.chord-wrapper {
    position: relative;    
    display: inline-block; 
    margin-right: 5px;    
    vertical-align: middle; 
}

/* --- ESTILO DO SÍMBOLO DE PAUSA NA PAUTA --- */
/* ALTERADO: Seletor mais específico */
.chords-container .rest-symbol { 
    font-family: 'ChordPadFont'; /* Usa a fonte customizada */
    font-size: 2.8rem; 
    line-height: 1;
    position: relative;
    top: 5px; 
    color: #000;
}

.chord-symbol {
     cursor: pointer; 
     padding: 2px 4px; 
     display: inline-block; 
     border-radius: 3px; 
     transition: background-color 0.1s ease-in-out; 
     /* Estilos de fonte herdados de .chords-container ou .chord-symbol, .notation-symbol */
}

.chord-symbol.selected {
    background-color: #cce7ff; 
    cursor: default; 
}

.chords-container .chord-wrapper:last-child {
    margin-right: 0;
}

.chords-container { /* Revisado */
    display: flex;
    align-items: center; 
    height: 100%;
    padding: 0 12px 0 10px !important;
    /* Gap controlado pela margin-right do wrapper */
}

.chord-modifier {
    font-family: 'ChordPadFont'; 
    font-size: 1.8rem; /* Aumentado */
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    top: -1.1em;
    line-height: 1;
    color: #000;
    cursor: pointer; 
    user-select: none; 
}

.chord-modifier:hover {
    opacity: 0.7; 
}


/* ======================================================= */
/* ESTILOS DO HEADER PRINCIPAL (Revisão 2)                 */
/* ======================================================= */
/* Copie as regras para .header-main, .header-group-left, etc. aqui */
/* Certifique-se que o cálculo de 'top' para .notation-toolbar esteja correto */

.header-main button img {
    height: 24px; /* Tamanho final desejado */
    width: 24px;  /* Tamanho final desejado */
    display: block; 
}

.header-group-right {
    flex-shrink: 0; /* Impede a autenticação de encolher */
}

.header-auth-actions {
    display: flex;
    gap: 8px; /* Espaço entre botões DENTRO do grupo */
}

/* Botões de Ícone (Ações, Auth, Help) no Header Principal - CORRIGIDO E UNIFICADO */
.header-actions button,
.header-auth-actions button,
.header-help-actions button { /* Chave de abertura adicionada */
    background-color: #f0f0f0; /* Fundo cinza claro (estilo desejado) */
    border: 1px solid #ccc;    /* Borda cinza padrão */
    color: #333;                /* Cor base (embora a imagem seja usada) */
    width: 38px;                /* Largura do botão */
    height: 38px;               /* Altura do botão */
    border-radius: 4px;         /* Borda arredondada */
    padding: 0;                 /* Sem padding interno */
    cursor: pointer;
    transition: background-color 0.2s; 

    /* === Propriedades de Centralização === */
    display: flex;             /* Habilita Flexbox */
    align-items: center;       /* Centraliza verticalmente a <img> */
    justify-content: center;   /* Centraliza horizontalmente a <img> */
    
    /* Remove propriedades conflitantes de texto/linha */
    /* line-height: 38px; */ 
    /* font-size: 1.2rem; */  
    /* text-align: center; */
}

/* Hover Unificado */
.header-actions button:hover,
.header-auth-actions button:hover,
.header-help-actions button:hover { 
    background-color: #e0e0e0; /* Cinza um pouco mais escuro */
    border-color: #bbb;       /* Borda um pouco mais escura */
    /* width: 45px; */
    /* height: 45px; */
}

/* Estilo para a IMAGEM DENTRO do botão do header */
.header-main button img {
    height: 24px; /* Altura desejada do ícone */
    width: 24px;  /* Largura desejada do ícone */
    display: block; 
}

/* Estilos do Logo (sem alterações necessárias aqui) */
.header-group-right { }
.header-logo {
    height: 40px; 
    width: auto;  
    display: block; 
}

/* Estiliza os links de navegação (PROJETO, EDIÇÃO, SUPORTE) */
.header-top-nav a {
    color: #eee;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    
    /* Alinhamento */
    text-align: center;
    padding: 0 10px;
}

/* Estiliza os novos containers de coluna */
.header-column {
    display: flex;
    justify-content: center; /* Centraliza o grupo de botões dentro da coluna */
    padding: 0 10px;
    border-right: 1px solid #555; /* Cria a linha separadora */
}
/* Remove a borda da última coluna */
.header-column:last-child {
    border-right: none;
}

/* Estiliza o grupo de botões real dentro da coluna */
.header-button-group {
    display: flex;
    gap: 8px; /* Espaço entre os botões */
}


/* --- ALINHAMENTO PROPORCIONAL --- */

/* Coluna PROJETO (5 botões) - assume 5 "partes" de espaço */
#col-projeto { flex-grow: 5; }
.header-top-nav a:nth-child(1) { flex-grow: 5; } /* PROJETO */

/* Coluna EDIÇÃO (2 botões) - assume 2 "partes" de espaço */
#col-edicao { flex-grow: 2; }
.header-top-nav a:nth-child(2) { flex-grow: 2; } /* EDIÇÃO */

/* Coluna SUPORTE (2 botões) - assume 2 "partes" de espaço */
#col-suporte { flex-grow: 2; }
.header-top-nav a:nth-child(3) { flex-grow: 2; } /* SUPORTE */

/* ======================================================= */
/* ESTILO DA LIGADURA (Tie)                                */
/* ======================================================= */
.chord-symbol.tied-from-previous {
    position: relative; 
}
.chord-symbol.tied-from-previous::after {
    content: '';
    position: absolute;
    bottom: -8px;  
    left: -45px;
    width: 45px;   
    height: 8px;   
    border: 2px solid #000; 
    border-top: none;       
    border-right: none;     
    border-radius: 0 0 100% 100% / 0 0 15px 15px; 
    z-index: 2; 
}

/* Estilo para Mensagens de Erro nos Modais */
.error-message {
    color: #c53030; /* Vermelho */
    background-color: #fbebee; /* Fundo vermelho claro */
    border: 1px solid #f44336; /* Borda vermelha */
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 15px;
    margin-bottom: 5px; /* Ajusta espaço antes dos botões */
    font-size: 0.9rem;
    text-align: center;
}

/* Estilo para agrupar campos de endereço */
.address-fieldset {
    display: contents; /* ADICIONADO: Faz os filhos participarem do grid pai */
    grid-column: 1 / -1; /* Mantém ocupando a largura se necessário, mas display: contents pode anular */
}

/* Esconde a legenda do fieldset */
.address-fieldset legend {
    display: none; /* ADICIONADO: Esconde a legenda */
}

/* Classe para colocar grupos de formulário lado a lado */
.form-group-inline {
    display: flex;
    gap: 15px; /* Espaço entre os campos na mesma linha */
    align-items: flex-end; /* Alinha pela base se as labels tiverem alturas diferentes */
}

/* Garante que labels dentro de grupos inline não ocupem 100% */
.form-group-inline > div {
     /* O flex já está definido inline no HTML (flex: 1, flex: 2, etc.) */
}

/* Estilo para a área de informações do usuário no header */
.header-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eee; /* Cor do texto (claro, para fundo escuro) */
    font-size: 0.9rem;
    font-weight: 500;
}

#user-greeting {
    /* Estilos específicos para a saudação, se necessário */
}

/* Estilo para o botão Sair */
#btn-logout {
    background-color: #f0f0f0; 
    border: 1px solid #ccc;    
    color: #333;               
    width: 38px;               
    height: 38px;               
    line-height: 38px;          
    padding: 0;                 
    border-radius: 4px;         
    /* font-size: 1.2rem; Remova ou comente esta linha, pois é para texto/unicode */
    text-align: center;         
    cursor: pointer;
    transition: background-color 0.2s;

    display: inline-flex; 
    align-items: center;
    justify-content: center;
}

#btn-logout:hover {
    background-color: #e0e0e0; 
    border-color: #bbb;       
}

/* --- ADICIONADO: Estilo para a imagem dentro do botão --- */
#btn-logout img {
    width: 24px;   /* Ajuste conforme o tamanho desejado para o ícone */
    height: 24px;  /* Manter proporção */
    display: block; /* Garante que a imagem é um bloco para centralização */
}

/* ======================================================= */
/* LAYOUT HORIZONTAL DO MODAL DE CADASTRO                  */
/* ======================================================= */

/* Aumenta a largura máxima do modal de cadastro */
.modal-content-register {
    max-width: 800px; /* Ajuste conforme necessário */
}

/* Aplica Grid ao formulário */
#register-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px 20px; /* Reduzido espaçamento vertical */
    align-items: start; 
}

/* Faz o título ocupar as duas colunas */
#register-form h2 {
    grid-column: 1 / -1; /* Ocupa da primeira à última coluna */
    margin-bottom: 20px; /* Espaço abaixo do título */
}

/* Coloca os primeiros 4 campos (Username, Nome, Email, CPF) em colunas alternadas */
/* O Grid fará isso automaticamente se a ordem no HTML estiver correta */

/* Faz o Fieldset de Endereço ocupar as duas colunas */
#register-form .address-fieldset {
    grid-column: 1 / -1; 
    margin-top: 10px; /* Espaço acima do fieldset */
    /* Opcional: Aplicar grid DENTRO do fieldset se quiser mais controle */
    /* display: grid; */
    /* grid-template-columns: repeat(2, 1fr); */
    /* gap: 15px 25px; */
}

/* Faz a mensagem de erro e os botões ocuparem as duas colunas */
#register-form #register-error-message,
#register-form .modal-actions {
    grid-column: 1 / -1;
}

/* Garante que grupos inline dentro do fieldset ainda funcionem */
.address-fieldset .form-group-inline {
    /* display: flex; (Já definido na regra .form-group-inline) */
    /* gap: 15px; (Já definido) */
}
.address-fieldset .form-group-inline > div {
    /* flex: 1; / flex: 2; etc. (Já definido inline no HTML) */
}

.form-group input[type="text"], 
.form-group input[type="number"], 
.form-group input[type="email"], /* Adicionado */
.form-group input[type="password"], /* Adicionado */
.form-group select, 
.form-group textarea { 
    width: 100%; 
    padding: 8px 10px; /* Ajusta padding horizontal */
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; /* ADICIONADO: Inclui padding/borda na altura total */
    height: 38px; /* ADICIONADO: Altura fixa (ajuste se necessário) */
    /* Garante que a fonte não fique muito grande */
    font-size: 0.9rem; 
}

/* Ajuste específico para textarea se necessário (pode precisar de altura maior) */
.form-group textarea {
    height: auto; /* Ou um valor específico como 80px */
    min-height: 38px; /* Garante altura mínima */
}

/* /style.css (ADICIONAR AO FINAL) */

/* Link "Esqueci minha senha" no modal de login */
.form-link {
    margin-top: 15px;
    text-align: center;
}
.form-link a {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9rem;
}
.form-link a:hover {
    text-decoration: underline;
}

/* Estilo para Mensagem de Sucesso (verde) */
.success-message {
    color: #155724; /* Verde escuro */
    background-color: #d4edda; /* Fundo verde claro */
    border: 1px solid #c3e6cb; /* Borda verde */
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 15px;
    margin-bottom: 5px; 
    font-size: 0.9rem;
    text-align: center;
}

/* Estilos para o Modal de Abrir Música */

/* Transforma o <li> em flex para alinhar o botão */
.song-list-container li {
    display: flex;
    justify-content: space-between; /* Info na esquerda, botão na direita */
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    cursor: default; /* O cursor pointer fica só na info */
}
.song-list-container li:last-child {
    border-bottom: none;
}

/* Área clicável para carregar a música */
.song-list-info {
    cursor: pointer;
    flex-grow: 1; /* Faz esta área ocupar o espaço */
    margin-right: 15px; /* Espaço antes do botão */
}
.song-list-info:hover .song-title {
    color: #007bff; /* Efeito hover */
}

.song-list-container .song-title {
    font-weight: bold;
    color: #333;
    transition: color 0.2s;
}
.song-list-container .song-authors {
    font-size: 0.9rem;
    color: #777;
    margin-top: 3px;
    display: block;
}

/* Novo Botão de Excluir */
.btn-delete-song {
    background-color: #fbebee;
    border: 0px solid #f44336;
    color: #c53030;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0; /* Impede que o botão encolha */
    padding: 0;
    transition: all 0.2s;
}
.btn-delete-song:hover {
    background-color: #f44336;
    color: #fff;
}

/* 1. CONFIGURAÇÃO PADRÃO (Para resoluções GRANDES: 1920px ou mais) */

/* Oculta o aviso por padrão */
#resolution-warning {
    display: none; 
}

/* ====================================================== */
/* --- MODO LEITURA (READER) PARA DISPOSITIVOS MÓVEIS --- */
/* ====================================================== */

/* Aplica-se a telas < 1920px E dispositivos de toque */
@media (max-width: 1444px), (hover: none) and (pointer: coarse) {

    /* 1. Esconde os títulos "PROJETO, EDIÇÃO, SUPORTE" */
    html body .header-top-nav-left, .header-top-nav-right {
        display: none !important;
    }

    /* 2. Adapta o menu principal para quebrar a linha */
    html body .header-action-bar {
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 5px !important;
    }

    /* 3. Esconde os botões de EDIÇÃO e SUPORTE que NÃO queremos */
    /* (Mantém #btn-open-song visível) */
    html body #btn-new-song,
    html body #btn-save-song,
    html body #btn-song-details,
    html body #btn-generate-pdf,
    html body #btn-import-json,
    html body #btn-export-json,
    html body #btn-copy-measures,
    html body #btn-paste-measures,
    html body #btn-help,
    html body #btn-faq,
    html body #btn-register {
        display: none !important;
    }
    
     /* 4. Esconde os 4 painéis de ferramentas de edição */
    html body .toolbar-section {
        display: none !important; 
    }
    
    /* 5. Esconde o botão de engrenagem (Editar Compasso) */
    html body .measure-edit-button {
        display: none !important; 
    }
    
    /* 6. Ajusta a pauta (como antes) */
    html body .editor-container {
        padding: 10px;
    }
    
    html body .header-logo-group {
        margin-left: 70px;
    }
    
    html body #info-title {
        font-size: 2rem;
    }
    
    html body #info-authors {
        font-size: 1.2rem;
    }
    
    html body #pdf-header-credit {
        display: none !important;
    }
    
    /* 7. Esconde a logo e créditos no modo mobile */
    html body .header-credits{
        display: none !important;
    }
    
    html body .header-logo-text {
        display: none !important;
    }
    
}

/* ============================================= */
/* --- ESTILOS DO CABEÇALHO (Refatorado v2) --- */
/* ============================================= */

/* 1. O Contêiner Principal do Cabeçalho */
#main-header {
    background-color: #333; /* Fundo escuro */
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    gap: 20px; 
}

/* 2. Bloco Esquerdo (Logo + Info do Usuário) */
.header-left-block {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}
.header-logo-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
#header-logo {
    height: 40px; 
}
.header-logo-text h2 {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 600;
}
.header-logo-text p {
    font-size: 0.75rem;
    margin: 0;
    color: #aaa;
}

/* 3. Bloco de Informações do Usuário (Logado) */
#user-info {
    display: none; 
    color: #E0E0E0;
    border-left: 2px solid #555; 
    padding-left: 25px;
}
#user-greeting {
    display: block;
    font-size: 1rem;
    font-weight: 500;
}
#user-sub-status {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: #00AEEF; 
}

/* 4. Bloco Direito (Menu Texto + Botões Auth/Logout) */
.header-right-block {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.header-text-menu {
    display: flex;
    gap: 15px;
}
.header-text-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #E0E0E0;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}
.header-text-link:hover {
    color: white;
}
.header-text-link .inline-icon {
    width: 16px; 
    height: 16px;
}

/* 5. Ações de Autenticação (AGORA COMO ÍCONES) */
.header-auth-actions {
    display: flex; 
    gap: 10px;
}
#logout-container {
    display: none; 
}
.header-auth-button {
    background-color: #f0f0f0;
    color: #333;
    border: none;
    padding: 8px; /* Padding menor para ícones */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 0; /* Alinha o ícone perfeitamente */
}
.header-auth-button:hover {
    background-color: #ddd;
}
/* Define o tamanho do ícone DENTRO do botão */
.header-auth-button img {
    width: 20px; 
    height: 20px;
}
.header-auth-button.register {
    background-color: #00AEEF;
}
.header-auth-button.register:hover {
    background-color: #008fbf;
}
#btn-logout {
    background-color: #666; 
}
#btn-logout:hover {
    background-color: #888;
}

/* 6. Barra de Ações Principal (Ícones) - FUNDO MAIS ESCURO */
.header-action-bar {
    width: 100%;
    background-color: #333;
    padding-top: 20px;
    border-top: 1px solid #777;
    display: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.header-top-bar {
    display: none; /* Remove "PROJETO, EDIÇÃO, SUPORTE" */
}

/* ====================================================== */
/* --- ESTILOS PARA MÚLTIPLAS ANOTAÇÕES (Corrigido v2) --- */
/* ====================================================== */

/* O contêiner que segura as anotações */
.annotations-container {
    /* display: flex; */
    /* MUDANÇA: Reduz o gap padrão (para "Voltar a 𝄋") */
    /* gap: 4px; */
    /*flex-wrap: wrap; */ 
    /*justify-content: flex-start; /* Alinha à esquerda */
    /*align-items: flex-end; */
    min-height: 20px; 
}

/* Estilo para anotações de texto e DS */
.annotation-symbol {
    font-style: italic;
    font-weight: 500;
}

/* Estilo para Casas (1., 2.) */
.ending-annotation {
    
    /* Estilo e Posição do Texto ("1." / "2.") */
    font-weight: bold;
    font-size: 1.3em;
    color: #000;
    padding-left: 2px; /* << AJUSTE AQUI para recuo da barra */
    text-align: left;

    /* Layout e Linha */
    border-top: 2px solid black;
    line-height: 1.5;
    width: calc(103%); /* Largura com compensação de padding */
    margin-top: -15px;
    display: block;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    height: calc(40%);
    padding-top: 1px;
    margin-bottom: 20px;

}

/* Estilo para a "Linha" (Casa contínua) */
.ending-annotation[data-value="Line"] {
    font-size: 0;
    padding: 0;
    min-width: 20px; 
    border-top: 2px solid black;
}

/* Estilo para Símbolos de Repetição (Segno, Coda, DC) */
.repeat-symbol-annotation {
    font-family: 'ChordPadFont'; /* Garante a fonte correta */
    font-size: 1.8em; /* Ajusta o tamanho do símbolo */
    line-height: 0.3;
    left: 10px;
}

/* ====================================================== */
/* --- AJUSTE DE COLISÃO (Corrigido v2) --- */
/* ====================================================== */
/* O gap padrão é 4px (para Texto + Símbolo) */

/* MAS, se uma Casa (1., 2.) estiver ao lado 
   de um Símbolo (Segno/Coda)... */
.ending-annotation + .repeat-symbol-annotation,
.repeat-symbol-annotation + .ending-annotation {
     /* Aumenta o espaçamento (4px gap + 8px margin) */
     margin-left: 8px; 
}

/* E se uma Casa (1., 2.) estiver ao lado de Texto (DS/DC)... */
.ending-annotation + .annotation-symbol,
.annotation-symbol + .ending-annotation {
     /* Aumenta o espaçamento */
     margin-left: 22px; 
}

/* ============================================= */
/* --- CABEÇALHO E BARRAS FIXAS (STICKY) --- */
/* ============================================= */

.sticky-header-wrapper {
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #f8f9fa;
}

/* ============================================= */
/* --- TOOLBAR NOTATION FIXA --- */
/* ============================================= */

.notation-toolbar {
    position: fixed;
    z-index: 99;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 25px;
}

/* ============================================= */
/* --- ESTILOS (Common/Cut Time v2) --- */
/* ============================================= */

/* 1. Botão da Barra de Ferramentas (Tamanho Corrigido) */
/* Seletor mais específico para garantir prioridade sobre .btn-ts */
.toolbar-buttons-wrapper button.btn-ts-symbol {
    font-family: 'ChordPadFont' !important; /* Força a fonte */
    font-size: 1.6rem; /* Aumentei o tamanho */
    font-weight: normal;
    line-height: 1;
    padding-top: 4px; /* Ajuste vertical para o símbolo grande */
    padding-left: -10px;
    padding-bottom: 0;

}

/* 2. Símbolo DENTRO da Pauta (RenderSong) */
/* Esta é a nova classe que o renderSong() está usando */
.time-signature-symbol.custom-font-symbol-ts {
    font-family: 'ChordPadFont';
    font-size: 2rem; /* Tamanho grande na pauta */
    line-height: 1;
    /* Ajuste de posição vertical (pode precisar de ajuste fino) */
    position: relative;
    top: 0px; 
}

/* ====================================================== */
/* --- CARREGA A NOVA FONTE DE ARMADURAS --- */
/* ====================================================== */
/* (Assumindo que a fonte está na pasta /fonts/) */
@font-face {
    font-family: 'AccidentalsFont';
    src: url('fonts/accidentals.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* ============================================= */
/* --- AJUSTES ESTÉTICOS (Barra Inicial e Clave v3) --- */
/* ============================================= */



/* 2. Remove a barra esquerda do PRIMEIRO compasso (Clave substitui) */
.measure:first-child > .staff-lines-container {
    border-left: none;
}

/* 3. Remove a barra esquerda se for um "Início de Repetição" */
.measure.bar-repeat_start > .staff-lines-container {
    border-left: none;
}

/* 4. Estiliza a Clave de Sol (no primeiro compasso) */
.key-signature-clef {
    font-family: 'ChordPadFont'; /* Usa a fonte especial */
    font-size: 3.5rem; 
    line-height: 1;
    position: relative;
    top: 6px; /* Ajuste vertical */
    margin-right: 4px;
    float: left;
}

/* 5. Estiliza o GLIFO da Armadura de Clave (Sua Nova Abordagem) */
.key-signature-glyph {
    font-family: 'AccidentalsFont'; /* <<< USA A NOVA FONTE */
    font-size: 3.0rem; /* Tamanho do Glifo (Ajuste conforme necessário) */
    line-height: 1;
    position: relative;
    top: -8px; /* Ajuste vertical fino (igual ao da clave) */
    margin-right: 8px;
    float: left;
}

/* ====================================================== */
/* --- ESTILOS PAUSA LONGA (ELEMENTO INTERNO) - FINALIZADO --- */
/* ====================================================== */

/* 1. Estilo do Número (Geral) */
.long-rest-number {
    font-family: inherit; 
    font-size: 1.2rem !important; 
    font-weight: bold !important;
    color: #000 !important;
    display: inline-block !important;
    margin-top: 5px !important; 
    padding: 0 5px !important; 
    background-color: #fff !important;
    z-index: 6 !important;
    position: absolute !important; 
    left: 50% !important;        
    transform: translateX(-50%); 
}

/* 2. Desenho da Barra Horizontal (Geral - 3px) */
/* Apenas define a geometria horizontal, sem a serifa */
.measure:has(.long-rest-placeholder)::before {
    content: '';
    position: absolute;
    top: 48% !important;
    left: 10px; 
    width: calc(100% - 20px) !important; /* Esticamento horizontal */
    
    height:6px !important; /* CRÍTICO: Espessura da barra horizontal */
    background-color: #000 !important;
    margin-top: -1.5px !important; 
    z-index: 1 !important;
    border: none !important;
}

/* 3. Desenho das Serífas Verticais (Geral) */
/* Define a serifa ESQUERDA e a base para a direita */
.measure:has(.long-rest-placeholder)::after {
    content: '';
    position: absolute;
    top: 50% !important; /* Posição vertical das serifas */
    left: 10px; /* Posição da serifa ESQUERDA */
    width: 2px !important; 
    height: 16px !important; 
    background-color: #000 !important;
    transform: translateY(-50%);
    z-index: 2 !important; 
    
    /* Box shadow inicializado para a serifa da direita */
    box-shadow: 0 0 0 0 transparent; /* Padrão invisível */
}

/* 4. REGRAS ESPECÍFICAS DE TAMANHO (Onde o BOX-SHADOW é Calculado) */

/* --- SMALL (80px min-width) --- */
.measure.long-rest-small {
    min-width: 80px !important;
}
.measure.long-rest-small:has(.long-rest-placeholder)::after {
    /* Offset necessário para 80px de largura - 20px de padding = 60px */
    box-shadow: 58px 0 0 0 black; 
}

/* --- MEDIUM (140px min-width) --- */
.measure.long-rest-medium {
    min-width: 140px !important;
}
.measure.long-rest-medium:has(.long-rest-placeholder)::after {
    /* Offset necessário para 140px de largura - 20px de padding = 120px */
    box-shadow: 118px 0 0 0 black; 
}

/* --- LARGE (200px min-width) --- */
.measure.long-rest-large {
    min-width: 200px !important;
}
.measure.long-rest-large:has(.long-rest-placeholder)::after {
    /* Offset necessário para 200px de largura - 20px de padding = 180px */
    box-shadow: 178px 0 0 0 black; 
}

/* 5. Regras Estruturais (Mantidas) */
.measure:has(.long-rest-placeholder) {
    position: relative !important; 
}

/* ================================== */
/* --- CORREÇÃO (Staccato Modifier) --- */
/* ================================== */

/* Força o staccato (•) a usar uma fonte padrão 
   para que ele seja visível e clicável. */
.chord-modifier.staccato-modifier {
    font-family: Arial, sans-serif !important; 
    font-weight: bold;
    font-size: 1.2rem; /* Ajuste o tamanho do ponto */
    top: -1.3em;       /* Ajuste a posição vertical do ponto */
}

/* --- ESTILOS PAUSA LONGA (ELEMENTO INTERNO) FINAL --- */

/* 1. Estilo do Número (Mantido) */
.long-rest-number {
    font-family: inherit; 
    font-size: 1.2rem; 
    font-weight: bold;
    color: #000;
    display: inline-block;
    margin-top: 5px; 
    padding: 0 5px; 
    background-color: #fff;
    z-index: 6; 
}

/* 2. Desenho da Barra Horizontal (Linha central + Serifa Esquerda) */
.measure:has(.long-rest-placeholder)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px; 
    /* Utiliza calc() para abranger toda a largura menos 20px de padding */
    width: calc(100% - 20px); 
    
    height: 4px; /* MODIFICADO: Aumentado para 4px (Mais Grosso) */
    background-color: #000;
    margin-top: -2px; /* Centraliza verticalmente (metade da nova altura) */
    z-index: 1;
    
    /* ADIÇÃO CRÍTICA: Desenha a Serifa Esquerda (extensão vertical) */
    border-left: 2px solid black; /* Espessura da serifa */
    height: 12px; /* Altura total da serifa */
    margin-top: -6px; /* Reajusta a centralização para a altura de 12px */
}

/* 3. Desenho da Serifa Direita (Vertical line on the right) */
.measure:has(.long-rest-placeholder)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px; /* Posição 10px da borda direita */
    width: 2px; /* Espessura da serifa */
    height: 12px; /* Altura da serifa */
    background-color: #000;
    transform: translateY(-50%);
    z-index: 2;
}

/* 4. Regras de Tamanho (Mantidas) */
.measure:has(.long-rest-placeholder) {
    position: relative; 
}
.measure.long-rest-small {
    min-width: 80px; 
}
.measure.long-rest-medium {
    min-width: 140px;
}
.measure.long-rest-large {
    min-width: 200px; 
}

/* ====================================================== */
/* --- NÚMEROS DE COMPASSO (Measure Numbers) --- */
/* ====================================================== */

.measure-number {
    position: absolute;
    /* Posiciona um pouco acima da área de anotações (que está em -30px) */
    top: -40px; 
    left: 8px; /* Alinha com o início (barra) do compasso */
    
    /* Centraliza o número *sobre* a linha da barra */
    transform: translateX(-50%); 
    
    /* Usa a fonte manuscrita herdada do #editor-area */
    font-family: inherit; 
    font-size: 1.3rem; 
    font-weight: bold;
    color: #333; /* Cor escura, mas não preta */
    
    /* Fundo branco para "recortar" anotações ou linhas */
    background-color: #fff; 
    padding: 0 3px;
    
    /* Garante que fique acima das anotações (z-index: 5) */
    z-index: 6; 
    
    /* Impede que o número seja clicado (o clique vai para o compasso) */
    pointer-events: none; 
}

/* O JS já pula o index 0, mas isso é uma garantia extra */
.measure:first-child .measure-number {
    display: none;
}

/* ======================================================= */
/* --- ESTILOS QUICK CHORD MODAL --- */
/* ======================================================= */

/* Remove o 'zoom' automático em dispositivos móveis */
#quick-chord-input {
    font-size: 16px !important; 
}

/* Foco mais visível para o modal rápido */
#quick-chord-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,.25);
    outline: none;
}

.staff {
    page-break-inside: avoid;
    margin-bottom: 80px !important;
}

/* Força impressão dos pseudo-elementos das pausas longas */
.measure:has(.long-rest-placeholder)::before,
.measure:has(.long-rest-placeholder)::after {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Garante que pausas longas sejam visíveis na impressão */
.long-rest-number {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
}



/* ======================================================= */
/* --- ESTILO DO SHIELD (Correção de Flicker) --- */
/* ======================================================= */

#layout-shield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white; /* Cor branca para o escudo */
    z-index: 999999; /* Acima de TUDO */
}