/* ============================================= */
/* ESTILOS GENERALES PARA MODO OSCURO            */
/* ============================================= */

body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

/* ============================================= */
/* HEADER STICKY Y EFECTOS                      */
/* ============================================= */

header {
    position: sticky;
    top: 0;
    z-index: 1030; /* Mayor que el z-index del dropdown (1000) */
    width: 100%;
    transition: all 0.3s ease;
}

/* Efecto de sombra al hacer scroll */
header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Modo oscuro para el header sticky */
.dark-mode header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #122a41, #0a3a5a);
}

/* ============================================= */
/* CONTENEDORES Y TARJETAS                       */
/* ============================================= */

.dark-mode .card,
.dark-mode .converter-container, 
.dark-mode .scale-container, 
.dark-mode .sax-container,
.dark-mode .search-container,
.dark-mode .lyrics-container,
.dark-mode .chords-container,
.dark-mode .accordion-collapse, 
.dark-mode .result,
.dark-mode .result-card,
.dark-mode .dropdown-menu,
.dark-mode .input,
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}

/* Sombras para contenedores */
.dark-mode .card,
.dark-mode .converter-container,
.dark-mode .scale-container, 
.dark-mode .sax-container, 
.dark-mode .chords-container,
.dark-mode .search-container,
.dark-mode .lyrics-container,
.dark-mode .result {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

/* ============================================= */
/* FILTROS DE ACORDES - MODO OSCURO              */
/* ============================================= */

.dark-mode .chords-filters {
    background-color: #1e1e1e;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
}

.dark-mode .chords-filters .form-label {
    color: #e0e0e0;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.dark-mode .chords-filters .form-select {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.dark-mode .chords-filters .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25);
    background-color: #333;
}

.dark-mode .chords-filters .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #121212;
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.dark-mode .chords-filters .btn-primary:hover {
    background-color: #3aa8e6;
    border-color: #3aa8e6;
    transform: translateY(-1px);
}

.dark-mode .chords-filters .row {
    margin-bottom: -0.75rem;
}

.dark-mode .chords-filters .col-md-3 {
    margin-bottom: 0.75rem;
}

/* Estilos para las opciones del select */
.dark-mode .chords-filters option {
    background-color: #2d2d2d;
    color: #e0e0e0;
    padding: 0.5rem;
}

/* Efecto hover para las opciones */
.dark-mode .chords-filters option:hover {
    background-color: #3d3d3d !important;
    color: var(--accent-color) !important;
}

/* ============================================= */
/* ELEMENTOS INTERACTIVOS                        */
/* ============================================= */

.dark-mode .tool-card,
.dark-mode .dropdown-menu a {
    color: #e0e0e0;
}

.dark-mode .dropdown-menu a:hover {
    background-color: #333;
    color: var(--accent-color);
}

.dark-mode .song-results,
.dark-mode .artist-results {
    color: #333;
}

/* ============================================= */
/* TIPOGRAFÍA Y TEXTOS                          */
/* ============================================= */

.dark-mode .section-title h2,
.dark-mode .section-title h3,
.dark-mode .section-title p,
.dark-mode .section h2,
.dark-mode .tool-content h3,
.dark-mode .tool-content p,
.dark-mode #converted-tonality,
.dark-mode #scale,
.dark-mode label,
.dark-mode .form-label, 
.dark-mode .lyrics {
    color: #e0e0e0;
}

/* ============================================= */
/* BOTONES Y CONTROLES DE FORMULARIO            */
/* ============================================= */

.dark-mode .btn-outline-light {
    border-color: #e0e0e0;
    color: #e0e0e0;
}

.dark-mode .btn-outline-light:hover {
    background-color: #333;
}

/* Estilos para selects y inputs */
.dark-mode select,
.dark-mode .form-select,
.dark-mode input,
.dark-mode .form-control,
.dark-mode .chords-container,
.dark-mode .play-container {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

.dark-mode select:focus,
.dark-mode .form-select:focus,
.dark-mode input:focus,
.dark-mode .form-control:focus {
    background-color: #333 !important;
    color: #ffffff !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25) !important;
}

/* Placeholders en modo oscuro */
.dark-mode ::placeholder {
    color: #a0a0a0 !important;
    opacity: 1 !important;
}

.dark-mode :-ms-input-placeholder {
    color: #a0a0a0 !important;
}

.dark-mode ::-ms-input-placeholder {
    color: #a0a0a0 !important;
}

/* Opciones de select en modo oscuro */
.dark-mode option {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

/* Elementos deshabilitados */
.dark-mode :disabled,
.dark-mode .form-control:disabled {
    background-color: #252525 !important;
    color: #777 !important;
    border-color: #3a3a3a !important;
}

/* ============================================= */
/* GENERADOR DE PARTITURAS (SCORE GENERATOR)     */
/* ============================================= */

.notes-preview h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

#noteList {
    padding: 1rem;
    background-color: var(--light-color);
    border-radius: 4px;
    min-height: 60px;
}

#noteList.empty {
    color: #6c757d;
    font-style: italic;
}

#score-content {
    min-height: 200px;
    overflow-x: auto;
    width: 80%;
    height: 200px;
}



/* ============================================= */
/* ESTILOS ESPECÍFICOS PARA EL AFINADOR         */
/* ============================================= */

body.dark-mode .tuner-container {
    background-color: #1e1e1e;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .tuner-header h2 {
    color: var(--accent-color);
}

body.dark-mode .tuner-display {
    background-color: #2d2d2d;
}

