/* Estilos base para el contenedor de ChordPro */
.song-content {
    font-family: monospace;
    line-height: 1.6;
    white-space: pre-wrap;
    padding: 1rem;
    overflow-x: hidden;
}

/* Párrafo */
.paragraph {
    margin: 1.5em 0;
}

/* Línea de canción */
.chord-line {
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 2.5em;
    padding-top: 1.5em; /* Espacio para los acordes */
    max-width: 100%;
    display: block;
    white-space: pre !important; /* Forzar que no se dividan las líneas */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Acordes */
.chord {
    color: var(--color-primary);
    font-weight: bold;
    position: absolute;
    top: 0;
    display: inline-block;
    min-width: fit-content;
    white-space: pre;
    line-height: 1.5;
    height: 1.5em;
    overflow: visible;
}

/* Letra */
.lyric {
    position: relative;
    display: inline;
    white-space: pre !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.5;
}

/* Secciones especiales */
.chorus {
    margin: 2em 0;
    font-weight: bold;
}

.chorus .paragraph {
    margin: 0.5em 0;
}

/* Directivas */
[data-directive] {
    display: none;
}

.comment {
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 1em 0;
}

/* Ajustes responsivos */
@media (max-width: 640px) {
    .song-content {
        font-size: 0.9rem;
        padding: 0.5rem;
    }

    .chord-line {
        min-height: 3em;
        padding-top: 1.5em;
        white-space: pre !important;
        overflow-x: auto;
    }

    .chord {
        font-size: 0.85em;
        white-space: pre;
    }

    .lyric {
        white-space: pre !important;
        word-break: keep-all !important;
        word-wrap: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
}

/* Ajustes de impresión */
@media print {
    .chord-line {
        page-break-inside: avoid;
        white-space: pre !important;
        padding-top: 1.5em;
        overflow-x: visible;
    }
    
    .lyric {
        white-space: pre !important;
        word-break: keep-all !important;
        word-wrap: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
}