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

@keyframes slideInDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Clases de utilidad */
.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

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

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

.hover-scale {
    transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.shadow-enhanced {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

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

/* Estilos de tarjetas */
.card {
    @apply bg-white rounded-lg shadow-enhanced border border-gray-100 transition-all duration-300;
}

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

/* Estilos de botones */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-300;
}

.btn-primary {
    @apply bg-gradient-to-r from-[#3e5740] to-[#2d4030] text-white hover:from-[#2d4030] hover:to-[#1f2b20];
}

.btn-secondary {
    @apply bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 hover:from-gray-200 hover:to-gray-300;
}

/* Estilos de formularios */
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#3e5740] focus:border-transparent transition-all duration-200;
}

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

/* Estilos de tablas */
.table-container {
    @apply bg-white rounded-lg shadow-enhanced overflow-hidden;
}

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

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

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

.badge-success {
    @apply bg-[#f0f4f1] text-[#3e5740];
}

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

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

/* Estilos de mensajes */
.message {
    @apply p-4 mb-4 rounded-lg animate-fadeIn shadow-enhanced overflow-hidden relative;
}

.message-success {
    @apply bg-gradient-to-r from-[#f8faf9] to-[#f0f4f1] text-[#3e5740] border-l-4 border-[#3e5740];
}

.message-error {
    @apply bg-gradient-to-r from-red-50 to-red-100 text-red-700 border-l-4 border-red-500;
}

.message-info {
    @apply bg-gradient-to-r from-blue-50 to-blue-100 text-blue-700 border-l-4 border-blue-500;
}

/* Estilos de navegación */
.nav-link {
    @apply hover:text-[#8fa891] transition-all duration-200 ease-in-out hover-scale;
}

.nav-link-active {
    @apply text-[#8fa891];
}

/* Estilos de modales */
.modal {
    @apply fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm flex items-center justify-center z-[200];
}

.modal-content {
    @apply bg-white rounded-2xl max-w-md w-11/12 p-8 relative transform transition-all duration-300;
}

/* Estilos de iconos */
.icon {
    @apply inline-flex items-center justify-center;
}

.icon-sm {
    @apply w-4 h-4;
}

.icon-md {
    @apply w-6 h-6;
}

.icon-lg {
    @apply w-8 h-8;
}