/* Estilos customizados para Paivapp */

/* Melhorias nos formulários */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-vertical;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

/* Botões customizados */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors;
}

.btn-danger {
    @apply bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors;
}

/* Cards de música */
.music-card {
    @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 border border-gray-200 overflow-hidden;
}

.music-card:hover {
    @apply transform -translate-y-1;
}

/* Player de áudio customizado */
.audio-player {
    @apply w-full bg-gray-100 rounded-lg p-4;
}

.audio-player audio {
    @apply w-full;
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Responsividade melhorada */
@media (max-width: 640px) {
    .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Melhorias na navegação */
.nav-link {
    @apply text-gray-600 hover:text-gray-900 transition-colors duration-200;
}

.nav-link.active {
    @apply text-blue-600 font-medium;
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.loading::after {
    content: '';
    @apply absolute inset-0 bg-gray-200 animate-pulse;
}

/* Mensagens de feedback */
.message {
    @apply p-3 rounded border mb-3;
}

.message.success {
    @apply border-green-200 bg-green-50 text-green-800;
}

.message.error {
    @apply border-red-200 bg-red-50 text-red-800;
}

.message.info {
    @apply border-blue-200 bg-blue-50 text-blue-800;
}

.message.warning {
    @apply border-yellow-200 bg-yellow-50 text-yellow-800;
}