/* Estilos personalizados para el diseño */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f7f9;
}

.chord-button {
    transition: all 0.15s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chord-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilos para el indicador de despliegue */
.collapse-icon {
    transition: transform 0.2s ease-in-out;
    display: inline-block;
    /* Estado por defecto (desplegado) apunta hacia abajo (0 grados) */
    transform: rotate(0deg);
}

/* La clase 'collapsed' es añadida por JS cuando el contenido está oculto */
.collapse-icon.collapsed {
    /* Gira 90 grados para apuntar a la derecha (plegado) */
    transform: rotate(-90deg);
}

/* Contenido Colapsable */
.collapse-content {
    /* Preparamos la transición en max-height y opacity */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden;
    /* Usamos un valor de max-height muy grande para la animación de despliegue */
    max-height: 9999px;
    opacity: 1;
}

/* Estado Oculto (es la clase que alterna el JS) */
.collapse-content.hidden {
    max-height: 0;
    opacity: 0;
}

/* Estilo para que el puntero indique interactividad en los títulos */
.collapsible-header {
    cursor: pointer;
    user-select: none;
}

.lyrics-content {
    white-space: pre-wrap;
    /* Ensures line breaks are respected */
}

/* Estilos para el modal del teclado */
.keyboard-modal {
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

.keyboard-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 900px;
}

.piano-keyboard {
    position: relative;
    display: flex;
    padding: 10px;
    background-color: #333;
    border-radius: 5px;
    height: 200px;
    /* Altura explícita para el contenedor */
}

.key {
    position: relative;
    border: 1px solid #000;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    font-family: sans-serif;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
}

.key.white {
    width: 40px;
    height: 180px;
    background-color: #fff;
    color: #000;
}

.key.black {
    width: 24px;
    height: 120px;
    background-color: #000;
    color: #fff;
    position: absolute;
    z-index: 1;
}

.key.highlight {
    background-color: #3b82f6;
    /* Azul de Tailwind */
    color: white;
}

.key.highlight.root {
    background-color: #ef4444;
    /* Rojo de Tailwind */
}

/* Reglas específicas para que el resaltado funcione en teclas negras */
.key.black.highlight {
    background-color: #3b82f6;
    /* Azul de Tailwind */
}

.key.black.highlight.root {
    background-color: #ef4444;
    /* Rojo de Tailwind */
}

/* Estilos para la nota del bajo (slash chords) */
.key.highlight.bass {
    background-color: #22c55e;
    /* Verde de Tailwind */
}

.key.black.highlight.bass {
    background-color: #22c55e;
    /* Verde de Tailwind */
}

/* Estilos para modo edición */
.edit-mode .editable-title {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.delete-icon {
    display: none;
    /* Oculto por defecto */
    cursor: pointer;
    color: #ef4444;
    /* Rojo de Tailwind */
    transition: color 0.2s;
}

.edit-mode .delete-icon {
    display: inline-block;
    /* Visible en modo edición */
}

.delete-icon:hover {
    color: #dc2626;
    /* Rojo más oscuro */
}

/* Dark Mode Styles */
body.dark {
    background-color: #1a202c;
    color: #e2e8f0;
}

.dark .bg-white {
    background-color: #2d3748;
    color: #e2e8f0;
}

.dark .text-gray-800 {
    color: #e2e8f0;
}

.dark .text-gray-600 {
    color: #cbd5e1;
    /* Lighter gray for better contrast */
}

.dark .text-gray-700 {
    color: #a0aec0;
}

.dark .border-gray-300 {
    border-color: #4a5568;
}

.dark .bg-gray-50 {
    background-color: #4a5568;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #4a5568;
}

.dark .band-block {
    border-color: #4a5568;
}

.dark .album-block {
    background-color: #4a5568;
    border-color: #63b3ed;
}

.dark .text-blue-700 {
    color: #63b3ed;
}

.dark .song-block {
    background-color: #2d3748;
    border-color: #68d391;
}

.dark .text-green-800 {
    color: #68d391;
}

.dark #keyboard-chord-title {
    color: #f0f9ff;
    /* A very light, almost white blue */
    font-size: 2.5rem;
    /* Larger font size */
}

.dark .bg-gray-100 {
    background-color: #4a5568;
}

.dark .text-gray-500 {
    color: #a0aec0;
}

.dark .text-blue-600 {
    color: #38bdf8;
    /* sky-400 */
}

.dark .hover\:text-blue-800:hover {
    color: #7dd3fc;
    /* sky-300 */
}

/* Tonality Modal Dark Mode Fixes */
.dark .bg-violet-100 {
    background-color: #a78bfa;
    /* violet-400 */
}

.dark .bg-amber-100 {
    background-color: #fcd34d;
    /* amber-300 */
}

.dark .bg-violet-100 .text-gray-800,
.dark .bg-amber-100 .text-gray-800 {
    color: #1f2937;
    /* gray-800 for dark text on light background */
}

/* Custom Dark Mode Tweaks */
.dark #chordInput {
    background-color: #2d3748;
    /* Darker background */
    color: #e2e8f0;
    /* Lighter text */
    border-color: #4a5568;
}

.dark #chordInput::placeholder {
    color: #a0aec0;
    /* Lighter placeholder text */
}

.dark .keyboard-container {
    background-color: #4a5568;
    /* Softer background for the modal */
}

.dark .key.white {
    background-color: #d1d5db;
    /* Softer off-white for keys */
    color: #1f2937;
    /* Darker text on the keys */
}

.dark .key.white.highlight {
    background-color: #3b82f6;
    /* Azul de Tailwind */
}

.dark .key.white.highlight.root {
    background-color: #ef4444;
    /* Rojo de Tailwind */
}

.dark .key.white.highlight.bass {
    background-color: #22c55e;
    /* Verde de Tailwind */
}

.dark .keyboard-container .text-gray-500,
.dark .keyboard-container .text-gray-600 {
    color: #cbd5e1 !important;
    /* Lighter gray for better contrast, !important to override tailwind */
}

.dark .text-gray-400 {
    color: #94a3b8;
}

/* Repetition Badge Styles */
.repetition-badge {
    background-color: #e5e7eb;
    /* gray-200 */
    color: #1f2937;
    /* gray-800 */
}

.dark .repetition-badge {
    background-color: #4b5563;
    /* gray-600 */
    color: #f9fafb;
    /* gray-50 */
    border: 1px solid #6b7280;
    /* gray-500 for extra definition */
}

/* Fix visibility of inputs in modals for dark mode */
.dark #insert-modal input,
.dark #insert-modal select,
.dark #edit-modal input,
.dark #insert-chord-modal input {
    color: #1a202c;
    /* Dark text to contrast with white background */
}

/* Custom Button Styles */
.btn-cancel {
    background-color: #4b5563;
    /* gray-600 */
    color: white;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    /* py-2 px-6 */
    border-radius: 0.5rem;
    /* rounded-lg */
    transition: all 0.2s;
}

.btn-cancel:hover {
    background-color: #374151;
    /* gray-700 */
}