/* ==========================================================================
   LETRAS CON ACORDES - CSS COMPLETO
   Versión: 4.2 - Optimizado y Sin Duplicados
   ========================================================================== */

/* ==========================================================================
   1. RESET ANTI-TEMPLATE
   ========================================================================== */
.lca-cancion, .lca-cancion *, .lca-cancion *::before, .lca-cancion *::after {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
}

.lca-cancion button, .lca-cancion select, .lca-cancion input {
    font-family: inherit !important; line-height: normal !important;
    text-transform: none !important; letter-spacing: normal !important;
    margin: 0 !important; outline: none !important;
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
}

.lca-cancion button {
    text-shadow: none !important; cursor: pointer !important;
    user-select: none !important; -webkit-user-select: none !important;
}

/* ==========================================================================
   2. CONTENEDOR PRINCIPAL
   ========================================================================== */
.lca-cancion {
    font-size: 16px; position: relative; width: 100% !important; max-width: 100% !important;
    margin: 20px auto; padding: 30px; background: var(--lca-color-fondo, #fafafa);
    border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    line-height: 1.4; color: var(--lca-color-texto, #333);
    overflow: visible; box-sizing: border-box !important;
}

/* ==========================================================================
   3. BARRA DE CONTROLES
   ========================================================================== */
.lca-controles {
    display: flex !important; flex-wrap: wrap !important; gap: 12px !important;
    margin-bottom: 25px !important; align-items: center !important;
    justify-content: flex-start !important; width: 100% !important;
    max-width: 100% !important; box-sizing: border-box !important;
}

.lca-selector, .lca-transposicion, .lca-tamano-texto, .lca-exportar, .lca-modo-vista, .lca-favorito {
    display: inline-flex !important; align-items: center !important; justify-content: flex-start !important;
    gap: 8px !important; padding: 6px 12px !important; background: white !important;
    border-radius: 6px !important; border: 1px solid #ddd !important;
    flex: 0 0 auto !important; width: auto !important; min-width: auto !important;
    max-width: none !important; height: auto !important; box-sizing: border-box !important;
    vertical-align: middle !important; flex-shrink: 0 !important;
}

.lca-controles label {
    font-weight: bold !important; font-size: 13px !important; color: #555 !important;
    margin: 0 !important; padding: 0 !important; line-height: 1 !important;
    white-space: nowrap !important; display: inline !important; width: auto !important;
}

/* ==========================================================================
   4. BOTONES
   ========================================================================== */
.lca-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 6px 12px !important; font-size: 13px !important; font-weight: bold !important;
    border: 1px solid #ccc !important; border-radius: 4px !important; background: white !important;
    color: #333 !important; cursor: pointer !important; transition: all 0.2s ease !important;
    text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important;
    line-height: 1 !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important;
    width: auto !important; min-width: 32px !important; max-width: none !important;
    white-space: nowrap !important; vertical-align: middle !important; flex: 0 0 auto !important;
    flex-shrink: 0 !important; box-sizing: border-box !important; margin: 0 !important;
}

.lca-btn:hover {
    background: var(--lca-color-principal, #d32f2f) !important; color: white !important;
    border-color: var(--lca-color-principal, #d32f2f) !important; transform: translateY(-1px) !important;
}
.lca-btn:active { transform: translateY(0) !important; }
.lca-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; }

.lca-btn-transponer, .lca-btn-reset, .lca-btn-tamano {
    width: 36px !important; min-width: 36px !important; max-width: 36px !important;
    height: 32px !important; min-height: 32px !important; max-height: 32px !important;
    padding: 0 !important; font-size: 16px !important; flex: 0 0 36px !important;
}
.lca-btn-tamano { font-size: 14px !important; }

.lca-btn-pdf {
    padding: 6px 16px !important;
    background: linear-gradient(135deg, var(--lca-color-principal, #d32f2f) 0%, var(--lca-color-metadata-bg, #764ba2) 100%) !important;
    color: white !important; border: none !important; font-weight: bold !important;
    height: 32px !important; min-height: 32px !important; max-height: 32px !important;
    width: auto !important; box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3) !important;
}
.lca-btn-pdf:hover {
    background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%) !important;
    transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4) !important;
}

/* ==========================================================================
   5. SELECTS Y DISPLAYS NUMÉRICOS
   ========================================================================== */
.lca-instrumento-select {
    padding: 6px 28px 6px 10px !important; font-size: 13px !important;
    border: 1px solid #ccc !important; border-radius: 4px !important;
    background: white !important; color: #333 !important; cursor: pointer !important;
    height: 32px !important; min-height: 32px !important; max-height: 32px !important;
    width: auto !important; min-width: 120px !important; max-width: 180px !important;
    line-height: 1 !important; vertical-align: middle !important; flex: 0 0 auto !important;
    box-sizing: border-box !important; margin: 0 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: right 6px center !important; background-size: 16px !important;
}
.lca-instrumento-select:hover { border-color: #d32f2f !important; }

.lca-transponer-valor, .lca-tamano-valor {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-width: 32px !important; width: 32px !important; max-width: 32px !important;
    height: 32px !important; min-height: 32px !important; max-height: 32px !important;
    text-align: center !important; font-weight: bold !important; font-size: 14px !important;
    font-family: Arial, sans-serif !important; line-height: 1 !important;
    padding: 0 !important; margin: 0 !important; vertical-align: middle !important;
    flex: 0 0 32px !important; box-sizing: border-box !important; white-space: nowrap !important;
}

.lca-transponer-valor {
    color: var(--lca-color-principal, #d32f2f) !important; background: rgba(211, 47, 47, 0.08) !important;
    border: 1px solid var(--lca-color-principal, #d32f2f) !important; border-radius: 4px !important;
}
.lca-tamano-valor {
    color: var(--lca-color-secundario, #667eea) !important; background: rgba(102, 126, 234, 0.08) !important;
    border: 1px solid var(--lca-color-secundario, #667eea) !important; border-radius: 4px !important;
}

/* ==========================================================================
   6. BOTÓN DE FAVORITO
   ========================================================================== */
.lca-btn-favorito {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 6px 18px !important; background: white !important; border: 2px solid #ddd !important;
    border-radius: 25px !important; color: #666 !important; font-size: 13px !important;
    font-weight: bold !important; cursor: pointer !important; transition: all 0.3s ease !important;
    height: 36px !important; min-height: 36px !important; max-height: 36px !important;
    line-height: 1 !important; white-space: nowrap !important; font-family: Arial, sans-serif !important;
    letter-spacing: 0.3px !important;
}
.lca-btn-favorito:hover {
    border-color: #e91e63 !important; color: #e91e63 !important;
    transform: translateY(-1px) !important; box-shadow: 0 3px 10px rgba(233, 30, 99, 0.2) !important;
}
.lca-btn-favorito.activo {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%) !important;
    border-color: #c2185b !important; color: white !important; box-shadow: 0 3px 12px rgba(233, 30, 99, 0.3) !important;
}
.lca-btn-favorito.activo:hover {
    background: linear-gradient(135deg, #c2185b 0%, #ad1457 100%) !important;
    color: white !important; transform: translateY(-1px) !important; box-shadow: 0 5px 15px rgba(233, 30, 99, 0.4) !important;
}
.lca-btn-favorito.animando { animation: lca-pop 0.4s ease !important; }
@keyframes lca-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.lca-favorito-texto { line-height: 1 !important; }

/* ==========================================================================
   7. METADATOS (encabezado)
   ========================================================================== */
.lca-metadata {
    margin-bottom: 15px !important; padding: 20px !important;
    background: linear-gradient(135deg, var(--lca-color-secundario, #667eea) 0%, var(--lca-color-metadata-bg, #764ba2) 100%) !important;
    border-radius: 10px !important; color: white !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    width: 100% !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important;
}
.lca-metadata::before {
    content: '' !important; position: absolute !important; top: -50% !important; right: -20% !important;
    width: 300px !important; height: 300px !important; background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 50% !important; pointer-events: none !important;
}
.lca-titulo {
    margin: 0 0 8px 0 !important; font-size: 28px !important; font-weight: bold !important;
    text-align: center !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    color: white !important; line-height: 1.2 !important; padding: 0 !important;
    width: 100% !important; position: relative !important; z-index: 1 !important;
}
.lca-subtitulo {
    margin: 0 0 8px 0 !important; font-size: 14px !important; text-align: center !important;
    color: rgba(255,255,255,0.9) !important; font-style: italic !important;
    padding: 0 !important; line-height: 1.3 !important; position: relative !important; z-index: 1 !important;
}
.lca-info-cancion {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    justify-content: center !important; align-items: center !important; font-size: 13px !important;
    margin-top: 8px !important; width: 100% !important; position: relative !important; z-index: 1 !important;
}
.lca-info-item {
    background: rgba(255,255,255,0.2) !important; padding: 5px 12px !important;
    border-radius: 20px !important; backdrop-filter: blur(5px) !important;
    display: inline-block !important; font-size: 12px !important; line-height: 1.4 !important;
    margin: 0 !important; white-space: nowrap !important; border: 1px solid rgba(255,255,255,0.3) !important;
    transition: all 0.2s ease !important;
}
.lca-info-item:hover { background: rgba(255,255,255,0.3) !important; transform: translateY(-1px) !important; }

/* ==========================================================================
   8. LÍNEAS Y ACORDES (OPTIMIZADO PARA EVITAR ENCIMAMIENTO)
   ========================================================================== */
.lca-letra { width: 100% !important; box-sizing: border-box !important; }

.lca-linea {
    margin-bottom: 1px !important; position: relative !important;
    min-height: 10px !important; width: 100% !important; box-sizing: border-box !important;
}

.lca-acordes-linea {
    position: relative !important; height: 28px !important; margin-bottom: 1px !important;
    width: 100% !important; overflow: visible !important; font-family: inherit !important;
    font-size: inherit !important; box-sizing: border-box !important; contain: none !important;
}

.lca-acorde {
    position: absolute !important; top: 0 !important;
    color: var(--lca-color-principal, #d32f2f) !important; font-weight: bold !important;
    cursor: pointer !important; background: transparent !important; border: none !important;
    border-radius: 0 !important; font-size: 14px !important; text-decoration: none !important;
    white-space: nowrap !important; transition: all 0.2s ease !important; z-index: 10 !important;
    padding: 2px 3px !important; min-width: auto !important; min-height: auto !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    line-height: 1 !important; transform: translateX(-50%) !important;
    box-sizing: border-box !important; margin: 0 !important; text-transform: none !important;
    letter-spacing: normal !important; height: auto !important; width: auto !important; max-width: none !important;
    /* Halo blanco para legibilidad cuando están muy juntos */
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white,
                 0 -1px 0 white, 0 1px 0 white, -1px 0 0 white, 1px 0 0 white;
}

.lca-acorde:hover {
    background: rgba(211, 47, 47, 0.15) !important; color: var(--lca-color-principal, #d32f2f) !important;
    transform: translateX(-50%) translateY(-1px) !important; border-radius: 3px !important;
    text-shadow: none !important; z-index: 100 !important;
}

.lca-texto-linea {
    font-size: 18px !important; line-height: 1.4 !important;
    color: var(--lca-color-texto, #333) !important; white-space: pre-wrap !important;
    margin: 0 !important; padding: 0 !important;
}

/* ==========================================================================
   9. TOOLTIP Y DIAGRAMAS
   ========================================================================== */
.lca-tooltip {
    display: none !important; position: fixed !important; background: white !important;
    border: 3px solid #333 !important; border-radius: 10px !important; padding: 20px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important; z-index: 99999 !important;
    min-width: 220px !important; max-width: 95vw !important; width: auto !important; box-sizing: border-box !important;
}
.lca-cancion { position: relative !important; }
.lca-cancion .lca-tooltip { position: fixed !important; z-index: 99999 !important; }
.lca-tooltip.activo { display: block !important; }

.lca-tooltip .acorde-nombre {
    text-align: center !important; font-weight: bold !important; font-size: 18px !important;
    margin-bottom: 10px !important; color: #d32f2f !important; text-transform: uppercase !important;
    letter-spacing: 1px !important; line-height: 1.2 !important; padding: 0 !important;
}
.lca-tooltip .acorde-notas {
    text-align: center !important; font-size: 13px !important; color: #666 !important;
    margin-bottom: 10px !important; line-height: 1.4 !important; padding: 0 !important;
}
.lca-tooltip svg { display: block !important; margin: 0 auto !important; }

.diagrama-guitarra { width: 150px !important; height: 180px !important; }
.diagrama-ukelele { width: 110px !important; height: 160px !important; }
.diagrama-piano {
    width: 100% !important; max-width: 440px !important; height: auto !important;
    aspect-ratio: 440 / 140 !important;
}

/* ==========================================================================
   10. SECCIÓN DE DESCARGA Y LOGIN
   ========================================================================== */
.lca-download-section {
    margin-top: 30px !important; padding: 25px !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%) !important;
    border: 2px dashed var(--lca-color-secundario, #667eea) !important; border-radius: 12px !important;
    text-align: center !important; transition: all 0.3s ease !important; width: 100% !important; box-sizing: border-box !important;
}
.lca-download-section:hover {
    border-color: var(--lca-color-principal, #d32f2f) !important; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15) !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
}
.lca-download-info { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin-bottom: 15px !important; }
.lca-download-icon { font-size: 24px !important; line-height: 1 !important; }
.lca-download-text { font-size: 14px !important; font-weight: bold !important; color: var(--lca-color-secundario, #667eea) !important; text-transform: uppercase !important; letter-spacing: 1px !important; line-height: 1 !important; }

.lca-btn-download {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 10px !important; padding: 14px 28px !important;
    background: linear-gradient(135deg, var(--lca-color-secundario, #667eea) 0%, var(--lca-color-metadata-bg, #764ba2) 100%) !important;
    color: white !important; text-decoration: none !important; border-radius: 8px !important;
    font-weight: bold !important; font-size: 15px !important; transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important; border: none !important;
    cursor: pointer !important; line-height: 1 !important; height: auto !important; width: auto !important;
}
.lca-btn-download:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important; filter: brightness(1.1) !important; }

.lca-download-hint { margin-top: 12px !important; font-size: 12px !important; color: #78909c !important; font-style: italic !important; line-height: 1.4 !important; padding: 0 !important; }
.lca-download-hint a { color: var(--lca-color-principal, #d32f2f) !important; text-decoration: none !important; font-weight: bold !important; }
.lca-download-hint a:hover { text-decoration: underline !important; }

.lca-download-locked { background: linear-gradient(135deg, rgba(255, 152, 0, 0.05) 0%, rgba(255, 87, 34, 0.05) 100%) !important; border-color: #ff9800 !important; }
.lca-download-locked:hover { border-color: #f57c00 !important; }
.lca-download-message { margin: 15px 0 !important; font-size: 14px !important; color: #5d4037 !important; font-weight: 500 !important; line-height: 1.4 !important; padding: 0 !important; }

.lca-btn-login {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; padding: 12px 24px !important;
    background: linear-gradient(135deg, var(--lca-color-principal, #d32f2f) 0%, var(--lca-color-metadata-bg, #764ba2) 100%) !important;
    color: white !important; text-decoration: none !important; border-radius: 8px !important;
    font-weight: bold !important; font-size: 14px !important; transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3) !important; line-height: 1 !important;
    height: auto !important; width: auto !important; cursor: pointer !important; position: relative !important;
    z-index: 10 !important; pointer-events: auto !important;
}
.lca-btn-login:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4) !important; filter: brightness(1.1) !important; }
.lca-btn-login * { pointer-events: none !important; }

/* ==========================================================================
   11. OVERLAY DE PDF Y ESTADOS
   ========================================================================== */
.lca-pdf-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    background: rgba(0,0,0,0.7) !important; display: flex !important; flex-direction: column !important;
    justify-content: center !important; align-items: center !important; z-index: 999999 !important; color: white !important;
}
.lca-pdf-overlay .spinner {
    width: 50px !important; height: 50px !important; border: 5px solid rgba(255,255,255,0.3) !important;
    border-top-color: white !important; border-radius: 50% !important; animation: lca-spin 1s linear infinite !important;
    margin-bottom: 20px !important; box-sizing: border-box !important;
}
@keyframes lca-spin { to { transform: rotate(360deg); } }
.lca-pdf-overlay .mensaje { font-size: 18px !important; font-weight: bold !important; line-height: 1.4 !important; padding: 0 !important; margin: 0 !important; }

.lca-cancion.exportando-pdf .lca-controles, .lca-cancion.exportando-pdf .lca-tooltip { display: none !important; }
.lca-cancion.exportando-pdf { box-shadow: none !important; }
.lca-cancion.pdf-ready { background: white !important; padding: 20px !important; box-shadow: none !important; }
.lca-cancion.pdf-ready .lca-metadata { background: #f5f5f5 !important; color: #333 !important; box-shadow: none !important; }
.lca-cancion.pdf-ready .lca-titulo { color: #333 !important; text-shadow: none !important; }
.lca-cancion.pdf-ready .lca-info-item { background: #e0e0e0 !important; color: #333 !important; }

.lca-error {
    padding: 20px !important; background: #ffebee !important; border: 2px solid #d32f2f !important;
    border-radius: 8px !important; color: #d32f2f !important; font-weight: bold !important;
    text-align: center !important; margin: 20px 0 !important; font-size: 14px !important;
    line-height: 1.4 !important; width: 100% !important; box-sizing: border-box !important;
}

/* ==========================================================================
   12. BOTONES DE MODO Y GLOSARIO
   ========================================================================== */
.lca-btn-modo {
    padding: 6px 12px !important; font-size: 12px !important; font-weight: bold !important;
    border: 1px solid transparent !important; border-radius: 4px !important;
    background: transparent !important; color: #666 !important; cursor: pointer !important;
    transition: all 0.2s ease !important; height: 28px !important; min-height: 28px !important;
    max-height: 28px !important; line-height: 1 !important; white-space: nowrap !important;
}
.lca-btn-modo.activo {
    background: var(--lca-color-principal, #d32f2f) !important; color: white !important;
    border-color: var(--lca-color-principal, #d32f2f) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
.lca-btn-modo:hover:not(.activo) {
    background: rgba(211, 47, 47, 0.08) !important; color: var(--lca-color-principal, #d32f2f) !important;
    border-color: var(--lca-color-principal, #d32f2f) !important;
}

.lca-cancion.modo-solo-letra .lca-acordes-linea { display: none !important; }
.lca-cancion.modo-solo-letra .lca-linea { min-height: auto !important; margin-bottom: 4px !important; }
.lca-cancion.modo-solo-letra .lca-glosario, .lca-cancion.modo-solo-letra .lca-rasgueo, .lca-cancion.modo-solo-letra .lca-video-container { display: none !important; }

.lca-glosario {
    margin-top: 30px !important; padding: 20px !important; background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important;
}
.lca-glosario-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    margin-bottom: 15px !important; padding-bottom: 10px !important;
    border-bottom: 2px solid var(--lca-color-principal, #d32f2f) !important; flex-wrap: wrap !important; gap: 10px !important;
}
.lca-glosario-titulo { margin: 0 !important; font-size: 18px !important; color: #333 !important; font-weight: bold !important; padding: 0 !important; line-height: 1.2 !important; }
.lca-btn-glosario-toggle {
    padding: 6px 14px !important; font-size: 12px !important; font-weight: bold !important;
    font-family: Arial, sans-serif !important; border: 1px solid #ccc !important; border-radius: 4px !important;
    background: white !important; color: #333 !important; cursor: pointer !important; height: auto !important;
    min-height: 28px !important; max-height: 28px !important; line-height: 1 !important;
    white-space: nowrap !important; transition: all 0.2s ease !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important; gap: 4px !important;
}
.lca-btn-glosario-toggle:hover { background: #d32f2f !important; color: white !important; border-color: #d32f2f !important; }
.lca-glosario-flecha { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }
.lca-glosario-flecha svg { display: block !important; width: 10px !important; height: 10px !important; }
.lca-glosario-contenido { transition: all 0.3s ease !important; overflow: hidden !important; }
.lca-glosario-contenido.oculto { max-height: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; }
.lca-glosario-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 15px !important; margin-top: 10px !important; }
.lca-glosario-item {
    background: white !important; border: 1px solid #e0e0e0 !important; border-radius: 6px !important;
    padding: 10px !important; text-align: center !important; transition: all 0.2s ease !important; box-sizing: border-box !important;
}
.lca-glosario-item:hover {
    border-color: var(--lca-color-principal, #d32f2f) !important; box-shadow: 0 2px 8px rgba(211, 47, 47, 0.15) !important; transform: translateY(-2px) !important;
}
.lca-glosario-nombre {
    font-size: 16px !important; font-weight: bold !important; color: var(--lca-color-principal, #d32f2f) !important;
    margin-bottom: 8px !important; padding: 0 !important; line-height: 1.2 !important;
}
.lca-glosario-diagrama { display: flex !important; justify-content: center !important; align-items: center !important; min-height: 100px !important; }
.lca-glosario-diagrama svg { max-width: 100% !important; height: auto !important; }

/* ==========================================================================
   13. TABLATURA Y RASGUEO
   ========================================================================== */
.lca-tablatura {
    margin: 20px 0 !important; background: #1e1e1e !important; border-radius: 8px !important;
    overflow: hidden !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    width: 100% !important; box-sizing: border-box !important;
}
.lca-tablatura-header {
    display: flex !important; align-items: center !important; gap: 8px !important; padding: 10px 15px !important;
    background: linear-gradient(135deg, var(--lca-color-principal, #d32f2f) 0%, var(--lca-color-metadata-bg, #764ba2) 100%) !important;
    color: white !important; font-family: Arial, sans-serif !important; font-weight: bold !important;
    font-size: 13px !important; letter-spacing: 1px !important; text-transform: uppercase !important;
}
.lca-tablatura-icono { font-size: 16px !important; line-height: 1 !important; }
.lca-tablatura-titulo { line-height: 1 !important; }
.lca-tablatura-contenido { padding: 15px !important; overflow-x: auto !important; background: #1e1e1e !important; }
.lca-tablatura-pre {
    margin: 0 !important; padding: 0 !important; font-family: 'Courier New', Courier, monospace !important;
    font-size: 14px !important; line-height: 1.5 !important; color: #ffffff !important;
    white-space: pre !important; overflow-x: auto !important; background: transparent !important;
    border: none !important; letter-spacing: 0 !important; word-spacing: 0 !important; tab-size: 4 !important;
}
.lca-tablatura-contenido::-webkit-scrollbar { height: 8px !important; }
.lca-tablatura-contenido::-webkit-scrollbar-track { background: #2c2c2c !important; border-radius: 4px !important; }
.lca-tablatura-contenido::-webkit-scrollbar-thumb { background: #d32f2f !important; border-radius: 4px !important; }
.lca-tablatura-contenido::-webkit-scrollbar-thumb:hover { background: #b71c1c !important; }
.lca-cancion.modo-solo-letra .lca-tablatura { display: block !important; }

.lca-rasgueo {
    margin: 20px 0 !important; background: white !important;
    border: 2px solid var(--lca-color-principal, #d32f2f) !important; border-radius: 8px !important;
    overflow: hidden !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    width: 100% !important; box-sizing: border-box !important;
}
.lca-rasgueo-header {
    display: flex !important; align-items: center !important; gap: 8px !important; padding: 10px 15px !important;
    background: linear-gradient(135deg, var(--lca-color-principal, #d32f2f) 0%, var(--lca-color-metadata-bg, #764ba2) 100%) !important;
    color: white !important; font-family: Arial, sans-serif !important; font-weight: bold !important;
    font-size: 13px !important; letter-spacing: 1px !important; text-transform: uppercase !important;
}
.lca-rasgueo-icono { font-size: 16px !important; line-height: 1 !important; }
.lca-rasgueo-titulo { line-height: 1 !important; }
.lca-rasgueo-contenido { padding: 15px !important; background: #fafafa !important; }
.lca-rasgueo-simbolos { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; align-items: flex-end !important; margin-bottom: 15px !important; }
.lca-rasgueo-item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; min-width: 36px !important; }
.lca-rasgueo-flecha {
    font-size: 28px !important; font-weight: bold !important; line-height: 1 !important;
    width: 36px !important; height: 36px !important; display: flex !important;
    align-items: center !important; justify-content: center !important; border-radius: 50% !important;
    transition: transform 0.2s ease !important;
}
.lca-rasgueo-tiempo { font-size: 10px !important; color: #999 !important; font-family: Arial, sans-serif !important; font-weight: bold !important; }
.lca-rasgueo-down .lca-rasgueo-flecha { color: var(--lca-color-principal, #d32f2f) !important; background: rgba(211, 47, 47, 0.1) !important; border: 2px solid var(--lca-color-principal, #d32f2f) !important; }
.lca-rasgueo-up .lca-rasgueo-flecha { color: #1976d2 !important; background: #e3f2fd !important; border: 2px solid #1976d2 !important; }
.lca-rasgueo-mute .lca-rasgueo-flecha { color: #666 !important; background: #f5f5f5 !important; border: 2px solid #666 !important; font-size: 20px !important; }
.lca-rasgueo-rest .lca-rasgueo-flecha { color: #bbb !important; background: transparent !important; border: 2px dashed #bbb !important; font-size: 24px !important; }
.lca-rasgueo-other .lca-rasgueo-flecha { color: #333 !important; background: #fff !important; border: 2px solid #333 !important; font-size: 16px !important; }
.lca-rasgueo-item:hover .lca-rasgueo-flecha { transform: scale(1.1) !important; }
.lca-rasgueo-leyenda {
    display: flex !important; flex-wrap: wrap !important; gap: 15px !important; justify-content: center !important;
    padding-top: 12px !important; border-top: 1px solid #e0e0e0 !important; font-family: Arial, sans-serif !important;
    font-size: 12px !important; color: #666 !important;
}
.lca-rasgueo-leyenda span { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.lca-leyenda-down, .lca-leyenda-up, .lca-leyenda-mute, .lca-leyenda-rest { font-size: 14px !important; font-weight: bold !important; }
.lca-leyenda-down { color: #d32f2f !important; }
.lca-leyenda-up { color: #1976d2 !important; }
.lca-leyenda-mute { color: #666 !important; }
.lca-leyenda-rest { color: #bbb !important; }

/* ==========================================================================
   14. VIDEO
   ========================================================================== */
.lca-video-container {
    margin: 25px 0 20px 0 !important; background: #1a1a1a !important; border-radius: 10px !important;
    overflow: hidden !important; box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
    width: 100% !important; box-sizing: border-box !important;
}
.lca-video-header {
    display: flex !important; align-items: center !important; gap: 8px !important; padding: 10px 15px !important;
    background: linear-gradient(135deg, var(--lca-color-principal, #d32f2f) 0%, var(--lca-color-metadata-bg, #764ba2) 100%) !important;
    color: white !important; font-family: Arial, sans-serif !important; font-weight: bold !important;
    font-size: 13px !important; letter-spacing: 1px !important; text-transform: uppercase !important;
}
.lca-video-icono {
    font-size: 14px !important; line-height: 1 !important; width: 22px !important; height: 22px !important;
    border-radius: 4px !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; font-weight: bold !important; background: white !important;
    color: var(--lca-color-principal, #d32f2f) !important;
}
.lca-video-titulo { line-height: 1 !important; }
.lca-video-wrapper {
    position: relative !important; width: 100% !important; padding-bottom: 56.25% !important;
    height: 0 !important; overflow: hidden !important; background: #000 !important;
}
.lca-video-wrapper iframe, .lca-video-iframe {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important;
    height: 100% !important; border: none !important; display: block !important; background: #000 !important;
}
.lca-video-fallback {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%) !important; color: white !important;
    text-align: center !important; padding: 20px !important; box-sizing: border-box !important;
}
.lca-video-fallback p { margin: 0 0 15px 0 !important; font-size: 14px !important; color: #ccc !important; padding: 0 !important; }
.lca-video-fallback a {
    display: inline-block !important; padding: 10px 20px !important; background: var(--lca-color-principal, #d32f2f) !important;
    color: white !important; text-decoration: none !important; border-radius: 6px !important;
    font-weight: bold !important; font-size: 13px !important; transition: all 0.3s ease !important;
}
.lca-video-fallback a:hover { background: var(--lca-color-metadata-bg, #764ba2) !important; transform: translateY(-2px) !important; }
.lca-video-enlace-directo, .lca-video-enlace {
    padding: 10px 15px !important; background: #2c2c2c !important; text-align: center !important; border-top: 1px solid #444 !important;
}
.lca-video-enlace-directo a, .lca-video-enlace a {
    color: white !important; text-decoration: none !important; font-size: 13px !important;
    font-weight: bold !important; font-family: Arial, sans-serif !important; transition: color 0.2s ease !important;
}
.lca-video-enlace-directo a:hover, .lca-video-enlace a:hover { color: var(--lca-color-principal, #d32f2f) !important; text-decoration: underline !important; }
.lca-video-error {
    padding: 15px !important; background: #ffebee !important; border: 1px solid #d32f2f !important;
    border-radius: 6px !important; color: #d32f2f !important; text-align: center !important;
    font-size: 13px !important; margin: 15px 0 !important;
}
.lca-cancion.modo-solo-letra .lca-video-container { display: none !important; }

/* ==========================================================================
   15. MODO "SOLO ACORDES" Y SECCIÓN DE SOLO LETRA
   ========================================================================== */
.lca-linea-solo-acordes {
    margin: 15px 0 !important; padding: 15px !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%) !important;
    border-left: 4px solid var(--lca-color-principal, #d32f2f) !important; border-radius: 6px !important; min-height: auto !important;
}
.lca-acordes-fila { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; justify-content: flex-start !important; }
.lca-acorde-fila {
    position: relative !important; top: auto !important; left: auto !important; transform: none !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 8px 16px !important; background: white !important; border: 2px solid var(--lca-color-principal, #d32f2f) !important;
    border-radius: 6px !important; color: var(--lca-color-principal, #d32f2f) !important; font-weight: bold !important;
    font-size: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important;
    white-space: nowrap !important; box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important; margin: 0 !important;
}
.lca-acorde-fila:hover {
    background: var(--lca-color-principal, #d32f2f) !important; color: white !important;
    transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3) !important;
}

.lca-texto-linea.lca-solo-letra {
    font-style: italic !important; color: #555 !important; padding-left: 15px !important;
    border-left: 3px solid #ddd !important; opacity: 0.9 !important;
}

/* ==========================================================================
   16. VIDEO AL INICIO DE LA CANCIÓN
   ========================================================================== */
.lca-metadata + .lca-video-container {
    margin-top: 20px !important; margin-bottom: 20px !important; border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}
.lca-metadata + .lca-video-container .lca-video-header { padding: 8px 15px !important; font-size: 12px !important; }
.lca-metadata + .lca-video-container .lca-video-icono { width: 20px !important; height: 20px !important; font-size: 13px !important; }

/* ==========================================================================
   17. RESPONSIVE GENERAL
   ========================================================================== */
@media (max-width: 900px) {
    .lca-cancion { padding: 20px !important; margin: 15px !important; }
    .lca-controles { gap: 10px !important; padding: 12px !important; }
    .lca-selector, .lca-transposicion, .lca-tamano-texto, .lca-exportar, .lca-modo-vista, .lca-favorito { padding: 6px 10px !important; gap: 6px !important; }
    .lca-titulo { font-size: 26px !important; }
}

@media (max-width: 600px) {
    .lca-cancion { padding: 15px !important; margin: 10px !important; font-size: 14px !important; }
    .lca-controles { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 10px !important; }
    .lca-selector, .lca-transposicion, .lca-tamano-texto, .lca-exportar, .lca-modo-vista, .lca-favorito { width: 100% !important; justify-content: center !important; padding: 8px !important; }
    .lca-instrumento-select { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; width: 100% !important; }
    .lca-btn, .lca-btn-transponer, .lca-btn-reset, .lca-btn-tamano { height: 36px !important; min-height: 36px !important; max-height: 36px !important; }
    .lca-btn-transponer, .lca-btn-reset, .lca-btn-tamano { width: 40px !important; min-width: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; }
    .lca-transponer-valor, .lca-tamano-valor { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; flex: 0 0 40px !important; }
    .lca-btn-pdf { width: 100% !important; justify-content: center !important; }
    .lca-acorde { font-size: 10px !important; min-width: 24px !important; min-height: 24px !important; padding: 3px 6px !important; }
    .lca-texto-linea { font-size: 14px !important; }
    .lca-tooltip { min-width: 180px !important; padding: 15px !important; max-width: 90vw !important; }
    .lca-titulo { font-size: 22px !important; }
    .lca-info-cancion { flex-direction: column !important; gap: 6px !important; }
    .lca-info-item { width: 100% !important; text-align: center !important; }
    .diagrama-guitarra { width: 130px !important; height: 156px !important; }
    .diagrama-ukelele { width: 100px !important; height: 145px !important; }
    .diagrama-piano { width: 100% !important; max-width: 440px !important; height: auto !important; aspect-ratio: 440 / 140 !important; }
    .lca-download-section { padding: 15px !important; margin: 15px 0 !important; }
    .lca-btn-download, .lca-btn-login { padding: 12px 20px !important; font-size: 13px !important; width: 100% !important; }
    .lca-linea-solo-acordes { padding: 10px 12px !important; }
    .lca-acordes-fila { gap: 8px !important; }
    .lca-acorde-fila { padding: 6px 12px !important; font-size: 12px !important; }
    .lca-video-container { margin: 20px 0 15px 0 !important; border-radius: 8px !important; }
    .lca-video-header { font-size: 11px !important; padding: 8px 12px !important; }
    .lca-video-icono { width: 18px !important; height: 18px !important; font-size: 12px !important; }
    .lca-video-enlace-directo, .lca-video-enlace { padding: 8px 12px !important; }
    .lca-video-enlace-directo a, .lca-video-enlace a { font-size: 12px !important; }
    .lca-metadata + .lca-video-container { margin-top: 15px !important; margin-bottom: 15px !important; border-radius: 8px !important; }
    .lca-metadata + .lca-video-container .lca-video-header { padding: 6px 12px !important; font-size: 11px !important; }
    .lca-glosario-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; gap: 10px !important; }
    .lca-glosario-item { padding: 8px !important; }
    .lca-glosario-nombre { font-size: 14px !important; }
    .lca-modo-vista { width: 100% !important; justify-content: center !important; }
    .lca-btn-modo { flex: 1 !important; }
    .lca-btn-favorito { padding: 6px 14px !important; font-size: 12px !important; }
    .lca-tablatura-pre { font-size: 12px !important; }
    .lca-tablatura-header { font-size: 11px !important; padding: 8px 12px !important; }
    .lca-tablatura-contenido { padding: 10px !important; }
    .lca-rasgueo-flecha { font-size: 22px !important; width: 30px !important; height: 30px !important; min-width: 30px !important; }
    .lca-rasgueo-item { min-width: 30px !important; }
    .lca-rasgueo-contenido { padding: 15px 10px !important; }
    .lca-rasgueo-leyenda { font-size: 11px !important; gap: 10px !important; }
}

@media (max-width: 380px) {
    .lca-cancion { padding: 10px !important; margin: 5px !important; }
    .lca-controles label { font-size: 11px !important; }
    .lca-btn { font-size: 11px !important; padding: 4px 8px !important; }
    .lca-titulo { font-size: 18px !important; }
}

/* ==========================================================================
   18. IMPRESIÓN / EXPORTAR PDF
   ========================================================================== */
@media print {
    body * { visibility: hidden !important; }
    .lca-cancion, .lca-cancion * { visibility: visible !important; }
    .lca-cancion {
        position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important;
        max-width: 100% !important; margin: 0 !important; padding: 15mm !important; background: white !important;
        box-shadow: none !important; border: none !important; border-radius: 0 !important;
    }
    .lca-cancion .lca-controles, .lca-cancion .lca-tooltip, .lca-cancion .lca-download-section, .lca-cancion .lca-pdf-overlay { display: none !important; }
    .lca-cancion .lca-metadata {
        background: #f5f5f5 !important; color: #333 !important; box-shadow: none !important;
        -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
        padding: 15px !important; margin-bottom: 15px !important; border-radius: 6px !important; border-left: 4px solid #d32f2f !important;
    }
    .lca-cancion .lca-titulo { color: #333 !important; text-shadow: none !important; font-size: 24px !important; }
    .lca-cancion .lca-subtitulo { color: #666 !important; }
    .lca-cancion .lca-info-item { background: #e0e0e0 !important; color: #333 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .lca-cancion .lca-acorde { color: #d32f2f !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; break-inside: avoid !important; page-break-inside: avoid !important; }
    .lca-cancion .lca-linea { break-inside: avoid !important; page-break-inside: avoid !important; }
    .lca-cancion .lca-texto-linea { color: #333 !important; font-size: 12pt !important; line-height: 1.4 !important; }
    .lca-glosario { page-break-before: always !important; border: 1px solid #ccc !important; }
    .lca-glosario-header { border-bottom: 1px solid #333 !important; }
    @page { margin: 15mm; size: A4; }
}

/* ==========================================================================
   19. VENTANA DE IMPRESIÓN (popup)
   ========================================================================== */
.lca-print-window { font-family: 'Georgia', serif; color: #333; background: white; padding: 20mm; max-width: 210mm; margin: 0 auto; }
.lca-print-window .lca-print-header { text-align: center; margin-bottom: 20px; padding: 15px; background: #f5f5f5; border-radius: 6px; border-left: 4px solid #d32f2f; }
.lca-print-window .lca-print-titulo { margin: 0 0 8px 0; font-size: 24px; color: #333; font-weight: bold; }
.lca-print-window .lca-print-subtitulo { margin: 0 0 8px 0; font-size: 14px; color: #666; font-style: italic; }
.lca-print-window .lca-print-info { margin-top: 10px; font-size: 12px; color: #555; }
.lca-print-window .lca-print-info span { display: inline-block; margin-right: 15px; background: #e0e0e0; padding: 3px 10px; border-radius: 12px; }
.lca-print-window .lca-print-linea { margin-bottom: 6px; position: relative; min-height: 32px; page-break-inside: avoid; }
.lca-print-window .lca-print-acordes { position: relative; height: 24px; margin-bottom: 2px; }
.lca-print-window .lca-print-acorde { position: absolute; top: 0; color: #d32f2f; font-weight: bold; font-family: 'Courier New', monospace; font-size: 12px; transform: translateX(-50%); padding: 2px 4px; }
.lca-print-window .lca-print-texto { font-family: 'Georgia', serif; font-size: 14px; line-height: 1.4; color: #333; white-space: pre-wrap; }
.lca-print-window .lca-print-marcador { text-align: center; font-weight: bold; color: #667eea; margin: 15px 0 10px 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 5px 0; }