/* === ARCHIVO PRINCIPAL DE ESTILOS === */
/* Importación de módulos CSS para la aplicación del piano */

/* === Importar Módulos CSS === */
@import url('./modules/audio-controls.css');
@import url('./modules/piano.css');
@import url('./modules/finger-indicators.css');
@import url('./modules/chord-cards.css');
@import url('./modules/animations.css');
@import url('./modules/utilities.css');

/* === Estilos Base Específicos === */
/* Solo estilos únicos que no pertenecen a ningún módulo específico */

/* Layout principal de la aplicación */
.section-card {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .section-card {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .section-card {
        padding: 2rem;
    }
}

/* Encabezado con gradiente específico de la aplicación */
.gradient-header {
    background: linear-gradient(135deg, #3498db 0%, #2563eb 100%);
    color: white;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.2);
}

@media (min-width: 640px) {
    .gradient-header {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .gradient-header {
        padding: 2rem;
    }
}