body.dark-mode .strings-container .string {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .strings-container .string:hover {
    background-color: #3d3d3d;
}

body.dark-mode .string-name, 
body.dark-mode .string-note {
    color: var(--accent-color);
}

body.dark-mode .nav-tabs .nav-link {
    color: #b0b0b0;
}

body.dark-mode .nav-tabs .nav-link.active {
    color: var(--accent-color);
}

body.dark-mode .frequency-display,
body.dark-mode .tuner-status,
body.dark-mode .instrument-info p {
    color: #b0b0b0;
}

body.dark-mode .tuner-help {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .scale {
    background-color: #444;
}

body.dark-mode .scale-marker::after {
    color: #b0b0b0;
}

.dark-mode {
    --primary-color: #4361ee;
    --secondary-color: #4cc9f0;
    --accent-color: #4cc9f0;
    --danger-color: #f72585;
    --success-color: #4ad66d;
    --warning-color: #f8961e;
    --text-color: #e0e0e0;
    --text-light: #b0b0b0;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --border-color: #333;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
/* style_dark.css - Metrónomo en modo oscuro */
.dark-mode .metronome-card {
    background-color: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}

.dark-mode .metronome-display {
    background-color: #1a202c;
    border-color: #4a5568;
}

.dark-mode .beat-indicator {
    background-color: #4fc3f7;
    color: #1a202c;
}

.dark-mode .beat-indicator.accent {
    background-color: #f56565;
}

.dark-mode .bpm-display {
    color: #e2e8f0;
}

.dark-mode .bpm-display span {
    color: #4fc3f7;
}

.dark-mode .btn-metronome {
    background-color: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}

.dark-mode .btn-metronome:hover {
    background-color: #4fc3f7;
    color: #1a202c;
}

.dark-mode #bpm-slider {
    background: #4a5568;
}

.dark-mode #bpm-slider::-webkit-slider-thumb {
    background: #4fc3f7;
}

.dark-mode .btn-signature {
    background-color: #4a5568;
    color: #e2e8f0;
    border-color: #718096;
}

.dark-mode .btn-signature.active {
    background-color: #4fc3f7;
    color: #1a202c;
    border-color: #4fc3f7;
}

.dark-mode .btn-signature:hover:not(.active) {
    background-color: #718096;
}

.dark-mode .metronome-main-control .btn-primary {
    background-color: #4fc3f7;
    border-color: #4fc3f7;
    color: #1a202c;
}

.dark-mode .metronome-main-control .btn-primary:hover {
    background-color: #63d2ff;
    border-color: #63d2ff;
}

.dark-mode .sound-options {
    background-color: #1a202c;
    border-color: #4a5568;
}

.dark-mode .form-check-label {
    color: #e2e8f0;
}

.dark-mode .form-check-input:checked {
    background-color: #4fc3f7;
    border-color: #4fc3f7;
}

/* Contenedores en modo oscuro */
.dark-mode .search-box,
.dark-mode .lyrics-container,
.dark-mode .artist-results, 
.dark-mode .song-results,
.dark-mode .artist-tracks {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow);
    color: var(--accent-color);
}

/* Formularios en modo oscuro */
.dark-mode .input-group input {
    background-color: #2d2d2d;
    color: var(--text-color);
    border-color: var(--border-color);
}

.dark-mode .input-group input:focus {
    background-color: #333;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.25);
}

.dark-mode ::placeholder {
    color: #a0a0a0 !important;
    opacity: 1 !important;
}

/* Texto en modo oscuro */
.dark-mode .search-hero h1 {
    color: var(--accent-color);
}

.dark-mode .subtitle {
    color: #f1ebeb !important;
}

.dark-mode .song-title {
    color: var(--accent-color) !important;
}

.dark-mode .artist-name {
    color: #e7e4e4 !important;
}

.dark-mode .lyrics {
    color: var(--text-color);
}

/* Listas en modo oscuro */
.dark-mode .track-list li {
    border-bottom-color: #444;
}

.dark-mode .track-list li:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--accent-color);
}

.dark-mode .song-item {
    border-bottom-color: #444;
}

.dark-mode .song-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .song-item-title {
    color: var(--accent-color) !important;
}

.dark-mode .song-item-artist {
    color: #b0b0b0 !important;
}

/* Botones en modo oscuro */
.dark-mode .search-button {
    background: var(--secondary-color);
}

.dark-mode .search-button:hover {
    background: #2a0a8a;
}

.dark-mode .download-btn {
    background: var(--success-color);
}

.dark-mode .download-btn:hover {
    background: #3cb35b;
}

/* Video en modo oscuro */
.dark-mode .video-container {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Dropdown en modo oscuro */
.dark-mode .dropdown-menu {
    background-color: #2d2d2d;
    border-color: #444;
}

.dark-mode .dropdown-menu a {
    color: var(--text-color);
}

.dark-mode .dropdown-menu a:hover {
    background-color: #333;
    color: var(--accent-color);
}

/* Estados en modo oscuro */
.dark-mode .loading {
    color: #b0b0b0;
}

.dark-mode .error-message {
    background: rgba(247, 37, 133, 0.15);
    border-left-color: var(--danger-color);
    color: #ff6b9a;
}

/* Botón de reintentar en modo oscuro */
.dark-mode .retry-btn {
    background-color: #4a76a8;
    color: white;
}

.dark-mode .retry-btn:hover {
    background-color: #3a5f8a;
}

/* Modo oscuro */
.dark-mode .clear-input {
    color: #b0b0b0;
}

.dark-mode .clear-input:hover {
    color: #e0e0e0;
}