@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply text-gray-900;
    }
}

@layer components {
    /* Estilos para botones */
    .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
    }

    .btn-secondary {
        @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
    }

    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
    }

    .btn-success {
        @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
    }

    /* Estilos para formularios */
    .form-input {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }

    .form-error {
        @apply mt-1 text-sm text-red-600;
    }

    /* Estilos para tarjetas */
    .card {
        @apply bg-white rounded-lg shadow-sm border border-gray-200;
    }

    .card-header {
        @apply px-6 py-4 border-b border-gray-200;
    }

    .card-body {
        @apply p-6;
    }

    /* Estilos para tablas */
    .table-container {
        @apply overflow-x-auto bg-white rounded-lg shadow-sm border border-gray-200;
    }

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

    .table thead {
        @apply bg-gray-50;
    }

    .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 text-sm text-gray-900;
    }

    .table tbody {
        @apply bg-white divide-y divide-gray-200;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .badge-success {
        @apply bg-green-100 text-green-800;
    }

    .badge-danger {
        @apply bg-red-100 text-red-800;
    }

    .badge-warning {
        @apply bg-yellow-100 text-yellow-800;
    }

    .badge-info {
        @apply bg-blue-100 text-blue-800;
    }

    .badge-gray {
        @apply bg-gray-100 text-gray-800;
    }
}

/* Animaciones personalizadas */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}