/* Estilos personalizados para el Sistema de Control de Seguridad */

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

.card:hover {
    @apply shadow-lg;
}

.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 flex items-center justify-center;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 flex items-center justify-center;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 flex items-center justify-center;
}

.btn-warning {
    @apply bg-yellow-600 hover:bg-yellow-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 flex items-center justify-center;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 flex items-center justify-center;
}

.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;
}

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

.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 resize-vertical;
}

.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-warning {
    @apply bg-yellow-100 text-yellow-800;
}

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

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

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

.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 tr:nth-child(even) {
    @apply bg-gray-50;
}

.table tbody tr:hover {
    @apply bg-blue-50;
}

.stats-card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

.stats-card-content {
    @apply p-5;
}

.stats-card-icon {
    @apply flex-shrink-0 w-8 h-8 text-gray-400;
}

.modal-overlay {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
}

.modal-content {
    @apply relative top-20 mx-auto p-5 border w-11/12 max-w-md shadow-lg rounded-md bg-white;
}

.loading {
    @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;
}

.notification {
    @apply fixed top-4 right-4 px-4 py-2 rounded-md shadow-lg z-50 transition-all duration-300;
}

.notification.success {
    @apply bg-green-500 text-white;
}

.notification.error {
    @apply bg-red-500 text-white;
}

.notification.warning {
    @apply bg-yellow-500 text-white;
}

.notification.info {
    @apply bg-blue-500 text-white;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

/* Responsive design improvements */
@media (max-width: 768px) {
    .table {
        font-size: 0.875rem;
    }
    
    .table th, .table td {
        @apply px-3 py-2;
    }
    
    .card {
        @apply p-4;
    }
}