/* Tailwind CSS - CDN alternativo con clases básicas */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Estilos personalizados */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Tabs */
.tab-btn {
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: #6B7280;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: #3B82F6;
}

.tab-btn.active {
    color: #3B82F6;
    border-bottom-color: #3B82F6;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Animaciones */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Inputs y formularios de SweetAlert2 */
.swal2-input,
.swal2-textarea {
    margin: 0.5rem 0 !important;
    width: 100% !important;
}

/* Tablas responsivas */
@media (max-width: 768px) {
    table {
        font-size: 0.875rem;
    }
    
    th, td {
        padding: 0.5rem 0.25rem;
    }
}

/* Clases de utilidad */
.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.rounded-lg {
    border-radius: 0.5rem;
}

.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Grid responsive */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

/* Colores personalizados */
.bg-gray-50 {
    background-color: #F9FAFB;
}

.bg-gray-100 {
    background-color: #F3F4F6;
}

.bg-gray-200 {
    background-color: #E5E7EB;
}

.bg-white {
    background-color: #FFFFFF;
}

.bg-blue-600 {
    background-color: #2563EB;
}

.bg-blue-700 {
    background-color: #1D4ED8;
}

.bg-red-600 {
    background-color: #DC2626;
}

.bg-red-700 {
    background-color: #B91C1C;
}

.bg-green-600 {
    background-color: #16A34A;
}

.bg-green-700 {
    background-color: #15803D;
}

.bg-gray-600 {
    background-color: #4B5563;
}

.bg-gray-700 {
    background-color: #374151;
}

.text-gray-400 {
    color: #9CA3AF;
}

.text-gray-500 {
    color: #6B7280;
}

.text-gray-600 {
    color: #4B5563;
}

.text-gray-700 {
    color: #374151;
}

.text-gray-800 {
    color: #1F2937;
}

.text-gray-900 {
    color: #111827;
}

.text-white {
    color: #FFFFFF;
}

.text-blue-600 {
    color: #2563EB;
}

.text-red-600 {
    color: #DC2626;
}

.text-green-600 {
    color: #16A34A;
}

.border-gray-200 {
    border-color: #E5E7EB;
}

.border-gray-300 {
    border-color: #D1D5DB;
}