@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

/* Estilos personalizados */
.btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.btn-danger {
    @apply bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded;
}

.btn-success {
    @apply bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded;
}

.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

.form-input {
    @apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight;
}

.form-input:focus {
    @apply outline-none ring-2 ring-blue-500;
}

.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap;
}

/* Estilos para navegación */
.nav-link {
    @apply text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium;
}

.nav-link-active {
    @apply bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium;
}

/* Estilos para notificaciones */
.alert {
    @apply p-4 mb-4 rounded;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

/* Responsive design */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
    
    .card {
        @apply p-4;
    }
    
    .table-container {
        @apply -mx-4;
    }
}