@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

/* Configuración Base */
body { 
    font-family: 'JetBrains Mono', monospace; 
}

/* Badges de Acordes */
.chord-badge {
    position: absolute;
    transform: translateY(-105%);
    background: #3b82f6;
    color: white;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 5px;
    z-index: 10;
    cursor: grab;
    line-height: 1.2;
    user-select: none;
    white-space: nowrap;
}

/* Badges de Secciones (Intro, Coro, etc) */
.section-badge { 
    background: #1e293b; 
    color: #94a3b8; 
    border: 1px solid #475569; 
    padding: 4px 10px; 
    border-radius: 6px; 
    font-size: 0.7rem; 
    font-weight: bold; 
    margin: 12px 0; 
    display: inline-flex; 
    cursor: pointer; 
    user-select: none;
}

/* El Editor (Canvas) */
#canvas {
    line-height: 2.8em;
    min-height: 600px;
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#canvas:empty:before { 
    content: "Pega la letra aquí o arrastra acordes..."; 
    color: #334155; 
}

/* Animación de sacudida para errores */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.shake-error {
    animation: shake 0.2s ease-in-out 0s 2;
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

/* Scrollbars personalizadas */
.custom-scroll::-webkit-scrollbar { 
    width: 4px; 
}
.custom-scroll::-webkit-scrollbar-thumb { 
    background: #334155; 
    border-radius: 10px; 
}

/* Editor raw (textarea modo texto plano) */
.raw-canvas {
    line-height: 2.2;
    min-height: 600px;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #94a3b8; /* slate-400: distingue visualmente del modo visual */
}

.raw-canvas:empty:before {
    content: "Escribí en formato [Acorde] letra...";
    color: #334155;
}

/* UI Helpers */
.song-item:hover .delete-btn { opacity: 1; }
.delete-btn { opacity: 0; transition: opacity 0.2s; }